/* Fortune Gems Guide — page/layout styles for the landing site.
   Product-specific (not part of the shipped token closure). Links the DS
   styles.css for tokens, then layers section layout on top. */

.site { background: var(--surface-canvas); }
.section { padding-block: var(--space-10); }
.section--tight { padding-block: var(--space-9); }
.section--muted { background: var(--surface-muted); }
.section__head { max-width: 720px; margin-bottom: var(--space-7); }
.section__head--center { margin-inline: auto; text-align: center; }
.section__title { font-size: var(--text-2xl); margin-block: var(--space-2) var(--space-3); }
.section__lead { font-size: var(--text-md); color: var(--text-muted); line-height: var(--leading-normal); }
.prose p { font-size: var(--text-md); color: var(--text-body); line-height: var(--leading-relaxed); }
.prose p + p { margin-top: var(--space-4); }

/* ---------- Header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--border-subtle); }
.hdr__bar { display: flex; align-items: center; gap: var(--space-5); height: var(--header-h); }
.hdr__logo { display: flex; align-items: center; }
.hdr__logo img { height: 46px; width: auto; display: block; }
.hdr__nav { display: flex; gap: var(--space-2); margin-left: auto; }
.hdr__nav a { font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-sm);
  color: var(--text-body); padding: 8px 12px; border-radius: var(--radius-pill); transition: color var(--dur-base), background var(--dur-base); }
.hdr__nav a:hover { color: var(--brand-strong); background: var(--emerald-50); text-decoration: none; }
.hdr__tools { display: flex; align-items: center; gap: var(--space-2); }
.hdr__icon { width: 40px; height: 40px; border-radius: var(--radius-pill); border: 1px solid var(--border-subtle);
  background: var(--white); display: grid; place-items: center; cursor: pointer; color: var(--text-body); }
.hdr__icon:hover { border-color: var(--brand); color: var(--brand-strong); }
.hdr__icon svg { width: 18px; height: 18px; }
.hdr__burger { display: none; }
@media (max-width: 1040px) {
  .hdr__nav { display: none; }
  .hdr__burger { display: grid; }
}

/* Header dropdown (Countries) + language menu */
.hdr__dd { position: relative; }
.hdr__ddbtn { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body);
  font-weight: var(--weight-semibold); font-size: var(--text-sm); color: var(--text-body);
  background: none; border: 0; cursor: pointer; padding: 8px 12px; border-radius: var(--radius-pill);
  transition: color var(--dur-base), background var(--dur-base); }
.hdr__ddbtn:hover, .hdr__ddbtn[aria-expanded="true"] { color: var(--brand-strong); background: var(--emerald-50); }
.hdr__ddmenu { position: absolute; top: calc(100% + 8px); left: 0; min-width: 230px; background: var(--white);
  border: 1px solid var(--border-subtle); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 6px; display: none; flex-direction: column; gap: 2px; }
.hdr__ddmenu--right { left: auto; right: 0; }
.hdr__ddmenu[data-open="true"] { display: flex; }
.hdr__ddmenu a { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body);
  padding: 9px 12px; border-radius: var(--radius-sm); }
.hdr__ddmenu a:hover { background: var(--surface-card-soft); color: var(--brand-strong); text-decoration: none; }
.hdr__ddmenu a.is-current { background: var(--emerald-50); color: var(--brand-strong); font-weight: var(--weight-bold); }
.hdr__ddmenu--static { position: static; display: flex; box-shadow: none; border: 0; padding: 0; min-width: 0; }
.hdr__flag { font-size: 1.05em; line-height: 1; margin-right: 8px; font-family: "Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif; }
.hdr__ddbtn .hdr__flag { margin-right: 6px; }
.hdr__lang svg { width: 18px; height: 18px; }
.drawer__group { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--text-muted);
  padding-top: var(--space-3); border: 0; }

/* ---------- Breadcrumb ---------- */
.crumbs { background: var(--surface-muted); border-bottom: 1px solid var(--border-subtle); }
.crumbs__row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-block: var(--space-3);
  font-size: var(--text-sm); }
.crumbs__link { color: var(--text-muted); font-weight: var(--weight-medium); }
.crumbs__link:hover { color: var(--brand-strong); }
.crumbs__sep { color: var(--text-muted); opacity: 0.6; }
.crumbs__cur { color: var(--text-strong); font-weight: var(--weight-semibold); }

/* ---------- Interior page header ---------- */
.pagehead { position: relative; background: var(--grad-hero); color: var(--text-on-dark); overflow: hidden; }
.pagehead::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 60% at 88% -10%, rgba(224,138,46,0.22), transparent 70%); pointer-events: none; }
.pagehead__inner { position: relative; z-index: 1; padding-block: var(--space-9); max-width: var(--container-prose); }
.pagehead h1 { font-size: var(--text-4xl); color: #fff; letter-spacing: var(--tracking-tight); line-height: 1.06; }
.pagehead__lead { font-size: var(--text-md); color: var(--text-on-dark); line-height: var(--leading-relaxed);
  margin-top: var(--space-4); max-width: 56ch; }
@media (max-width: 700px) { .pagehead h1 { font-size: var(--text-3xl); } }

/* Generic content lists used on interior pages */
.clist { display: flex; flex-direction: column; gap: var(--space-3); margin-top: var(--space-4); }
.clist > div { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start;
  font-size: var(--text-base); color: var(--text-body); line-height: var(--leading-snug); }
.clist .pc__mark--pro { background: var(--emerald-500); }
.subgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }

/* ---------- sitemap page ---------- */
.sm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-6); }
.sm-col__h { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--brand-strong);
  padding-bottom: var(--space-3); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--space-3); }
.sm-col__desc { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-normal);
  margin-bottom: var(--space-4); }
.sm-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.sm-list a { font-size: var(--text-base); color: var(--text-body); font-weight: var(--weight-medium); }
.sm-list a:hover { color: var(--brand-strong); }

/* ---------- Real symbol tiles + payout table ---------- */
.symgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 820px) { .symgrid { grid-template-columns: repeat(2, 1fr); } }
.symtile { background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-3); display: flex; flex-direction: column; align-items: center;
  gap: var(--space-2); transition: transform var(--dur-base), box-shadow var(--dur-base); }
.symtile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.symtile__imgwrap { width: 100%; aspect-ratio: 4 / 3; display: grid; place-items: center; padding: var(--space-3);
  background: radial-gradient(120% 120% at 50% 0%, #14342a 0%, #0a241c 60%, #04231c 100%);
  border: 1px solid rgba(224,169,46,0.22); border-radius: var(--radius-md); }
.symtile__img { max-width: 100%; max-height: 100%; filter: drop-shadow(0 6px 12px rgba(0,0,0,0.4)); }
.symtile__name { font-family: var(--font-display); font-weight: var(--weight-bold); color: var(--text-strong); font-size: var(--text-base); }
.symtile__pay { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--brand-strong); }

.paywrap { margin-top: var(--space-7); overflow-x: auto; }
.paytable { width: 100%; border-collapse: collapse; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-card); min-width: 520px; }
.paytable th, .paytable td { text-align: left; padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle); font-size: var(--text-base); color: var(--text-body); vertical-align: middle; }
.paytable th { background: var(--surface-card-soft); font-family: var(--font-display); font-size: var(--text-sm);
  text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--brand-strong); }
.paytable tr:last-child td { border-bottom: 0; }
.paytable__sym { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--weight-semibold); color: var(--text-strong); }
.paytable__thumb { width: 50px; height: 38px; object-fit: contain; padding: 3px; flex: none;
  background: radial-gradient(120% 120% at 50% 0%, #14342a, #04231c); border-radius: 8px; border: 1px solid rgba(224,169,46,0.22); }
.paytable__pay { font-weight: var(--weight-bold); color: var(--brand-strong); white-space: nowrap; }

/* Mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 60; background: var(--surface-overlay); display: none; }
.drawer[data-open="true"] { display: block; }
.drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(320px, 86vw);
  background: var(--white); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2);
  box-shadow: var(--shadow-lg); }
.drawer__panel a { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg);
  color: var(--text-strong); padding: 10px 0; border-bottom: 1px solid var(--border-subtle); }
.drawer__close { align-self: flex-end; }

/* ---------- Hero ---------- */
.hero { position: relative; background: var(--grad-hero); color: var(--text-on-dark); overflow: hidden; }
.hero::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 50% at 15% 110%, rgba(224,169,46,0.18), transparent 70%); pointer-events: none; }
.hero__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: var(--space-8); align-items: center;
  padding-block: var(--space-10); position: relative; z-index: 1; }
.hero__h1 { font-size: var(--text-4xl); color: #fff; letter-spacing: var(--tracking-tight); line-height: 1.05; }
.hero__sub { font-size: var(--text-md); color: var(--text-on-dark); line-height: var(--leading-relaxed);
  margin-top: var(--space-5); max-width: 36ch; }
.hero__cta { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
.hero__disclaimer { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--text-on-dark-muted); display:flex; gap:.5em; align-items:center;}
.hero__disclaimer svg{width:15px;height:15px;flex:none;}
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .hero__h1 { font-size: var(--text-3xl); }
}

/* Hero slot visual */
.reel { position: relative; background: rgba(255,255,255,0.04); border: 1px solid var(--border-on-dark);
  border-radius: var(--radius-xl); padding: var(--space-5); box-shadow: var(--shadow-lg), var(--shadow-glow);
  backdrop-filter: blur(2px); }
.reel__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-4); }
.reel__title { font-family: var(--font-display); font-weight: var(--weight-bold); color: #fff; font-size: var(--text-md); display:flex;align-items:center;gap:.5em;}
.reel__title img{width:24px;height:24px;}
.reel__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.reel__cell { aspect-ratio: 1; border-radius: var(--radius-md); display: grid; place-items: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10); }
.reel__cell img { width: 56%; height: 56%; filter: drop-shadow(0 4px 8px rgba(0,0,0,0.4)); }
.reel__cell--win { border-color: var(--gold-400); box-shadow: 0 0 0 1px var(--gold-400), 0 0 24px rgba(224,169,46,0.5); }
.reel__foot { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-4);
  color: var(--text-on-dark-muted); font-size: var(--text-sm); }
.reel__chip { display: inline-flex; align-items:center; gap:.4em; background: rgba(224,169,46,0.16); color: var(--gold-200);
  padding: 4px 12px; border-radius: var(--radius-pill); font-weight: var(--weight-bold); font-size: var(--text-sm); }

/* Hero gameplay screenshot frame */
.hero-shot { position: relative; border-radius: var(--radius-xl); overflow: hidden;
  border: 1px solid rgba(224,169,46,0.45); box-shadow: var(--shadow-lg), var(--shadow-glow);
  background: rgba(0,0,0,0.2); line-height: 0; }
.hero-shot img { display: block; width: 100%; height: auto; }

/* ---------- Game Info two-col ---------- */
.gameinfo { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: var(--space-7); align-items: start; }
@media (max-width: 820px) { .gameinfo { grid-template-columns: 1fr; } }
.showcase { background: var(--grad-hero); border-radius: var(--radius-xl); padding: var(--space-7);
  display: flex; flex-direction: column; align-items: center; gap: var(--space-4); color: var(--text-on-dark);
  box-shadow: var(--shadow-md); position: relative; overflow: hidden; }
.showcase__gem { width: 120px; height: 120px; filter: drop-shadow(0 12px 22px rgba(0,0,0,0.45)); }
.showcase__row { display: flex; gap: var(--space-3); }
.showcase__row img { width: 46px; height: 46px; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.4)); }
.showcase__cap { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); color: #fff; }
.showcase--shot { padding: var(--space-4); gap: var(--space-3); }
.showcase__shot { width: 100%; border-radius: var(--radius-lg); border: 1px solid rgba(224,169,46,0.4);
  box-shadow: 0 10px 28px rgba(0,0,0,0.35); display: block; }

/* ---------- How to play steps ---------- */
.steps { display: grid; gap: var(--space-4); counter-reset: step; }
.step { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start;
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  padding: var(--space-5); }
.step__num { counter-increment: step; width: 40px; height: 40px; border-radius: var(--radius-pill);
  background: var(--grad-gold); color: var(--text-on-gold); font-family: var(--font-display);
  font-weight: var(--weight-black); display: grid; place-items: center; box-shadow: var(--shadow-gold); }
.step__num::before { content: counter(step); }
.step__text { align-self: center; font-size: var(--text-md); color: var(--text-body); }
.step__text strong { color: var(--text-strong); }
@media (min-width: 720px) { .steps { grid-template-columns: 1fr 1fr; } }

/* ---------- Demo placeholder ---------- */
.demo-card { text-align: center; border: 2px dashed var(--emerald-200); background: var(--surface-card-soft);
  border-radius: var(--radius-xl); padding: var(--space-9) var(--space-6); display: flex; flex-direction: column;
  align-items: center; gap: var(--space-3); }
.demo-card__chest { width: 76px; height: 76px; filter: drop-shadow(0 10px 16px rgba(16,36,29,0.2)); }
.demo-card__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xl); color: var(--text-strong); }
.demo-card__hint { color: var(--text-muted); font-size: var(--text-base); max-width: 44ch; }

/* ---------- Live demo embed ---------- */
.demo-embed { position: relative; width: 100%; max-width: 880px; margin: 0 auto; aspect-ratio: 4 / 3;
  border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border-subtle);
  background: var(--surface-dark); box-shadow: var(--shadow-glow); }
.demo-embed__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.demo-embed__cover { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: var(--space-3); text-align: center; padding: var(--space-6);
  background: var(--grad-hero); color: #fff; }
.demo-embed__chest { width: 84px; height: 84px; filter: drop-shadow(0 12px 20px rgba(0,0,0,0.35)); }
.demo-embed__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-2xl); color: #fff; }
.demo-embed__hint { color: rgba(255,255,255,0.78); font-size: var(--text-base); max-width: 46ch; }
@media (max-width: 640px) { .demo-embed { aspect-ratio: 3 / 4; } }

/* ---------- Generic grids ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 820px) { .grid-3 { grid-template-columns: repeat(2,1fr); } .grid-4 { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .grid-3 { grid-template-columns: 1fr; } }

/* ---------- Pros & Cons ---------- */
.pc { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
@media (max-width: 760px) { .pc { grid-template-columns: 1fr; } }
.pc__col { border-radius: var(--radius-lg); padding: var(--space-6); border: 1px solid; }
.pc__col--pro { background: var(--positive-soft); border-color: var(--emerald-200); }
.pc__col--con { background: var(--negative-soft); border-color: var(--ruby-300); }
.pc__h { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-display);
  font-weight: var(--weight-bold); font-size: var(--text-lg); margin-bottom: var(--space-4); }
.pc__h--pro { color: var(--emerald-700); }
.pc__h--con { color: var(--ruby-700); }
.pc__list { display: flex; flex-direction: column; gap: var(--space-3); }
.pc__item { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start;
  font-size: var(--text-base); color: var(--text-body); line-height: var(--leading-snug); }
.pc__mark { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none;
  font-size: 13px; font-weight: 800; color: #fff; }
.pc__mark--pro { background: var(--emerald-500); }
.pc__mark--con { background: var(--ruby-500); }

/* ---------- Footer ---------- */
.ftr { background: var(--surface-dark); color: var(--text-on-dark); padding-block: var(--space-9) var(--space-7); }
.ftr__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-7); }
@media (max-width: 760px) { .ftr__grid { grid-template-columns: 1fr; gap: var(--space-6); } }
.ftr__logo img { height: 52px; margin-bottom: var(--space-4); }
.ftr__about { color: var(--text-on-dark-muted); font-size: var(--text-sm); line-height: var(--leading-relaxed); max-width: 38ch; }
.ftr__h { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-sm);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: #fff; margin-bottom: var(--space-4); }
.ftr__links { display: flex; flex-direction: column; gap: var(--space-2); }
.ftr__links a { color: var(--text-on-dark-muted); font-size: var(--text-base); }
.ftr__links a:hover { color: var(--brand-on-dark); text-decoration: none; }
.ftr__bottom { border-top: 1px solid var(--border-on-dark); margin-top: var(--space-7); padding-top: var(--space-5);
  display: flex; gap: var(--space-4); justify-content: space-between; flex-wrap: wrap; }
.ftr__disclaimer { color: var(--text-on-dark-muted); font-size: var(--text-xs); max-width: 80ch; line-height: var(--leading-normal); }
.ftr__copy { color: var(--text-on-dark-muted); font-size: var(--text-xs); }

/* ---------- Country guide cards ---------- */
.cguides { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 920px) { .cguides { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .cguides { grid-template-columns: 1fr; } }
.cguide { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5);
  background: var(--surface-card); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); transition: transform var(--dur-base), box-shadow var(--dur-base); }
.cguide:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); text-decoration: none; }
.cguide__flag { font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--brand-strong); }
.cguide__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg);
  color: var(--text-strong); }
.cguide__desc { font-size: var(--text-sm); color: var(--text-muted); line-height: var(--leading-normal); }
.cguide__more { margin-top: auto; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--brand); }

/* ---------- Related guides ---------- */
.related { background: var(--surface-card-soft); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: var(--space-6); }
.related__h { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-md);
  color: var(--text-strong); margin-bottom: var(--space-4); }
.related__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-3); }
.related__item { display: flex; flex-direction: column; gap: 2px; padding: var(--space-4);
  background: var(--white); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
  transition: border-color var(--dur-base), transform var(--dur-base); }
.related__item:hover { border-color: var(--brand); transform: translateY(-2px); text-decoration: none; }
.related__item b { font-family: var(--font-display); font-size: var(--text-base); color: var(--text-strong); }
.related__item span { font-size: var(--text-sm); color: var(--text-muted); }

/* ---------- Improved demo embed ---------- */
.demo-embed { position: relative; width: 100%; max-width: 920px; margin: 0 auto; aspect-ratio: 16 / 10;
  border-radius: var(--radius-xl); overflow: hidden; border: 1px solid rgba(224,169,46,0.4);
  background: var(--surface-dark); box-shadow: var(--shadow-glow); }
.demo-embed__iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.demo-embed__cover, .demo-embed__state { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--space-3); text-align: center; padding: var(--space-6);
  background: var(--grad-hero); color: #fff; }
.demo-embed__chest { width: 84px; height: 84px; filter: drop-shadow(0 12px 20px rgba(0,0,0,0.35)); }
.demo-embed__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-2xl); color: #fff; }
.demo-embed__hint { color: rgba(255,255,255,0.82); font-size: var(--text-base); max-width: 48ch; }
/* Loading state: skeleton + spinner over the iframe until it loads */
.demo-embed__state { background: linear-gradient(180deg, #2a1409, #3d2010); }
.demo-embed__spinner { width: 46px; height: 46px; border-radius: 50%; border: 4px solid rgba(244,198,106,0.25);
  border-top-color: var(--gold-300); animation: fg-spin 0.9s linear infinite; }
@keyframes fg-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .demo-embed__spinner { animation-duration: 2.4s; } }
.demo-embed__tab { margin-top: var(--space-2); }
.demo-embed__open { display: inline-flex; align-items: center; gap: 8px; }
.demo-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-top: var(--space-5); }
.demo-note { text-align: center; margin-top: var(--space-4); color: var(--text-muted); font-size: var(--text-sm);
  max-width: 70ch; margin-inline: auto; }
@media (max-width: 640px) { .demo-embed { aspect-ratio: 3 / 4; } }


/* Static production additions: replaces the browser-side React/Babel UI layer. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border-radius:var(--radius-pill);font-family:var(--font-display);font-weight:var(--weight-bold);border:1px solid transparent;padding:.8rem 1.15rem;text-decoration:none;cursor:pointer;transition:transform var(--dur-base),box-shadow var(--dur-base),background var(--dur-base),color var(--dur-base)}
.btn:hover{transform:translateY(-1px);text-decoration:none}.btn--primary{background:var(--grad-gold);color:var(--text-on-gold);box-shadow:var(--shadow-gold)}.btn--secondary{background:rgba(255,255,255,.08);border-color:var(--border-on-dark);color:#fff}.btn--light{background:var(--white);border-color:var(--border-subtle);color:var(--brand-strong)}.btn--ghost{background:transparent;border-color:var(--border-subtle);color:var(--brand-strong)}
.card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);padding:var(--space-5)}.card--soft{background:var(--surface-card-soft)}.card--hover{transition:transform var(--dur-base),box-shadow var(--dur-base),border-color var(--dur-base)}.card--hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:var(--brand)}
.feature{display:flex;gap:var(--space-4);align-items:flex-start}.feature__icon{width:44px;height:44px;flex:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.12))}.feature__title{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-lg);color:var(--text-strong);margin-bottom:var(--space-2)}.feature__body{color:var(--text-body);font-size:var(--text-base);line-height:var(--leading-normal)}
.info-table{width:100%;border-collapse:collapse;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm)}.info-table th,.info-table td{padding:var(--space-4);text-align:left;border-bottom:1px solid var(--border-subtle);vertical-align:middle}.info-table tr:last-child th,.info-table tr:last-child td{border-bottom:0}.info-table th{width:34%;font-family:var(--font-display);font-size:var(--text-sm);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--brand-strong);background:var(--surface-card-soft)}
.badge{display:inline-flex;align-items:center;border-radius:var(--radius-pill);padding:.25rem .7rem;font-size:var(--text-xs);font-weight:var(--weight-bold);background:var(--emerald-50);color:var(--brand-strong)}.notice{border:1px solid var(--border-subtle);border-left:4px solid var(--brand);border-radius:var(--radius-md);background:var(--surface-card-soft);padding:var(--space-4);color:var(--text-body);line-height:var(--leading-normal)}
.faq{display:flex;flex-direction:column;gap:var(--space-3)}.faq details{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-md);box-shadow:var(--shadow-xs);overflow:hidden}.faq summary{cursor:pointer;list-style:none;font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-md);color:var(--text-strong);padding:var(--space-5)}.faq summary::-webkit-details-marker{display:none}.faq details[open]{border-color:var(--emerald-200);box-shadow:var(--shadow-sm)}.faq p{padding:0 var(--space-5) var(--space-5);color:var(--text-body);line-height:var(--leading-relaxed)}
.hdr__dd:hover .hdr__ddmenu,.hdr__dd:focus-within .hdr__ddmenu{display:flex}.skip{position:absolute;left:-9999px}.skip:focus{left:var(--space-4);top:var(--space-4);z-index:999;background:#fff;padding:var(--space-2);border-radius:var(--radius-sm)}
.link-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--space-4);margin-top:var(--space-5)}.link-card{display:block;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:var(--space-5);box-shadow:var(--shadow-sm)}.link-card:hover{text-decoration:none;border-color:var(--brand);box-shadow:var(--shadow-md)}.link-card b{display:block;font-family:var(--font-display);font-size:var(--text-lg);color:var(--text-strong);margin-bottom:var(--space-2)}.link-card span{color:var(--text-muted);font-size:var(--text-sm);line-height:var(--leading-normal)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}@media(max-width:760px){.two-col{grid-template-columns:1fr}.hero__sub{max-width:100%}.hdr__logo img{height:38px}.hdr__bar{gap:var(--space-3)}}
.legal-page .prose{max-width:var(--container-prose)}.legal-page h2{margin-top:var(--space-6);margin-bottom:var(--space-3)}.legal-page ul{line-height:var(--leading-relaxed);color:var(--text-body)}
.demo-embed__state[hidden],.demo-embed__iframe[hidden]{display:none}.demo-embed__iframe{background:#160e09}.demo-js-note{font-size:var(--text-xs);color:var(--text-muted);text-align:center;margin-top:var(--space-3)}


/* ---------- Symbol gallery ---------- */
.symbol-gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--space-3);margin:var(--space-6) 0 var(--space-5)}
.symbol-card{margin:0;padding:var(--space-3);border:1px solid var(--emerald-200);border-radius:var(--radius-lg);background:var(--surface-card);text-align:center;box-shadow:0 10px 22px rgba(16,36,29,.08)}
.symbol-card img{width:74px;height:74px;object-fit:contain;margin:0 auto var(--space-2);display:block;filter:drop-shadow(0 8px 12px rgba(16,36,29,.14))}
.symbol-card figcaption{font-weight:var(--weight-bold);font-size:var(--text-sm);color:var(--text-strong)}
.sitemap-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}
.sitemap-block{background:var(--surface-card);border:1px solid var(--emerald-200);border-radius:var(--radius-xl);padding:var(--space-6);box-shadow:0 14px 30px rgba(16,36,29,.08)}
.sitemap-block h2{font-family:var(--font-display);font-size:var(--text-xl);margin:0 0 var(--space-2);color:var(--text-strong)}
.sitemap-block p{margin:0 0 var(--space-3);color:var(--text-muted)}
.sitemap-block ul{margin:0;padding-left:1.1rem}.sitemap-block li{margin:.45rem 0}.sitemap-block a{font-weight:var(--weight-bold)}
@media(max-width:760px){.symbol-gallery{grid-template-columns:repeat(3,minmax(0,1fr))}.sitemap-grid{grid-template-columns:1fr}}
@media(max-width:420px){.symbol-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.symbol-card img{width:64px;height:64px}}