/* Our Cloud Tools page (cloud-tools.html). Scoped to .ct, built on the shared .sp variables (--brand --ink --muted --line --soft --y).
   Compact on purpose: small type and wide layouts (side-by-side columns) keep the page short. Every colour in a rule comes from a variable,
   so night mode is only the block of overrides at the end of this file. */
.ct {
    --ct-card: #ffffff; --ct-card2: #f8f6fe; --ct-shadow: 0 16px 34px -26px rgba(61, 31, 120, .5); --ct-shadow-s: 0 8px 22px -18px rgba(61, 31, 120, .45); --ct-route: rgba(109, 63, 192, .28);
    --ct-glow-a: #ebe5fc; --ct-glow-b: #def3ee; --ct-glow-c: #fdf0d3; --ct-band-a: #4b2c93; --ct-band-b: #6446b4; --ct-on-amber: #35106b;
    --ct-live-bg: #e1f5ea; --ct-live-ink: #0b6b3a; --ct-soon-bg: #e6eeff; --ct-soon-ink: #1e40af; --ct-yt-bg: #fff4f3; --ct-yt-line: #ffd3d0; --ct-yt-ink: #9f1a12; --ct-focus: #7b3fd0;
    --ct-top: 64px; max-width: 1280px; font-size: .9rem; line-height: 1.55;
}
.ct .is-suggest { --c: #5b3fb5; --t: #f1edfb; }
.ct .is-design { --c: #0b6a9b; --t: #e8f3fa; }
.ct .is-ready { --c: #0d7168; --t: #e4f5f1; }
.ct .is-watch { --c: #a2325f; --t: #fbeaf1; }
.ct .is-detox { --c: #875400; --t: #fcf1d8; }
.ct h1, .ct h2, .ct h3 { text-wrap: balance; }
.ct p { text-wrap: pretty; }
.ct .sp-crumb { margin: .2rem 0 .7rem; color: var(--muted); }
.ct a:focus-visible, .ct button:focus-visible, .ct summary:focus-visible { outline: 3px solid var(--ct-focus); outline-offset: 3px; border-radius: 10px; }
.ct-i { width: 1.15em; height: 1.15em; flex: 0 0 auto; }
.ct-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- hero: the words on the left, the picker (questions | answer) on the right ---------- */
.ct-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 1.2rem 1.8rem; align-items: center; padding: 1.3rem 1.5rem; border: 1px solid var(--line); border-radius: 24px;
    background: radial-gradient(70% 95% at 0% 0%, var(--ct-glow-a), transparent 62%), radial-gradient(60% 80% at 100% 0%, var(--ct-glow-b), transparent 60%), radial-gradient(55% 75% at 55% 118%, var(--ct-glow-c), transparent 62%), var(--ct-card); }
.ct-hero-route { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 64%; z-index: -1; pointer-events: none; }
.ct-hero-route path { fill: none; stroke: var(--ct-route); stroke-width: 2; stroke-dasharray: 2 11; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ct-hero-route circle { fill: var(--ct-card); stroke: var(--ct-route); stroke-width: 2; }
.ct-eyebrow { display: inline-flex; align-items: center; gap: .45rem; margin: 0 0 .65rem; padding: .18rem .8rem .18rem .22rem; border: 1px solid var(--line); border-radius: 999px; background: var(--ct-card); font-size: .68rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--brand); line-height: 1.4; }
.ct-eyebrow-i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #6d3fc0, #8b5fd6); color: #fff; }
.ct-eyebrow-i .ct-i { width: 12px; height: 12px; }
.ct-hero h1 { margin: 0 0 .6rem; font-size: clamp(1.8rem, 3.3vw, 2.4rem); font-weight: 800; line-height: 1.1; letter-spacing: -.025em; color: var(--ink); }
.ct-acc { background: linear-gradient(100deg, #6d3fc0, #a8419a); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ct-lead { max-width: 48ch; margin: 0; font-size: clamp(.9rem, 1.2vw, .98rem); color: var(--muted); }
.ct-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.ct-chips li { display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .65rem .18rem .5rem; border: 1px solid var(--line); border-radius: 999px; background: var(--ct-card); font-size: .74rem; font-weight: 700; color: var(--ink); line-height: 1.4; }
.ct-chips .ct-i { color: var(--brand); width: .9rem; height: .9rem; }
.ct-vid { margin: .8rem 0 0; }
.ct-yt { display: inline-flex; align-items: center; gap: .45rem; padding: .32rem .85rem .32rem .65rem; border: 1px solid var(--ct-yt-line); border-radius: 999px; background: var(--ct-yt-bg); color: var(--ct-yt-ink); font-weight: 700; font-size: .8rem; cursor: pointer; transition: transform .2s; }
.ct-yt[hidden] { display: none; }
.ct-yt .ct-i { width: 1.2rem; height: 1.2rem; color: #e62117; }
.ct-yt:hover { transform: translateY(-1px); }

.ct-pickcard { background: var(--ct-card); border: 1px solid var(--line); border-radius: 20px; padding: .85rem .95rem; box-shadow: var(--ct-shadow); }
.ct-pick-h { margin: 0 0 .4rem; font-weight: 800; color: var(--ink); }
.ct-jump ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
.ct-jump a { display: block; padding: .4rem .7rem; border-radius: 10px; background: var(--ct-card2); text-decoration: none; font-weight: 600; }
.ct-pickwrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .8rem 1rem; align-items: stretch; }
.ct-pickwrap[hidden], .ct-jump[hidden] { display: none; }
.ct-pick { margin: 0; padding: 0; border: 0; min-width: 0; }
.ct-pick legend { float: none; width: 100%; margin: 0 0 .4rem; padding: 0; font-size: .92rem; font-weight: 800; color: var(--ink); line-height: 1.35; }
.ct-opt { position: relative; display: flex; align-items: center; gap: .6rem; margin: 0 0 .15rem; padding: .38rem .5rem; border: 1px solid transparent; border-radius: 12px; cursor: pointer; transition: background .2s, border-color .2s; }
.ct-opt:hover { background: var(--ct-card2); }
.ct-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ct-ico { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; background: var(--t); color: var(--c); }
.ct-ico .ct-i { width: 15px; height: 15px; }
.ct-opt-t { font-size: .82rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.ct-opt.is-on, .ct-opt:has(input:checked) { background: var(--t); border-color: color-mix(in srgb, var(--c) 38%, transparent); }
.ct-opt:has(input:focus-visible) { outline: 3px solid var(--ct-focus); outline-offset: 2px; }
.ct-resbox { display: flex; min-width: 0; }
.ct-res { flex: 1; display: flex; flex-direction: column; padding: .8rem .9rem; border-radius: 14px; background: var(--t); border: 1px solid color-mix(in srgb, var(--c) 26%, transparent); }
.ct-res[hidden] { display: none; }
.ct-res h3 { margin: 0 0 .2rem; font-size: .98rem; font-weight: 800; color: var(--c); }
.ct-res p { margin: 0 0 .6rem; font-size: .84rem; color: var(--ink); }
.ct-res .ct-go { margin-top: auto; }
.ct-res .ct-then { margin: .6rem 0 0; font-size: .78rem; color: var(--muted); }
.ct-go { display: flex; flex-wrap: wrap; gap: .5rem .9rem; align-items: center; }
@media (prefers-reduced-motion: no-preference) { .ct-res:not([hidden]) { animation: ctFade .35s ease both; } }
@keyframes ctFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- buttons ---------- */
.ct .ct-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .48rem .95rem; border: 1px solid transparent; border-radius: 11px; background: var(--y); color: var(--ct-on-amber); font-weight: 800; font-size: .84rem; text-decoration: none; line-height: 1.3; box-shadow: 0 5px 14px -10px rgba(120, 80, 0, .7); transition: transform .2s, box-shadow .2s; }
.ct .ct-btn:hover { color: var(--ct-on-amber); transform: translateY(-1px); box-shadow: 0 9px 18px -12px rgba(120, 80, 0, .8); }
.ct .ct-btn .ct-i { width: 1em; height: 1em; transition: transform .2s; }
.ct .ct-btn:hover .ct-i { transform: translateX(3px); }
.ct .ct-btn.is-off { background: var(--soft); border-color: var(--line); color: var(--muted); box-shadow: none; cursor: default; }
.ct .ct-btn.is-off:hover { transform: none; }
.ct .ct-btn.is-ghost { background: transparent; border-color: var(--line); color: var(--brand); box-shadow: none; }
.ct-link { font-weight: 700; font-size: .82rem; }

/* ---------- section heads: title and one line side by side ---------- */
.ct-sechead { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem 1.1rem; margin: 1.8rem 0 .75rem; }
.ct-h2 { margin: 0; font-size: clamp(1.2rem, 1.9vw, 1.45rem); font-weight: 800; letter-spacing: -.015em; line-height: 1.25; color: var(--ink); }
.ct-sechead p { flex: 1 1 300px; max-width: 76ch; margin: 0; font-size: .86rem; color: var(--muted); }
.ct-sec, .ct-route, .ct-talk { scroll-margin-top: calc(var(--ct-top) + 6px); }

/* ---------- the route: a map across the top that follows the scroll, then one wide card per tool ---------- */
.ct-rail { position: sticky; top: var(--ct-top); z-index: 6; --ct-prog: 0; margin: 0 0 .8rem; padding: .3rem .45rem .55rem; border: 1px solid var(--line); border-radius: 16px; background: color-mix(in srgb, var(--ct-card) 94%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: var(--ct-shadow-s); }
.ct-rail ol { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .15rem; margin: 0; padding: 0; list-style: none; }
.ct-rail::before, .ct-rail::after { content: ""; position: absolute; left: .9rem; bottom: .25rem; height: 3px; border-radius: 3px; }
.ct-rail::before { right: .9rem; background: var(--line); }
.ct-rail::after { width: calc((100% - 1.8rem) * var(--ct-prog)); background: var(--brand); opacity: .6; }
@media (prefers-reduced-motion: no-preference) { .ct-rail::after { transition: width .3s ease; } }
.ct-rail a { display: flex; align-items: center; gap: .55rem; padding: .28rem .5rem; border-radius: 12px; color: var(--muted); text-decoration: none; transition: background .2s, color .2s; }
.ct-rail a:hover { background: var(--ct-card2); color: var(--ink); }
.ct-dot { width: 28px; height: 28px; flex: 0 0 auto; display: grid; place-items: center; border: 2px solid var(--line); border-radius: 50%; background: var(--ct-card); font-weight: 800; font-size: .76rem; color: var(--muted); transition: background .25s, border-color .25s, color .25s, transform .25s; }
.ct-rl { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ct-rl b { font-size: .82rem; font-weight: 700; }
.ct-rl small { font-size: .7rem; opacity: .85; }
.ct-rail a.is-here { color: var(--ink); background: var(--t); }
.ct-rail a.is-here .ct-dot { background: var(--c); border-color: var(--c); color: var(--ct-dot-ink, #fff); transform: scale(1.06); }

.ct-stop { position: relative; overflow: hidden; display: grid; grid-template-columns: 268px minmax(0, 1fr); scroll-margin-top: calc(var(--ct-top) + 74px); border: 1px solid var(--line); border-radius: 20px; background: var(--ct-card); box-shadow: var(--ct-shadow-s); }
.ct-stop + .ct-stop { margin-top: .85rem; }
.ct-stop.is-planned { border-style: dashed; box-shadow: none; }
.ct-side { display: flex; flex-direction: column; gap: .5rem; padding: .95rem 1.05rem 1rem; border-right: 1px dashed var(--line); background: linear-gradient(170deg, var(--t), transparent 92%); }
.ct-art { align-self: flex-start; width: 132px; padding: .3rem; border: 1px solid color-mix(in srgb, var(--c) 20%, transparent); border-radius: 14px; background: var(--ct-card); }
.ct-art-svg { display: block; width: 100%; height: auto; }
.ct-kick { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .5rem; margin: 0 0 .2rem; font-size: .66rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--c); line-height: 1.4; }
.ct-stop h3 { margin: 0 0 .25rem; font-size: clamp(1.02rem, 1.4vw, 1.18rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.25; color: var(--ink); }
.ct-q { margin: 0; font-size: .84rem; font-weight: 600; color: var(--muted); line-height: 1.4; }
.ct-pill { padding: .05rem .5rem; border-radius: 999px; font-size: .62rem; letter-spacing: .06em; }
.ct-pill.is-live { background: var(--ct-live-bg); color: var(--ct-live-ink); }
.ct-pill.is-soon { background: var(--ct-soon-bg); color: var(--ct-soon-ink); }
.ct-side-go { margin: auto 0 0; padding-top: .2rem; }
.ct-main { display: flex; flex-direction: column; min-width: 0; }
.ct-io { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1.15fr); align-items: stretch; padding: .85rem 1.05rem .4rem; }
.ct-io.is-plan { grid-template-columns: minmax(0, 1fr); }
.ct-in, .ct-out { padding: .75rem .9rem; border-radius: 14px; }
.ct-in { background: var(--ct-card2); border: 1px solid var(--line); }
.ct-out { background: var(--t); border: 1px solid color-mix(in srgb, var(--c) 24%, transparent); }
.ct-io h4 { margin: 0; font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); line-height: 1.4; }
.ct-out h4 { color: var(--c); }
.ct-io ul { display: grid; gap: .4rem; margin: .45rem 0 0; padding: 0; list-style: none; }
.ct-io li { position: relative; padding-left: 1.2rem; font-size: .84rem; line-height: 1.45; color: var(--ink); }
.ct-in li::before { content: ""; position: absolute; left: .2rem; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: .55; }
.ct-out li::before { content: "\2713"; position: absolute; left: 0; top: 0; font-weight: 800; color: var(--c); }
.ct-flow { display: grid; place-items: center; color: var(--c); }
.ct-flow .ct-i { width: 18px; height: 18px; }
.ct-eg-h { margin: .7rem 0 .3rem; font-size: .68rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); line-height: 1.4; }
.ct-in ul.ct-eg { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; }
.ct-in .ct-eg li { padding: 0; }
.ct-in .ct-eg li::before { display: none; }
.ct-eg a { display: inline-block; padding: .15rem .65rem; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent); border-radius: 999px; background: var(--ct-card); color: var(--c); font-size: .78rem; font-weight: 700; text-decoration: none; line-height: 1.5; transition: background .2s; }
.ct-eg a:hover { background: var(--t); color: var(--c); }
.ct-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .9rem; padding: .3rem 1.05rem .85rem; }
.ct-facts { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.ct-facts li { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .6rem .15rem .5rem; border: 1px solid var(--line); border-radius: 999px; background: var(--ct-card2); font-size: .72rem; font-weight: 600; color: var(--ink); line-height: 1.4; }
.ct-facts .ct-i { width: .85rem; height: .85rem; color: var(--c); }
.ct-roles { margin: 0 0 0 auto; font-size: .74rem; color: var(--muted); }
.ct-roles b { margin-left: .3rem; padding: .05rem .5rem; border-radius: 999px; background: var(--ct-card2); border: 1px solid var(--line); font-weight: 700; color: var(--ink); white-space: nowrap; display: inline-block; }
.ct-more { display: flex; flex-wrap: wrap; gap: .2rem 1rem; margin: 0; font-weight: 700; font-size: .82rem; }

/* ---------- the small drawings (colours come from the stop's own --c) ---------- */
.ct .a-box { fill: var(--ct-card); stroke: color-mix(in srgb, var(--c) 30%, var(--line)); stroke-width: 1.5; }
.ct .a-line { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ct .a-thick { stroke-width: 3.5; }
.ct .a-fade { opacity: .45; }
.ct .a-soft { fill: color-mix(in srgb, var(--c) 24%, transparent); }
.ct .a-solid { fill: var(--c); }
.ct .a-ring { fill: var(--ct-card); stroke: var(--c); stroke-width: 2; }
.ct .a-hub { fill: var(--ct-card); }
.ct .a-dash { fill: none; stroke: color-mix(in srgb, var(--c) 48%, transparent); stroke-width: 1.6; stroke-dasharray: 3 5; }
.ct .a-track { fill: none; stroke: color-mix(in srgb, var(--c) 20%, transparent); stroke-width: 10; stroke-linecap: round; }
.ct .a-arc { fill: none; stroke: var(--c); stroke-width: 10; stroke-linecap: round; }
.ct .a-sweep { fill: color-mix(in srgb, var(--c) 24%, transparent); }
.ct .a-dashline { stroke: var(--c); stroke-width: 1.6; stroke-dasharray: 3 4; opacity: .7; }
@media (prefers-reduced-motion: no-preference) { .ct .is-detox .a-sweep { transform-origin: 80px 50px; animation: ctSweep 16s linear infinite; } }
@keyframes ctSweep { to { transform: rotate(360deg); } }

/* ---------- who starts where ---------- */
.ct-tablewrap { border: 1px solid var(--line); border-radius: 18px; background: var(--ct-card); overflow: hidden; box-shadow: var(--ct-shadow-s); }
.ct-matrix { width: 100%; margin: 0; border-collapse: collapse; }
.ct-matrix th, .ct-matrix td { padding: .5rem .8rem; text-align: center; vertical-align: middle; }
.ct-matrix thead th { font-size: .68rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--c, var(--muted)); border-bottom: 1px solid var(--line); background: var(--ct-card2); line-height: 1.3; }
.ct-matrix tbody th { text-align: left; font-weight: 400; }
.ct-matrix tbody th b { display: block; font-size: .88rem; color: var(--ink); }
.ct-matrix tbody th small { display: block; font-size: .74rem; color: var(--muted); line-height: 1.3; }
.ct-matrix tbody tr + tr > * { border-top: 1px solid var(--line); }
.ct-matrix tbody tr:nth-child(even) { background: var(--ct-card2); }
.ct-m { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; }
.ct-m-p { background: var(--brand); color: var(--ct-card); }
.ct-m-p .ct-i { width: 12px; height: 12px; stroke-width: 3; }
.ct-m-s { border: 2.5px solid var(--brand); }
.ct-m-n { color: var(--muted); }
.ct-soonpill { display: inline-block; padding: .05rem .55rem; border-radius: 999px; background: var(--ct-soon-bg); color: var(--ct-soon-ink); font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }

/* ---------- limits, companions, questions ---------- */
.ct-limits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
.ct-lim { padding: .9rem 1rem .85rem; border: 1px solid var(--line); border-radius: 18px; background: var(--ct-card); }
.ct-lim-i { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: var(--soft); color: var(--brand); }
.ct-lim-i .ct-i { width: 17px; height: 17px; }
.ct-lim h3 { margin: .55rem 0 .25rem; font-size: .95rem; font-weight: 800; color: var(--ink); line-height: 1.3; }
.ct-lim p { margin: 0 0 .5rem; font-size: .82rem; color: var(--muted); line-height: 1.45; }
.ct-lim > a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .8rem; }
.ct-lim > a .ct-i { width: .95em; height: .95em; }
.ct-pair { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; }
.ct .ct-pc { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "i t a" "i d a"; column-gap: .75rem; align-items: center; padding: .7rem .9rem; border: 1px solid var(--line); border-radius: 16px; background: var(--ct-card); color: var(--ink); text-decoration: none; transition: transform .2s, box-shadow .2s; }
.ct .ct-pc:hover { color: var(--ink); transform: translateY(-2px); box-shadow: var(--ct-shadow-s); }
.ct-pc .ct-lim-i { grid-area: i; }
.ct-pc b { grid-area: t; font-size: .92rem; line-height: 1.3; }
.ct-pc > span:not(.ct-lim-i) { grid-area: d; font-size: .78rem; color: var(--muted); line-height: 1.4; }
.ct-pc > .ct-i { grid-area: a; color: var(--brand); }
.ct-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 .8rem; align-items: start; }
.ct-faq details { margin: 0 0 .5rem; border: 1px solid var(--line); border-radius: 14px; background: var(--ct-card); }
.ct-faq summary { padding: .6rem .85rem; font-size: .85rem; font-weight: 700; color: var(--ink); }
.ct-faq .ans { padding: 0 .85rem .7rem; font-size: .83rem; line-height: 1.5; }
.ct-talk { position: relative; overflow: hidden; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .7rem 1.5rem; margin: 1.8rem 0 0; padding: 1.1rem 1.5rem; border-radius: 22px; background: linear-gradient(135deg, var(--ct-band-a), var(--ct-band-b)); color: #fff; }
.ct-talk::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(60% 120% at 100% 0%, rgba(255, 255, 255, .12), transparent 60%); pointer-events: none; }
.ct-talk::after { content: ""; position: absolute; z-index: -1; top: -60%; right: -6%; width: 40%; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle at center, rgba(255, 255, 255, .13) 0 2px, transparent 2px 30px); -webkit-mask-image: radial-gradient(circle at center, #000 30%, transparent 72%); mask-image: radial-gradient(circle at center, #000 30%, transparent 72%); pointer-events: none; }
.ct-talk h2 { margin: 0 0 .2rem; font-size: clamp(1.1rem, 1.8vw, 1.3rem); font-weight: 800; color: #fff; }
.ct-talk p { max-width: 62ch; margin: 0; font-size: .86rem; color: rgba(255, 255, 255, .92); }
.ct-talk .ct-go { margin: 0; }
.ct-talk .ct-btn.is-ghost { border-color: rgba(255, 255, 255, .6); color: #fff; }
.ct-talk .ct-btn.is-ghost:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.ct-talk a:focus-visible { outline-color: #fff; }

/* ---------- gentle reveal (only with the script, and never with reduced motion) ---------- */
@media (prefers-reduced-motion: no-preference) {
    .ct-js .ct-rv.ct-hide { opacity: 0; transform: translateY(14px); }
    .ct-js.ct-anim .ct-rv { transition: opacity .7s ease, transform .7s ease; }
    .ct-js .ct-rv.in { opacity: 1; transform: none; }
    .ct-rail a.is-here .ct-dot { animation: ctPop .4s ease; }
}
@keyframes ctPop { 0% { transform: scale(.9); } 60% { transform: scale(1.14); } 100% { transform: scale(1.06); } }

/* ---------- narrower screens ---------- */
@media (max-width: 1199.98px) {
    .ct-limits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991.98px) {
    .ct-hero { grid-template-columns: minmax(0, 1fr); }
    .ct-rail { margin: 0 -.5rem .7rem; padding: .35rem .5rem .5rem; border-radius: 0 0 14px 14px; }
    .ct-rail ol { display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .1rem; scroll-snap-type: x proximity; scrollbar-width: none; }
    .ct-rail ol::-webkit-scrollbar { display: none; }
    .ct-rail li { flex: 0 0 auto; scroll-snap-align: center; }
    .ct-rail a { padding: .22rem .75rem .22rem .22rem; border: 1px solid var(--line); border-radius: 999px; background: var(--ct-card); }
    .ct-dot { width: 26px; height: 26px; font-size: .74rem; }
    .ct-rl small { display: none; }
    .ct-rl b { font-size: .8rem; white-space: nowrap; }
    .ct-stop { grid-template-columns: minmax(0, 1fr); }
    .ct-side { display: grid; grid-template-columns: 116px minmax(0, 1fr) auto; grid-template-areas: "art t go"; align-items: center; column-gap: 1rem; border-right: 0; border-bottom: 1px dashed var(--line); }
    .ct-art { grid-area: art; width: 116px; }
    .ct-side-t { grid-area: t; }
    .ct-side-go { grid-area: go; margin: 0; padding: 0; }
    .ct-pair { grid-template-columns: minmax(0, 1fr); }
    .ct-faq { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
    .ct-hero { padding: 1rem; border-radius: 20px; }
    .ct-pickwrap { grid-template-columns: minmax(0, 1fr); }
    .ct-side { grid-template-columns: 84px minmax(0, 1fr); grid-template-areas: "art t" "go go"; row-gap: .6rem; column-gap: .8rem; padding: .8rem .9rem; }
    .ct-art { width: 84px; padding: .2rem; border-radius: 12px; }
    .ct-io { grid-template-columns: minmax(0, 1fr); gap: .2rem; padding: .7rem .9rem .3rem; }
    .ct-flow { padding: 0; transform: rotate(90deg); }
    .ct-meta { padding: .3rem .9rem .8rem; }
    .ct-roles { margin-left: 0; }
    .ct-limits { grid-template-columns: minmax(0, 1fr); }
    .ct-talk { grid-template-columns: minmax(0, 1fr); padding: 1rem 1.1rem; }
    .ct-matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .ct-matrix, .ct-matrix tbody, .ct-matrix tr, .ct-matrix th, .ct-matrix td { display: block; }
    .ct-matrix tbody tr { padding: .4rem 0; }
    .ct-matrix tbody tr + tr > * { border-top: 0; }
    .ct-matrix tbody tr + tr { border-top: 1px solid var(--line); }
    .ct-matrix tbody th { padding: .35rem .9rem .2rem; }
    .ct-matrix td.is-n { display: none; }
    .ct-matrix td { display: flex; align-items: center; justify-content: space-between; padding: .25rem .9rem; text-align: right; }
    .ct-matrix td::before { content: attr(data-label); font-size: .8rem; font-weight: 600; color: var(--muted); text-align: left; }
}
@media print { .ct-rail, .ct-hero-route, .ct-pickcard, .ct-yt { display: none !important; } .ct-rv { opacity: 1 !important; transform: none !important; } .ct-stop { break-inside: avoid; box-shadow: none; } }

/* ---------- night mode: calm, desaturated, no glare ----------
   Written out here, not generated: the selectors start with html[data-cb-theme="dark"] so they outrank anything tools/gen-dark-css.js writes for this page. */
html[data-cb-theme="dark"] .ct {
    --ct-card: #1b1628; --ct-card2: #221b31; --ct-shadow: 0 22px 44px -30px rgba(0, 0, 0, .8); --ct-route: rgba(176, 140, 240, .3);
    --ct-glow-a: rgba(118, 78, 210, .26); --ct-glow-b: rgba(40, 150, 135, .17); --ct-glow-c: rgba(214, 150, 40, .13); --ct-band-a: #2c2158; --ct-band-b: #3d2e75;
    --ct-live-bg: #123524; --ct-live-ink: #86e3b0; --ct-soon-bg: #17274f; --ct-soon-ink: #a8c1ff; --ct-yt-bg: #2b0f0d; --ct-yt-line: #5b2623; --ct-yt-ink: #f09a94; --ct-focus: #b79aff; --ct-dot-ink: #1b1628;
}
html[data-cb-theme="dark"] .ct .is-suggest { --c: #c6b5f9; --t: #262040; }
html[data-cb-theme="dark"] .ct .is-design { --c: #8accf1; --t: #142a3b; }
html[data-cb-theme="dark"] .ct .is-ready { --c: #78dacb; --t: #122c2a; }
html[data-cb-theme="dark"] .ct .is-watch { --c: #f29fbb; --t: #341b2b; }
html[data-cb-theme="dark"] .ct .is-detox { --c: #f2c978; --t: #33260f; }
html[data-cb-theme="dark"] .ct-acc { background: linear-gradient(100deg, #c9b1ff, #f2a8d8); -webkit-background-clip: text; background-clip: text; }
html[data-cb-theme="dark"] .ct-eyebrow-i { background: linear-gradient(135deg, #6d3fc0, #8b5fd6); }
html[data-cb-theme="dark"] .ct-yt .ct-i { color: #ef5a50; }
html[data-cb-theme="dark"] .ct-btn { box-shadow: none; }

/* Reserve the picker's height while the page script swaps the "jump to a tool" list for it, so nothing below moves */
.ct-pickcard { min-height: 303px; }
@media (max-width: 767.98px) { .ct-pickcard { min-height: 480px; } }
@media (max-width: 480px) { .ct-pickcard { min-height: 590px; } }