/* The channel directory and each channel's page (zip 247, preview 247 approved 9 Oct 2026). Every class starts cx- so
   nothing here meets a homepage section class (the .s3 clash that broke the country cards). */
.cx-hero { position:relative; overflow:hidden; background:var(--black); color:var(--on-dark); padding:54px 0 46px; }
.cx-hero::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:44px 44px; -webkit-mask-image:radial-gradient(ellipse at 30% 40%, #000 30%, transparent 75%); mask-image:radial-gradient(ellipse at 30% 40%, #000 30%, transparent 75%); pointer-events:none; }
.cx-hero::after { content:''; position:absolute; right:-120px; top:-80px; width:620px; height:520px; background:radial-gradient(closest-side, rgba(31,91,255,.22), transparent 70%); animation:cxdrift 14s ease-in-out infinite alternate; pointer-events:none; }
@keyframes cxdrift { to { transform:translate(-80px, 60px); } }
.cx-hero .in { position:relative; z-index:1; display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; }
.cx-crumb { font-size:12.5px; color:var(--on-dark-muted); margin-bottom:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cx-crumb a:hover { color:#fff; } .cx-crumb span { margin:0 6px; color:#3a4558; }
.cx-kw { font-size:13px; font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-muted); }
.cx-title { display:block; font-size:44px; line-height:1.1; font-weight:300; color:#fff; margin:12px 0 14px; letter-spacing:-.01em; }
.cx-title em { font-style:normal; color:var(--yel); }
.cx-lead { color:#aeb8c6; font-size:15.5px; max-width:540px; }
.cx-cta { display:flex; gap:10px; margin-top:22px; position:relative; z-index:1; }
.cx-facts { display:grid; grid-template-columns:repeat(4, 1fr); gap:1px; background:#1b2230; border:1px solid #1b2230; border-radius:var(--r); overflow:hidden; margin-top:26px; max-width:580px; }
.cx-facts div { background:#0a0e16; padding:12px 14px; min-width:0; }
.cx-facts .k { display:block; font-size:11px; color:#6b778a; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; }
.cx-facts .v { display:block; font-size:17px; color:#fff; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.cx-live { background:rgba(12,16,24,.88); border:1px solid var(--panel-line); border-radius:var(--r); overflow:hidden; box-shadow:0 30px 80px rgba(0,0,0,.45); }
.cx-live .hd { display:flex; align-items:center; gap:8px; padding:11px 14px; border-bottom:1px solid var(--panel-line); font-size:12px; color:var(--on-dark-muted); white-space:nowrap; }
.cx-live .hd i { width:7px; height:7px; border-radius:50%; background:var(--green); animation:cxpulse 1.6s infinite; }
@keyframes cxpulse { 50% { opacity:.3; } }
.cx-live .hd .r { margin-left:auto; font-family:'IBM Plex Mono', monospace; color:#5f6b7d; }
.cx-tick { height:300px; overflow:hidden; }
.cx-tick .row { display:grid; grid-template-columns:44px 1fr 64px; gap:10px; align-items:center; padding:10px 14px; border-bottom:1px solid #141a25; font-size:13px; white-space:nowrap; }
.cx-tick .row.fresh { animation:cxrin .5s ease; }
@keyframes cxrin { from { opacity:0; transform:translateY(-8px); } }
.cx-tick .row:hover { background:#0f1522; }
.cx-tick .ccode { background:#141c2e; color:#9fb6ff; }
.cx-tick .nm { overflow:hidden; text-overflow:ellipsis; color:var(--on-dark); min-width:0; }
.cx-tick .nm span { display:block; color:#7b8798; font-size:12px; overflow:hidden; text-overflow:ellipsis; }
.cx-tick .bar { height:4px; border-radius:4px; background:#1b2230; overflow:hidden; } .cx-tick .bar b { display:block; height:100%; background:var(--yel); font-weight:400; }
.cx-now { padding:18px; }
.cx-now .lbl { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#6b778a; }
.cx-now .tt { font-size:22px; color:#fff; margin:6px 0 2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cx-now .tm { color:var(--on-dark-muted); font-size:13px; font-family:'IBM Plex Mono', monospace; }
.cx-prog { height:6px; background:#1b2230; border-radius:6px; margin:14px 0 6px; overflow:hidden; } .cx-prog b { display:block; height:100%; background:linear-gradient(90deg, var(--yel), #ffe766); font-weight:400; transition:width 1s linear; }
.cx-next { border-top:1px solid var(--panel-line); }
.cx-next div { display:grid; grid-template-columns:58px 1fr auto; gap:10px; align-items:center; padding:10px 18px; border-bottom:1px solid #141a25; font-size:13px; white-space:nowrap; }
.cx-next .t { font-family:'IBM Plex Mono', monospace; color:var(--on-dark-muted); } .cx-next .n { color:var(--on-dark); overflow:hidden; text-overflow:ellipsis; }
.cx-live-b { background:#fff1f1; color:#b42318; }

.cx-s { padding:56px 0; } .cx-s.alt { background:var(--alt); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.cx-s .sh code { font-family:'IBM Plex Mono', monospace; font-size:12.5px; }
.cx-search { display:grid; grid-template-columns:1fr 220px 170px; gap:10px; }
.cx-search input, .cx-search select { height:44px; border:1px solid var(--line); border-radius:var(--r); padding:0 14px; font:inherit; background:#fff; color:var(--ink); min-width:0; }
.cx-search input:focus, .cx-search select:focus { outline:2px solid rgba(31,91,255,.2); border-color:var(--blue); }
.cx-search .btn { height:44px; min-width:0; }
.cx-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.cx-chip { height:30px; display:inline-flex; align-items:center; padding:0 12px; border:1px solid var(--line); border-radius:30px; font-size:12.5px; color:var(--text); background:#fff; white-space:nowrap; }
.cx-chip.on, .cx-chip:hover { border-color:var(--blue); color:var(--blue); }
.cx-chip .n { color:var(--muted); margin-left:6px; font-variant-numeric:tabular-nums; }
.cx-count { margin:18px 0 10px; color:var(--muted); font-size:13px; }

.cx-cgrid { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.cx-cc { border:1px solid var(--line); border-radius:var(--r); background:#fff; padding:14px 16px; display:grid; grid-template-columns:auto 1fr; gap:8px 12px; align-items:center; min-height:92px; min-width:0; transition:border-color .15s, box-shadow .15s; }
.cx-cc:hover { border-color:var(--blue); box-shadow:0 6px 20px rgba(31,91,255,.08); }
.cx-cc:hover .ccode { background:var(--blue); color:#fff; }
.cx-cc .nm { font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cx-cc .meta { grid-column:1 / -1; display:grid; grid-template-columns:1fr auto; gap:8px 10px; align-items:center; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cx-cc .go { color:var(--blue); }
.cx-cc .bar { grid-column:1 / -1; height:4px; border-radius:4px; background:#eef2f8; overflow:hidden; } .cx-cc .bar b { display:block; height:100%; background:var(--blue); font-weight:400; }

.cx-sub { display:block; color:var(--muted); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:420px; }
.cx-mut { color:var(--muted); }
.cx-wrap { white-space:normal !important; line-height:1.45; padding-top:9px !important; padding-bottom:9px !important; height:auto !important; }
.cx-wrap .cx-sub { white-space:normal; max-width:520px; }
.cx-mini { display:inline-block; width:64px; height:4px; border-radius:4px; background:#eef1f5; vertical-align:middle; margin-left:8px; overflow:hidden; } .cx-mini b { display:block; height:100%; background:var(--yel); font-weight:400; }
.cx-acts { display:inline-grid; grid-template-columns:96px 96px; gap:6px; }
.cx-acts .btn { height:30px; min-width:0; font-size:12px; padding:0; }
.cmp tr.cx-more td { background:#fffdf3; color:#7a5b00; }

.cx-days { display:grid; grid-template-columns:repeat(9, 1fr) 1.4fr; gap:8px; margin-bottom:14px; }
.cx-day { height:56px; border:1px solid var(--line); border-radius:var(--r); background:#fff; display:grid; place-content:center; text-align:center; white-space:nowrap; min-width:0; overflow:hidden; }
.cx-day .a { font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; } .cx-day .b { font-size:13.5px; }
.cx-day:hover { border-color:var(--blue); }
.cx-day.on { border-color:var(--black); background:var(--black); color:#fff; } .cx-day.on .a { color:var(--on-dark-muted); }
.cx-day.arch { border-style:dashed; background:#fffdf3; } .cx-day.arch .a { color:#7a5b00; }

.cx-split { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.cx-code { background:#0a0e16; border:1px solid #1b2230; border-radius:var(--r); overflow:hidden; color:#c9d3e0; min-width:0; }
.cx-tabs { display:flex; border-bottom:1px solid #1b2230; }
.cx-tabs button { flex:0 0 100px; height:40px; background:none; border:0; border-right:1px solid #1b2230; color:var(--on-dark-muted); font:inherit; font-size:12.5px; cursor:pointer; white-space:nowrap; }
.cx-tabs button.on { color:#fff; background:#111827; box-shadow:inset 0 -2px 0 var(--yel); }
.cx-tabs .cp { margin-left:auto; border-left:1px solid #1b2230; border-right:0; }
.cx-code pre { padding:16px 18px; font-family:'IBM Plex Mono', monospace; font-size:12.5px; line-height:1.65; height:320px; overflow-y:auto; overflow-x:hidden; white-space:pre-wrap; overflow-wrap:anywhere; word-break:break-word; scrollbar-width:thin; scrollbar-color:#2a3446 transparent; }
.cx-code pre::-webkit-scrollbar { width:8px; height:8px; } .cx-code pre::-webkit-scrollbar-track { background:transparent; } .cx-code pre::-webkit-scrollbar-thumb { background:#2a3446; border-radius:8px; border:2px solid transparent; background-clip:padding-box; } .cx-code pre::-webkit-scrollbar-thumb:hover { background-color:#3a4760; }
.cx-code pre[hidden] { display:none; }
.cx-code .k { color:#9fb6ff; } .cx-code .s1 { color:#86efac; } .cx-code .c1 { color:#5f6b7d; } .cx-code .n1 { color:#fcd34d; }
.cx-ft { display:flex; gap:16px; padding:9px 16px; border-top:1px solid #1b2230; font-size:12px; color:#6b778a; white-space:nowrap; overflow:hidden; }
.cx-ft .ok { color:#86efac; }

.cx-tt { display:grid; grid-template-columns:.9fr 1.1fr; gap:16px; align-items:start; }
.cx-panel { border:1px solid var(--line); border-radius:var(--r); background:#fff; padding:20px; }
.cx-years { display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; margin:16px 0; }
.cx-yr { display:block; border:1px solid var(--line); border-radius:8px; padding:10px; background:#fff; }
.cx-yr:hover { border-color:var(--blue); }
.cx-yr .y { display:block; font-size:18px; font-variant-numeric:tabular-nums; } .cx-yr .d { display:block; font-size:11.5px; color:var(--muted); white-space:nowrap; }
.cx-yr.on { border-color:var(--blue); box-shadow:inset 0 0 0 1px var(--blue); }
.cx-yr .bar { display:block; height:4px; border-radius:4px; background:#eef1f5; margin-top:8px; overflow:hidden; } .cx-yr .bar b { display:block; height:100%; background:var(--blue); font-weight:400; }
.cx-date { display:grid; grid-template-columns:1fr 170px; gap:10px; }
.cx-date input { height:40px; border:1px solid var(--line); border-radius:var(--r); padding:0 12px; font:inherit; min-width:0; }
.cx-date .btn { min-width:0; }
.cx-lock { display:flex; align-items:center; gap:12px; margin-top:12px; padding:12px 14px; border-radius:var(--r); background:#fffbe6; border:1px solid #f1e3a0; font-size:13px; color:#5c4b00; }
.cx-lock .btn { margin-left:auto; height:32px; min-width:120px; font-size:12.5px; flex:none; }

.cx-eps { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.cx-ep { border:1px solid var(--line); border-radius:var(--r); background:#fff; padding:16px; display:grid; grid-template-rows:auto auto 1fr auto; gap:8px; min-height:196px; min-width:0; transition:border-color .15s; }
.cx-ep:hover { border-color:var(--blue); }
.cx-ep .tp { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.cx-ep .mt { font-family:'IBM Plex Mono', monospace; font-size:10px; width:44px; text-align:center; padding:2px 0; border-radius:5px; background:#eef3ff; color:#1f4fd8; }
.cx-ep .nm { font-size:15px; }
.cx-ep .ds { color:var(--muted); font-size:13px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.cx-ep .pa { font-family:'IBM Plex Mono', monospace; font-size:11.5px; color:#46536a; background:var(--alt); border-radius:6px; padding:4px 8px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.cx-plans { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.cx-plan { border:1px solid var(--line); border-radius:var(--r); background:#fff; padding:18px; display:grid; grid-template-rows:auto auto auto 1fr auto; gap:8px; min-height:260px; }
.cx-plan.pick { border-color:var(--black); box-shadow:0 10px 30px rgba(3,5,10,.08); }
.cx-plan .pn { font-size:15px; display:flex; justify-content:space-between; align-items:center; }
.cx-plan .pp { font-size:30px; font-weight:300; font-variant-numeric:tabular-nums; } .cx-plan .pp span { font-size:13px; color:var(--muted); }
.cx-plan .pr { color:var(--muted); font-size:13px; }
.cx-plan ul { list-style:none; display:grid; gap:6px; align-content:start; font-size:13px; }
.cx-plan li::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--blue); margin-right:8px; vertical-align:middle; }
.cx-plan .btn { width:100%; min-width:0; }

.cx-band { background:var(--black); color:#fff; border-radius:var(--r); padding:26px 28px; margin-top:28px; display:grid; grid-template-columns:1fr auto; gap:20px; align-items:center; position:relative; overflow:hidden; }
.cx-band::after { content:''; position:absolute; right:-60px; top:-60px; width:320px; height:260px; background:radial-gradient(closest-side, rgba(255,212,0,.16), transparent 70%); pointer-events:none; }
.cx-band .t { font-size:22px; font-weight:300; } .cx-band p { color:#aeb8c6; margin-top:4px; }
.cx-band .cx-cta { margin-top:0; }

@media (max-width:1080px) {
  .cx-hero .in, .cx-split, .cx-tt { grid-template-columns:1fr; }
  .cx-cgrid, .cx-eps, .cx-plans { grid-template-columns:1fr 1fr; }
  .cx-days { grid-template-columns:repeat(5, 1fr); }
  .cx-title { font-size:34px; }
}
@media (max-width:620px) {
  .cx-cgrid, .cx-eps, .cx-plans { grid-template-columns:1fr; }
  .cx-search, .cx-date { grid-template-columns:1fr; }
  .cx-facts { grid-template-columns:1fr 1fr; }
  .cx-band { grid-template-columns:1fr; }
  .cx-cta { flex-direction:column; } .cx-cta .btn { width:100%; min-width:0; }
  .cx-days { grid-template-columns:repeat(3, 1fr); }
  .cx-tabs button { flex:1 1 0; }
  .cx-title { font-size:30px; }
}

/* the MCP landing (inc/mcp-page.php): the assistant conversation in the hero and the sections around it */
.cx-chat .cx-msgs { height:262px; padding:16px; display:flex; flex-direction:column; gap:10px; overflow:hidden; }
.cx-msgs > div { max-width:88%; font-size:13.5px; line-height:1.5; border-radius:12px; padding:10px 13px; animation:cxrin .45s ease; }
.cx-msgs .me { align-self:flex-end; background:var(--blue); color:#fff; border-bottom-right-radius:4px; }
.cx-msgs .call { align-self:flex-start; background:#0f1522; border:1px solid #1e2532; color:#9fb6ff; font-family:'IBM Plex Mono', monospace; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.cx-msgs .call span { color:#0a0e16; background:var(--yel); border-radius:4px; padding:0 5px; margin-right:8px; font-size:10.5px; }
.cx-msgs .call em { font-style:normal; color:#86efac; }
.cx-msgs .ai { align-self:flex-start; background:#141a25; color:var(--on-dark); border-bottom-left-radius:4px; }
.cx-msgs .ai.typing::after { content:''; display:inline-block; width:7px; height:14px; background:var(--yel); margin-left:3px; vertical-align:-2px; animation:cxpulse 1s infinite; }
.cx-ask { display:flex; align-items:center; gap:10px; margin:0 14px 14px; height:42px; border:1px solid #1e2532; border-radius:var(--r); padding:0 6px 0 14px; color:#5f6b7d; font-size:13px; white-space:nowrap; }
.cx-ask b { margin-left:auto; width:30px; height:30px; border-radius:8px; background:var(--yel); }
.cx-key { color:#0a0e16; background:var(--yel); border-radius:4px; padding:0 4px; }
.cx-key.set { background:#123222; color:#86efac; }
.mono { font-family:'IBM Plex Mono', monospace; }
.cx-tool .nm { font-size:14px; }
.cx-tool .pa { white-space:normal; font-family:inherit; font-size:12.5px; color:var(--text); }
.cx-steps { display:grid; gap:10px; align-content:start; }
.cx-steps > div { display:grid; grid-template-columns:40px 1fr; gap:14px; align-items:start; border:1px solid var(--line); border-radius:var(--r); background:#fff; padding:16px; min-height:84px; }
.cx-steps .n { width:40px; height:40px; border-radius:var(--r); background:var(--black); color:var(--yel); display:grid; place-items:center; font-size:15px; }
.cx-steps .tx { display:grid; gap:3px; } .cx-steps .t { font-size:15px; } .cx-steps .d { color:var(--muted); font-size:13px; }
.cx-qs { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.cx-q { border:1px solid var(--line); border-radius:var(--r); background:#fff; padding:16px; display:grid; gap:8px; align-content:start; min-height:120px; position:relative; }
.cx-q::before { content:''; position:absolute; left:16px; top:-1px; width:36px; height:2px; background:var(--yel); }
.cx-q .who { font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .cx-q .tx { font-size:14.5px; line-height:1.45; }
.cx-flow { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; counter-reset:f; }
.cx-flow > div { position:relative; border:1px solid var(--line); border-radius:var(--r); background:#fff; padding:18px; display:grid; gap:4px; min-height:118px; }
.cx-flow > div:not(:last-child)::after { content:''; position:absolute; right:-9px; top:50%; width:6px; height:6px; border-top:1px solid var(--blue); border-right:1px solid var(--blue); transform:translateY(-50%) rotate(45deg); }
.cx-flow .k { font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--blue); } .cx-flow .t { font-size:15px; } .cx-flow .d { color:var(--muted); font-size:13px; font-family:'IBM Plex Mono', monospace; }
.cx-tiles { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-top:12px; }
.cx-tiles > div { background:var(--black); color:var(--on-dark); border-radius:var(--r); padding:18px; display:grid; gap:4px; min-height:104px; }
.cx-tiles .v { font-size:26px; font-weight:300; color:var(--yel); } .cx-tiles .k { font-size:13px; color:#aeb8c6; }
.cx-eps.cx-three { grid-template-columns:repeat(3, 1fr); }
.cx-faq { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.cx-faq > div { border:1px solid var(--line); border-radius:var(--r); background:#fff; padding:18px; display:grid; gap:6px; }
.cx-faq .t { font-size:15px; } .cx-faq .d { color:var(--muted); font-size:13.5px; }
@media (max-width:1080px) { .cx-qs, .cx-flow, .cx-tiles { grid-template-columns:1fr 1fr; } .cx-flow > div::after { display:none; } .cx-eps.cx-three { grid-template-columns:1fr; } }
@media (max-width:620px) { .cx-qs, .cx-flow, .cx-tiles, .cx-faq { grid-template-columns:1fr; } }
[data-cx-code="mcp"] .cx-tabs button { flex-basis:110px; }

/* the PHP and Python starters (inc/lab-starter.php): the terminal in the hero, the files, recipes and rules */
.cx-term .cx-out { margin:0; height:300px; padding:16px 18px; font-family:'IBM Plex Mono', monospace; font-size:12px; line-height:1.75; color:#c9d3e0; white-space:pre-wrap; overflow:hidden; }
.cx-out .cmd { color:#86efac; } .cx-out .cmd b { font-weight:400; color:#fff; }
.cx-out .cmd b.typing::after { content:''; display:inline-block; width:7px; height:13px; background:var(--yel); margin-left:2px; vertical-align:-2px; animation:cxpulse 1s infinite; }
.cx-steps4 { grid-template-columns:repeat(4, 1fr); }
.cx-steps4 > div { grid-template-columns:40px 1fr; min-height:150px; }
.cx-steps4 code { display:block; margin-top:8px; font-family:'IBM Plex Mono', monospace; font-size:11.5px; background:var(--alt); border-radius:6px; padding:5px 8px; color:#33415c; white-space:pre-wrap; overflow-wrap:anywhere; }
.cx-steps .lk { color:var(--blue); font-size:13px; margin-top:4px; }
.cx-wide .cx-code pre { height:440px; }
.cx-rx { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
.cx-r { border:1px solid var(--line); border-radius:var(--r); background:#fff; padding:14px; display:grid; grid-template-rows:auto 1fr; gap:10px; min-height:170px; min-width:0; transition:border-color .15s; }
.cx-r:hover { border-color:var(--blue); }
.cx-r .tp { display:flex; justify-content:space-between; align-items:center; gap:8px; } .cx-r .nm { font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cx-r pre { margin:0; background:#0a0e16; color:#c9d3e0; border-radius:8px; padding:10px 12px; font-family:'IBM Plex Mono', monospace; font-size:11.5px; line-height:1.6; max-height:150px; }
.cx-r pre .c1 { color:#5f6b7d; }
.cx-tiles3 { grid-template-columns:repeat(3, 1fr); margin-top:0; }
@media (max-width:1080px) { .cx-steps4, .cx-rx, .cx-tiles3 { grid-template-columns:1fr 1fr; } }
@media (max-width:620px) { .cx-steps4, .cx-rx, .cx-tiles3 { grid-template-columns:1fr; } }