/* The feature pages, on the home page's ground (about.css): a header, a
   sticky row of pages and themes, then the real blocks in cards. */

html{scroll-snap-type:none}
.features .top{position:sticky; height:72px; padding-block:0; pointer-events:auto;
  background:color-mix(in srgb, var(--deck-inverse-sheet) 84%, transparent); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px)}
.features .brand{color:#fff}
.top-link.on{color:#fff; box-shadow:0 2px 0 var(--deck-primary)}

.fx{max-width:1180px; margin:0 auto; padding:0 clamp(16px, 4vw, 40px)}
.fx .label{margin:0 0 14px; font-family:var(--deck-font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#b9a6ff}
.fx h1,.fx h2,.fx h3{margin:0; font-family:var(--deck-font-display); font-weight:800; letter-spacing:-0.035em}

.fx-head{padding:64px 0 32px}
.fx-head h1{font-size:clamp(40px, 6vw, 76px); line-height:1}
.fx-lead{margin:20px 0 0; max-width:720px; font-size:clamp(17px, 1.4vw, 19px); line-height:1.55; color:var(--deck-inverse-muted)}

/* Sticky under the top bar: the feature pages, and the theme the blocks
   are drawn in. */
.fx-sub{position:sticky; top:72px; z-index:10; display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 calc(-1 * clamp(16px, 4vw, 40px));
  padding:10px clamp(16px, 4vw, 40px); background:color-mix(in srgb, var(--deck-inverse-sheet) 84%, transparent);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid rgba(255,255,255,.07)}
.fx-sub a{padding:8px 14px; border-radius:999px; font-size:14px; font-weight:600; text-decoration:none; color:var(--deck-inverse-muted)}
.fx-sub a:hover{color:#fff}
.fx-sub a.on{color:#fff; background:color-mix(in srgb, var(--deck-primary) 32%, transparent)}
.fx-sp{flex:1}
.fx-themes{display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:13px; color:var(--deck-inverse-faint)}
.fx-themes-name{margin-right:4px}
.fx-themes-name b{color:#fff; font-weight:600}
.fx-sw{width:20px; height:20px; padding:0; border:0; border-radius:6px; cursor:pointer; background:var(--sw); box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.fx-sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--deck-inverse-sheet), 0 0 0 4px #b9a6ff}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}

.fx-group{padding:56px 0 8px; scroll-margin-top:140px}
.fx-group h2{font-size:clamp(26px, 3vw, 34px)}
.fx-line{margin:8px 0 0; color:var(--deck-inverse-muted)}
.fx-grid{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:20px; margin-top:28px}
@media (max-width: 760px){ .fx-grid{grid-template-columns:minmax(0, 1fr)} }

.fx-block{display:flex; flex-direction:column; border-radius:16px; overflow:hidden; background:#12142a; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08); scroll-margin-top:140px}
.fx-block.wide{grid-column:1 / -1}
.fx-pic{flex:1; display:flex; align-items:center; background:#fff}
.fx-pic iframe{display:block; width:100%; height:240px; border:0; background:transparent}
.fx-meta{display:flex; flex-wrap:wrap; align-items:flex-start; gap:14px; padding:16px 20px 18px}
.fx-meta > div{flex:1; min-width:200px}
.fx-meta h3{font-size:18px; margin-bottom:4px}
.fx-meta p{margin:0; font-size:14px; line-height:1.5; color:var(--deck-inverse-muted)}
.fx-json{flex-basis:auto}
.fx-json summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px;
  font-family:var(--deck-font-mono); font-size:12px; color:#c7b8ff; box-shadow:inset 0 0 0 1px rgba(185,166,255,.35)}
.fx-json summary::-webkit-details-marker{display:none}
.fx-json summary:hover{color:#fff}
.fx-json .ph{width:14px; height:14px}
.fx-json[open]{flex-basis:100%}
.fx-json pre{margin:12px 0 0; padding:14px 16px; border-radius:10px; background:#070818; color:#cfd1e6; font-family:var(--deck-font-mono);
  font-size:12px; line-height:1.55; max-height:320px; overflow:auto; white-space:pre-wrap; word-break:break-word}

/* Themes: a row per direction, three whole slides each. */
.fx-dirs{display:grid; gap:44px; margin-top:32px}
.fx-dir header{display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 12px; margin-bottom:16px}
.fx-dir h3{font-size:24px}
.fx-dir header p{flex-basis:100%; margin:0; font-size:15px; color:var(--deck-inverse-muted)}
.fx-plan{padding:3px 10px; border-radius:999px; font-family:var(--deck-font-mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--deck-inverse-muted); box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.fx-plan.pro{color:#fff; background:linear-gradient(100deg, var(--deck-primary), var(--deck-secondary))}
.fx-slides{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px}
@media (max-width: 760px){ .fx-slides{grid-template-columns:minmax(0, 1fr)} }
.fx-slide{margin:0}
.fx-slide iframe{display:block; width:100%; aspect-ratio:16 / 9; height:auto; border:0; border-radius:10px; background:rgba(255,255,255,.04)}
.fx-slide figcaption,.fx-shot figcaption,.fx-term figcaption{margin-top:8px; font-size:13px; color:var(--deck-inverse-faint)}

.fx-two{display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:20px; margin-top:28px; align-items:start}
@media (max-width: 900px){ .fx-two{grid-template-columns:minmax(0, 1fr)} }
.fx-shot,.fx-term{margin:0}
.fx-shot img{display:block; width:100%; height:auto; border-radius:14px; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -30px rgba(0,0,0,.8)}
.fx-term pre{margin:0; padding:16px 18px; background:#070818; color:#cfd1e6; font-family:var(--deck-font-mono); font-size:12.5px; line-height:1.6;
  white-space:pre-wrap; word-break:break-word; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.fx-term pre:first-child{border-radius:14px 14px 0 0; color:#a9abbf}
.fx-term pre.out{border-radius:0 0 14px 14px; border-top:1px solid rgba(255,255,255,.08)}
.fx-term .p{color:#b9a6ff}
.fx-term .e{color:#ff9db0}
.fx-term .c{color:var(--deck-inverse-faint); font-style:italic}
.fx-term .ok{color:#7ee2a8}

.fx-sets{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:20px 28px; margin-top:36px}
@media (max-width: 760px){ .fx-sets{grid-template-columns:minmax(0, 1fr)} }
.fx-sets h3,.fx-facts h3{font-size:17px; margin-bottom:6px}
.fx-sets p,.fx-facts p{margin:0; font-size:14.5px; line-height:1.55; color:var(--deck-inverse-muted)}
.fx-facts{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:16px; margin-top:64px}
@media (max-width: 900px){ .fx-facts{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (max-width: 520px){ .fx-facts{grid-template-columns:minmax(0, 1fr)} }
.fx-facts > div{padding:20px; border-radius:16px; background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}

/* Docs: the doc as readers see it, or its Markdown, in the same box. */
.fx-tabs{display:inline-flex; gap:4px; padding:4px; border-radius:999px; background:rgba(255,255,255,.05); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.fx-tabs button{padding:9px 16px; border:0; border-radius:999px; background:none; font:inherit; font-size:14px; font-weight:600; color:var(--deck-inverse-muted); cursor:pointer}
.fx-tabs button:hover{color:#fff}
.fx-tabs button[aria-selected="true"]{color:#fff; background:color-mix(in srgb, var(--deck-primary) 32%, transparent)}
.fx-doc{margin-top:16px; height:min(780px, 78vh); border-radius:16px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -30px rgba(0,0,0,.8)}
.fx-doc[hidden]{display:none}
.fx-doc iframe{display:block; width:100%; height:100%; border:0; background:#fff}
.fx-doc pre{margin:0; height:100%; overflow:auto; padding:24px 28px; background:#070818; color:#cfd1e6; font-family:var(--deck-font-mono); font-size:13px; line-height:1.65; white-space:pre-wrap; word-break:break-word}

/* Dossiers: the landing page beside what makes it. */
.fx-two.wide-left{grid-template-columns:minmax(0, 1.5fr) minmax(0, 1fr); margin-top:0}
@media (max-width: 900px){ .fx-two.wide-left{grid-template-columns:minmax(0, 1fr)} }
.fx-two.wide-left .fx-doc{margin-top:0}
.fx-parts{display:grid; gap:20px; padding:8px 0}
.fx-parts h3{font-size:17px; margin-bottom:4px}
.fx-parts p{margin:0; font-size:14.5px; line-height:1.55; color:var(--deck-inverse-muted)}
.fx-term.solo{margin-top:24px}
.fx-term.solo pre.out{border-radius:14px; border-top:0; font-size:13px}

/* Sharing: the card at its own size, scaled to the column (features.js),
   and the gate in a box of its own. */
.fx-fit{position:relative; aspect-ratio:1200 / 630; border-radius:14px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -30px rgba(0,0,0,.8)}
.fx-fit iframe{position:absolute; top:0; left:0; width:1200px; height:630px; border:0; transform-origin:0 0; pointer-events:none}
.fx-gate{height:420px; border-radius:14px; overflow:hidden; box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -30px rgba(0,0,0,.8)}
.fx-gate iframe{display:block; width:100%; height:100%; border:0}
.fx-table{width:100%; margin-top:28px; border-collapse:collapse; font-size:15px}
.fx-table th,.fx-table td{padding:14px 12px; text-align:left; vertical-align:top; border-bottom:1px solid rgba(255,255,255,.08)}
.fx-table thead th{font-family:var(--deck-font-mono); font-size:11px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; color:var(--deck-inverse-faint)}
.fx-table tbody th{font-weight:600; color:#fff; white-space:nowrap}
.fx-table td{color:var(--deck-inverse-muted); line-height:1.5}
.fx-table td:last-child{width:1%}
@media (max-width: 600px){ .fx-table tbody th{white-space:normal} .fx-table th,.fx-table td{padding:12px 6px} }

/* For agents: an exchange, call then answer, numbered. */
.fx-steps{list-style:none; margin:28px 0 0; padding:0; display:grid; gap:18px}
.fx-steps li{display:grid; grid-template-columns:36px minmax(0, 1fr); gap:14px; align-items:start}
.fx-n{display:grid; place-items:center; width:32px; height:32px; border-radius:50%; font-family:var(--deck-font-mono); font-size:13px; color:#fff;
  background:color-mix(in srgb, var(--deck-primary) 40%, transparent)}
.fx-steps pre{margin:0; padding:12px 16px; font-family:var(--deck-font-mono); font-size:12.5px; line-height:1.6; white-space:pre-wrap; word-break:break-word}
.fx-steps pre.call{border-radius:12px 12px 0 0; background:#070818; color:#cfd1e6; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.fx-steps pre.ans{border-radius:0 0 12px 12px; background:rgba(255,157,176,.08); color:#ff9db0; box-shadow:inset 0 0 0 1px rgba(255,157,176,.18)}
.fx-steps pre.ans.ok{background:rgba(126,226,168,.08); color:#7ee2a8; box-shadow:inset 0 0 0 1px rgba(126,226,168,.2)}
.fx-term.solo figcaption{margin-top:8px; font-size:13px; color:var(--deck-inverse-faint)}

/* Free and Pro: two columns, Pro lit. */
.fx-compare{margin-top:8px; table-layout:fixed}
.fx-compare thead th{font-family:var(--deck-font-display); font-size:22px; font-weight:800; letter-spacing:-0.02em; text-transform:none; color:#fff}
.fx-compare thead th:first-child{width:28%}
.fx-compare td:last-child,.fx-compare thead th:last-child{width:36%; background:color-mix(in srgb, var(--deck-primary) 10%, transparent)}
.fx-compare thead th:last-child{border-radius:14px 14px 0 0}
.fx-compare td{color:var(--deck-inverse-text)}
.fx-compare tbody th{white-space:normal}
.fx-compare .fx-price td b{font-family:var(--deck-font-display); font-size:28px; font-weight:800; letter-spacing:-0.03em; color:#fff; margin-right:6px}
.fx-compare .fx-price td span{display:block; margin-top:4px; font-size:13px; color:var(--deck-inverse-muted)}
.fx-beta{margin:24px 0 0; padding:16px 20px; border-radius:14px; background:color-mix(in srgb, var(--deck-secondary) 12%, transparent); color:var(--deck-inverse-text); font-size:15px}
.fx-beta b{color:#fff}
.fx-vat{margin:12px 0 0; font-size:12.5px; color:var(--deck-inverse-faint)}

.fx-around{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:72px}
@media (max-width: 760px){ .fx-around{grid-template-columns:1fr} }
.fx-around > div{padding:22px; border-radius:16px; background:rgba(255,255,255,.035); box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.fx-around h3{font-size:20px; margin-bottom:8px}
.fx-around p{margin:0; font-size:14.5px; line-height:1.55; color:var(--deck-inverse-muted)}

.fx-cta{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; margin:90px 0 110px; padding:clamp(24px, 4vw, 44px); border-radius:22px;
  background:linear-gradient(120deg, color-mix(in srgb, var(--deck-primary) 22%, transparent), color-mix(in srgb, var(--deck-secondary) 18%, transparent) 55%, color-mix(in srgb, var(--deck-tertiary) 16%, transparent));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.fx-cta h2{font-size:clamp(26px, 3vw, 34px)}