/* Fasil home theme — the warm decision-field dark mode is the page's visual reference. */
:root { --home-ink: #1c1710; --home-paper: #f8f4ec; --home-paper-deep: #f3ead9; --home-gold: #9e6f1a; --home-lav: #b3a2cf; }

/* Every readable control inherits the Thmanyah system; headline rules in the templates retain Thmanyah Serif. */
body, button, input, select, textarea { font-family: "ThmanyahSans", sans-serif; }

/* The decision field has a deliberately low-contrast, non-animated paper / starlight texture. */
.t1-decision::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image:
    radial-gradient(circle at 1px 1px, var(--t1-gold-faint) 0.75px, transparent 0.9px),
    linear-gradient(118deg, transparent 0%, color-mix(in srgb, var(--t1-gold) 4%, transparent) 47%, transparent 72%);
  background-size: 18px 18px, 100% 100%; opacity: .42;
}
.t1-stage { isolation: isolate; z-index: 1; }
html[data-theme="dark"] .t1-decision::before { opacity: .5; }

/* Neutral charcoal replaces the old cool navy baseline whenever dark mode is active. */
html[data-theme="dark"] body { background: #181918; }
html[data-theme="dark"] #fl { background: linear-gradient(180deg, #111211 0%, #181918 38%, #111211 100%); }
html[data-theme="dark"] #fl::before {
  background-image:
    linear-gradient(rgba(213,174,97,.026) 1px, transparent 1px),
    linear-gradient(90deg, rgba(213,174,97,.026) 1px, transparent 1px);
}

/* Section two continues the decision field instead of restarting the old blue system. */
.fjoin, .en-join {
  --join-bg: var(--home-paper); --join-card: rgba(255,255,255,.7); --join-edge: rgba(28,23,16,.13);
  --join-ink: var(--home-ink); --join-soft: rgba(28,23,16,.65); --join-gold: var(--home-gold);
  position: relative; isolation: isolate; overflow: hidden; background: var(--join-bg); color: var(--join-ink);
  border-top: 1px solid rgba(158,111,26,.20);
}
.fjoin::before, .en-join::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, rgba(158,111,26,.18) .7px, transparent .85px);
  background-size: 20px 20px; opacity: .32;
}
.fjoin::after, .en-join::after {
  content: ""; position: absolute; top: -1px; inset-inline: clamp(24px, 7vw, 110px); height: 1px;
  background: linear-gradient(90deg, transparent, var(--join-gold), transparent); opacity: .7;
}
html[data-theme="dark"] .fjoin, html[data-theme="dark"] .en-join {
  --join-bg: #181918; --join-card: rgba(35,36,34,.75); --join-edge: rgba(248,244,236,.13);
  --join-ink: #f8f4ec; --join-soft: rgba(248,244,236,.67); --join-gold: #d5ae61;
  border-top-color: rgba(213,174,97,.29);
}
html[data-theme="dark"] .fjoin::before, html[data-theme="dark"] .en-join::before { opacity: .23; }

.fjoin-head, .en-join-head { text-align: start; max-width: 700px; margin-inline: auto; }
.fjoin-title, .en-join-title, .fjoin-card h3, .en-join-card h3 { color: var(--join-ink) !important; }
.fjoin-title em, .en-join-title em { color: var(--join-gold) !important; }
.fjoin-sub, .en-join-sub, .fjoin-card-desc, .en-join-card-desc, .fjoin-perk, .en-join-perk, .fjoin-feat, .en-join-feat, .fjoin-seats-label, .en-join-seats-label, .fjoin-seats-sub, .en-join-seats-sub { color: var(--join-soft) !important; }
.fjoin-card, .en-join-card {
  background: var(--join-card) !important; border-color: var(--join-edge) !important;
  box-shadow: 0 12px 34px rgba(28,23,16,.09) !important;
}
html[data-theme="dark"] .fjoin-card, html[data-theme="dark"] .en-join-card { box-shadow: 0 14px 40px rgba(0,0,0,.24) !important; }
/* Keep the warm charcoal section, while each card retains its earlier individual dark identity. */
html[data-theme="dark"] .fjoin-card, html[data-theme="dark"] .en-join-card { background: rgba(10,16,32,.55) !important; }
html[data-theme="dark"] .fjoin-card.hero, html[data-theme="dark"] .en-join-card.hero { background: rgba(37,38,35,.65) !important; }
html[data-theme="dark"] .fjoin-card.founder, html[data-theme="dark"] .en-join-card.founder { background: rgba(14,12,28,.6) !important; }
html[data-theme="dark"] .fjoin-card.sijal, html[data-theme="dark"] .en-join-card.sijal { background: rgba(2,28,26,.65) !important; }
.fjoin-card.hero, .en-join-card.hero { border-color: color-mix(in srgb, var(--join-gold) 52%, transparent) !important; }
.fjoin-card.founder, .en-join-card.founder { border-color: color-mix(in srgb, var(--home-lav) 42%, transparent) !important; }
.fjoin-divider, .en-join-divider, .fjoin-seats-bar, .en-join-seats-bar { background: color-mix(in srgb, var(--join-ink) 9%, transparent) !important; }
.fjoin-pkg, .en-join-pkg { background: color-mix(in srgb, var(--join-gold) 7%, transparent) !important; border-color: color-mix(in srgb, var(--join-gold) 23%, transparent) !important; }
.fjoin-pkg-name, .en-join-pkg-name, .fjoin-seats-num, .en-join-seats-num { color: var(--join-ink) !important; }
.fjoin-pkg-tokens, .en-join-pkg-tokens { color: var(--join-soft) !important; }
.fjoin-btn.primary, .en-join-btn.primary, .fjoin-btn.sijal-btn, .en-join-btn.sijal-btn { background: var(--join-gold) !important; color: var(--join-bg) !important; }
.fjoin-btn.muted, .en-join-btn.purple { background: color-mix(in srgb, var(--home-lav) 34%, var(--join-card)) !important; color: var(--join-ink) !important; border-color: color-mix(in srgb, var(--home-lav) 58%, transparent) !important; }
.fjoin-btn.ghost, .en-join-btn.ghost { color: var(--join-gold) !important; border-color: color-mix(in srgb, var(--join-gold) 48%, transparent) !important; }
.fjoin-card-icon, .en-join-card-icon, .en-join-icon { color: var(--join-gold) !important; background: color-mix(in srgb, var(--join-gold) 9%, transparent) !important; border-color: color-mix(in srgb, var(--join-gold) 20%, transparent) !important; }
.fjoin-seats-fill, .en-join-seats-fill { background: var(--join-gold) !important; }
.fjoin-bg-icon, .en-join-bg-icon { color: var(--join-gold) !important; opacity: .08 !important; }
.fjoin-badge, .en-join-badge { border-color: color-mix(in srgb, var(--join-gold) 31%, transparent) !important; }

/* Logo files are intentionally inverse: light mark on the dark field, dark mark on the paper field. */
.fasil-float-logo-dark { display: none; }
.fasil-float-logo-light { display: block; }
html[data-theme="dark"] .fasil-float-logo-dark { display: block; }
html[data-theme="dark"] .fasil-float-logo-light { display: none; }

@media (max-width: 860px) {
  .fjoin-head, .en-join-head { text-align: center; }
  .fjoin::after, .en-join::after { inset-inline: 24px; }
}