/*
  Gold-i theme, loaded after compiled/main.css.
  main.css still supplies the layout utilities (d-flex, px-24, max-width-*, bg-*) that existing
  components and saved page content use; this file restyles everything on top of them.
*/

:root {
  --purple: #502261;
  --yellow: #ffdd00;
  --dark: #29262b;
  --grey-dark: #6c656f;
  --grey-light-1: #f8f8f8;
  --grey-light-2: #ededed;
  --grey-light-3: #d9d9d9;
  --off-white: #f0f0f1;
  --white: #ffffff;

  --line-dark: rgba(255, 255, 255, 0.14);
  --line-light: var(--grey-light-2);
  --muted-dark: rgba(255, 255, 255, 0.72);
  /* Price direction only: traders read green and red as up and down. */
  --up: #3ddc97;
  --down: #ff6b7a;

  --font-headings: "Urbanist", system-ui, sans-serif;
  --font-body: "Lato", system-ui, sans-serif;
  --font-display: var(--font-headings);
  --wrap: 1280px;
  --gutter: clamp(16px, 4vw, 48px);
}

/* ---------- Base ---------- */
body { font: 17px/1.6 var(--font-body); color: var(--dark); background: var(--white); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-headings); font-weight: 400; letter-spacing: -0.01em; color: inherit; }
h1 { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.08; margin-bottom: 24px; font-weight: 300; }
h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.15; margin-bottom: 20px; }
h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.25; margin-bottom: 16px; }
h4 { font-size: 22px; line-height: 1.3; margin-bottom: 12px; font-weight: 500; }
h5 { font-size: 19px; line-height: 1.35; margin-bottom: 10px; font-weight: 500; }
h6 { font-size: 15px; line-height: 1.4; margin-bottom: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; }
h1 strong, h2 strong, h3 strong, h4 strong, h5 strong { font-weight: inherit; }
p { font-size: 17px; line-height: 1.6; margin-bottom: 16px; }
p.large { font-size: 19px; line-height: 1.55; }
p.small { font-size: 14px; line-height: 1.55; }
a { color: var(--purple); text-underline-offset: 3px; }
a:hover { color: var(--dark); }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

/* Square corners and hairlines instead of rounded, shadowed boxes. */
.border-round, .card { border-radius: 0 !important; }
.shadow { box-shadow: none !important; border: 1px solid var(--line-light); }

/* Rich-text colours set inline in the editor were chosen for the old design; keep text readable. */
.txt-field span[style*="color: #6c656f"] { color: var(--grey-dark) !important; }

/* ---------- Buttons (theme and editor "Button" styles) ---------- */
.btn, .button {
  display: inline-flex; align-items: center; gap: 10px; border-radius: 0 !important;
  font: 500 15px/1 var(--font-display) !important; letter-spacing: 0.02em;
  padding: 14px 22px !important; text-decoration: none !important; border: 1px solid transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn span[aria-hidden] { transition: transform 0.2s; }
.btn:hover span[aria-hidden] { transform: translateX(4px); }
.btn-yellow, .button.button-solid-yellow { background: var(--yellow) !important; color: var(--dark) !important; border-color: var(--yellow) !important; }
.btn-yellow:hover, .button.button-solid-yellow:hover { background: var(--white) !important; border-color: var(--white) !important; color: var(--dark) !important; }
.btn-dark, .button.button-solid { background: var(--dark) !important; color: var(--white) !important; border-color: var(--dark) !important; }
.btn-dark:hover, .button.button-solid:hover { background: var(--purple) !important; border-color: var(--purple) !important; color: var(--white) !important; }
.button:not([class*=button-solid]) { background: transparent !important; border: 1px solid currentColor !important; color: var(--purple) !important; }
.button:not([class*=button-solid]):hover { background: var(--purple) !important; border-color: var(--purple) !important; color: var(--white) !important; }
.button.button-yellow:not([class*=button-solid]) { color: var(--yellow) !important; }
.button a, .button :any-link { color: inherit !important; text-decoration: none !important; }

/* ---------- Announcement bar ---------- */
.announce { background: var(--dark); color: var(--white); border-bottom: 1px solid var(--line-dark); font: 14px/1.4 var(--font-display); }
.announce-inner { display: flex; align-items: center; justify-content: center; gap: 8px 14px; flex-wrap: wrap; padding-top: 10px; padding-bottom: 10px; text-align: center; }
.tag { background: var(--yellow); color: var(--dark); font: 600 11px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 8px; }
.announce a { color: var(--yellow); text-decoration: none; }
.announce a:hover { text-decoration: underline; color: var(--yellow); }
.announce-admin { color: var(--muted-dark); }

/* ---------- Header ---------- */
header.site-header { position: sticky; top: 0; left: 0; z-index: 50; height: auto; width: 100%; color: var(--white); border-bottom: 1px solid var(--line-dark); font-weight: 400; }
/* Blur lives on a pseudo-element: backdrop-filter on the header itself would trap the fixed mobile panel inside it. */
header.site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(80, 34, 97, 0.94); backdrop-filter: blur(12px); }
#page_slide.admin header.site-header { position: relative; top: 0; }
.header-inner { display: flex; align-items: center; gap: 28px; height: 76px; }
.brand { flex: none; }
.brand img { height: 40px; width: auto; display: block; }

.main-nav { margin-left: auto; height: 100%; }
.main-nav > ul { list-style: none; display: flex; gap: 22px; height: 100%; margin: 0; padding: 0; }
.main-nav > ul > li > div > a, .nav-cta { white-space: nowrap; }
.main-nav > ul > li { position: relative; display: flex; align-items: center; }
.main-nav li > div { display: block; }
.main-nav > ul > li > div > a { font: 400 15px var(--font-display); color: var(--white); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; padding: 26px 0; }
.main-nav > ul > li:has(> ul) > div > a::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform 0.2s; }
.main-nav > ul > li:hover > div > a, .main-nav > ul > li:focus-within > div > a { color: var(--yellow); }
.main-nav > ul > li > div > a.menu_selected, .main-nav li.menu_selected > div > a { color: var(--yellow); }
.main-nav > ul > li > ul {
  list-style: none; position: absolute; top: 100%; left: -18px; min-width: 300px; margin: 0; padding: 10px;
  background: var(--dark); border: 1px solid var(--line-dark);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: 0.2s;
}
.main-nav > ul > li:hover > ul, .main-nav > ul > li:focus-within > ul { opacity: 1; visibility: visible; transform: none; }
.main-nav > ul > li:hover > div > a::after { transform: rotate(225deg); }
.main-nav > ul > li > ul > li > div > a { display: block; padding: 12px 14px; text-decoration: none; color: var(--white); border-left: 2px solid transparent; font: 500 15px var(--font-display); }
.main-nav > ul > li > ul > li > div:hover > a { background: rgba(255, 255, 255, 0.05); border-left-color: var(--yellow); color: var(--white); }
.main-nav .menu-description, .nav-panel .menu-description { display: block; font: 400 13px/1.4 var(--font-body); color: var(--muted-dark); padding: 0 14px 10px 16px; margin-top: -8px; pointer-events: none; }

.header-tools { display: flex; align-items: center; gap: 14px; }
.icon-btn { background: none; border: 0; color: var(--white); width: 40px; height: 40px; display: grid; place-items: center; cursor: pointer; }
.icon-btn:hover { color: var(--yellow); }
.menu-toggle { display: none; background: none; border: 0; width: 44px; height: 44px; padding: 10px; cursor: pointer; }
.menu-toggle span { display: block; height: 2px; background: var(--white); margin: 6px 0; transition: 0.25s; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Mobile panel */
.nav-panel {
  position: fixed; left: 0; right: 0; bottom: 0; top: 76px; z-index: 49; background: var(--purple); color: var(--white);
  padding: 16px var(--gutter) 40px; overflow-y: auto; display: flex; flex-direction: column; gap: 24px;
  transform: translateX(100%); visibility: hidden; transition: transform 0.3s ease, visibility 0s 0.3s;
}
.nav-panel.open { transform: none; visibility: visible; transition: transform 0.3s ease; }
.nav-panel ul { list-style: none; margin: 0; padding: 0; }
.nav-panel-menu > ul > li { border-bottom: 1px solid var(--line-dark); }
.nav-panel-menu > ul > li > div { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.nav-panel-menu > ul > li > div > a { flex: 1; padding: 16px 0; font: 400 20px var(--font-display); color: var(--white); text-decoration: none; }
.nav-panel-menu .sub-toggle { background: none; border: 0; color: var(--white); width: 44px; height: 44px; cursor: pointer; }
.nav-panel-menu .sub-toggle::before { content: ""; display: inline-block; width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform 0.2s; }
.nav-panel-menu li.open > div .sub-toggle::before { transform: rotate(225deg); }
.nav-panel-menu > ul > li > ul { display: none; padding-bottom: 12px; }
.nav-panel-menu > ul > li.open > ul { display: block; }
.nav-panel-menu > ul > li > ul a { display: block; padding: 10px 0 4px 14px; color: var(--white); text-decoration: none; font: 500 16px var(--font-display); }
.nav-panel-menu .menu-description { padding-left: 14px; margin-top: 0; }
#page_slide .nav-panel-search input { border-radius: 0; width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--line-dark); background: rgba(255, 255, 255, 0.08); color: var(--white); font: 16px var(--font-body); }
.nav-panel-search input::placeholder { color: var(--muted-dark); }
.nav-panel-cta { justify-content: center; }

@media (max-width: 1240px) {
  .main-nav, .header-search, .nav-cta { display: none; }
  .menu-toggle { display: block; margin-left: auto; }
  .header-tools { margin-left: auto; }
}
@media (max-width: 720px) {
  .header-inner { height: 64px; }
  .nav-panel { top: 64px; }
  .brand img { height: 34px; }
}

/* ---------- Shared dark-section pieces ---------- */
.cube-field {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.06'%3E%3Cpath d='M28 0 56 16v32L28 64 0 48V16z'/%3E%3Cpath d='M0 16l28 16 28-16M28 32v32'/%3E%3C/g%3E%3C/svg%3E");
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 90%); mask-image: linear-gradient(180deg, #000 0%, transparent 90%);
}
.eyebrow, .eyebrow p { font: 500 13px/1.4 var(--font-display) !important; letter-spacing: 0.16em; text-transform: uppercase; color: var(--yellow) !important; margin: 0 0 24px; display: flex; align-items: center; gap: 12px; }
.eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--yellow); flex: none; }
.eyebrow:empty { display: none; }
#page_slide.admin .eyebrow:empty { display: flex; min-height: 20px; }

/* ---------- Homepage hero ---------- */
section.hero { position: relative; overflow: hidden; color: var(--white); background: radial-gradient(1100px 620px at 85% 0%, rgba(255, 255, 255, 0.09) 0%, transparent 60%), var(--purple); padding-bottom: clamp(40px, 4vw, 56px); }
.hero-grid { position: relative; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; padding-top: clamp(32px, 4vw, 64px); padding-bottom: clamp(32px, 3.5vw, 48px); }
.hero-text, .hero-text * { color: var(--white) !important; }
.hero-text h1, .hero-text h2, .hero-text h3 { font: 300 clamp(40px, 5.2vw, 70px)/1.06 var(--font-display) !important; letter-spacing: -0.02em; margin-bottom: 24px; text-align: left !important; }
.hero-text h3 { font-size: clamp(22px, 2.4vw, 30px) !important; line-height: 1.3 !important; }
.hero-text span[style*="#ffdd00"], .hero-text strong span[style*="#ffdd00"], .hero-text em { color: var(--yellow) !important; font-style: normal; }
.hero-text p { font-size: 19px; color: var(--muted-dark) !important; max-width: 34em; text-align: left !important; }
.hero-text span[style*="font-size"] { font-size: inherit !important; }
.hero-actions { margin-top: 36px; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.link-down { font: 400 17px var(--font-display); color: var(--white); text-decoration: none; display: inline-flex; gap: 12px; align-items: center; }
.link-down:hover { color: var(--yellow); }
.link-down span { display: inline-block; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(4px); } }
.hero-admin { margin-top: 24px; padding: 16px; border: 1px dashed var(--line-dark); font-size: 14px; }
.hero-admin p { color: var(--muted-dark); font-size: 14px; }
.book-admin label { display: block; margin: 12px 0 2px; font-size: 13px; font-weight: 600; }
.book-admin label small { font-weight: 400; color: var(--muted-dark); }

.hero-cards { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card.card-hero { background: var(--white) !important; color: var(--dark); min-height: 0; padding: 26px 28px !important; border-top: 3px solid transparent; cursor: pointer; transition: border-color 0.2s, transform 0.2s; }
.card.card-hero:hover { background: var(--white) !important; border-top-color: var(--yellow); transform: translateY(-2px); }
.card.card-hero > .multiField_0 { display: none; }
#page_slide.admin .card.card-hero > .multiField_0 { display: block; max-width: 48px; }
.card.card-hero > .multiField_1, .card.card-hero > .multiField_1 * { color: var(--dark) !important; margin-bottom: 10px; }
.card.card-hero > .multiField_1 h4 { font: 400 22px var(--font-display); }
.card.card-hero > .multiField_2 { all: unset; display: inline-block; }
.card.card-hero > .multiField_2 a { color: var(--purple) !important; text-decoration: none; font: 600 15px var(--font-display); }
.card.card-hero > .multiField_2 a::after { content: " \2192"; }
.card.card-hero:hover > .multiField_2 { background: none !important; }

/* Order book (illustrative) */
.book { background: rgba(41, 38, 43, 0.9); border: 1px solid var(--line-dark); box-shadow: 0 40px 80px -20px rgba(41, 38, 43, 0.7); font: 13px/1.4 var(--font-display); color: var(--white); }
.book-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line-dark); }
.book-title { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.book-title span { font-weight: 400; color: var(--muted-dark); }
.book-live { display: flex; align-items: center; gap: 6px; color: var(--yellow); font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; }
.book-live i { width: 7px; height: 7px; border-radius: 50%; background: var(--yellow); animation: pulse 1.6s infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(255, 221, 0, 0.6); } 100% { box-shadow: 0 0 0 8px rgba(255, 221, 0, 0); } }
.book-tabs { display: flex; gap: 2px; padding: 10px 16px 0; }
.book-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 6px 10px; color: var(--muted-dark); font: 13px var(--font-display); cursor: pointer; }
.book-tabs button.on { color: var(--white); border-bottom-color: var(--yellow); }
.book-top { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; padding: 12px 16px; align-items: end; border-bottom: 1px solid var(--line-dark); }
.book-top small { display: block; color: var(--muted-dark); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 2px; }
.book-top b { font-size: 26px; font-weight: 500; font-variant-numeric: tabular-nums; }
.book-top .r { text-align: right; }
.spread { text-align: center; background: rgba(255, 221, 0, 0.12); padding: 6px 12px; }
.spread b { font-size: 16px; color: var(--yellow); }
.book-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin: 0; }
.book-table th { font-weight: 400; color: var(--muted-dark); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; padding: 10px 16px 6px; text-align: right; border: 0; background: none; }
.book-table th:first-child, .book-table td:first-child { text-align: left; }
.book-table td { padding: 6px 16px; text-align: right; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.04); color: var(--white); background: none; }
.book-table td.best { color: var(--yellow); font-weight: 600; }
.book-table td.src { color: var(--muted-dark); }
.book-table td.flash-up { animation: flash-up 0.7s ease-out; }
.book-table td.flash-down { animation: flash-down 0.7s ease-out; }
@keyframes flash-up { from { background: rgba(61, 220, 151, 0.28); } to { background: transparent; } }
@keyframes flash-down { from { background: rgba(255, 107, 122, 0.28); } to { background: transparent; } }
.book-foot { display: flex; justify-content: space-between; padding: 12px 16px; border-top: 1px solid var(--line-dark); color: var(--muted-dark); font-size: 12px; }

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .book { max-width: 560px; }
}
@media (max-width: 720px) {
  .hero-cards { grid-template-columns: 1fr; gap: 10px; }
  .book-top b { font-size: 20px; }
  .book-table th, .book-table td { padding-left: 8px; padding-right: 8px; }
  .book-table .hide-sm { display: none; }
}

/* ---------- Inner page header ---------- */
.page-header { position: relative; overflow: hidden; color: var(--white); background: radial-gradient(900px 500px at 90% 0%, rgba(255, 255, 255, 0.08) 0%, transparent 60%), var(--purple); }
/* Kept slim so more of the page shows on smaller screens, as on prod's design. */
.page-header-inner { position: relative; padding-top: 20px; padding-bottom: 28px; }
.page-header h1 { color: var(--white); max-width: 18em; margin-bottom: 20px; }
.page-header-text, .page-header-text * { color: var(--muted-dark) !important; }
.page-header-text { font-size: 19px; max-width: 42em; }
.page-header-text p { font-size: 19px; }

/* ---------- Page body and components ---------- */
main > section.page-section, main > section:not([class]) { padding-top: clamp(0px, 1.2vw, 16px); }
/* The homepage's component list starts with its own full-bleed sections. */
main > section.hero + section:not([class]) { padding-top: 0; }
.page-section .txt-field h2, .page-section .txt-field h3 { color: var(--dark); }
.page-section :is(.bg-purple, .bg-dark) .txt-field :is(h2, h3) { color: var(--white); }
.bg-purple .txt-field, .bg-purple .txt-field *, .bg-dark .txt-field, .bg-dark .txt-field * { color: var(--white); }
.bg-grey-light-1 { background-color: var(--grey-light-1) !important; }
/* Components are set in Mint to 64px above and below (pt-64, pb-64), and 40px on phones (pt-sm-40). 64px made a
   heading and a row of cards too tall for a laptop screen, so wider screens use 40px too. */
@media (min-width: 573px) {
  #mint_components .component > .pt-64 { padding-top: 40px; }
  #mint_components .component > .pb-64 { padding-bottom: 40px; }
  #mint_components .component .mb-40 { margin-bottom: 28px; }
}

/* Tables in rich text */
.txt-field table { border-collapse: collapse; width: 100%; margin: 8px 0 24px; font-size: 15px; }
.txt-field table th, .txt-field table td { border: 0; border-bottom: 1px solid var(--line-light); padding: 12px 14px; text-align: left; vertical-align: top; }
.txt-field table tr:first-child td, .txt-field table th { font: 600 13px var(--font-display); text-transform: uppercase; letter-spacing: 0.08em; color: var(--grey-dark); }
.txt-field ul { padding-left: 1.2em; }
.txt-field ul li::marker { color: var(--purple); }
.txt-field blockquote { margin: 24px 0; padding-left: 20px; border-left: 2px solid var(--yellow); font: 300 22px/1.4 var(--font-display); }

/* Multi cards */
.component-cards-item:not(.component-cards-bio-card) { background: var(--white) !important; border: 1px solid var(--line-light) !important; padding: 24px !important; transition: border-color 0.2s, transform 0.2s; }
.component-cards-item:not(.component-cards-bio-card):hover { border-color: var(--purple) !important; transform: translateY(-2px); }
.component-cards-item h3, .component-cards-item h4 { font-weight: 500; }
.component-cards-item:not(.component-cards-bio-card) > .multiField_0 img { max-height: 56px; width: auto; margin-bottom: 16px; }
.component-cards-item .multiField_1 img { width: 100%; height: auto; margin-bottom: 8px; }
.component-cards-item .multiField_1 p { margin-bottom: 10px; }
.component-cards-item .multiField_1 p:last-child { margin-bottom: 0; }
/* Icons placed in a card's heading are the 65px round product icons: show them at that size, not card width. (The
   width attribute alone doesn't hold, as width: auto falls back to the 2000px image.) */
.component-cards-item .multiField_1 :is(h1, h2, h3, h4, h5, h6) img { width: 65px; height: auto; }
.component-cards-item .multiField_1 a:has(strong), .component-cards-item .multiField_1 strong a { color: var(--dark); text-decoration: none; font: 500 20px/1.3 var(--font-display); }
.component-cards-item .multiField_1 strong { font-weight: 500; }
.component-cards-item:hover .multiField_1 a:has(strong), .component-cards-item:hover .multiField_1 strong a { color: var(--purple); }
.component-cards-item .multiField_1 p:has(> br:only-child) { display: none; }
.bg-grey-light-1 .component-cards-item:not(.component-cards-bio-card) { background: var(--white) !important; }
.flex-columns-4 > .component-cards-item:not(.component-cards-bio-card) { padding: 28px 20px !important; }
/* Cards holding an Ask Goldie, live chat or phone link act on it from anywhere on the card (goldie.js, theme.js). */
.component-cards-item:has(a[href="#ask-goldie"]), .component-cards-item:has(a[href="#live-chat"]),
.component-cards-item:has(a[href^="tel:"]) { cursor: pointer; }

/* Image and text */
.component-image-and-text-image-container img { border-radius: 0 !important; }

/* Accordion (FAQs) */
.component-accordion { border-top: 1px solid var(--line-light); }
.component-accordion-item { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--line-light) !important; border-radius: 0 !important; margin: 0 !important; }
.component-accordion-item > *:first-child { font: 400 20px/1.4 var(--font-display) !important; padding: 22px 48px 22px 0 !important; }
.component-accordion-item > *:first-child:hover { color: var(--purple); }
.component-accordion-item .multiField_1, .component-accordion-item > *:nth-child(2) { color: var(--grey-dark); }

/* Testimonials */
.component-testimonials-item { background: var(--white) !important; border: 0 !important; border-top: 2px solid var(--yellow) !important; border-radius: 0 !important; padding: 28px !important; }
.component-testimonials-item .multiField_0 { font: 300 20px/1.45 var(--font-display); color: var(--dark); }
.component-testimonials-item .multiField_1 img { display: none; }
#page_slide.admin .component-testimonials-item .multiField_1 img { display: block; max-width: 40px; }
.component-testimonials-item .multiField_2 { margin-top: 18px; font: 600 15px var(--font-display); color: var(--purple); letter-spacing: 0.04em; }

/* Carousel */
.component-carousel-arrow { border-radius: 0 !important; }
.component-carousel-tab-dots > div { border-radius: 0 !important; width: 24px !important; height: 3px !important; }

/* Bio cards */
.component-cards-bio-card { border: 1px solid var(--line-light); padding: 0 !important; }
.component-cards-bio-card img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Search results ---------- */
.input-search-container input { border-radius: 0 !important; }

/* ---------- Call to action band ---------- */
.cta { background: var(--yellow); color: var(--dark); padding: clamp(48px, 6vw, 88px) 0; margin-top: clamp(48px, 6vw, 80px); }
.cta-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }
.cta-text, .cta-text * { color: var(--dark) !important; }
.cta-text h2, .cta-text h3 { font-weight: 300; font-size: clamp(28px, 3.6vw, 46px); margin-bottom: 10px; }
.cta-text p { margin: 0; font-size: 18px; }

/* ---------- Footer ---------- */
footer.site-footer { background: var(--dark); color: var(--muted-dark); padding: 0; font-size: 15px; }
footer.site-footer .foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 48px; padding-top: 72px; padding-bottom: 48px; }
footer.site-footer .foot-grid > div:first-of-type { min-width: 0; }
footer.site-footer .nav-logo img { width: 128px; height: auto; margin-bottom: 24px; }
footer.site-footer .txt-field, footer.site-footer .txt-field p { color: var(--muted-dark) !important; font-size: 15px; }
footer.site-footer .txt-field strong { display: block; font: 500 13px var(--font-display); color: var(--white); text-transform: uppercase; letter-spacing: 0.14em; margin-bottom: 12px; }
footer.site-footer .txt-field span[style] { color: inherit !important; }
footer.site-footer a { color: var(--muted-dark) !important; text-decoration: none; }
footer.site-footer a:hover { color: var(--yellow) !important; }
#page_slide .foot-search input { width: 100%; max-width: 320px; height: 44px; padding: 0 14px; border: 1px solid var(--line-dark); background: rgba(255, 255, 255, 0.05); color: var(--white); font: 15px var(--font-body); border-radius: 0; outline: none; }
.foot-search input::placeholder { color: var(--muted-dark); }
.footer-socials { display: flex; gap: 8px; margin-top: 20px; }
footer a.social { width: 38px !important; height: 38px !important; border-radius: 0 !important; background: transparent !important; border: 1px solid var(--line-dark); color: var(--white) !important; display: grid !important; place-items: center; }
footer a.social:hover { border-color: var(--yellow); color: var(--yellow) !important; }
footer.site-footer .foot-base { padding-top: 22px; padding-bottom: 30px; border-top: 1px solid var(--line-dark); }
footer.site-footer .foot-base p { font-size: 13px; margin: 0; }
@media (max-width: 900px) { footer.site-footer .foot-grid { grid-template-columns: 1fr 1fr; } footer.site-footer .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { footer.site-footer .foot-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ---------- Motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* =====================================================================
   New components
   ===================================================================== */
.sec { position: relative; }
.sec-pt-l { padding-top: clamp(64px, 8vw, 120px); } .sec-pt-s { padding-top: clamp(32px, 4vw, 56px); } .sec-pt-0 { padding-top: 0; }
.sec-pb-l { padding-bottom: clamp(64px, 8vw, 120px); } .sec-pb-s { padding-bottom: clamp(32px, 4vw, 56px); } .sec-pb-0 { padding-bottom: 0; }
.sec.bg-purple, .sec.bg-dark { color: var(--white); }
.sec.bg-dark { background: var(--dark) !important; }
.multi_field_area > .clear { display: none; }

.label, .label p { font: 400 18px/1.4 var(--font-display); color: var(--grey-dark); margin: 0; }
.label { padding-top: 10px; border-top: 1px solid var(--line-light); }
.bg-purple .label, .bg-dark .label, .bg-purple .label p, .bg-dark .label p { color: var(--muted-dark); }
.bg-purple .label, .bg-dark .label { border-top-color: var(--line-dark); }
.split-head, .split-body { display: grid; grid-template-columns: 260px 1fr; gap: 48px; }
.split-body { align-items: center; margin-bottom: 32px; }
.split-head-text h2, .split-head-text h3 { margin-bottom: 18px; }
.split-head-text p { color: var(--grey-dark); max-width: 46em; }
.bg-purple .split-head-text *, .bg-dark .split-head-text * { color: var(--white); }
.bg-purple .split-head-text p, .bg-dark .split-head-text p { color: var(--muted-dark); }
.admin-note { font-size: 13px; color: var(--muted-dark); border: 1px dashed var(--line-dark); padding: 10px 12px; margin: 16px 0; }

/* Product switcher */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { background: transparent; border: 1px solid var(--line-dark); color: var(--white); padding: 9px 16px; font: 400 14px var(--font-display); cursor: pointer; transition: 0.2s; }
.chip:hover { border-color: var(--yellow); }
.chip.on { background: var(--yellow); border-color: var(--yellow); color: var(--dark); }
.products { align-items: stretch; }
.product-list { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line-dark); }
.product-list button { display: block; width: 100%; text-align: left; background: none; border: 0; border-left: 2px solid transparent; margin-left: -1px; padding: 13px 18px; font: 400 16px var(--font-display); color: var(--muted-dark); cursor: pointer; transition: 0.2s; }
.product-list button:hover { color: var(--white); }
.product-list button.on { color: var(--yellow); border-left-color: var(--yellow); background: linear-gradient(90deg, rgba(255, 221, 0, 0.1), transparent); }
.product-list li.dim button { opacity: 0.3; }
.product-panel { display: grid; grid-template-columns: 1.35fr 1fr; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line-dark); min-height: 380px; }
.panel-visual { position: relative; padding: 20px; border-right: 1px solid var(--line-dark); overflow: hidden; background: radial-gradient(420px 280px at 30% 0%, rgba(80, 34, 97, 0.85), transparent); }
.panel-copy { padding: 32px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
.panel-copy h3 { font-size: 26px; font-weight: 400; color: var(--white); margin: 0; }
.panel-text, .panel-text * { color: var(--muted-dark) !important; }
.panel-copy .btn { margin-top: auto; }
.btn-outline { border-color: var(--line-dark); color: var(--white); background: transparent; }
.btn-outline:hover { border-color: var(--yellow); color: var(--yellow); }
.panel-fade { animation: fade 0.35s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }
.product-switcher:not([data-admin="1"]) .ps-data { display: none; }
.product-switcher[data-admin="1"] .products, .product-switcher[data-admin="1"] .chips { display: none; }
.ps-data .ps-item { border: 1px solid var(--line-dark); padding: 12px; margin-bottom: 8px; display: grid; gap: 6px; }
#page_slide.admin .ps-item .multiField_0::before { content: "Name: "; color: var(--muted-dark); }
#page_slide.admin .ps-item .multiField_2::before { content: "Link: "; color: var(--muted-dark); }
#page_slide.admin .ps-item .multiField_3::before { content: "Business types: "; color: var(--muted-dark); }
#page_slide.admin .ps-item .multiField_4::before { content: "Screen: "; color: var(--muted-dark); }

/* Mock screens in the product panel */
.mock { font: 12px/1.3 var(--font-display); color: var(--white); border: 1px solid var(--line-dark); background: rgba(41, 38, 43, 0.85); height: 100%; display: flex; flex-direction: column; }
.mock-bar { display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-bottom: 1px solid var(--line-dark); color: var(--muted-dark); }
.mock-bar i { width: 8px; height: 8px; background: var(--line-dark); }
.mock-bar b { margin-left: 8px; font-weight: 500; color: var(--white); }
.mock-body { flex: 1; padding: 12px; display: grid; gap: 8px; align-content: start; }
.mrow { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 8px; padding: 6px 8px; background: rgba(255, 255, 255, 0.03); font-variant-numeric: tabular-nums; }
.mrow.h { background: none; color: var(--muted-dark); text-transform: uppercase; font-size: 10px; letter-spacing: 0.08em; }
.mrow .u { color: var(--up); } .mrow .d { color: var(--down); } .mrow .y { color: var(--yellow); }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 150px; padding: 8px 4px 0; border-bottom: 1px solid var(--line-dark); }
.bars span { flex: 1; background: var(--purple); border-top: 2px solid var(--grey-light-3); transition: height 0.8s cubic-bezier(.2,.8,.2,1); }
.bars span.hot { background: var(--yellow); border-top-color: var(--yellow); }
.route { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.route .pill { padding: 8px 10px; border: 1px solid var(--line-dark); text-align: center; }
.route .pill.y { border-color: var(--yellow); color: var(--yellow); }
.route .arrow { color: var(--yellow); }

/* Connectivity diagram */
.hub { position: relative; display: grid; grid-template-columns: 1fr auto 1fr; gap: clamp(32px, 8vw, 140px); align-items: center; }
.hub-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.hub-lines path { fill: none; stroke: var(--grey-light-3); stroke-width: 1; }
.hub-lines path.flow { stroke: var(--purple); stroke-width: 1.5; stroke-dasharray: 4 10; animation: flow 1.4s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -28; } }
.hub-col { position: relative; display: grid; gap: 10px; }
.hub-cap { font: 500 12px var(--font-display); text-transform: uppercase; letter-spacing: 0.14em; color: var(--grey-dark); margin: 0 0 6px; }
.hub-right .hub-cap, .hub-right .node { text-align: right; }
.hub .node { background: var(--white); border: 1px solid var(--line-light); padding: 12px 16px; font: 500 15px var(--font-display); transition: 0.2s; }
.hub .node:hover { border-color: var(--purple); color: var(--purple); }
.core-box { width: 200px; aspect-ratio: 1; padding: 16px; background: var(--purple); color: var(--white); display: grid; place-items: center; align-content: center; gap: 8px; text-align: center; position: relative; box-shadow: 0 30px 60px -20px rgba(80, 34, 97, 0.45); }
.core-box::before { content: ""; position: absolute; inset: -10px; border: 1px solid var(--purple); opacity: 0.4; animation: ring 3s ease-in-out infinite; }
@keyframes ring { 50% { inset: -18px; opacity: 0.1; } }
.core-box b { font: 500 22px var(--font-display); }
.core-box small { color: var(--muted-dark); font-size: 12px; letter-spacing: 0.06em; }
.bg-purple .hub .node, .bg-dark .hub .node { background: transparent; border-color: var(--line-dark); color: var(--white); }
.bg-purple .hub-cap, .bg-dark .hub-cap { color: var(--muted-dark); }

/* Numbers */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-dark); }
.stat { padding: 32px 24px 0 0; }
.stat + .stat { padding-left: 24px; border-left: 1px solid var(--line-dark); }
.stat .multiField_0 { font: 300 clamp(44px, 5vw, 68px)/1 var(--font-display); color: var(--yellow); }
.stat .multiField_1 { margin-top: 16px; color: var(--muted-dark); max-width: 16em; }
.bg-none .stats, .bg-grey-light-1 .stats { border-top-color: var(--line-light); }
.bg-none .stat + .stat, .bg-grey-light-1 .stat + .stat { border-left-color: var(--line-light); }
.bg-none .stat .multiField_0, .bg-grey-light-1 .stat .multiField_0 { color: var(--purple); }
.bg-none .stat .multiField_1, .bg-grey-light-1 .stat .multiField_1 { color: var(--grey-dark); }

/* Pillars */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-light); counter-reset: pillar; }
.pillar { counter-increment: pillar; padding: 32px 28px 8px 0; border-right: 1px solid var(--line-light); display: grid; gap: 14px; align-content: start; }
.pillar + .pillar { padding-left: 28px; }
.pillar:last-of-type { border-right: 0; }
/* Three items read better as three columns than as four with a gap. */
@media (min-width: 1081px) { .pillars:not(:has(> .pillar:nth-of-type(4))) { grid-template-columns: repeat(3, 1fr); } }
.pillar::before {
  content: counter(pillar, decimal-leading-zero); font: 500 13px var(--font-display); color: var(--purple);
  display: flex; align-items: center; padding-left: 32px; min-height: 22px; margin-bottom: 18px;
  background: conic-gradient(var(--yellow) 0 25%, var(--purple) 0 50%, var(--yellow) 0 75%, var(--purple) 0) left center / 22px 22px no-repeat;
}
.pillar .multiField_0 { font: 500 22px/1.25 var(--font-display); }
.pillar .multiField_1, .pillar .multiField_1 p { color: var(--grey-dark); }
.bg-purple .pillars, .bg-dark .pillars, .bg-purple .pillar, .bg-dark .pillar { border-color: var(--line-dark); }
.bg-purple .pillar .multiField_1, .bg-purple .pillar .multiField_1 p, .bg-dark .pillar .multiField_1, .bg-dark .pillar .multiField_1 p { color: var(--muted-dark); }
.bg-purple .pillar::before, .bg-dark .pillar::before { color: var(--yellow); }

@media (max-width: 1080px) {
  .split-head, .split-body { grid-template-columns: 1fr; gap: 20px; }
  .label { max-width: 260px; }
  .product-panel { grid-template-columns: 1fr; }
  .panel-visual { border-right: 0; border-bottom: 1px solid var(--line-dark); min-height: 260px; }
  .stats, .pillars { grid-template-columns: repeat(2, 1fr); }
  .stat:nth-of-type(3) { padding-left: 0; border-left: 0; }
  .stat:nth-of-type(n+3) { margin-top: 32px; border-top: 1px solid var(--line-dark); }
  .pillar:nth-of-type(2) { border-right: 0; }
  .pillar:nth-of-type(3) { padding-left: 0; }
  .pillar:nth-of-type(n+3) { border-top: 1px solid var(--line-light); }
}
@media (max-width: 720px) {
  .hub { grid-template-columns: 1fr; gap: 28px; }
  .hub-col { grid-template-columns: 1fr 1fr; }
  .hub-cap { grid-column: 1 / -1; }
  .hub-right .hub-cap, .hub-right .node { text-align: left; }
  .hub-core { justify-self: center; }
  .core-box { width: 160px; }
  .hub-lines { display: none; }
  .stats, .pillars { grid-template-columns: 1fr; border-top: 0; }
  .stat, .stat + .stat { padding: 28px 0 0; border-left: 0; margin-top: 0; border-top: 1px solid var(--line-dark); }
  .stat:first-of-type { border-top: 0; }
  .pillar, .pillar + .pillar { padding: 28px 0 8px; border-right: 0; border-top: 1px solid var(--line-light); }
}

/* ---------- Scroll reveal ---------- */
/* theme.js adds js-reveal (visitors only, motion allowed), marks each .reveal "in" as it scrolls into view, then drops
   the reveal class so the element's own hover transitions take over. Without JS everything simply shows. */
.js-reveal .reveal { transition: opacity 0.7s ease, transform 0.7s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--rd, 0ms); }
.js-reveal .reveal:not(.in) { opacity: 0; transform: translateY(28px); }

/* ---------- Trading week clock ---------- */
.wk-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(32px, 6vw, 80px); align-items: center; }
.wk-text p { color: var(--grey-dark); }
.bg-purple .wk-text p, .bg-dark .wk-text p { color: var(--muted-dark) !important; }
.wk { --t: 78%; position: relative; background: rgba(41, 38, 43, 0.92); border: 1px solid var(--line-dark); padding: clamp(18px, 2.4vw, 30px); color: var(--white); font: 13px/1.4 var(--font-display); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.6); }
.bg-dark .wk { background: rgba(255, 255, 255, 0.03); }
.wk-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 22px; }
.wk-clock { font: 300 clamp(30px, 3vw, 40px)/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.wk-zone, .wk-days { color: var(--muted-dark); font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; }
.wk-days { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 18px; }
.wk-days span { padding: 0 0 6px 6px; border-left: 1px solid var(--line-dark); }
.wk-track { margin-bottom: 22px; }
.wk-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.wk-state { font: 600 11px/1 var(--font-display); letter-spacing: 0.12em; text-transform: uppercase; padding: 5px 9px; border: 1px solid var(--line-dark); color: var(--muted-dark); transition: 0.25s; }
.wk-state.on { background: var(--yellow); border-color: var(--yellow); color: var(--dark); }
.wk-bar { position: relative; height: 16px; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 calc(100% / 7 - 1px), var(--line-dark) calc(100% / 7 - 1px) calc(100% / 7)); }
.wk-bar i { position: absolute; top: 0; bottom: 0; background: rgba(255, 255, 255, 0.6); transform-origin: left; transition: transform 0.9s cubic-bezier(.2, .8, .2, 1) calc(0.3s + var(--d, 0) * 0.12s); }
.wk-perps .wk-bar i { background: linear-gradient(90deg, var(--yellow), #fff1a0 50%, var(--yellow)); background-size: 200% 100%; animation: shimmer 3s linear infinite; transition-duration: 1.6s; transition-delay: 0.9s; }
@keyframes shimmer { to { background-position: -200% 0; } }
.js-reveal .wk:not(.in) .wk-bar i { transform: scaleX(0); }
.wk-bar::after { content: ""; position: absolute; top: -7px; bottom: -7px; left: var(--t); width: 2px; margin-left: -1px; background: var(--white); box-shadow: 0 0 12px 2px rgba(255, 255, 255, 0.55); }
.wk-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; border-top: 1px solid var(--line-dark); padding-top: 18px; }
.wk-foot b { display: block; font: 300 clamp(34px, 3.4vw, 48px)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.wk-foot div + div b { color: var(--yellow); }
.wk-foot small { display: block; margin-top: 8px; color: var(--muted-dark); font-size: 13px; }

/* ---------- Icon cards ---------- */
.icards { display: grid; gap: 16px; }
.icards-2 { grid-template-columns: repeat(2, 1fr); }
.icards-3 { grid-template-columns: repeat(3, 1fr); }
.icards-4 { grid-template-columns: repeat(4, 1fr); }
.icard { position: relative; background: var(--white); border: 1px solid var(--line-light); padding: 28px 26px 22px; overflow: hidden; transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s; }
.icard::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--yellow); transform: scaleX(0); transform-origin: left; transition: transform 0.35s ease; }
.icard:hover { border-color: var(--purple); transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(80, 34, 97, 0.45); }
.icard:hover::before { transform: none; }
.icard .multiField_0 { display: none; }
#page_slide.admin .icard .multiField_0 { display: block; font-size: 13px; color: var(--grey-dark); }
#page_slide.admin .icard .multiField_0::before { content: "Icon: "; }
.icard-icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 20px; background: var(--purple); color: var(--yellow); transition: transform 0.35s cubic-bezier(.2, .8, .2, 1), background 0.25s; }
.icard-icon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.icard:hover .icard-icon { transform: rotate(-6deg) scale(1.08); background: var(--dark); }
.icard .multiField_1 { font: 500 21px/1.25 var(--font-display); margin-bottom: 10px; }
.icard .multiField_2, .icard .multiField_2 p, .icard .multiField_2 li { color: var(--grey-dark); font-size: 16px; }
.icard .multiField_2 p:last-child { margin-bottom: 0; }
.icard .multiField_2 ul { list-style: none; padding: 0; margin: 14px 0 0; border-top: 1px solid var(--line-light); }
.icard .multiField_2 li { padding: 10px 0 10px 26px; border-bottom: 1px solid var(--line-light); position: relative; }
.icard .multiField_2 li::before { content: ""; position: absolute; left: 2px; top: 17px; width: 10px; height: 10px; background: conic-gradient(var(--yellow) 0 25%, var(--purple) 0 50%, var(--yellow) 0 75%, var(--purple) 0); }
.bg-purple .icard, .bg-dark .icard { background: rgba(255, 255, 255, 0.04); border-color: var(--line-dark); color: var(--white); }
.bg-purple .icard .multiField_2 *, .bg-dark .icard .multiField_2 * { color: var(--muted-dark); }
.bg-purple .icard:hover, .bg-dark .icard:hover { border-color: var(--yellow); }
.bg-purple .icard-icon, .bg-dark .icard-icon { background: var(--yellow); color: var(--dark); }

/* ---------- Flow steps ---------- */
.fsteps { --n: 4; position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 32px; counter-reset: fstep; }
.fsteps:has(> .fstep:nth-of-type(2):last-of-type) { --n: 2; }
.fsteps:has(> .fstep:nth-of-type(3):last-of-type) { --n: 3; }
.fsteps:has(> .fstep:nth-of-type(5):last-of-type) { --n: 5; }
/* Runs from the first number to the last: the last column's width, less half a number, in from the right. */
.fsteps-line { position: absolute; left: 28px; right: calc((100% - (var(--n) - 1) * 32px) / var(--n) - 28px); top: 27px; height: 2px; background: var(--grey-light-3); overflow: hidden; }
.fsteps-line::before { content: ""; position: absolute; inset: 0; background: var(--purple); transform-origin: left; transition: transform 1.4s cubic-bezier(.4, 0, .2, 1) 0.2s; }
.fsteps-line::after { content: ""; position: absolute; top: -3px; left: -60px; width: 60px; height: 8px; background: linear-gradient(90deg, transparent, var(--yellow)); animation: travel 2.6s linear infinite 1.6s; }
@keyframes travel { to { left: 100%; } }
.js-reveal .fsteps:not(.in) .fsteps-line::before { transform: scaleX(0); }
.fstep { position: relative; counter-increment: fstep; transition: opacity 0.6s ease, transform 0.6s cubic-bezier(.2, .8, .2, 1); }
.fstep:nth-of-type(2) { transition-delay: 0.3s; } .fstep:nth-of-type(3) { transition-delay: 0.6s; }
.fstep:nth-of-type(4) { transition-delay: 0.9s; } .fstep:nth-of-type(5) { transition-delay: 1.2s; }
.js-reveal .fsteps:not(.in) .fstep { opacity: 0; transform: translateY(20px); }
.fstep::before { content: counter(fstep, decimal-leading-zero); position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 24px; background: var(--purple); color: var(--white); font: 500 17px var(--font-display); transition: background 0.25s, color 0.25s, transform 0.25s; }
.fstep:hover::before { background: var(--yellow); color: var(--dark); transform: scale(1.08); }
.fstep .multiField_0 { font: 500 21px/1.25 var(--font-display); margin-bottom: 10px; }
.fstep .multiField_1, .fstep .multiField_1 p { color: var(--grey-dark); font-size: 16px; }
.bg-purple .fstep .multiField_1 *, .bg-dark .fstep .multiField_1 * { color: var(--muted-dark); }
.bg-purple .fsteps-line, .bg-dark .fsteps-line { background: var(--line-dark); }
.bg-purple .fsteps-line::before, .bg-dark .fsteps-line::before { background: var(--yellow); }

@media (max-width: 1080px) {
  .wk-grid { grid-template-columns: 1fr; }
  .icards-3, .icards-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  /* Stacked, the line is drawn as one segment per step so it stops at the last number. */
  .fsteps { grid-auto-flow: row; gap: 28px; }
  .fsteps-line { display: none; }
  .fstep { padding-left: 80px; min-height: 56px; }
  .fstep::before { position: absolute; left: 0; top: 0; margin: 0; }
  .fstep:not(:last-of-type)::after { content: ""; position: absolute; left: 27px; top: 56px; bottom: -28px; width: 2px; background: var(--purple); transform-origin: top; transition: transform 0.5s ease 0.4s; }
  .js-reveal .fsteps:not(.in) .fstep::after { transform: scaleY(0); }
  .bg-purple .fstep::after, .bg-dark .fstep::after { background: var(--yellow); }
}
@media (max-width: 720px) {
  .icards-2, .icards-3, .icards-4 { grid-template-columns: 1fr; }
  .wk-days span { padding-left: 3px; font-size: 10px; letter-spacing: 0.04em; }
}

/* Ask Goldie boxes in the phone menu and footer (they replace the site search) */
.goldie-inline { position: relative; display: flex; max-width: 360px; }
#page_slide .goldie-inline input { padding-right: 48px; }
.goldie-inline button {
  position: absolute; right: 0; top: 0; bottom: 0; width: 44px; border: 0; cursor: pointer;
  background: var(--yellow); color: var(--dark); font-size: 17px;
}
.goldie-inline button:hover { background: var(--white); }
.nav-panel-search.goldie-inline { max-width: none; }