/* ==============================================================
   xSyte Design System — components + theme compatibility

   Usage: on a rebuilt page, link tokens.css then this file, and wrap
   the page content in <div class="xs-page"> … </div>.

       {% block extra_css_files %}
         <link rel="stylesheet" href="/assets/css/xsyte-ds/tokens.css">
         <link rel="stylesheet" href="/assets/css/xsyte-ds/xsyte-ds.css">
       {% endblock %}

   Component names mirror the design-system components (Button, Badge,
   Card, FeatureCard, SectionHeading, StatBlock, Accordion, Callout…).

   NOTE: rules are scoped under `.xs-page` on purpose. The legacy theme
   styles bare elements (section, button, h2, p, a, i) with selectors
   like `.inner-container section`, so DS components need the extra
   class to win — and the scoping stops the DS leaking into old pages.
   ============================================================== */


/* ==============================================================
   1. THEME COMPATIBILITY
   Neutralises the legacy theme so a modern full-bleed design can
   live inside it. Remove this section once every page is rebuilt.
   ============================================================== */

/* The theme sets the root font-size to 12px; this design system is
   authored at the browser-standard 16px, so every rem/clamp() would
   otherwise render at 75% ("small / zoomed-out" page). */
html{font-size:16px}

/* …but the shared chrome (header + footer) is sized in rem for the
   theme's 12px base, so at 16px it renders ~33% too large. Scale it
   back by 12/16 so the chrome keeps its normal size while the page
   content renders full-size. */
.main-container > header,
.main-container footer.footer-5{zoom:.75}

/* The theme forces min-height:480px and ~10rem vertical padding onto
   every <section>, which leaves large empty gaps under short sections.
   DS sections supply their own padding. */
.xs-page section{min-height:0;padding:0}

/* The theme force-colours every <i> bright blue (#0060ff), which beats
   inherited colour and made white glyphs on coloured chips invisible.
   Restore natural inheritance. */
.xs-page .xi{color:inherit}


/* ==============================================================
   2. BASE
   ============================================================== */

.xs-page{
	font-family:var(--font-body);
	font-size:var(--fs-body);
	color:var(--text-body);
	line-height:var(--lh-body);
	overflow-x:hidden;
}
.xs-page *{box-sizing:border-box}
.xs-page img{max-width:100%;display:block}
.xs-page h1,.xs-page h2,.xs-page h3,.xs-page h4,.xs-page p{margin:0}
/* The theme styles bare <p> (main.css:535) with font-size:1.6rem, colour, letter-spacing
   and line-height sized for its 12px root — at our 16px root that renders ~25.6px and
   leaks colour into DS text. Make <p> behave like normal body text; DS components that
   need a specific size (.xs-lead, .xs-note …) set their own and win on specificity. */
.xs-page p{font-size:inherit;line-height:inherit;letter-spacing:normal;color:inherit}
.xs-page a{color:var(--link);text-decoration:none}
.xs-page button{font-family:var(--font-body)}

/* FontAwesome glyph helper */
.xs-page .xi{font-family:FontAwesome;font-style:normal;font-weight:normal;display:inline-block;line-height:1}

/* Icon size / colour utilities (keeps one-off inline styles off the markup) */
.xs-page .xi--xs{font-size:.7rem}
.xs-page .xi--sm{font-size:.72rem}
.xs-page .xi--lg{font-size:1.1rem}
.xs-page .xi--xl{font-size:1.6rem}
.xs-page .xi--2xl{font-size:2rem}
.xs-page .xi--blue{color:var(--blue-500)}
.xs-page .xi--success{color:var(--success)}
.xs-page .xi--orange{color:#ffb27a}
.xs-page .xi--bitcoin{color:#f7931a}
.xs-page .xi--gray{color:var(--gray-400)}
.xs-page .xi--teal{color:#0e8a6e}

/* Scroll-reveal. JS adds .xs-reveal (arming it) then .is-in when the element
   enters the viewport. With JS off — or reduced motion — no classes are added
   and the content simply renders visible. */
.xs-page .xs-reveal{opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease),transform .6s var(--ease);will-change:opacity,transform}
.xs-page .xs-reveal.is-in{opacity:1;transform:none}


/* ==============================================================
   3. LAYOUT — Section / Container / Grid / Split
   ============================================================== */

.xs-page .xs-section{padding:clamp(4rem,8vw,7rem) 1.5rem;position:relative}
.xs-page .xs-section--tight{padding:clamp(3rem,6vw,5rem) 1.5rem}
.xs-page .xs-section--faq{padding:clamp(4rem,8vw,6rem) 1.5rem}
.xs-page .xs-section--tall{padding:clamp(4.5rem,9vw,8rem) 1.5rem}
.xs-page .xs-section--cta{padding:clamp(4.5rem,9vw,7.5rem) 1.5rem}
.xs-page .xs-section--flush{padding:0}
.xs-page .xs-section--clip{overflow:hidden}

/* Section surfaces */
.xs-page .xs-section--white{background:var(--white)}
.xs-page .xs-section--paper{background:var(--paper)}
.xs-page .xs-section--navy{background:var(--navy-900);color:#fff}
.xs-page .xs-section--navy-800{background:var(--navy-800)}
.xs-page .xs-section--navy-grad{background:linear-gradient(150deg,var(--navy-700),var(--navy-900));color:#fff}
.xs-page .xs-section--hero{background:linear-gradient(160deg,var(--navy-900) 0%,var(--navy-700) 55%,var(--navy-600) 100%);color:#fff}
.xs-page .xs-section--mint{background:linear-gradient(180deg,#eefaf5,#fff)}
.xs-page .xs-section--bitcoin{background:radial-gradient(circle at 70% 20%,#1a1206,#04070f 55%);color:#fff}

.xs-page .xs-container{max-width:1200px;margin-inline:auto;margin-top:3.5rem}
.xs-page .xs-container--wide{max-width:1160px}
.xs-page .xs-container--mid{max-width:1000px}
.xs-page .xs-container--panel{max-width:960px}
.xs-page .xs-container--band{max-width:940px}
.xs-page .xs-container--narrow{max-width:900px}
.xs-page .xs-container--tight{max-width:820px}
.xs-page .xs-container--slim{max-width:760px}

/* Auto-fit grid. Set the min column width with a modifier. */
.xs-page .xs-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(var(--xs-col,240px),1fr))}
.xs-page .xs-grid--min160{--xs-col:160px}
.xs-page .xs-grid--min200{--xs-col:200px}
.xs-page .xs-grid--min210{--xs-col:210px}
.xs-page .xs-grid--min230{--xs-col:230px}
.xs-page .xs-grid--min300{--xs-col:300px}
.xs-page .xs-grid--min320{--xs-col:320px}
.xs-page .xs-grid--gap-lg{gap:1.4rem}
.xs-page .xs-grid--gap-tiles{gap:1.1rem}
.xs-page .xs-grid--two{grid-template-columns:1fr 1fr;gap:14px}

/* Two-column split (text beside a visual) */
.xs-page .xs-split{display:flex;flex-wrap:wrap;align-items:center;gap:3.5rem}
.xs-page .xs-split--hero{gap:3rem}
.xs-page .xs-split__col{flex:1 1 380px;min-width:320px}
.xs-page .xs-split__col--first{order:1}
.xs-page .xs-split__col--last{order:2}

.xs-page .xs-stack{display:flex;flex-direction:column;gap:1.15rem}
.xs-page .xs-stack--sm{gap:.9rem}
.xs-page .xs-stack--md{gap:1.05rem}
.xs-page .xs-stack--lg{gap:1.1rem}
.xs-page .xs-row{display:flex;flex-wrap:wrap;gap:.9rem}
.xs-page .xs-row--center{justify-content:center}
.xs-page .xs-row--middle{align-items:center}
.xs-page .xs-row--stretch{align-items:stretch}
.xs-page .xs-center{text-align:center}
.xs-page .xs-relative{position:relative}
.xs-page .xs-centered{display:flex;justify-content:center}

/* spacing utilities */
.xs-page .xs-mt-xs{margin-top:.6rem}
.xs-page .xs-mt-sm{margin-top:1rem}
.xs-page .xs-mt-md{margin-top:1.4rem}
.xs-page .xs-mt-lg{margin-top:2.4rem}
.xs-page .xs-mt-xl{margin-top:2.8rem}
.xs-page .xs-mt-2xl{margin-top:3rem}
.xs-page .xs-mt-3xl{margin-top:3.6rem}
.xs-page .xs-mt-cta{margin-top:2.2rem}
.xs-page .xs-mb-xs{margin-bottom:.4rem}
.xs-page .xs-mb-lg{margin-bottom:2rem}

/* gap utilities (compose with .xs-row / .xs-grid / .xs-stack) */
.xs-page .xs-gap-xs{gap:.5rem}
.xs-page .xs-gap-sm{gap:.6rem}
.xs-page .xs-gap-md{gap:.7rem}
.xs-page .xs-gap-lg{gap:1.4rem}
.xs-page .xs-gap-xl{gap:1.8rem}
.xs-page .xs-gap-stat{gap:2.5rem}
.xs-page .xs-gap-tiles{gap:14px}

/* misc text helpers */
.xs-page .xs-strong{font-weight:700}
.xs-page .xs-muted{opacity:.7;font-weight:400}
.xs-page .xs-accent-bitcoin{color:#f7931a}
.xs-page .xs-on-dark{color:#fff}
.xs-page .xs-w36{max-width:36rem}
.xs-page .xs-w38{max-width:38rem;margin-inline:auto}
.xs-page .xs-w560{max-width:560px}


/* ==============================================================
   4. TYPOGRAPHY — SectionHeading / Eyebrow / Lead / Mark
   ============================================================== */

.xs-page .xs-section-head{max-width:44rem;margin-inline:auto;text-align:center}
.xs-page .xs-section-head--wide{max-width:48rem}
.xs-page .xs-section-head--mid{max-width:46rem}

.xs-page .xs-eyebrow{
	font-size:.75rem;font-weight:700;letter-spacing:var(--ls-eyebrow);
	text-transform:uppercase;color:var(--red-600);margin-bottom:.75rem;
}
.xs-page .xs-eyebrow--blue{color:var(--blue-600)}
.xs-page .xs-eyebrow--bright{color:#1276c4}
.xs-page .xs-eyebrow--sky{color:var(--blue-500)}
.xs-page .xs-eyebrow--orange{color:#ffb27a}
.xs-page .xs-eyebrow--teal{color:#0e8a6e}
.xs-page .xs-eyebrow--bitcoin{color:#f7931a;display:inline-flex;align-items:center;gap:.5rem;margin-bottom:1rem}
.xs-page .xs-eyebrow--on-dark{color:rgba(255,255,255,.7)}
.xs-page .xs-eyebrow--tight{margin-bottom:.6rem}
.xs-page .xs-eyebrow--xs{font-size:.72rem}

.xs-page .xs-h1{font-family:var(--font-display);font-weight:400;line-height:1.04;font-size:clamp(2.7rem,6vw,4.3rem)}
.xs-page .xs-h2{font-family:var(--font-display);font-weight:400;line-height:1.08;font-size:clamp(2rem,4vw,2.7rem);color:var(--navy-700)}
.xs-page .xs-h2--on-dark{color:#fff}
.xs-page .xs-h2--sm{font-size:clamp(1.9rem,4vw,2.5rem)}
.xs-page .xs-h2--xl{font-size:clamp(2.3rem,5vw,3.4rem);line-height:1.05}
.xs-page .xs-h2--cta{font-size:clamp(2.2rem,5vw,3.4rem);line-height:1.06;max-width:20ch;margin-inline:auto}
.xs-page .xs-h2--clamp20{max-width:20ch;margin-inline:auto}
.xs-page .xs-h2--clamp22{max-width:22ch;margin-inline:auto}
.xs-page .xs-h3{font-family:var(--font-display);color:var(--navy-700);font-size:1.3rem}
.xs-page .xs-h3--on-dark{color:#fff}

.xs-page .xs-lead{font-size:1.12rem;line-height:1.6;color:var(--gray-600);margin-top:1rem}
.xs-page .xs-lead--on-dark{color:rgba(255,255,255,.8)}
.xs-page .xs-lead--center{margin-inline:auto}
.xs-page .xs-lead--w34{max-width:34rem}
.xs-page .xs-lead--w40{max-width:40rem}
.xs-page .xs-lead--w42{max-width:42rem}
.xs-page .xs-lead--w44{max-width:44rem}
.xs-page .xs-lead--gap{margin-bottom:1.8rem}

/* Inset "highlighter" underline behind key phrases */
.xs-page .xs-mark{box-shadow:inset 0 -.3em 0 var(--blue-100)}
.xs-page .xs-mark--deep{box-shadow:inset 0 -.32em 0 var(--blue-100)}
.xs-page .xs-mark--sky{box-shadow:inset 0 -.24em 0 rgba(33,153,232,.55)}
.xs-page .xs-mark--sky-soft{box-shadow:inset 0 -.3em 0 rgba(33,153,232,.5)}
.xs-page .xs-mark--sky-faint{box-shadow:inset 0 -.3em 0 rgba(33,153,232,.18)}
.xs-page .xs-mark--orange{box-shadow:inset 0 -.3em 0 rgba(204,99,17,.7)}
.xs-page .xs-mark--green{box-shadow:inset 0 -.3em 0 rgba(58,219,118,.35)}

.xs-page .xs-note{font-size:.95rem;line-height:1.55;color:rgba(255,255,255,.6);margin-top:.9rem}
.xs-page .xs-kicker{font-family:var(--font-display);color:var(--navy-700);font-size:1.3rem;text-align:center;margin-top:1.8rem}
.xs-page .xs-quote{font-family:var(--font-display);font-size:clamp(1.6rem,4vw,2.6rem);color:#fff}
.xs-page .xs-fineprint{color:var(--gray-400);font-size:.84rem;text-align:center;margin-top:.9rem}


/* ==============================================================
   5. BUTTON  (design-system: Button)
   ============================================================== */

.xs-page .xs-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:.5em;
	font-family:var(--font-body);font-weight:var(--fw-bold);line-height:1.1;
	text-align:center;text-decoration:none;border-radius:var(--radius-sm);
	box-shadow:var(--shadow-btn);cursor:pointer;border:1px solid transparent;
	font-size:1rem;padding:.85em 1.5em;
	transition:filter var(--dur) var(--ease),transform var(--dur-fast) var(--ease);
}
.xs-page .xs-btn--lg{font-size:1.2rem;padding:.9em 1.9em}
.xs-page .xs-btn--blue{background:var(--blue-500);color:#fff;border-color:var(--blue-500)}
.xs-page .xs-btn--navy{background:var(--navy-700);color:#fff;border-color:var(--navy-700)}
.xs-page .xs-btn--primary{background:var(--red-600);color:#fff;border-color:var(--red-600)}
.xs-page .xs-btn--ghost{background:rgba(255,255,255,.14);color:#fff;border-color:rgba(255,255,255,.55)}
.xs-page .xs-btn--outline{background:transparent;color:var(--navy-700);border-color:var(--gray-300);box-shadow:none;font-weight:700;padding:.7rem 1.2rem}
.xs-page a.xs-btn,
.xs-page a.xs-btn:link,
.xs-page a.xs-btn:visited{color:#fff}
.xs-page a.xs-btn--outline{color:var(--navy-700)}
.xs-page .xs-btn:hover{filter:brightness(.9);color:#fff}
.xs-page .xs-btn--outline:hover{background:var(--paper);color:var(--navy-700);filter:none}
.xs-page .xs-btn:active{transform:translateY(1px)}


/* ==============================================================
   6. CARD / FEATURE CARD  (design-system: Card, FeatureCard)
   ============================================================== */

.xs-page .xs-card{background:var(--surface-card);border:var(--border-card);border-radius:12px;padding:20px}
.xs-page .xs-card--lg{border-radius:16px;box-shadow:var(--shadow-sm)}
.xs-page .xs-card--pad-sm{padding:18px}
.xs-page .xs-card--paper{background:var(--paper);border-radius:16px;padding:26px}
.xs-page .xs-card--navy{background:var(--navy-900);color:#fff;border:0;border-radius:16px;padding:26px}

/* icon + title + body */
.xs-page .xs-feature-card__icon{color:var(--blue-500);font-size:1.1rem}
.xs-page .xs-feature-card__icon--teal{color:#0e8a6e}
.xs-page .xs-feature-card__title{font-family:var(--font-display);color:var(--navy-700);margin:.5rem 0 .2rem}
.xs-page .xs-feature-card__body{color:var(--gray-600);font-size:.92rem;line-height:1.5}


/* ==============================================================
   7. PRODUCT TILE  (clickable card that opens a detail modal)
   Content is top-aligned; the "View details" link is pinned to the
   bottom so CTAs line up across a row regardless of copy length.
   ============================================================== */

.xs-page .xs-tile{
	position:relative;text-align:left;width:100%;height:100%;
	background:var(--surface-card);border:var(--border-card);border-radius:14px;
	padding:22px;cursor:pointer;font-family:var(--font-body);
	display:flex;flex-direction:column;
	transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.xs-page .xs-tile:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.xs-page .xs-tile__body{position:relative;display:flex;flex-direction:column;flex:1}
.xs-page .xs-tile__title{font-family:var(--font-display);color:var(--navy-700);font-size:1.2rem;margin:.7rem 0 .25rem}
.xs-page .xs-tile__text{color:var(--gray-600);font-size:.95rem;line-height:1.5}
/* ↓ the bottom-alignment */
.xs-page .xs-tile__link{
	margin-top:auto;padding-top:.9rem;
	display:inline-flex;align-items:center;gap:.4rem;
	color:#1276c4;font-weight:700;font-size:.82rem;
}
/* NEW variant: soft blue wash + ring + badge */
.xs-page .xs-tile__ring{
	position:absolute;inset:0;border:1.5px solid #cfe3f5;border-radius:14px;
	background:linear-gradient(160deg,rgba(238,245,252,.85),rgba(255,255,255,0));
	pointer-events:none;
}
.xs-page .xs-tile__badge{
	position:absolute;top:14px;right:14px;background:#1276c4;color:#fff;
	font-size:.62rem;font-weight:700;letter-spacing:.08em;
	padding:.25rem .5rem;border-radius:var(--radius-pill);z-index:1;
}


/* ==============================================================
   8. ICON CHIP
   ============================================================== */

.xs-page .xs-chip{
	flex:none;display:flex;align-items:center;justify-content:center;
	width:46px;height:46px;border-radius:10px;font-size:1.1rem;
	background:var(--navy-050);color:var(--navy-700);
}
.xs-page .xs-chip--sm{width:42px;height:42px;font-size:1rem}
.xs-page .xs-chip--md{width:44px;height:44px;font-size:1.05rem}
.xs-page .xs-chip--xl{width:48px;height:48px;border-radius:12px;font-size:1.22rem}
.xs-page .xs-chip--2xl{width:64px;height:64px;border-radius:16px;font-size:1.7rem}
.xs-page .xs-chip--round{border-radius:50%}
.xs-page .xs-chip--orange{background:rgba(204,99,17,.22);color:#ffb27a}
.xs-page .xs-chip--bitcoin{background:rgba(247,147,26,.16);color:#f7931a}
.xs-page .xs-chip--blue{background:#1276c4;color:#fff}
.xs-page .xs-chip--gold{background:rgba(212,165,58,.16);color:#D4A53A;width:56px;height:56px;font-size:1.5rem;margin-inline:auto}
/* centre the FontAwesome glyph optically (a plain inline glyph sits ~2-3px off) */
.xs-page .xs-chip > .xi{width:100%;height:100%;display:flex;align-items:center;justify-content:center;line-height:1;margin-left:3px;}


/* ==============================================================
   9. BULLET (icon chip + title + blurb)
   ============================================================== */

.xs-page .xs-bullet{display:flex;gap:1rem;align-items:flex-start}
.xs-page .xs-bullet--sm{gap:.9rem}
.xs-page .xs-bullet__title{font-family:var(--font-display);font-size:1.12rem;color:var(--navy-700)}
.xs-page .xs-bullet__title--on-dark{color:#fff;font-size:1.1rem}
.xs-page .xs-bullet__text{color:var(--gray-600);line-height:1.55}
.xs-page .xs-bullet__text--on-dark{color:rgba(255,255,255,.72);line-height:1.5}


/* ==============================================================
   10. STAT BLOCK  (design-system: StatBlock)
   ============================================================== */

.xs-page .xs-stat__value{font-family:var(--font-display);font-weight:400;line-height:1;font-size:clamp(2.4rem,4vw,3.25rem);color:var(--navy-700)}
.xs-page .xs-stat__label{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;margin-top:.5rem;color:var(--red-600)}
/* compact variant used inside cards / bands */
.xs-page .xs-stat--sm .xs-stat__value{font-size:1.4rem}
.xs-page .xs-stat--sm .xs-stat__label{font-size:.66rem;letter-spacing:.06em;margin-top:0;color:var(--gray-400);font-weight:400}
.xs-page .xs-stat--xs .xs-stat__value{font-size:1.25rem}
.xs-page .xs-stat--xs .xs-stat__label{font-size:.66rem;letter-spacing:.06em;margin-top:0;color:var(--gray-400);font-weight:400}
.xs-page .xs-stat--band .xs-stat__value{font-size:clamp(1.8rem,3vw,2.4rem)}
.xs-page .xs-stat--band .xs-stat__label{font-size:.72rem;margin-top:.4rem}
.xs-page .xs-stat--on-dark .xs-stat__value{color:#fff}
.xs-page .xs-stat--on-dark .xs-stat__label{color:rgba(255,255,255,.7)}
.xs-page .xs-stat--green .xs-stat__value{color:#0e8a6e}


/* ==============================================================
   11. PILL / BADGE  (design-system: Badge)
   ============================================================== */

.xs-page .xs-pill{
	display:inline-flex;align-items:center;gap:.5rem;
	border-radius:var(--radius-pill);padding:.4rem .9rem;
	font-weight:700;font-size:.85rem;
	background:var(--white);border:var(--border-card);color:var(--navy-700);
}
.xs-page .xs-pill--ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.85);font-size:.8rem}
.xs-page .xs-pill--navy{background:var(--navy-700);color:#fff;border-color:var(--navy-700)}
.xs-page .xs-pill--hero{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:var(--ls-eyebrow);text-transform:uppercase;padding:.4rem .8rem;margin-bottom:1.4rem}
.xs-page .xs-pill--method{background:var(--white);border-color:var(--gray-200);color:var(--gray-600);padding:.55rem 1rem;font-size:.86rem;transition:all .2s var(--ease)}
.xs-page .xs-pill--method:hover{color:#0e8a6e;border-color:#0e8a6e;transform:translateY(-2px)}

.xs-page .xs-badge{
	display:inline-block;border-radius:var(--radius-pill);
	font-size:.66rem;font-weight:700;letter-spacing:.08em;
	padding:.25rem .6rem;background:var(--blue-500);color:#fff;
}
.xs-page .xs-badge--red{background:var(--red-600)}
.xs-page .xs-badge--corner{position:absolute;top:-11px;left:20px;text-transform:uppercase}

/* struck-through "tool you can bin" pill */
.xs-page .xs-strike{
	display:inline-flex;align-items:center;gap:.5rem;
	background:var(--paper);border:var(--border-card);border-radius:10px;
	padding:.7rem 1rem;color:var(--gray-400);font-weight:700;font-size:.9rem;
	text-decoration:line-through;text-decoration-color:var(--red-500);
}
.xs-page .xs-strike .xi{text-decoration:none}


/* ==============================================================
   12. CALLOUT  (design-system: Callout)
   ============================================================== */

.xs-page .xs-callout{
	display:inline-flex;align-items:center;gap:.6rem;
	background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
	padding:.7rem 1rem;border-radius:10px;font-size:.92rem;color:rgba(255,255,255,.9);
	margin-top:1.8rem;
}
.xs-page .xs-callout--band{
	display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:1rem;
	background:var(--navy-050);border:0;border-radius:12px;padding:1.1rem 1.4rem;
	color:var(--navy-700);margin-top:1.4rem;font-size:1rem;
}


/* ==============================================================
   13. CHECK LIST (inline reassurance rows)
   ============================================================== */

.xs-page .xs-checks{display:flex;flex-wrap:wrap;gap:1.6rem;color:rgba(255,255,255,.7);font-size:.92rem}
.xs-page .xs-checks--cta{gap:1.4rem;justify-content:center;color:rgba(255,255,255,.8);font-size:.9rem}
.xs-page .xs-checks--caps{gap:1.4rem;justify-content:center;color:rgba(255,255,255,.75);font-size:.86rem}
.xs-page .xs-checks__item{display:inline-flex;align-items:center;gap:.5rem}
.xs-page .xs-checks--caps .xs-checks__item{gap:.45rem}


/* ==============================================================
   14. STEPS (numbered how-it-works rows)
   ============================================================== */

.xs-page .xs-step{display:flex;gap:1rem;align-items:flex-start}
.xs-page .xs-step__num{
	flex:none;width:34px;height:34px;border-radius:50%;
	background:var(--navy-700);color:#fff;display:flex;align-items:center;justify-content:center;
	font-family:var(--font-display);font-size:1.05rem;
}
.xs-page .xs-step__num--blue{background:var(--blue-500)}
.xs-page .xs-step__text{color:var(--gray-600);line-height:1.5;padding-top:.2rem}
.xs-page .xs-step__text--on-dark{color:rgba(255,255,255,.8)}
.xs-page .xs-step__text strong{color:var(--navy-700)}
.xs-page .xs-step__text--on-dark strong{color:#fff}


/* ==============================================================
   15. TABLE (fees)
   ============================================================== */

.xs-page .xs-table{background:var(--white);border:var(--border-card);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm)}
.xs-page .xs-table__head{display:flex;justify-content:space-between;padding:14px 22px;background:var(--navy-700);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.xs-page .xs-table__row{display:flex;justify-content:space-between;padding:15px 22px;border-bottom:1px solid var(--gray-100)}
.xs-page .xs-table__row:last-child{border-bottom:0}
.xs-page .xs-table__label{color:var(--navy-700);font-weight:600}
.xs-page .xs-table__value{color:var(--gray-600)}
.xs-page .xs-table__row--highlight{background:#fff7ed}
.xs-page .xs-table__row--highlight .xs-table__label,
.xs-page .xs-table__row--highlight .xs-table__value{color:#b45309;font-weight:700}
.xs-page .xs-table__row--highlight .xs-table__label{display:inline-flex;align-items:center;gap:.5rem}
.xs-page .xs-table__row--muted{background:var(--paper)}
.xs-page .xs-table__row--muted .xs-table__label{color:var(--gray-600);font-weight:400}


/* ==============================================================
   16. ACCORDION  (design-system: Accordion) — native <details>
   ============================================================== */

.xs-page .xs-accordion{background:var(--white);border:var(--border-card);border-radius:10px;margin-bottom:.6rem;overflow:hidden}
.xs-page .xs-accordion > summary{
	list-style:none;cursor:pointer;padding:1.1rem 1.3rem;
	font-family:var(--font-display);color:var(--navy-700);font-size:1.12rem;
	display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
.xs-page .xs-accordion > summary::-webkit-details-marker{display:none}
.xs-page .xs-accordion > summary::after{content:"\f107";font-family:FontAwesome;color:var(--blue-500);transition:transform .2s var(--ease)}
.xs-page .xs-accordion[open] > summary::after{transform:rotate(180deg)}
.xs-page .xs-accordion__body{padding:0 1.3rem 1.2rem;color:var(--gray-600);line-height:1.6}


/* ==============================================================
   17. MARQUEE (infinite logo / card scroller)
   The track must contain an EVEN number of copies of its content, and
   one half must be wider than the viewport, or a blank gap appears.
   ============================================================== */

@keyframes xs-marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}

.xs-page .xs-marquee{overflow:hidden}
.xs-page .xs-marquee__track{display:flex;align-items:center;width:max-content;animation:xs-marquee 60s linear infinite}
.xs-page .xs-marquee__track--logos{gap:2.5rem}
.xs-page .xs-marquee__track--cards{gap:22px;animation-duration:42s}
.xs-page .xs-marquee__logo{height:44px;width:auto;opacity:.85;filter:grayscale(.2)}
.xs-page .xs-marquee__caption{
	text-align:center;color:rgba(255,255,255,.55);font-size:.72rem;font-weight:700;
	letter-spacing:.16em;text-transform:uppercase;margin-bottom:1.1rem;
}


/* ==============================================================
   18. MODAL (product detail)
   ============================================================== */

.xs-modal{
	position:fixed;inset:0;z-index:9000;
	background:rgba(4,17,48,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
	display:none;align-items:center;justify-content:center;padding:1.5rem;
}
.xs-modal.is-open{display:flex}
.xs-modal__card{background:#fff;border-radius:18px;max-width:520px;width:100%;max-height:88vh;overflow:auto;box-shadow:0 40px 90px rgba(2,17,48,.5)}
.xs-modal__head{position:relative;padding:26px 26px 22px;background:linear-gradient(150deg,#1276c4,#042155);color:#fff}
.xs-modal__close{
	position:absolute;top:16px;right:16px;width:34px;height:34px;border-radius:50%;
	border:none;background:rgba(255,255,255,.18);color:#fff;font-size:1rem;cursor:pointer;
	transition:background .2s var(--ease);
}
.xs-modal__close:hover{background:rgba(255,255,255,.32)}
.xs-modal__badge{display:inline-block;background:#fff;color:#1276c4;font-size:.62rem;font-weight:700;letter-spacing:.08em;padding:.25rem .55rem;border-radius:var(--radius-pill);margin-bottom:.9rem}
.xs-modal__titlerow{display:flex;align-items:center;gap:.9rem}
.xs-modal__icon{flex:none;width:52px;height:52px;border-radius:13px;background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:1.4rem}
.xs-modal__title{font-family:var(--font-display);font-size:1.7rem;line-height:1.1}
.xs-modal__intro{margin-top:.9rem;color:rgba(255,255,255,.9);line-height:1.55}
.xs-modal__body{padding:22px 26px 26px}
.xs-modal__list{display:flex;flex-direction:column;gap:.85rem}
.xs-modal__li{display:flex;gap:.7rem;align-items:flex-start;color:var(--gray-600);line-height:1.5}
.xs-modal__li .xi{color:#1276c4;margin-top:.15rem;flex:none}
.xs-modal__stat{margin-top:1.5rem;background:#eef5fc;border-radius:10px;padding:1rem 1.15rem;font-family:var(--font-display);color:#1276c4;font-size:1.05rem}
.xs-modal__actions{margin-top:1.3rem;display:flex;flex-wrap:wrap;gap:.7rem}


/* ==============================================================
   19. STICKY CTA
   ============================================================== */

.xs-page .xs-sticky-cta{
	position:fixed;left:50%;bottom:22px;z-index:8000;
	transform:translateX(-50%) translateY(120%);opacity:0;pointer-events:none;
	transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.xs-page .xs-sticky-cta.is-visible{transform:translateX(-50%) translateY(0);opacity:1;pointer-events:auto}
/* NOTE: must stay scoped under .xs-page — `.xs-page a{color:var(--link)}` is
   specificity 0,1,1 and would otherwise win, turning the label link-blue. */
.xs-page .xs-sticky-cta__btn,
.xs-page .xs-sticky-cta__btn:link,
.xs-page .xs-sticky-cta__btn:visited{
	display:inline-flex;align-items:center;gap:.6rem;
	background:var(--red-600);color:#fff;text-decoration:none;font-weight:700;
	padding:.9rem 1.6rem;border-radius:var(--radius-pill);
	box-shadow:0 14px 34px rgba(2,17,48,.4);transition:filter .2s var(--ease);
}
.xs-page .xs-sticky-cta__btn:hover{filter:brightness(.92);color:#fff}


/* ==============================================================
   20. SELECTABLE OPTION CARD (mix & match)
   ============================================================== */

.xs-page .xs-option{
	position:relative;text-align:left;background:var(--white);
	border:var(--border-card);border-radius:14px;padding:20px;cursor:pointer;
	font-family:var(--font-body);
	transition:transform .2s var(--ease),box-shadow .2s var(--ease);
}
.xs-page .xs-option:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)}
.xs-page .xs-option__ring{position:absolute;inset:0;border:2px solid var(--blue-500);border-radius:14px;pointer-events:none;display:none}
.xs-page .xs-option.is-selected .xs-option__ring{display:block}
.xs-page .xs-option__head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.xs-page .xs-option__name{font-family:var(--font-display);color:var(--navy-700);font-size:1.1rem}
.xs-page .xs-option__selected{color:var(--blue-500);font-weight:700;font-size:.78rem;align-items:center;gap:.35rem;display:none}
.xs-page .xs-option.is-selected .xs-option__selected{display:inline-flex}
.xs-page .xs-option__cols{display:flex;gap:10px}
.xs-page .xs-option__col{flex:1;background:var(--paper);border-radius:10px;padding:10px 12px}
.xs-page .xs-option__key{font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gray-400)}
.xs-page .xs-option__val{font-weight:700;color:var(--navy-700);margin-top:2px}
.xs-page .xs-option-summary{text-align:center;margin-top:1.6rem;font-size:1.05rem;color:var(--navy-700)}


/* ==============================================================
   21. CASE CARD (logo tile + copy + stats)
   ============================================================== */

.xs-page .xs-case{background:var(--white);border:var(--border-card);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-sm);display:flex;flex-direction:column}
.xs-page .xs-case__logo{background:var(--navy-900);display:flex;align-items:center;justify-content:center;gap:16px;height:120px;padding:20px}
.xs-page .xs-case__logo img{width:auto}
.xs-page .xs-case__body{padding:22px;display:flex;flex-direction:column;flex:1}
.xs-page .xs-case__name{font-family:var(--font-display);color:var(--navy-700);font-size:1.25rem}
.xs-page .xs-case__tag{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--red-600);margin:.2rem 0 .8rem}
.xs-page .xs-case__text{color:var(--gray-600);font-size:var(--fs-body);line-height:1.55;margin:0 0 1.1rem;flex:1}
.xs-page .xs-case__stats{display:flex;gap:1.4rem;margin-bottom:1rem}
.xs-page .xs-case__link{display:inline-flex;align-items:center;gap:.4rem;color:var(--blue-600);font-weight:700;font-size:.9rem;margin-top:auto}
.xs-page .xs-case__meta{display:inline-flex;align-items:center;gap:.4rem;color:var(--navy-700);font-weight:700;font-size:.85rem;margin-top:auto}

/* marquee band (short full-bleed strip) */
.xs-page .xs-marquee-band{padding:1.6rem 0;overflow:hidden}

/* lead size variants */
.xs-page .xs-lead--lg{font-size:1.18rem}
.xs-page .xs-lead--md{font-size:1.15rem}
.xs-page .xs-lead--sm{font-size:1rem;line-height:1.55}
.xs-page .xs-lead--w38{max-width:38rem}

/* heading helpers */
.xs-page .xs-h2--panel{font-size:clamp(1.4rem,3vw,1.9rem);line-height:1.1}
.xs-page .xs-h3--inline{display:flex;align-items:center;gap:.6rem;margin-bottom:1.3rem}

/* bullet title size */
.xs-page .xs-bullet__title--lg{font-size:1.08rem}
.xs-page .xs-bullet__text--dim{color:rgba(255,255,255,.7)}

/* aggregate stat card */
.xs-page .xs-stat-card{padding:24px;text-align:center}
.xs-page .xs-stat-card--navy{background:var(--navy-700);border:0}

/* solid "one thing" badge (e.g. One XSYTE store) */
.xs-page .xs-pill--block{border-radius:12px;padding:1rem 1.5rem;font-family:var(--font-display);font-size:1.5rem;box-shadow:var(--shadow-card)}

/* stat value size override used inside report cards */
.xs-page .xs-stat--lead .xs-stat__value{font-size:1.5rem}