/* ==========================================================================
   Flip-a-Coin — main.css
   Mobile-first. No framework. Loaded after style.css (design tokens).
   ========================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; }
}
body{
  margin:0;
  font-family:var(--fac-font-body);
  font-size:var(--fac-text-body);
  color:var(--fac-color-text);
  background:var(--fac-color-bg);
  line-height:1.6;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:var(--fac-color-primary); text-decoration:none; }
a:hover{ text-decoration:underline; }
:focus-visible{ outline:3px solid var(--fac-color-primary); outline-offset:2px; border-radius:4px; }

.screen-reader-text{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.fac-skip-link{
  position:absolute; left:-999px; top:0; z-index:1000;
  background:var(--fac-color-primary); color:#fff; padding:var(--fac-space-3) var(--fac-space-4);
  border-radius:0 0 var(--fac-radius-sm) 0;
}
.fac-skip-link:focus{ left:0; }

.fac-container{ max-width:var(--fac-container); margin-inline:auto; padding-inline:var(--fac-space-4); }
@media (min-width:768px){ .fac-container{ padding-inline:var(--fac-space-8); } }

h1,h2,h3,h4{ font-family:var(--fac-font-display); line-height:1.2; margin:0 0 var(--fac-space-4); color:var(--fac-color-secondary); }
h1{ font-size:var(--fac-text-h1); }
h2{ font-size:var(--fac-text-h2); }
h3{ font-size:var(--fac-text-h3); }
h4{ font-size:var(--fac-text-h4); }
p{ margin:0 0 var(--fac-space-4); color:var(--fac-color-text); }
.fac-section-title{ text-align:center; margin-bottom:var(--fac-space-8); }

/* Buttons */
.fac-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--fac-space-2);
  font-weight:600; font-size:var(--fac-text-body); padding:var(--fac-space-3) var(--fac-space-6);
  border-radius:var(--fac-radius-full); border:2px solid transparent; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  text-decoration:none; min-height:44px;
}
.fac-btn:hover{ text-decoration:none; transform:translateY(-1px); }
.fac-btn--primary{ background:var(--fac-color-primary); color:#fff; box-shadow:var(--fac-shadow-sm); }
.fac-btn--primary:hover{ background:var(--fac-color-primary-dark); box-shadow:var(--fac-shadow-md); }
.fac-btn--ghost{ background:transparent; border-color:var(--fac-color-border); color:var(--fac-color-text); }
.fac-btn--ghost:hover{ border-color:var(--fac-color-primary); color:var(--fac-color-primary); }
.fac-btn--lg{ padding:var(--fac-space-4) var(--fac-space-8); font-size:1.125rem; }
.fac-btn--icon{ padding:var(--fac-space-2); border-radius:var(--fac-radius-full); border-color:var(--fac-color-border); background:transparent; }
.fac-btn--icon.is-active{ color:var(--fac-color-primary); border-color:var(--fac-color-primary); }
.fac-chip{
  border:2px solid var(--fac-color-border); background:var(--fac-color-bg); border-radius:var(--fac-radius-full);
  padding:var(--fac-space-2) var(--fac-space-4); font-weight:600; cursor:pointer; min-height:40px;
}
.fac-chip:hover{ border-color:var(--fac-color-primary); color:var(--fac-color-primary); }

/* ==========================================================================
   Header
   ========================================================================== */
.fac-header{ position:sticky; top:0; z-index:100; background:rgba(255,255,255,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--fac-color-border); }
.fac-header__inner{ display:flex; align-items:center; justify-content:space-between; padding-block:var(--fac-space-3); gap:var(--fac-space-4); }
.fac-header__logo{ display:flex; align-items:center; }
.fac-logo{ height:28px; width:auto; }
.fac-header__toggle{ background:none; border:0; padding:var(--fac-space-2); cursor:pointer; color:var(--fac-color-secondary); }
.fac-nav{
  position:fixed; inset:0 0 0 auto; width:min(320px,85vw); background:var(--fac-color-bg);
  transform:translateX(100%); transition:transform .25s ease; padding:var(--fac-space-8) var(--fac-space-6);
  box-shadow:var(--fac-shadow-lg); overflow-y:auto;
}
.fac-header.is-nav-open .fac-nav{ transform:translateX(0); }
.fac-nav__list{ list-style:none; margin:0 0 var(--fac-space-6); padding:0; display:flex; flex-direction:column; gap:var(--fac-space-4); }
.fac-nav__list a{ color:var(--fac-color-secondary); font-weight:600; }
.fac-nav__cta{ width:100%; }

@media (min-width:1024px){
  .fac-header__toggle{ display:none; }
  .fac-nav{ position:static; width:auto; transform:none; box-shadow:none; padding:0; display:flex; align-items:center; gap:var(--fac-space-6); }
  .fac-nav__list{ flex-direction:row; gap:var(--fac-space-6); margin:0; }
}

/* ==========================================================================
   Hero + Coin tool
   ========================================================================== */
.fac-hero{ padding-block:var(--fac-space-16) var(--fac-space-8); text-align:center; }
.fac-hero__inner{ max-width:var(--fac-content); }
.fac-hero__subtitle{ font-size:1.125rem; color:var(--fac-color-text-muted); }
.fac-hero__actions{ display:flex; flex-wrap:wrap; gap:var(--fac-space-4); justify-content:center; margin-top:var(--fac-space-6); }

.fac-coin-section{ padding-block:var(--fac-space-8) var(--fac-space-16); }
.fac-coin-app{ max-width:480px; margin-inline:auto; text-align:center; }
.fac-coin-stage{ perspective:1000px; margin-bottom:var(--fac-space-6); }
.fac-coin{
  position:relative; width:160px; height:160px; margin-inline:auto; border-radius:50%;
  border:0; background:transparent; cursor:pointer; transform-style:preserve-3d; padding:0;
}
.fac-coin__face{
  position:absolute; inset:0; border-radius:50%; display:flex; align-items:center; justify-content:center;
  backface-visibility:hidden; box-shadow:var(--fac-shadow-md); font-family:var(--fac-font-display);
}
.fac-coin__face--heads{ background:linear-gradient(160deg,#FFD65C,var(--fac-color-accent)); color:var(--fac-color-secondary); }
.fac-coin__face--tails{ background:linear-gradient(160deg,var(--fac-color-secondary),#1B2740); color:var(--fac-color-accent); transform:rotateY(180deg); }
.fac-coin__label{ font-size:3rem; font-weight:700; }
.fac-coin.is-flipping{ animation:fac-flip .55s ease-in-out; }
.fac-coin.is-tails{ transform:rotateY(180deg); }
@keyframes fac-flip{
  0%{ transform:rotateY(0) translateY(0); }
  50%{ transform:rotateY(720deg) translateY(-40px); }
  100%{ transform:rotateY(1080deg) translateY(0); }
}
@media (prefers-reduced-motion: reduce){
  .fac-coin.is-flipping{ animation:none; }
}
.fac-coin-instructions{ color:var(--fac-color-text-muted); font-size:var(--fac-text-small); }

.fac-coin-controls{ display:flex; gap:var(--fac-space-3); justify-content:center; flex-wrap:wrap; margin-bottom:var(--fac-space-6); }
.fac-coin-result{ min-height:3rem; margin-bottom:var(--fac-space-8); }
.fac-coin-result__value{ display:inline-block; font-family:var(--fac-font-display); font-size:2rem; font-weight:700; color:var(--fac-color-primary); }
.fac-coin-result__placeholder{ color:var(--fac-color-text-muted); }

.fac-coin-multi{ background:var(--fac-color-bg-alt); border-radius:var(--fac-radius-lg); padding:var(--fac-space-6); }
.fac-coin-multi__title{ font-size:var(--fac-text-h4); margin-bottom:var(--fac-space-4); }
.fac-coin-multi__buttons{ display:flex; gap:var(--fac-space-2); flex-wrap:wrap; justify-content:center; margin-bottom:var(--fac-space-4); }
.fac-coin-multi__custom input{ width:90px; padding:var(--fac-space-2) var(--fac-space-3); border-radius:var(--fac-radius-full); border:2px solid var(--fac-color-border); min-height:40px; }
.fac-coin-stats__row{ display:flex; justify-content:space-between; padding:var(--fac-space-1) 0; }
.fac-coin-stats__bar{ height:10px; border-radius:var(--fac-radius-full); background:var(--fac-color-secondary); overflow:hidden; margin-top:var(--fac-space-2); }
.fac-coin-stats__bar span{ display:block; height:100%; background:var(--fac-color-accent); transition:width .3s ease; }
.fac-coin-history{ margin-top:var(--fac-space-6); text-align:left; }
.fac-coin-history ol{ display:flex; flex-wrap:wrap; gap:var(--fac-space-2); list-style:none; padding:0; margin-top:var(--fac-space-3); }
.fac-coin-history li{ background:var(--fac-color-bg-alt); border-radius:var(--fac-radius-sm); padding:var(--fac-space-1) var(--fac-space-3); font-size:var(--fac-text-small); }

/* ==========================================================================
   How it works / info / features / use-cases / FAQ
   ========================================================================== */
.fac-how{ padding-block:var(--fac-space-16); background:var(--fac-color-bg-alt); }
.fac-how__steps{ list-style:none; margin:0; padding:0; display:grid; gap:var(--fac-space-8); counter-reset:step; }
.fac-how__num{ display:inline-flex; align-items:center; justify-content:center; width:40px; height:40px; border-radius:50%; background:var(--fac-color-primary); color:#fff; font-weight:700; margin-bottom:var(--fac-space-3); }
@media (min-width:768px){ .fac-how__steps{ grid-template-columns:repeat(3,1fr); } }

.fac-info{ padding-block:var(--fac-space-16); }
.fac-info__inner{ max-width:var(--fac-content); }
.fac-info__block{ margin-bottom:var(--fac-space-8); }

.fac-features{ padding-block:var(--fac-space-16); background:var(--fac-color-bg-alt); }
.fac-features__grid{ display:grid; gap:var(--fac-space-6); grid-template-columns:1fr; }
@media (min-width:640px){ .fac-features__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .fac-features__grid{ grid-template-columns:repeat(4,1fr); } }
.fac-card{ background:var(--fac-color-bg); border:1px solid var(--fac-color-border); border-radius:var(--fac-radius-md); padding:var(--fac-space-6); box-shadow:var(--fac-shadow-sm); }

.fac-usecases{ padding-block:var(--fac-space-16); }
.fac-usecases__list{ max-width:var(--fac-content); margin-inline:auto; display:grid; gap:var(--fac-space-3); list-style:none; padding:0; }
.fac-usecases__list li{ padding-left:var(--fac-space-6); position:relative; }
.fac-usecases__list li::before{ content:"✓"; position:absolute; left:0; color:var(--fac-color-primary); font-weight:700; }

.fac-faq{ padding-block:var(--fac-space-16); background:var(--fac-color-bg-alt); }
.fac-faq__list{ max-width:var(--fac-content); margin-inline:auto; }
.fac-faq__item{ border-bottom:1px solid var(--fac-color-border); }
.fac-faq__question{
  width:100%; text-align:left; background:none; border:0; padding:var(--fac-space-4) 0; font-weight:600;
  display:flex; justify-content:space-between; align-items:center; cursor:pointer; color:var(--fac-color-secondary); font-size:1rem;
}
.fac-faq__question[aria-expanded="true"] svg{ transform:rotate(180deg); }
.fac-faq__answer{ padding-bottom:var(--fac-space-4); color:var(--fac-color-text-muted); }

.fac-related{ padding-block:var(--fac-space-16); }
.fac-related__grid{ display:grid; gap:var(--fac-space-6); grid-template-columns:1fr; }
@media (min-width:768px){ .fac-related__grid{ grid-template-columns:repeat(3,1fr); } }
.fac-post-card{ border:1px solid var(--fac-color-border); border-radius:var(--fac-radius-md); overflow:hidden; }
.fac-post-card__media img{ aspect-ratio:16/10.5; object-fit:cover; }
.fac-post-card__body{ padding:var(--fac-space-4); }
.fac-post-card__cat{ font-size:var(--fac-text-caption); text-transform:uppercase; letter-spacing:.04em; color:var(--fac-color-primary); font-weight:700; }
.fac-post-card__meta{ font-size:var(--fac-text-small); color:var(--fac-color-text-muted); display:flex; gap:var(--fac-space-2); }

.fac-final-cta{ padding-block:var(--fac-space-16); background:var(--fac-color-secondary); color:var(--fac-color-text-inverse); text-align:center; }
.fac-final-cta__inner h2{ color:#fff; }
.fac-final-cta__inner p{ color:var(--fac-color-text-inverse); opacity:.8; }

/* Footer */
.fac-footer{ border-top:1px solid var(--fac-color-border); padding-block:var(--fac-space-12) var(--fac-space-6); background:var(--fac-color-bg-alt); }
.fac-footer__inner{ display:grid; gap:var(--fac-space-8); grid-template-columns:1fr; }
@media (min-width:768px){ .fac-footer__inner{ grid-template-columns:2fr 1fr 1fr; } }
.fac-footer__desc{ color:var(--fac-color-text-muted); max-width:32ch; }
.fac-footer__list{ list-style:none; padding:0; margin:0; display:grid; gap:var(--fac-space-2); }
.fac-footer__list a{ color:var(--fac-color-text); }
.fac-footer__bottom{ margin-top:var(--fac-space-8); padding-top:var(--fac-space-6); border-top:1px solid var(--fac-color-border); font-size:var(--fac-text-small); color:var(--fac-color-text-muted); }

/* Ad slot: stable dimensions to avoid CLS */
.fac-ad-slot{ max-width:728px; min-height:90px; margin:var(--fac-space-8) auto; background:var(--fac-color-bg-alt); border:1px dashed var(--fac-color-border); border-radius:var(--fac-radius-sm); display:flex; align-items:center; justify-content:center; }

/* Breadcrumbs */
.fac-breadcrumbs{ padding-block:var(--fac-space-4); font-size:var(--fac-text-small); color:var(--fac-color-text-muted); }
.fac-breadcrumbs ol{ list-style:none; display:flex; flex-wrap:wrap; gap:var(--fac-space-1); padding:0; margin:0; }
.fac-breadcrumbs li:not(:last-child)::after{ content:"/"; margin-left:var(--fac-space-1); }

/* Generic page/blog layout */
.fac-page{ padding-block:var(--fac-space-8) var(--fac-space-16); }
.fac-page__title{ max-width:var(--fac-content); }
.fac-page__content{ max-width:var(--fac-content); }
.fac-blog-archive__layout{ display:grid; gap:var(--fac-space-8); grid-template-columns:1fr; }
@media (min-width:1024px){ .fac-blog-archive__layout{ grid-template-columns:2.5fr 1fr; } }
.fac-post-grid{ display:grid; gap:var(--fac-space-6); grid-template-columns:1fr; }
@media (min-width:640px){ .fac-post-grid{ grid-template-columns:repeat(2,1fr); } }

/* Single post */
.fac-single{ padding-block:var(--fac-space-8) var(--fac-space-16); }
.fac-single__title{ max-width:var(--fac-content); }
.fac-single__meta{ display:flex; flex-wrap:wrap; gap:var(--fac-space-2); color:var(--fac-color-text-muted); font-size:var(--fac-text-small); margin-bottom:var(--fac-space-6); }
.fac-single__media img{ border-radius:var(--fac-radius-lg); aspect-ratio:4/3; object-fit:cover; }
.fac-single__layout{ display:grid; gap:var(--fac-space-8); grid-template-columns:1fr; margin-top:var(--fac-space-8); }
@media (min-width:1024px){ .fac-single__layout{ grid-template-columns:2.5fr 1fr; } }
.fac-single__content{ max-width:var(--fac-content); }
.fac-toc{ background:var(--fac-color-bg-alt); border-radius:var(--fac-radius-md); padding:var(--fac-space-4) var(--fac-space-6); margin-bottom:var(--fac-space-8); }
.fac-toc ol{ margin:0; padding-left:var(--fac-space-4); }
.fac-author-box{ display:flex; gap:var(--fac-space-4); align-items:flex-start; border-top:1px solid var(--fac-color-border); padding-top:var(--fac-space-6); margin-top:var(--fac-space-8); }
.fac-author-box img{ border-radius:50%; }
.fac-post-nav{ display:flex; justify-content:space-between; gap:var(--fac-space-4); margin-top:var(--fac-space-8); flex-wrap:wrap; }

/* Search + 404 */
.fac-search-form{ display:flex; gap:var(--fac-space-2); max-width:480px; margin-block:var(--fac-space-6); }
.fac-search-form__input{ flex:1; padding:var(--fac-space-3) var(--fac-space-4); border-radius:var(--fac-radius-full); border:2px solid var(--fac-color-border); min-height:44px; }
.fac-search-form__button{ background:var(--fac-color-primary); color:#fff; border:0; border-radius:50%; width:44px; height:44px; cursor:pointer; }
.fac-404{ text-align:center; padding-block:var(--fac-space-24) var(--fac-space-16); }
.fac-404__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:var(--fac-space-4); margin-block:var(--fac-space-8); }

/* Utility: no horizontal overflow anywhere */
.fac-container, .fac-post-grid, .fac-features__grid{ max-width:100%; }