/*!
 * SLABVAULT card articles — page chrome around the body copy.
 *
 * Two pieces, card-post only (every selector is gated on .sv-card-tpl):
 *   1. .sv-secnav  sticky section nav, built by card-nav.js from the h2s
 *   2. .sv-promo   coupon + referral block moved from the fixed bottom bar into
 *                  the middle of the article, where readers actually are. The
 *                  bottom bar (.om-bar) is hidden here; its markup and the
 *                  site-wide script that drives the modals stay untouched, and
 *                  these buttons just forward the click to them.
 *
 * Header colours live in site-header.css; the article design system lives in
 * the generated card.css. This file is hand-maintained.
 */

/* ==========================================================================
   1. sticky section nav
   ========================================================================== */
/* position:sticky only works if nothing above it is a scroll container. The
   theme guards against horizontal overflow with overflow:hidden on .wrapper and
   on #content, and hidden makes both exactly that. clip keeps the guard without
   the scroll container; engines too old for clip ignore this and keep today's
   behaviour (nav simply does not stick). */
.sv-card-tpl .wrapper,
.sv-card-tpl main.sv-card-main{overflow:clip!important}

.sv-card-tpl .sv-secnav{
  position:sticky;top:0;z-index:60;
  background:#0E1013;
  border-bottom:1px solid rgba(227,178,74,.30);
  box-shadow:0 10px 26px rgba(10,12,16,.28);
}
@supports (backdrop-filter:blur(10px)){
  .sv-card-tpl .sv-secnav{background:rgba(14,16,19,.92);backdrop-filter:blur(12px)}
}
.sv-card-tpl .sv-secnav-track{
  max-width:1120px;margin:0 auto;padding:0 22px;
  display:flex;align-items:stretch;gap:4px;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
  scroll-behavior:smooth;
}
.sv-card-tpl .sv-secnav-track::-webkit-scrollbar{display:none}
.sv-card-tpl .sv-secnav-link{
  flex:0 0 auto;display:inline-flex;align-items:center;
  padding:15px 14px;border-bottom:2px solid transparent;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  font-size:.86rem;font-weight:700;letter-spacing:.01em;line-height:1.2;
  color:#B9BDC7;text-decoration:none;white-space:nowrap;
  transition:color .16s ease,border-color .16s ease;
}
.sv-card-tpl .sv-secnav-link:hover{color:#F1CD73}
.sv-card-tpl .sv-secnav-link.is-active{color:#F1CD73;border-bottom-color:#E3B24A}
/* sections must clear the sticky bar when jumped to */
.sv-card-tpl .sv-article section[id],
.sv-card-tpl .sv-article h2[id]{scroll-margin-top:64px}
@media (max-width:768px){
  .sv-card-tpl .sv-secnav-track{padding:0 12px;gap:2px}
  .sv-card-tpl .sv-secnav-link{padding:13px 10px;font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){
  .sv-card-tpl .sv-secnav-track{scroll-behavior:auto}
}

/* ==========================================================================
   2. in-article coupon + referral block
   ========================================================================== */
/* the fixed bottom bar is redundant once the offers are in the body */
.sv-card-tpl .om-bar{display:none!important}

/* Dead overlays. Both are BlogData chrome opened from the theme header, and the
   card template does not render that header — the page ships them with zero
   triggers, each sitting at z-index 99999 over the whole viewport. Verified on
   3798: 0 matching toggles in the DOM. */
.sv-card-tpl .bs-offcanvas,
.sv-card-tpl .search-popup{display:none!important}

/* Card articles keep exactly one floating control: back-to-top. The app
   download FAB, the full-screen app modal and the UX fab stack all go — the app
   still has its two store badges in the footer, and a long read should not be
   covered on arrival. card-ui.js removes them from the DOM as well, and clears
   the popup's once-a-day flag so other pages still get their turn. */
.sv-card-tpl #om-appfab,
.sv-card-tpl #om-appmodal-ov,
.sv-card-tpl #om-appmodal,
.sv-card-tpl #om-popup-ov,
.sv-card-tpl #omux-fabwrap{display:none!important}
/* The bar's dismiss button is a sibling of the bar inside #om-promo-widget, so
   hiding the bar leaves it stranded in the corner. The widget itself must stay:
   the coupon and referral modals the in-article buttons open live inside it. */
.sv-card-tpl #om-close-btn{display:none!important}

/* Back-to-top — the one floating control card articles keep.
   The theme draws its arrow with Font Awesome, which this page never loads, so
   the glyph resolves to an empty ::before and the button renders as a bare
   magenta disc. The arrow is drawn here instead (masked inline SVG, no font
   dependency) and the disc joins the ink + gold palette. */
.sv-card-tpl .bs_upscr{
  background:rgba(14,16,19,.94)!important;
  border:1px solid rgba(227,178,74,.42)!important;border-radius:50%!important;
  box-shadow:0 8px 22px rgba(10,12,16,.34)!important;
  transition:border-color .16s ease,transform .16s ease}
.sv-card-tpl .bs_upscr:hover{border-color:#E3B24A!important;transform:translateY(-2px)}
.sv-card-tpl .bs_upscr i{display:none!important}
.sv-card-tpl .bs_upscr::after{
  content:"";position:absolute;inset:0;background:#F1CD73;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V6M5.5 12.5L12 6l6.5 6.5'/%3E%3C/svg%3E") center/17px 17px no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V6M5.5 12.5L12 6l6.5 6.5'/%3E%3C/svg%3E") center/17px 17px no-repeat}

.sv-card-tpl .sv-promo{
  background:linear-gradient(180deg,#171A21 0%,#0E1013 100%);
  border-top:1px solid rgba(227,178,74,.28);border-bottom:1px solid rgba(227,178,74,.28);
  padding:46px 0;color:#ECEAE3;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif}
.sv-card-tpl .sv-promo-inner{
  max-width:1120px;margin:0 auto;padding:0 22px;
  display:grid;grid-template-columns:1.15fr .85fr;gap:20px;align-items:stretch}
.sv-card-tpl .sv-promo-card{
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-radius:18px;padding:24px;display:flex;flex-direction:column;gap:14px}
.sv-card-tpl .sv-promo-eyebrow{
  font-weight:800;letter-spacing:.16em;text-transform:uppercase;font-size:.7rem;color:#F1CD73;margin:0}
.sv-card-tpl .sv-promo-title{
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;font-weight:800;
  font-size:clamp(1.3rem,2.2vw,1.7rem);line-height:1.15;margin:0;color:#fff}
.sv-card-tpl .sv-promo-desc{margin:0;color:#A7ABB6;font-size:.95rem;line-height:1.6}
.sv-card-tpl .sv-promo-desc b{color:#F1CD73}

.sv-card-tpl .sv-promo-coupons{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.sv-card-tpl .sv-promo-chip{
  display:flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.07);border:1px solid rgba(227,178,74,.34);
  border-radius:12px;padding:9px 13px;white-space:nowrap}
.sv-card-tpl .sv-promo-chip-val{font-weight:900;color:#F1CD73;font-size:1.02rem;line-height:1}
.sv-card-tpl .sv-promo-chip-txt{display:flex;flex-direction:column;gap:2px;line-height:1.15}
.sv-card-tpl .sv-promo-chip-name{font-weight:700;font-size:.82rem;color:#ECEAE3}
.sv-card-tpl .sv-promo-chip-cond{font-size:.72rem;color:#8E93A0}

/* referral steps */
.sv-card-tpl .sv-promo-steps{display:flex;gap:10px;margin:0;padding:0;list-style:none;flex-wrap:wrap}
.sv-card-tpl .sv-promo-steps li{
  flex:1 1 30%;min-width:96px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.10);
  border-radius:12px;padding:10px 12px;font-size:.78rem;line-height:1.35;color:#B9BDC7}
.sv-card-tpl .sv-promo-steps b{display:block;color:#F1CD73;font-size:.9rem;margin-bottom:3px}

.sv-card-tpl .sv-promo-act{margin-top:auto;display:flex}
.sv-card-tpl .sv-promo-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:14px 26px;border-radius:999px;border:0;cursor:pointer;
  font-family:inherit;font-weight:800;font-size:1rem;line-height:1;text-decoration:none;
  transition:transform .16s ease,filter .16s ease}
.sv-card-tpl .sv-promo-btn:hover{transform:translateY(-2px)}
.sv-card-tpl .sv-promo-btn--gold{
  background:linear-gradient(135deg,#F1CD73,#E3B24A 55%,#A97C24);color:#2A1E05;
  box-shadow:0 10px 30px rgba(196,140,32,.34)}
.sv-card-tpl .sv-promo-btn--ghost{
  background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.24)}
.sv-card-tpl .sv-promo-btn--ghost:hover{border-color:#E3B24A;color:#F1CD73}

@media (max-width:900px){
  .sv-card-tpl .sv-promo-inner{grid-template-columns:1fr}
}
@media (max-width:560px){
  .sv-card-tpl .sv-promo{padding:34px 0}
  .sv-card-tpl .sv-promo-inner{padding:0 16px;gap:14px}
  .sv-card-tpl .sv-promo-card{padding:18px}
  .sv-card-tpl .sv-promo-btn{width:100%}
}

/* ==========================================================================
   3. design-system corrections
   ========================================================================== */
/* card.css sets .sv-article a{color:inherit} (0,0,1,1), which outranks
   .sv-btn{color:var(--fg)} (0,0,1,0) — so every button was painting its label
   with the inherited text colour instead of its own: gold buttons came out
   near-white, red ones came out near-black. Restore the variant's colour. */
.sv-card-tpl .sv-article .sv-btn{color:var(--fg)}

/* Grid items default to min-width:auto, so a single nowrap chip inside the hero
   was setting the column's minimum width — 412px of content in a 382px phone
   viewport, with the overflow silently clipped by the ancestors' overflow:clip.
   Letting the items shrink below their content width fixes the whole column. */
.sv-card-tpl .sv-article .sv-hero-grid > *,
.sv-card-tpl .sv-article .sv-promo-inner > *{min-width:0}
.sv-card-tpl .sv-article .sv-hero h1,
.sv-card-tpl .sv-article .sv-hero .sv-lede{overflow-wrap:break-word}
@media (max-width:560px){
  .sv-card-tpl .sv-article .sv-badge-row{display:flex;flex-wrap:wrap;gap:8px}
  .sv-card-tpl .sv-article .sv-badge-row > *{white-space:normal}
  /* .sv-flex has no wrap, so a pair of buttons side by side runs off a phone */
  .sv-card-tpl .sv-article .sv-flex{flex-wrap:wrap}
}

/* The CTA band is full-bleed by design, but its content was running the whole
   viewport width — 1712px headlines on a 2560px screen. Keep the background
   edge to edge and hold the content to the same 1120px column as the article. */
.sv-card-tpl .sv-article .sv-cta-band{
  padding-block:44px;
  padding-inline:max(22px, calc((100% - 1120px) / 2));
  gap:40px}
.sv-card-tpl .sv-article .sv-cta-band > :last-child{justify-self:end;align-self:center}
@media (max-width:820px){
  .sv-card-tpl .sv-article .sv-cta-band{grid-template-columns:1fr!important;gap:22px}
  .sv-card-tpl .sv-article .sv-cta-band > :last-child{justify-self:start}
  /* The decorative disc is a 240px circle pinned at right:-60px. On a phone that
     sticks out past the viewport and the whole page gains a horizontal scroll,
     so it is dropped rather than clipped. */
  .sv-card-tpl .sv-article .sv-cta-band::after{display:none}
}