/* Athena Bitcoin Safety Questions
   The STOP! block for the Help Center.

   Every measurement below was read off the live Browse By Topic section on
   athenabtc.co/help-center/ rather than guessed, because this block sits
   directly underneath it and the two have to read as one thing:

     card      white, 1px #E2E2DC, 3px radius, padding 28 26 26
     hover     lift 4px, shadow rgba(11,11,12,.1) 0 14px 34px, border to ink
     icon      52 by 52 gold tile, 3px radius, artwork 30 by 30
     title     Poppins 21 600, -.01em, 1.25, gold on hover
     question  Roboto 15 400, 1.6, #55555E
     label     Poppins 12 600, .1em, uppercase
     grid      three columns, 18px gap, two at 1023, one at 767

   Everything is scoped to .ath-sf. Nothing here reaches the rest of the site
   and nothing on the site reaches in. */

.ath-sf,.ath-sf *,.ath-sf *::before,.ath-sf *::after{box-sizing:border-box}

/* Breakdance lays a section out as a flex column that does not stretch its
   children. */
.bde-code-block:has(> .ath-sf),
.bde-shortcode:has(> .ath-sf){width:100%;align-self:stretch}

.ath-sf{
  --sf-ink:#0B0B0C;
  --sf-gold:#FFC04A;
  --sf-line:#E2E2DC;
  --sf-body:#55555E;
  --sf-stone:#F0F0EA;
  --sf-white:#FFFFFF;
  /* White by default. Settings has a switch to put it back on stone. */
  --sf-page:var(--sf-white);
  /* The height of a Browse By Topic card, measured on the live page: 28 top
     padding + 52 icon + 20 + 26 title + 8 + 72 for three lines of question
     + 18 + 23 label + 26 bottom padding + 2 border. Used as a floor so these
     read as the same size as the ones above even when the wording is shorter.
     A longer question still makes the card taller. */
  --sf-card-min:275px;
  display:block;width:100%;
  background:var(--sf-page);
  font-family:Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;
  color:var(--sf-ink);
}
.ath-sf.is-stone{--sf-page:var(--sf-stone)}

/* No max-width and no side padding, which is not an oversight. The Browse By
   Topic block does exactly this: its own inner computes to max-width:none and
   padding 78px 0 88px, and all of its width comes from the Breakdance section
   round it, whose container is 1406px with 25px of side padding. That is how
   its cards come out 440px across. So this block takes its width from its
   section too. Put the shortcode in a section with the SAME settings as the
   one above it and the two line up to the pixel. */
.ath-sf .sf-in{max-width:none;margin:0 auto;padding:78px 0 88px}

/* ----------------------------------------------------------------- TOP */
.ath-sf .sf-top{text-align:center;margin-bottom:34px}
.ath-sf .sf-shield{display:flex;justify-content:center;margin-bottom:26px}
.ath-sf .sf-shield img{height:clamp(86px,8vw,124px);width:auto;display:block}
.ath-sf .sf-shield--inline{color:var(--sf-ink)}
.ath-sf .sf-shield--inline.is-gold{color:var(--sf-gold)}
.ath-sf .sf-shield--inline svg{height:clamp(86px,8vw,124px);width:auto;display:block}

.ath-sf .sf-eyebrow{margin-bottom:24px}
.ath-sf .sf-eyebrow span{
  display:inline-block;padding:14px 26px;
  border:1px solid var(--sf-gold);background:var(--sf-ink);
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:12.5px;font-weight:600;line-height:1;
  letter-spacing:.24em;text-transform:uppercase;color:var(--sf-gold);
}
.ath-sf .sf-stop{
  margin:0 0 10px;
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:700;font-size:clamp(44px,5.6vw,88px);line-height:1;
  letter-spacing:-.04em;color:var(--sf-ink);
}
/* h2.sf-h, not .sf-h. Breakdance sets a font AND a colour on h1 to h6
   outright, and a rule naming the element beats one that is only inherited. */
.ath-sf h2.sf-h{
  margin:0 auto;max-width:22ch;padding:0;
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:600;font-size:clamp(29px,3.3vw,52px);line-height:1.04;
  letter-spacing:-.04em;color:var(--sf-ink);text-wrap:balance;
}
.ath-sf .sf-sub{
  margin:20px auto 0;max-width:72ch;
  font-family:Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:400;font-size:clamp(15px,1.15vw,17px);line-height:1.55;
  color:var(--sf-body);text-wrap:pretty;
}

/* --------------------------------------------------------------- CARDS */
/* counter-reset here and counter-increment on the card is what numbers them,
   so adding a seventh question or reordering renumbers the lot on its own. */
.ath-sf .sf-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px;
  counter-reset:sf;
}

/* On a white background this border is the only thing separating a card from
   the page, so it is not decoration. Do not lighten it. */
.ath-sf .sf-card{
  counter-increment:sf;
  min-height:var(--sf-card-min);
  display:flex;flex-direction:column;align-items:flex-start;
  background:var(--sf-white);border:1px solid var(--sf-line);border-radius:3px;
  padding:28px 26px 26px;color:var(--sf-ink);text-decoration:none;
  transition:transform .18s,box-shadow .18s,border-color .18s;
}
/* Every card lifts, linked or not. The first version only lifted the ones with
   a link, on the reasoning that something reacting to your pointer promises to
   do something when clicked. Fine in the abstract and wrong here: every card
   in the block above lifts, and a flat row reads as broken. */
.ath-sf .sf-card:hover,
.ath-sf .sf-card:focus-visible{
  transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(11,11,12,.10);
  border-color:var(--sf-ink);
  text-decoration:none;
}
.ath-sf a.sf-card:focus-visible{outline:2px solid var(--sf-ink);outline-offset:3px}

/* Themes love to recolour links. Every state is nailed down so a card reads as
   a card rather than as a blue link that happens to be in a box. */
.ath-sf a.sf-card,
.ath-sf a.sf-card:link,
.ath-sf a.sf-card:visited,
.ath-sf a.sf-card:hover,
.ath-sf a.sf-card:focus,
.ath-sf a.sf-card:active{color:var(--sf-ink);text-decoration:none}
.ath-sf a.sf-card .sf-q{color:var(--sf-body)}
.ath-sf a.sf-card .sf-cta{color:var(--sf-ink)}
.ath-sf .sf-card:hover .sf-t,
.ath-sf .sf-card:focus-visible .sf-t{color:var(--sf-gold)}

.ath-sf .sf-ico{
  flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:52px;height:52px;background:var(--sf-gold);border-radius:3px;
}
/* A card with no icon yet keeps the tile's space and draws nothing in it.
   Without this the card is 72px shorter than the ones above, the row goes
   ragged, and it silently fixes itself the moment an icon is picked, which is
   a confusing thing to debug. */
.ath-sf .sf-ico.is-empty{background:none}

/* An Athena icon is written into the page rather than linked, so these can
   reach it. The files carry a palette of --color0 to --color5 and paint
   themselves from it; every one is set to ink here, which is what turns a
   muted multicolour glyph into the same solid near black as the icons above.
   currentColor is set too, because some of the files use that instead. */
.ath-sf .sf-ico svg{
  width:30px;height:30px;display:block;overflow:visible;
  color:var(--sf-ink);
  --color0:var(--sf-ink); --color1:var(--sf-ink); --color2:var(--sf-ink);
  --color3:var(--sf-ink); --color4:var(--sf-ink); --color5:var(--sf-ink);
}
.ath-sf .sf-ico svg [fill]:not([fill="none"]){fill:var(--sf-ink)}
.ath-sf .sf-ico img{width:30px;height:30px;object-fit:contain;display:block}

.ath-sf .sf-t{
  display:block;margin-top:20px;
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:21px;font-weight:600;letter-spacing:-.01em;line-height:1.25;
  color:inherit;transition:color .18s;
}
.ath-sf .sf-q{
  display:block;margin:8px 0 0;
  font-family:Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;font-weight:400;line-height:1.6;color:var(--sf-body);
  text-wrap:pretty;
}
.ath-sf .sf-cta{
  display:block;margin-top:18px;
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sf-ink);
}
/* No arrow. These cards mostly do not go anywhere, and an arrow is a promise
   of somewhere to go. */
.ath-sf .sf-cta--auto::before{content:attr(data-word) " " counter(sf,decimal-leading-zero)}

/* The dark card. Same treatment the FAQs card uses in Browse By Topic. */
.ath-sf .sf-card--dark{background:var(--sf-ink);border-color:var(--sf-ink);color:var(--sf-white)}
.ath-sf .sf-card--dark .sf-q{color:#C9C9CF}
.ath-sf .sf-card--dark .sf-cta{color:var(--sf-gold)}
.ath-sf a.sf-card--dark,
.ath-sf a.sf-card--dark:link,
.ath-sf a.sf-card--dark:visited,
.ath-sf a.sf-card--dark:hover,
.ath-sf a.sf-card--dark:focus,
.ath-sf a.sf-card--dark:active{color:var(--sf-white)}
.ath-sf a.sf-card--dark .sf-q{color:#C9C9CF}
.ath-sf a.sf-card--dark .sf-cta{color:var(--sf-gold)}
.ath-sf .sf-card--dark:hover,
.ath-sf .sf-card--dark:focus-visible{
  box-shadow:0 14px 34px rgba(11,11,12,.24);border-color:var(--sf-ink);
}
.ath-sf a.sf-card--dark:focus-visible{outline-color:var(--sf-gold)}

/* ---------------------------------------------------------------- BAND */
.ath-sf .sf-band{
  display:flex;align-items:center;justify-content:space-between;
  gap:28px;flex-wrap:wrap;margin-top:18px;
  padding:clamp(26px,2.6vw,34px) clamp(28px,3vw,44px);
  background:var(--sf-gold);
}
.ath-sf .sf-band-t{
  margin:0;flex:1 1 320px;max-width:56ch;
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:600;font-size:clamp(16px,1.4vw,22px);line-height:1.35;
  letter-spacing:-.02em;color:var(--sf-ink);
}
.ath-sf .sf-call{
  display:inline-flex;align-items:center;gap:12px;
  padding:16px 30px;background:var(--sf-ink);
  font-family:Poppins,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:600;font-size:clamp(15px,1.2vw,18px);line-height:1;
  letter-spacing:-.01em;text-decoration:none;
  transition:background .18s;
}
.ath-sf a.sf-call,
.ath-sf a.sf-call:link,
.ath-sf a.sf-call:visited,
.ath-sf a.sf-call:hover,
.ath-sf a.sf-call:focus,
.ath-sf a.sf-call:active{color:var(--sf-white);text-decoration:none}
.ath-sf .sf-call:hover{background:#000}
.ath-sf .sf-call:focus-visible{outline:2px solid var(--sf-ink);outline-offset:3px}

.ath-sf .sf-empty{
  margin:30px 0 0;padding:18px 20px;
  border:1px dashed #C9C9C2;background:var(--sf-stone);
  font-size:15px;color:var(--sf-body);
}

/* ---------------------------------------------------------- RESPONSIVE */
/* The same three widths Browse By Topic uses, so the two sections always
   change shape on the same line. Side padding stays at 0 at every width: the
   section container's own 25px does that job for both blocks. */
@media (max-width:1023px){
  .ath-sf .sf-in{padding:60px 0 68px}
  .ath-sf .sf-grid{grid-template-columns:repeat(2,1fr)}
  .ath-sf .sf-stop{font-size:clamp(40px,7vw,62px)}
  .ath-sf h2.sf-h{font-size:clamp(26px,4.4vw,38px);max-width:26ch}
  .ath-sf .sf-band{gap:20px}
}
@media (max-width:767px){
  .ath-sf .sf-in{padding:48px 0 56px}
  .ath-sf .sf-grid{grid-template-columns:1fr;gap:14px;margin-top:24px}
  .ath-sf .sf-card{padding:24px 22px 22px}
  .ath-sf .sf-t{font-size:20px;margin-top:18px}
  .ath-sf .sf-shield img,.ath-sf .sf-shield--inline svg{height:74px}
  .ath-sf .sf-stop{font-size:38px}
  .ath-sf h2.sf-h{font-size:26px;max-width:22ch}
  .ath-sf .sf-sub{font-size:15px}
  .ath-sf .sf-eyebrow span{padding:12px 20px;font-size:11.5px;letter-spacing:.2em}
  .ath-sf .sf-band{flex-direction:column;align-items:stretch;text-align:left;padding:24px 22px}
  .ath-sf .sf-call{justify-content:center;width:100%;padding:16px 22px}
}
@media (max-width:400px){
  .ath-sf h2.sf-h{font-size:23px}
  .ath-sf .sf-stop{font-size:34px}
}

/* Browse By Topic drops the lift for anyone who has asked their machine to
   stop moving things. This does the same, so the two still agree. */
@media (prefers-reduced-motion:reduce){
  .ath-sf .sf-card,.ath-sf .sf-t,.ath-sf .sf-call{transition:none}
  .ath-sf .sf-card:hover,
  .ath-sf .sf-card:focus-visible{transform:none}
}