/* The site's shared look: one floating header, one footer, and the plugin's parts (window chrome,
   micro-labels, chips, segmented controls) that the redesigned pages are built from.

   The accent follows <html data-product>: "score" is Cantai (teal), "daw" is Cantai for DAWs (blue).
   Components live under .cx so the older pages, the chatbot widget and Zendesk keep their own styles;
   base.html styles bare .btn, header and .content-container globally, and those are reset here. */

:root {
    --page: #0b1120;
    --fg: #f1f5f9; --fg3: #b6c5d5; --fg2: #a3b4c8; --muted: #93a3b8; --ink: #ece7dc;
    --amber: #d8a657; --ph: #e5484d;
    --line2: rgba(139, 157, 180, .18);
    --ui: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
    --r: 16px;

    --t100: #dbefeb; --t200: #b5ddd4; --t300: #84c2b6; --t400: #6baea2; --t500: #5a9d91; --t600: #3d7a70; --t900: #14302e;
    --b100: #dce9fc; --b200: #b9d3f9; --b300: #97bdf4; --b400: #71a3ec; --b500: #5589d7; --b600: #3a5aa0; --b900: #162e50;

    --a100: var(--t100); --a200: var(--t200); --a300: var(--t300); --a400: var(--t400); --a500: var(--t500); --a600: var(--t600); --a900: var(--t900);
    --rgb: 107, 174, 162; --glow: 61, 122, 112;
    --o200: var(--b200); --o300: var(--b300); --o-rgb: 113, 163, 236;
    --pg: #0f1c2e; --raise: #16263a; --cv: #0b1626;
    --line: rgba(var(--rgb), .15); --line3: rgba(var(--rgb), .28);

    /* One spring family for the whole site. */
    --spring: cubic-bezier(.32, .72, 0, 1); --spring-d: 584ms;
    --spring-bounce: cubic-bezier(.34, 1.56, .64, 1); --spring-bounce-d: 574ms;
}
@supports (animation-timing-function: linear(0, 1)) {
    :root {
        --spring: linear(0,0.027,0.091,0.175,0.267,0.359,0.446,0.527,0.6,0.664,0.719,0.767,0.808,0.842,0.871,0.895,0.914,0.931,0.944,0.955,0.964,0.971,0.977,0.982,0.985,0.988,0.991,0.993,0.994,0.996,0.996,1);
        --spring-bounce: linear(0,0.027,0.096,0.19,0.298,0.41,0.52,0.621,0.713,0.792,0.859,0.914,0.957,0.99,1.014,1.03,1.04,1.045,1.046,1.045,1.041,1.037,1.032,1.027,1.022,1.017,1.013,1.009,1.006,1.004,1.002,1);
    }
}
html[data-product="daw"] {
    --a100: var(--b100); --a200: var(--b200); --a300: var(--b300); --a400: var(--b400); --a500: var(--b500); --a600: var(--b600); --a900: var(--b900);
    --rgb: 113, 163, 236; --glow: 58, 90, 160;
    --o200: var(--t200); --o300: var(--t300); --o-rgb: 107, 174, 162;
    --pg: #0d1728; --raise: #111a2c; --cv: #0a101d;
}
html { color-scheme: dark; }

/* Moving between pages crossfades under a header that stays put. Moving between Cantai and
   Cantai for DAWs is a wave instead: the other product spreads out from where you clicked, in its
   own colour, while the switch thumb slides across and "Score" rolls over into "DAW".
   base.html (pagereveal) and site.js (pageswap) set html.vt-product / vt-hero and --vt-x/y/r. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .26s; }
html:not(.vt-product) .cx-hdr .cap, html:not(.vt-product) .c4d-hdr .cap { view-transition-name: site-header; }
#c4dProduct .thumb, .cx-hdr .product .thumb { view-transition-name: switch-thumb; }
::view-transition-group(switch-thumb) { animation-duration: .7s; animation-timing-function: var(--spring-bounce); }

/* The new page covers the old one outright: no plus-lighter blend, which would show both at once. */
html.vt-product::view-transition-old(root) { animation: none; mix-blend-mode: normal; }
html.vt-product::view-transition-new(root) { mix-blend-mode: normal; }
html.vt-product::view-transition-new(root) { animation: vt-wave 1.1s cubic-bezier(.5, 0, .2, 1) both; }
@keyframes vt-wave {
    from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); }
    to { clip-path: circle(var(--vt-r, 150vmax) at var(--vt-x, 50%) var(--vt-y, 0)); }
}
/* The wavefront: a thin ring of the new colour riding the edge of the reveal. */
html.vt-product::after { content: ""; position: fixed; z-index: 2147483647; left: var(--vt-x, 50%); top: var(--vt-y, 0); width: 0; height: 0; translate: -50% -50%; border-radius: 50%; pointer-events: none;
    border: 1.5px solid rgba(var(--rgb), .85); box-shadow: inset 0 0 60px rgba(var(--rgb), .22), inset 0 0 12px rgba(var(--rgb), .35);
    animation: vt-ring 1.1s cubic-bezier(.5, 0, .2, 1) both; }
@keyframes vt-ring { 0% { width: 0; height: 0; opacity: 1; } 70% { opacity: .9; } 100% { width: calc(var(--vt-r, 150vmax) * 2); height: calc(var(--vt-r, 150vmax) * 2); opacity: 0; } }

/* Only the product word rolls over; the rest of the headline is swept by the wave with the page. */
html.vt-hero .vt-word { view-transition-name: hero-word; }
html.vt-hero .vt-cue { view-transition-name: hero-cue; }
::view-transition-group(hero-cue) { animation-duration: .8s; animation-timing-function: var(--spring); }
::view-transition-old(hero-word), ::view-transition-new(hero-word), ::view-transition-old(hero-cue), ::view-transition-new(hero-cue) { inline-size: auto; block-size: 100%; object-fit: none; object-position: left center; }
::view-transition-group(hero-word) { animation-duration: .8s; animation-timing-function: var(--spring); overflow: clip; overflow-clip-margin: 24px; }
::view-transition-old(hero-word) { animation: vt-word-out .3s cubic-bezier(.5, 0, .75, 0) both; }
::view-transition-new(hero-word) { animation: vt-word-in .75s var(--spring) .2s both; }
@keyframes vt-word-out { to { translate: 0 -55%; opacity: 0; filter: blur(6px); } }
@keyframes vt-word-in { from { translate: 0 60%; opacity: 0; filter: blur(6px); } }

/* The landings light the top of the page; the older pages paint their own opaque blocks, so the
   glow would show their edges there. */
body.cx-glow { background: var(--page) radial-gradient(900px 520px at 12% -120px, rgba(var(--glow), .28), transparent 70%) no-repeat; }

/* ---------- base for .cx surfaces ---------- */
.cx { color: var(--fg); font: 15px/1.6 var(--ui); -webkit-font-smoothing: antialiased; }
.cx *, .cx *::before, .cx *::after { box-sizing: border-box; }
.cx [hidden] { display: none !important; }
.cx a { color: inherit; }
.cx button { font: inherit; color: inherit; cursor: pointer; }
.cx img { max-width: 100%; }
.cx :focus-visible { outline: 2px solid var(--a300); outline-offset: 2px; border-radius: 6px; }
.cx ::selection { background: rgba(var(--rgb), .35); }
.cx p { margin: 0; }
.cx [id] { scroll-margin-top: 96px; }
.cx .vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.cx .wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }
@media (max-width: 700px) { .cx .wrap { padding: 0 16px; } }
.cx .sp { flex: 1; }
.cx .muted { color: var(--fg2); }

.cx h1, .cx h2, .cx h3 { font-family: var(--serif); color: var(--fg); margin: 0; text-wrap: balance; }
.cx h2 { font-weight: 600; font-size: clamp(36px, 4.4vw, 56px); line-height: 1.02; letter-spacing: -.6px; }
.cx h3 { font-weight: 600; font-size: 27px; line-height: 1.1; }
.cx h1 em, .cx h2 em, .cx h3 em { font-style: italic; color: var(--a300); }
.cx .lede { font-size: 18px; line-height: 1.6; color: var(--fg3); }
.cx .lede b { color: var(--fg); font-weight: 600; }

.cx .lbl { font-size: 11px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--fg2); }
.cx .chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--line2); color: var(--fg3); white-space: nowrap; line-height: 1.5; text-decoration: none; }
.cx .chip.ok { color: var(--a200); border-color: rgba(var(--rgb), .45); background: rgba(var(--rgb), .08); }
.cx a.chip:hover { border-color: rgba(var(--rgb), .55); color: var(--fg); }
.cx .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--a400); flex: none; display: inline-block; }
.cx .dot.live { animation: cx-dotp calc(var(--beat) * 2) ease-out infinite; }
.cx .av { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(145deg, var(--a600), #16263a); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--a200); flex: none; overflow: hidden; }
.cx .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cx .tick { flex: none; width: 20px; height: 20px; border-radius: 50%; background: rgba(var(--rgb), .18); color: var(--a300); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; margin-top: 2px; }

.cx .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; height: 44px; padding: 0 20px; border-radius: 12px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .04); box-shadow: none; color: var(--fg); font-family: var(--ui); font-size: 14px; font-weight: 600; line-height: 1; text-decoration: none; text-transform: none; letter-spacing: 0; white-space: nowrap; transition: background .15s, border-color .15s, color .15s, scale .15s var(--spring); }
.cx .btn:hover { border-color: rgba(var(--rgb), .55); background: rgba(var(--rgb), .08); transform: none; text-decoration: none; }
.cx .btn:active { scale: .97; }
.cx .btn.pri { background: var(--a400); border-color: var(--a400); color: #0b1120; }
.cx .btn.pri:hover { background: var(--a300); border-color: var(--a300); }
.cx .btn.sm { height: 36px; padding: 0 14px; font-size: 13px; border-radius: 10px; }
.cx .btn .ext { font-size: .95em; opacity: .8; }

/* Segmented control: the plugin's own toggle. One thumb slides on the spring. */
.cx .seg { position: relative; display: inline-flex; flex: none; padding: 3px; border-radius: 999px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px rgba(139, 157, 180, .16); }
.cx .seg button { position: relative; z-index: 1; border: 0; background: none; padding: 6px 13px; border-radius: 999px; font: 600 12.5px/1.3 var(--ui); color: var(--fg2); white-space: nowrap; transition: color .2s; -webkit-tap-highlight-color: transparent; }
.cx .seg button:hover, .cx .seg button[aria-pressed="true"] { color: var(--fg); }
.cx .seg:not(.ready) button[aria-pressed="true"] { background: rgba(var(--rgb), .2); box-shadow: inset 0 0 0 1px rgba(var(--rgb), .38); }
.cx .seg .th { position: absolute; top: 3px; bottom: 3px; left: 0; width: var(--w, 0); transform: translateX(var(--x, 0)); border-radius: 999px; background: rgba(var(--rgb), .2); box-shadow: inset 0 0 0 1px rgba(var(--rgb), .38); transition: transform var(--spring-bounce-d) var(--spring-bounce), width var(--spring-bounce-d) var(--spring-bounce); pointer-events: none; }

.cx .panel { background: var(--pg); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; position: relative; }
.cx .panel-h { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.cx .panel-b { padding: 22px; }
.cx .pst { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 18px; border-top: 1px solid var(--line); font-size: 13px; color: var(--fg3); flex-wrap: wrap; }
.cx .win { background: var(--page); border: 1px solid var(--line3); border-radius: var(--r); overflow: hidden; position: relative; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.cx .win .aur { position: absolute; top: -220px; left: -140px; width: 460px; height: 460px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--rgb), .2), transparent 65%); filter: blur(50px); pointer-events: none; }
.cx .tbar { position: relative; height: 34px; display: flex; align-items: center; gap: 12px; padding: 0 14px; border-bottom: 1px solid var(--line); background: var(--cv); font-size: 12px; color: var(--fg2); }
.cx .lights { display: flex; gap: 7px; }
.cx .lights i { width: 11px; height: 11px; border-radius: 50%; background: #ec6a5e; opacity: .85; }
.cx .lights i:nth-child(2) { background: #f4bf4f; }
.cx .lights i:nth-child(3) { background: #61c554; }
.cx .tbar .ttl { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; font-weight: 600; color: var(--fg2); }
@media (max-width: 520px) { .cx .tbar .ttl { position: static; transform: none; overflow: hidden; text-overflow: ellipsis; } }
.cx .wsec { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 18px 8px; flex-wrap: wrap; }
.cx .lockup { display: inline-flex; align-items: flex-end; gap: 6px; white-space: nowrap; text-decoration: none; }
.cx .lockup img { height: 22px; width: auto; display: block; }
.cx .lockup span { font: 600 14px/1 var(--serif); color: var(--fg3); padding-bottom: 2px; }
.cx .pbtn { height: 28px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .04); font-size: 12px; font-weight: 600; color: var(--fg3); display: inline-flex; align-items: center; gap: 6px; }
.cx .pbtn:hover { color: var(--fg); border-color: rgba(var(--rgb), .5); }
.cx .voice { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 14px 0 5px; border: 1px solid rgba(var(--rgb), .4); border-radius: 999px; background: rgba(var(--rgb), .1); }
.cx .voice .av { width: 28px; height: 28px; }
.cx .voice .vn { display: block; font-size: 13px; font-weight: 600; line-height: 1.15; }
.cx .voice .vs { display: block; font-size: 11px; color: var(--fg2); line-height: 1.2; }

/* A light that follows the pointer along the rim of the main surfaces (fine pointers only). */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .cx .shine::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none; z-index: 4;
        background: radial-gradient(260px 260px at var(--mx, -400px) var(--my, -400px), rgba(var(--rgb), .75), rgba(var(--rgb), .18) 40%, transparent 70%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
        opacity: 0; transition: opacity .35s; }
    .cx .shine:hover::after { opacity: 1; }
}

/* ---------- the header: one floating bar of glass ----------
   Shared by Cantai (.cx-hdr, partials/site_nav.html) and Cantai for DAWs (.c4d-hdr,
   partials/c4d_nav.html). Neutral glass on apple.com's own recipe (blur 20, saturate 180): the
   product colour lives only in the logo and the one button that sells. The menus sit in .rail,
   next to .cap rather than inside it: the bar's view-transition-name makes it a backdrop root,
   so nothing inside it could blur the page. */
.cx-hdr { z-index: 100; }
.c4d-hdr { z-index: 90; }
:is(.cx-hdr, .c4d-hdr) { position: sticky; top: 0; padding: 12px 16px 0; pointer-events: none; }
:is(.cx-hdr, .c4d-hdr) .rail { position: relative; max-width: 1040px; margin: 0 auto; }
:is(.cx-hdr, .c4d-hdr) .cap { pointer-events: auto; position: relative; height: 52px; display: flex; align-items: center; gap: 6px; padding: 0 8px 0 6px; border-radius: 18px;
    background-color: rgb(14 22 38 / .55); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), inset 0 1px 0 rgb(255 255 255 / .06), 0 8px 24px -14px rgb(0 0 0 / .5);
    transition: background-color .3s, box-shadow .3s; }
:is(.cx-hdr, .c4d-hdr).scrolled .cap { background-color: rgb(14 22 38 / .8); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .08), inset 0 1px 0 rgb(255 255 255 / .06), 0 12px 32px -14px rgb(0 0 0 / .7); }
:is(.cx-hdr, .c4d-hdr) a { text-decoration: none; }
:is(.cx-hdr, .c4d-hdr) :focus-visible { border-radius: 999px; }
:is(.cx-hdr, .c4d-hdr) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
:is(.cx-hdr, .c4d-hdr) .home { display: flex; align-items: center; height: 44px; padding: 0 4px 0 12px; flex: none; }
:is(.cx-hdr, .c4d-hdr) .home img { height: 24px; width: auto; display: block; }

/* The product switch: a flat neutral thumb, like a macOS segmented control. */
:is(.cx-hdr, .c4d-hdr) .product { position: relative; display: grid; grid-template-columns: 1fr 1fr; flex: none; margin-left: 10px; padding: 3px; border-radius: 999px; background: rgb(255 255 255 / .06); }
:is(.cx-hdr, .c4d-hdr) .product a { position: relative; z-index: 1; padding: 5px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600; line-height: 1.3; text-align: center; color: rgb(241 245 249 / .6); white-space: nowrap; transition: color .25s; }
:is(.cx-hdr, .c4d-hdr) .product a:hover { color: rgb(241 245 249 / .9); }
:is(.cx-hdr, .c4d-hdr) .product a[aria-current] { color: #fff; }
:is(.cx-hdr, .c4d-hdr) .product .thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 999px; background: rgb(255 255 255 / .14); transition: transform .45s var(--spring); }
.c4d-hdr .product .thumb, .cx-hdr .product.leaving .thumb { transform: translateX(100%); }
.c4d-hdr .product.leaving .thumb { transform: translateX(0); }
:is(.cx-hdr, .c4d-hdr) .product.leaving a[aria-current] { color: rgb(241 245 249 / .6); }
:is(.cx-hdr, .c4d-hdr) .product.leaving a:not([aria-current]) { color: #fff; }

:is(.cx-hdr, .c4d-hdr) nav.links { display: flex; align-items: center; gap: 2px; margin-left: auto; }
:is(.cx-hdr, .c4d-hdr) nav.links > :is(a, button) { --pen-x: 11px; --pen-y: 5px; display: inline-flex; align-items: center; gap: 5px; padding: 8px 11px; font-size: 13.5px; font-weight: 500; color: rgb(241 245 249 / .72); transition: color .15s; }
:is(.cx-hdr, .c4d-hdr) nav.links > :is(a:hover, a[aria-current], button:hover, button[aria-expanded="true"]) { color: #fff; }
:is(.cx-hdr, .c4d-hdr) nav.links > button .pen { --pen-x: 0px; --pen-y: -2px; }
:is(.cx-hdr, .c4d-hdr) .chev { flex: none; opacity: .65; transition: rotate .25s var(--spring); }
:is(.cx-hdr, .c4d-hdr) [aria-expanded="true"] > .chev { rotate: 180deg; }

:is(.cx-hdr, .c4d-hdr) .right { display: flex; align-items: center; gap: 6px; margin-left: 8px; }
:is(.cx-hdr, .c4d-hdr) .signin { --pen-x: 10px; --pen-y: 5px; padding: 8px 10px; font-size: 13.5px; font-weight: 500; color: rgb(241 245 249 / .72); white-space: nowrap; transition: color .15s; }
:is(.cx-hdr, .c4d-hdr) .signin:hover { color: #fff; }
.cx-hdr .try, .c4d-hdr .hdr-buy .go { height: 36px; padding: 0 16px; border-radius: 999px; display: inline-flex; align-items: center; background: var(--a400); color: #0b1120; font-size: 13.5px; font-weight: 600; white-space: nowrap; transition: background .15s, scale .15s ease; }
.cx-hdr .try:hover, .c4d-hdr .hdr-buy:hover .go { background: var(--a300); }
.cx-hdr .try:active, .c4d-hdr .hdr-buy:active .go { scale: .97; }
.c4d-hdr .hdr-buy { display: flex; align-items: center; gap: 10px; height: 36px; padding-left: 8px; overflow: hidden; max-width: 260px; white-space: nowrap; transition: max-width .35s ease, opacity .25s, padding .35s, margin .35s; }
.c4d-hdr .hdr-buy .now { font-size: 14px; font-weight: 700; color: var(--fg); }
.c4d-hdr .hdr-buy .was { font-size: 12.5px; color: rgb(241 245 249 / .45); text-decoration: line-through; }
.c4d-hdr .hdr-buy.tucked { max-width: 0; opacity: 0; padding: 0; margin-left: -6px; pointer-events: none; }

/* Signed in: a line glyph the size of the text, in the links' colour. */
:is(.cx-hdr, .c4d-hdr) .acct { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; color: rgb(241 245 249 / .72); transition: color .15s, background .15s; }
:is(.cx-hdr, .c4d-hdr) .acct:is(:hover, [aria-expanded="true"]) { color: #fff; background: rgb(255 255 255 / .08); }

/* Glass menus that open from the button that owns them. Each is shown by dropping [hidden],
   which restarts the animation. */
:is(.cx-hdr, .c4d-hdr) :is(.menu, .sheet) { position: absolute; top: calc(100% + 8px); z-index: 2; pointer-events: auto;
    background: rgb(20 29 46 / .84); -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09), 0 18px 40px -16px rgb(0 0 0 / .75);
    transform-origin: top left; animation: hdr-menu .22s cubic-bezier(.2, .8, .2, 1); }
@keyframes hdr-menu { from { opacity: 0; scale: .97; translate: 0 -3px; } }
:is(.cx-hdr, .c4d-hdr) .menu { left: 0; min-width: 210px; padding: 6px; border-radius: 14px; }
:is(.cx-hdr, .c4d-hdr) .m-account { left: auto; right: 0; transform-origin: top right; }
:is(.cx-hdr, .c4d-hdr) .menu a { display: block; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; color: rgb(241 245 249 / .92); transition: background .15s; }
:is(.cx-hdr, .c4d-hdr) .menu a:hover { background: rgb(255 255 255 / .08); color: #fff; }
:is(.cx-hdr, .c4d-hdr) .menu .who { margin: 0 0 5px; padding: 8px 10px 11px; border-bottom: 1px solid rgb(255 255 255 / .08); font-size: 13.5px; font-weight: 600; line-height: 1.3; color: var(--fg); overflow-wrap: anywhere; }
:is(.cx-hdr, .c4d-hdr) .menu .who small { display: block; margin-bottom: 2px; font-size: 12px; font-weight: 500; color: rgb(241 245 249 / .5); }

:is(.cx-hdr, .c4d-hdr) .burger { display: none; width: 36px; height: 36px; border-radius: 50%; align-items: center; justify-content: center; flex: none; transition: background .15s; }
:is(.cx-hdr, .c4d-hdr) .burger:is(:hover, [aria-expanded="true"]) { background: rgb(255 255 255 / .08); }
:is(.cx-hdr, .c4d-hdr) .burger i { display: block; position: relative; width: 15px; height: 8px; }
:is(.cx-hdr, .c4d-hdr) .burger i::before, :is(.cx-hdr, .c4d-hdr) .burger i::after { content: ""; position: absolute; left: 0; width: 15px; height: 1.5px; border-radius: 2px; background: rgb(241 245 249 / .88); transition: translate .25s ease, rotate .25s ease; }
:is(.cx-hdr, .c4d-hdr) .burger i::before { top: 0; }
:is(.cx-hdr, .c4d-hdr) .burger i::after { bottom: 0; }
:is(.cx-hdr, .c4d-hdr) .burger[aria-expanded="true"] i::before { translate: 0 3.25px; rotate: 45deg; }
:is(.cx-hdr, .c4d-hdr) .burger[aria-expanded="true"] i::after { translate: 0 -3.25px; rotate: -45deg; }
:is(.cx-hdr, .c4d-hdr) .sheet { left: 0; right: 0; max-height: calc(100dvh - 90px); overflow: auto; padding: 8px; border-radius: 18px; transform-origin: top right; }
:is(.cx-hdr, .c4d-hdr) .sheet a.row { display: block; padding: 11px 12px; border-radius: 10px; font-size: 16px; color: rgb(241 245 249 / .94); }
:is(.cx-hdr, .c4d-hdr) .sheet a.row:hover { background: rgb(255 255 255 / .07); }
.cx-hdr .sheet a.row.sub { padding-left: 26px; font-size: 14.5px; color: rgb(241 245 249 / .62); }
:is(.cx-hdr, .c4d-hdr) :is(.sheet-cta, .sheet-buy) { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgb(255 255 255 / .08); }
.cx-hdr .sheet-cta .btn { flex: 1; border: 0; border-radius: 10px; background: rgb(255 255 255 / .07); }
.cx-hdr .sheet-cta .btn.pri { background: var(--a400); }
.c4d-hdr .sheet-buy { justify-content: space-between; padding: 12px 4px 4px 12px; }
.c4d-hdr .sheet-buy .p { font-size: 20px; font-weight: 700; }
.c4d-hdr .sheet-buy .p s { font-size: 14px; font-weight: 500; color: rgb(241 245 249 / .45); margin-left: 8px; }

/* Ink, the header's one idea of motion: links are underlined as if by pencil (in from the left,
   out to the right), the account glyph nods and redraws its circle, and the script logo writes
   itself once a visit and on arriving from the other product (base.html sets html.cx-ink). */
:is(.cx-hdr, .c4d-hdr) .pen { position: relative; }
:is(.cx-hdr, .c4d-hdr) .pen::after { content: ""; position: absolute; left: var(--pen-x, 0px); right: var(--pen-x, 0px); bottom: var(--pen-y, -3px); height: 1.5px; border-radius: 2px; background: currentColor; opacity: .55; pointer-events: none;
    scale: 0 1; transform-origin: 100% 50%; transition: scale .42s var(--spring); }
:is(.cx-hdr, .c4d-hdr) :is(.pen:hover, .pen[aria-current], button:hover > .pen, [aria-expanded="true"] > .pen)::after { scale: 1 1; transform-origin: 0 50%; }
:is(.cx-hdr, .c4d-hdr) .acct :is(.o, .h) { transform-box: fill-box; transform-origin: center; }
:is(.cx-hdr, .c4d-hdr) .acct .o { stroke-dasharray: 100; rotate: -90deg; }
:is(.cx-hdr, .c4d-hdr) .acct:hover .h { animation: hdr-nod .55s var(--spring-bounce); }
:is(.cx-hdr, .c4d-hdr) .acct[aria-expanded="true"] .o { animation: hdr-draw .6s cubic-bezier(.55, .1, .3, 1) both; }
@keyframes hdr-nod { 35% { translate: 0 -1.6px; } }
@keyframes hdr-draw { from { stroke-dashoffset: 100; } }
html.cx-ink :is(.cx-hdr, .c4d-hdr) .home img {
    -webkit-mask: linear-gradient(90deg, #000 46%, transparent 54%) 0 0 / 260% 100% no-repeat; mask: linear-gradient(90deg, #000 46%, transparent 54%) 0 0 / 260% 100% no-repeat;
    animation: hdr-ink 1.15s cubic-bezier(.55, .1, .3, 1) .15s both; }
@keyframes hdr-ink { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }

@media (max-width: 1000px) {
    :is(.cx-hdr, .c4d-hdr) { padding: 10px 12px 0; }
    :is(.cx-hdr, .c4d-hdr) .cap { height: 50px; padding: 0 7px 0 4px; border-radius: 16px; }
    :is(.cx-hdr, .c4d-hdr) :is(nav.links, .signin, .try, .hdr-buy) { display: none; }
    :is(.cx-hdr, .c4d-hdr) .right { margin-left: auto; gap: 2px; }
    :is(.cx-hdr, .c4d-hdr) .burger { display: flex; }
    :is(.cx-hdr, .c4d-hdr) .home { padding: 0 2px 0 10px; }
    :is(.cx-hdr, .c4d-hdr) .home img { height: 21px; }
    :is(.cx-hdr, .c4d-hdr) .product { margin-left: 6px; }
    :is(.cx-hdr, .c4d-hdr) .product a { padding: 5px 11px; font-size: 12px; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
    :is(.cx-hdr, .c4d-hdr) :is(.cap, .menu, .sheet) { background-color: #131d30; -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-reduced-motion: reduce) {
    :is(.cx-hdr, .c4d-hdr) :is(*, *::before, *::after) { animation: none !important; transition-duration: .01ms !important; }
}

/* ---------- the footer ---------- */
.cx-foot { margin-top: 0; border-top: 1px solid var(--line); padding: 56px 0 32px; color: var(--fg2); font-size: 13px; }
.cx-foot .cols { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, .9fr)) minmax(0, 1.4fr); gap: 32px; }
.cx-foot .lockup img { height: 26px; }
.cx-foot .lockup span { font-size: 16px; }
.cx-foot .about { margin-top: 14px; max-width: 320px; line-height: 1.6; }
.cx-foot h4 { margin: 0 0 12px; font: 700 10.5px/1.4 var(--ui); letter-spacing: .13em; text-transform: uppercase; color: var(--fg2); }
.cx-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.cx-foot a { color: var(--fg3); text-decoration: none; transition: color .15s; }
.cx-foot a:hover { color: var(--fg); }
.cx-foot .news p { line-height: 1.6; margin-bottom: 12px; }
.cx-foot .news form { display: flex; gap: 8px; }
.cx-foot .news input[type="email"] { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid rgba(139, 157, 180, .26); border-radius: 10px; background: #0b1424; color: var(--fg); font: 500 13px var(--ui); outline: none; transition: border-color .15s, box-shadow .15s; }
.cx-foot .news input[type="email"]:focus { border-color: var(--a400); box-shadow: 0 0 0 3px rgba(var(--rgb), .22); }
.cx-foot .news .btn { height: 40px; border-radius: 10px; }
.cx-foot .social { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 16px; }
.cx-foot .social a { width: 31px; height: 31px; border-radius: 10px; border: 1px solid var(--line2); display: inline-flex; align-items: center; justify-content: center; color: var(--fg2); transition: color .15s, border-color .15s; }
.cx-foot .social a:hover { color: var(--a300); border-color: rgba(var(--rgb), .5); }
.cx-foot .social svg { width: 16px; height: 16px; }
.cx-foot .bottom { margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; gap: 12px; flex-wrap: wrap; justify-content: space-between; font-size: 12px; color: var(--fg2); }
@media (max-width: 1100px) {
    .cx-foot .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cx-foot .cols > .brand, .cx-foot .cols > .news { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
    .cx-foot { padding-top: 44px; }
    .cx-foot .cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
}

/* ---------- sections ---------- */
.cx .sec { padding: 104px 0; }
@media (max-width: 900px) { .cx .sec { padding: 72px 0; } }
.cx .sh { max-width: 720px; margin: 0 0 40px; }
.cx .sh .lbl { display: block; margin-bottom: 14px; }
.cx .sh p { color: var(--fg3); font-size: 17px; margin: 14px 0 0; max-width: 620px; }
.cx .sh p a { color: var(--a300); }
.cx .sh-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.cx .sh-row .sh { margin: 0; }
.cx .band { background: var(--cv); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.cx .shared-mark { display: flex; align-items: center; gap: 8px; }
.cx .shared-mark svg { flex: none; color: var(--fg3); }
/* On a phone the two rings read as stray glyphs glued to the label, not as a mark. */
@media (max-width: 700px) { .cx .shared-mark svg { display: none; } }

/* A page's own title block, for the pages that are not landings. */
.cx .page-top { padding: 64px 0 40px; }
.cx .page-top h1 { font-weight: 700; font-size: clamp(46px, 6vw, 76px); line-height: .98; letter-spacing: -1.4px; }
.cx .page-top .lbl { display: block; margin-bottom: 16px; }
.cx .page-top p { margin-top: 16px; max-width: 620px; color: var(--fg3); font-size: 17px; }
@media (max-width: 700px) { .cx .page-top { padding: 40px 0 28px; } }

/* ---------- pricing cards ---------- */
.cx .plans { display: grid; grid-template-columns: repeat(var(--cards, 3), minmax(0, 1fr)); gap: 18px; align-items: stretch; }
@media (max-width: 1080px) { .cx .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) { .cx .plans { grid-template-columns: 1fr; } }
.cx .plan { display: flex; flex-direction: column; }
.cx .plan .body { position: relative; display: flex; flex-direction: column; flex: 1; padding: 24px 26px 22px; }
.cx .plan-id { display: flex; align-items: center; gap: 14px; min-height: 48px; }
.cx .plan-id .ic { display: flex; align-items: center; gap: 6px; flex: none; }
.cx .plan-id .ic img { width: 44px; height: 44px; border-radius: 10px; display: block; object-fit: contain; }
.cx .plan-id .ic.daws { display: grid; grid-template-columns: repeat(2, 21px); gap: 3px; }
.cx .plan-id .ic.daws img { width: 21px; height: 21px; border-radius: 5px; }
.cx .plan-id .ic span { color: var(--fg2); font-weight: 600; }
.cx .plan-id b { display: block; font-size: 17px; font-weight: 700; line-height: 1.25; }
.cx .plan-id small { display: block; font-size: 13px; color: var(--fg2); margin-top: 2px; }
.cx .bigprice { display: flex; align-items: baseline; gap: 8px; margin-top: 22px; font: 700 56px/1 var(--ui); letter-spacing: -1.8px; color: var(--fg); }
.cx .bigprice .period { font: 500 15px/1 var(--ui); letter-spacing: 0; color: var(--fg2); }
.cx .price-after { margin-top: 10px; color: var(--fg3); }
.cx .price-after strong { color: var(--fg); }
.cx .checks { list-style: none; padding: 0; margin: 20px 0 22px; border-top: 1px solid var(--line); display: grid; }
.cx .checks li, .cx .checks .card-feature { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--fg3); }
.cx .plan .fine { margin: auto 0 14px; }
.cx .plan .btn { width: 100%; height: 52px; font-size: 15px; }
.cx .plan .btn.pri { box-shadow: 0 14px 34px -14px rgba(var(--rgb), .7); }
.cx .plan.other .btn.pri { background: var(--b400); border-color: var(--b400); box-shadow: 0 14px 34px -14px rgba(113, 163, 236, .7); }
.cx .plan.other .btn.pri:hover { background: var(--b300); border-color: var(--b300); }
.cx .plan.other .tick { background: rgba(113, 163, 236, .18); color: var(--b300); }
.cx .plan.other { border-color: rgba(113, 163, 236, .3); }
.cx .fine { margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--fg3); }
.cx .plan .fine a { color: var(--a200); text-decoration: underline; text-underline-offset: 3px; }
.cx .ethic { display: flex; align-items: center; gap: 10px; margin-top: 26px; font-size: 14px; color: var(--fg3); }
.cx .ethic svg { color: var(--a300); flex: none; }
.cx .ethic b { color: var(--fg); font-weight: 600; }

/* ---------- voices and quotes (shared by both products) ---------- */
/* Ottetto: the ensemble photo on its studio backdrop, the presets, and the stereo field. */
.cx .ottetto { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
.cx .ot-photo { position: relative; min-height: 460px; background: #f1f0ec; }
.cx .ot-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; scale: 1.02; transition: opacity .5s ease, scale 1.2s var(--spring); }
.cx .ot-photo img.on { opacity: 1; scale: 1; }
/* Said beside the picture it is about, not only under the library. */
.cx .ot-art { position: absolute; left: 14px; bottom: 14px; z-index: 1; padding: 5px 10px; border-radius: 8px; background: rgba(11, 17, 32, .88); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-size: 13px; font-weight: 600; color: #fff; }
.cx .sh .ethic { margin-top: 16px; font-size: 14.5px; }
.cx .ot-side { display: flex; flex-direction: column; gap: 18px; padding: 24px 26px 22px; border-left: 1px solid var(--line); }
.cx .ot-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12.5px; }
.cx .ot-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cx .ot-list button { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; border: 1px solid var(--line2); border-radius: 12px; background: rgba(255, 255, 255, .02); text-align: left; transition: border-color .2s, background .2s; }
.cx .ot-list button:first-child { grid-column: 1 / -1; }
.cx .ot-list .nm { font: 600 19px/1.1 var(--serif); color: var(--fg); }
.cx .ot-list .ct { font-size: 12px; color: var(--fg2); white-space: nowrap; }
.cx .ot-list button:hover { border-color: rgba(var(--rgb), .45); }
.cx .ot-list button[aria-pressed="true"] { border-color: rgba(var(--rgb), .6); background: rgba(var(--rgb), .1); }
.cx .ot-list button[aria-pressed="true"] .ct { color: var(--a200); }
.cx .ot-field { margin-top: auto; padding: 14px 16px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--cv); }
.cx .ot-axis { display: flex; align-items: center; gap: 10px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; color: var(--fg2); }
.cx .ot-axis i { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(var(--rgb), .5), rgba(139, 157, 180, .2) 50%, rgba(var(--rgb), .5)); }
.cx .ot-seats { position: relative; list-style: none; margin: 10px 0 0; padding: 0; height: 84px; }
.cx .ot-seats li { --w: 62px; position: absolute; top: 0; left: calc((var(--pan) + 1) / 2 * (100% - var(--w))); width: var(--w); display: flex; flex-direction: column; align-items: center; text-align: center; transition: left .7s var(--spring-bounce), opacity .35s ease, scale .5s var(--spring); }
.cx .ot-seats li.off { opacity: 0; scale: .8; pointer-events: none; }
.cx .ot-seats .av { width: 44px; height: 44px; box-shadow: 0 0 0 2px var(--cv), 0 0 0 3px rgba(var(--rgb), .45); }
.cx .ot-seats b { margin-top: 7px; font-size: 12.5px; line-height: 1.1; }
.cx .ot-seats small { font-size: 11px; color: var(--fg2); line-height: 1.2; }
.cx .ot-play { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 12px 6px 10px; border: 1px solid var(--line2); border-radius: 999px; background: transparent; color: var(--fg3); font: 500 12.5px var(--ui); cursor: pointer; transition: border-color .2s, color .2s, background .2s; }
.cx .ot-play:hover { border-color: rgba(var(--rgb), .5); color: var(--fg); }
.cx .ot-play.singing { border-color: rgba(var(--rgb), .55); background: rgba(var(--rgb), .08); color: var(--fg); }
.cx .ot-play svg { color: var(--a300); }
.cx .ot-play b { font-weight: 600; }
/* While an ensemble sings, its singers' rings keep the beat, from the first one (the file's 0.4 s lead). */
@media (prefers-reduced-motion: no-preference) {
    .cx .ot-field:has(.ot-play.singing) .ot-seats li:not(.off) .av { animation: seat-beat var(--beat) ease-out .4s infinite; }
}
@keyframes seat-beat { 0% { box-shadow: 0 0 0 2px var(--cv), 0 0 0 3px rgba(var(--rgb), .95); } 100% { box-shadow: 0 0 0 2px var(--cv), 0 0 0 3px rgba(var(--rgb), .45); } }
.cx .ot-note { font-size: 13.5px; color: var(--fg2); }
.cx .ot-note b { color: var(--fg3); font-weight: 600; }
@media (max-width: 980px) {
    .cx .ottetto { grid-template-columns: 1fr; }
    .cx .ot-photo { min-height: 0; aspect-ratio: 4 / 3; }
    .cx .ot-side { border-left: 0; border-top: 1px solid var(--line); padding: 18px 16px; }
}
@media (max-width: 520px) {
    /* Eight seats don't fit in one row of names: every other seat drops to a second row. */
    .cx .ot-seats li { --w: 52px; transition: left .7s var(--spring-bounce), top .5s var(--spring), opacity .35s ease, scale .5s var(--spring); }
    .cx .ot-seats .av { width: 36px; height: 36px; }
    .cx .ot-seats b { font-size: 11px; }
    .cx .ot-seats small { display: none; }
    .cx .ot-field[data-n="8"] .ot-seats { height: 128px; }
    .cx .ot-field[data-n="8"] .ot-seats li:nth-child(even) { top: 62px; }
    .cx .ot-list .nm { font-size: 17px; }
}

/* The whole library: every singer the voice menu lists, by type. */
.cx .lib { margin-top: 64px; }
.cx .lib-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 22px; }
.cx .lib-h h3 { font-size: 34px; }
.cx .lib-h p { margin-top: 6px; font-size: 14.5px; }
/* The type filter is one row that scrolls sideways when it doesn't fit (phones), never wraps. */
.cx .lib-h .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cx .lib-h .seg::-webkit-scrollbar { display: none; }
.cx .lib-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.cx .lib-grid.clip .vcard:nth-child(n+15) { display: none; }
.cx .vcard { border: 1px solid var(--line); border-radius: 13px; background: var(--pg); overflow: hidden; animation: cx-card .5s var(--spring) both; }
.cx .vcard[hidden] { display: none; }
.cx .vcard .ph { position: relative; display: block; aspect-ratio: 4 / 5; background: #f1f0ec; overflow: hidden; }
.cx .vcard .ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease, scale .9s var(--spring); }
.cx .vcard .ph img.on { opacity: 1; }
/* Listening: a small button on the photo; while the voice sings, a line runs along the photo's foot. */
.cx .vplay { position: absolute; right: 8px; bottom: 8px; z-index: 1; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(11, 17, 32, .72); color: #fff; cursor: pointer; opacity: 0; scale: .9; transition: opacity .2s, scale .25s var(--spring), background .2s; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.cx .vcard:hover .vplay, .cx .vplay:focus-visible, .cx .vcard.singing .vplay { opacity: 1; scale: 1; }
.cx .vplay:hover { background: rgba(11, 17, 32, .9); }
@media (hover: none) { .cx .vplay { opacity: .92; scale: 1; } }
.cx :is(.vplay, .ot-play) .i-stop, .cx .singing :is(.vplay, .ot-play) .i-play, .cx .ot-play.singing .i-play { display: none; }
.cx .singing :is(.vplay) .i-stop, .cx .ot-play.singing .i-stop { display: inline; }
.cx .vcard .ph::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--a400); transform-origin: 0 50%; transform: scaleX(0); opacity: 0; }
.cx .vcard.singing .ph::after { opacity: 1; animation: sing-run var(--sing-s, 4s) linear forwards; }
@keyframes sing-run { to { transform: scaleX(1); } }
.cx .vcard:hover .ph img.on { scale: 1.04; }
.cx .vcard .cap { display: block; padding: 9px 11px 11px; }
.cx .vcard b { display: block; font: 600 19px/1.1 var(--serif); }
.cx .vcard small { display: block; margin-top: 3px; font-size: 12.5px; color: var(--fg3); }
.cx .vcard .ot { color: var(--a300); font-weight: 600; }
.cx .vcard .styles { display: flex; gap: 6px; margin-top: 5px; overflow: hidden; white-space: nowrap; font-size: 12px; color: var(--fg3); -webkit-mask: linear-gradient(90deg, #000 80%, transparent); mask: linear-gradient(90deg, #000 80%, transparent); }
.cx .vcard .styles span { transition: color .25s; }
.cx .vcard .styles span.on { color: var(--a200); }
.cx .lib-more { display: flex; justify-content: center; margin-top: 18px; }
.cx .lib-note { margin-top: 14px; font-size: 14px; text-align: center; color: var(--fg3); }
@keyframes cx-card { from { opacity: 0; translate: 0 10px; } }
@media (max-width: 1100px) { .cx .lib-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } .cx .lib-grid.clip .vcard:nth-child(n+11) { display: none; } }
@media (max-width: 700px) { .cx .lib-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .cx .lib-grid.clip .vcard:nth-child(n+10) { display: none; } .cx .vcard b { font-size: 16px; } .cx .vcard .cap { padding: 7px 8px 9px; } .cx .lib-h h3 { font-size: 28px; } }

.cx .quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cx .quote { margin: 0; display: flex; flex-direction: column; padding: 26px 26px 22px; }
.cx .quote .qm { font: 700 64px/.6 var(--serif); color: var(--a400); height: 26px; }
.cx .quote blockquote { margin: 0; flex: 1; font: italic 500 22px/1.38 var(--serif); color: var(--ink); }
.cx .quote figcaption { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--fg2); line-height: 1.45; }
.cx .quote figcaption b { display: block; font-size: 14px; font-weight: 600; color: var(--fg); }
@media (max-width: 980px) { .cx .quotes { grid-template-columns: 1fr; } .cx .quote blockquote { font-size: 21px; } }

/* ---------- phones: cards become a carousel ----------
   Three plan cards or three quotes stacked are three screens of scrolling. Below 760px they sit in
   one endless row, the front card centred and the ones on either side turned away in depth, like
   cards on a turntable; site.js moves it, wraps it around, adds the dots and sets each card's --p
   (its distance from the centre, in cards, signed) and --a (the same, unsigned) every frame, so
   the depth follows the finger. The row bleeds to the viewport edges. */
@media (max-width: 760px) {
    .cx .swipe { --cw: min(80vw, 340px); display: flex; gap: 10px; margin: -14px -16px -40px; padding: 22px calc(50vw - var(--cw) / 2) 56px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .cx .swipe::-webkit-scrollbar { display: none; }
    .cx .swipe > * { flex: 0 0 var(--cw); scroll-snap-align: center; scroll-snap-stop: always;
        transform: perspective(1000px) translateX(calc(var(--p, 0) * -26px)) translateZ(calc(var(--a, 0) * -120px)) rotateY(calc(var(--p, 0) * -28deg));
        opacity: calc(1 - min(var(--a, 0), 1.6) * .4);
        transition: box-shadow .7s ease, border-color .7s ease; will-change: transform; }
    /* Inside each card the content drifts a little against the turn, so the card reads as glass. */
    .cx .swipe > * .body, .cx .swipe > * blockquote, .cx .swipe > * figcaption { translate: calc(var(--p, 0) * 10px) 0; }
    /* The card that arrives in front lights up: a glow in its own colour and one sweep of light. */
    .cx .swipe > .is-on { border-color: rgba(var(--rgb), .45); box-shadow: 0 30px 60px -28px rgba(var(--rgb), .6), 0 24px 70px rgba(0, 0, 0, .45); }
    .cx .plans.swipe > .plan.other.is-on { border-color: rgba(113, 163, 236, .55); box-shadow: 0 30px 60px -28px rgba(113, 163, 236, .65), 0 24px 70px rgba(0, 0, 0, .45); }
    .cx .swipe > .is-on::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit;
        background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .07) 44%, rgba(var(--rgb), .16) 50%, rgba(255, 255, 255, .07) 56%, transparent 70%);
        translate: -115% 0; animation: cx-sheen 1.3s .08s cubic-bezier(.3, .7, .2, 1) both; }
    .cx .quotes.swipe > .is-on .qm { transform-origin: 0 60%; animation: cx-qm .7s var(--spring-bounce) both; }
    .cx .plans.swipe > .is-on .bigprice { animation: cx-price .6s var(--spring) both; }
    .cx .plans.swipe { grid-template-columns: none; }
    .cx .plans.swipe .plan .body { padding: 18px 18px 18px; }
    .cx .plans.swipe .bigprice { margin-top: 16px; font-size: 44px; }
    .cx .plans.swipe .checks { margin: 16px 0 16px; }
    .cx .plans.swipe .checks li { padding: 9px 0; font-size: 14px; }
    .cx .plans.swipe .plan .btn { height: 48px; }
    .cx .quotes.swipe { grid-template-columns: none; }
    .cx .quote blockquote { font-size: 19px; }
    .cx .dots { display: flex; justify-content: center; gap: 6px; margin-top: 10px; }
    .cx .dots button { width: 24px; height: 24px; padding: 0; border: 0; background: none; display: inline-flex; align-items: center; justify-content: center; }
    .cx .dots button::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: rgba(139, 157, 180, .35); transition: background .2s, width .3s var(--spring); }
    .cx .dots button[aria-current="true"]::before { width: 18px; border-radius: 3px; background: var(--a300); }
    /* While the row moves on by itself, the current dot fills up until the next card. */
    .cx .dots.auto button[aria-current="true"]::before { background: linear-gradient(var(--a300), var(--a300)) 0 0 / 0% 100% no-repeat, rgba(var(--rgb), .3); animation: cx-dotfill var(--auto-ms, 4.5s) linear forwards; }
}
@keyframes cx-dotfill { to { background-size: 100% 100%, auto; } }
@keyframes cx-sheen { to { translate: 115% 0; } }
@keyframes cx-qm { from { scale: .3; opacity: 0; } }
@keyframes cx-price { from { opacity: .35; translate: 0 8px; } }
@media (min-width: 761px) { .cx .dots { display: none; } }

/* ---------- phones: the offer follows along ----------
   A bar at the bottom with the price and the one button, shown once the hero's offer has scrolled
   away and hidden again while the pricing cards are on screen. The page's own script marks it
   .on; it lifts the chat launcher out of the way while it shows. */
.cx-dock { display: none; }
@media (max-width: 760px) {
    .cx-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; display: block; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: rgba(13, 23, 40, .9); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); border-top: 1px solid rgba(var(--rgb), .22); box-shadow: 0 -18px 40px -20px rgba(0, 0, 0, .7); translate: 0 110%; transition: translate .45s var(--spring), visibility .45s; visibility: hidden; }
    .cx-dock.on { translate: 0 0; visibility: visible; }
    .cx-dock .dock-in { display: flex; align-items: center; gap: 12px; }
    .cx-dock .dock-price { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
    .cx-dock .dock-price b { font: 700 20px/1.1 var(--ui); letter-spacing: -.4px; color: var(--fg); white-space: nowrap; }
    .cx-dock .dock-price b s { font-size: 14px; font-weight: 500; color: var(--muted); margin-left: 6px; }
    .cx-dock .dock-price small { font-size: 11.5px; color: var(--fg2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .cx-dock .btn { flex: 1; height: 48px; font-size: 15px; border-radius: 12px; }
    .cx-dock .btn.pri { box-shadow: 0 10px 24px -10px rgba(var(--rgb), .8); }
    @media (prefers-reduced-transparency: reduce), (prefers-contrast: more) { .cx-dock { background: #0d1728; -webkit-backdrop-filter: none; backdrop-filter: none; } }
    body.cx-docked #cantai-chat-launcher { bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
    body.cx-docked #cantai-chat-panel { bottom: calc(150px + env(safe-area-inset-bottom)) !important; }
    body.cx-docked iframe#launcher, body.cx-docked iframe[title="Button to launch messaging window"] { bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
}

/* ---------- touch: bigger targets, no hover-only states ---------- */
@media (pointer: coarse) {
    .cx .seg button { padding: 9px 13px; }
    .cx .pbtn { height: 36px; padding: 0 14px; }
    .cx .faq summary { padding: 18px 4px; font-size: 20px; }
    .cx .trk .pp { width: 40px; height: 40px; }
    .cx .ot-list button { min-height: 48px; }
}

/* ---------- questions and answers (home, /daw, /faq) ---------- */
.cx .faq { border-top: 1px solid var(--line); }
.cx .faq details { border-bottom: 1px solid var(--line); }
.cx .faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 4px; font: 600 23px/1.25 var(--serif); color: var(--fg); border-radius: 8px; }
.cx .faq summary::-webkit-details-marker { display: none; }
.cx .faq summary::after { content: ""; flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line3); background: linear-gradient(var(--a300), var(--a300)) center / 11px 1.5px no-repeat, linear-gradient(var(--a300), var(--a300)) center / 1.5px 11px no-repeat; transition: rotate .45s var(--spring-bounce), background-color .2s; }
.cx .faq details[open] summary::after { rotate: 45deg; background-color: rgba(var(--rgb), .12); }
.cx .faq summary:hover { color: var(--a200); }
.cx .faq .a { padding: 0 52px 22px 4px; color: var(--fg3); font-size: 15.5px; }
.cx .faq .a a { color: var(--a300); }
@media (prefers-reduced-motion: no-preference) {
    .cx .faq { interpolate-size: allow-keywords; }
    .cx .faq details::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--spring), content-visibility .5s allow-discrete; }
    .cx .faq details[open]::details-content { block-size: auto; }
}

/* ---------- modals (the pages' own: login needed, plan already active) ---------- */
.cx-modal { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; padding: 24px; background: rgba(4, 8, 16, .66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cx-modal.active { display: flex; }
.cx-modal .box { width: min(440px, 100%); padding: 26px; border: 1px solid var(--line3); border-radius: 20px; background: #111d30; box-shadow: 0 50px 120px -20px rgba(0, 0, 0, .75); }
.cx-modal h3 { font: 600 28px/1.1 var(--serif); }
.cx-modal p { margin-top: 10px; color: var(--fg3); font-size: 15px; }
.cx-modal p a { color: var(--a300); }
.cx-modal .acts { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; }

/* ---------- motion ----------
   Scroll reveals play once (site.js) on one curve. .reveal rises 30 px with the opacity running a
   little longer than the move; .reveal-win opens its clip from the edges as the card settles;
   .reveal-photo is uncovered from the bottom while its image settles from 108 %; .reveal-lines
   headings rise line by line out of a mask. Menus, buttons, prices and answers never move. */
:root {
    --ease-reveal: cubic-bezier(.19, 1, .22, 1);
    /* One beat at 92 bpm, the tempo the home page's hymn is sung at. Every ambient pulse on the site
       is a whole number of beats, so the page keeps one time. */
    --beat: 652ms;
}
html.cx-io .cx .reveal { opacity: 0; translate: 0 30px; }
html.cx-io .cx .reveal.in { opacity: 1; translate: none; transition: opacity .9s ease-out var(--d, 0ms), translate .7s var(--ease-reveal) var(--d, 0ms); }
html.cx-io .cx .reveal-win:not(.done) { clip-path: inset(6% 8% round 24px); scale: .96; opacity: 0; }
html.cx-io .cx .reveal-win.in:not(.done) { clip-path: inset(0 round 18px); scale: 1; opacity: 1; transition: clip-path 1.3s var(--ease-reveal) var(--d, 0ms), scale 1.3s var(--ease-reveal) var(--d, 0ms), opacity .6s ease-out var(--d, 0ms); }
html.cx-io .cx .reveal-photo:not(.done) { clip-path: inset(100% 0 0 0); }
html.cx-io .cx .reveal-photo.in:not(.done) { clip-path: inset(0); transition: clip-path 1.25s var(--ease-reveal) calc(var(--d, 0ms) + 120ms); }
html.cx-io .cx .reveal-photo:not(.done) img { scale: 1.08; }
html.cx-io .cx .reveal-photo.in:not(.done) img { scale: 1; transition: scale 1.4s var(--ease-reveal) calc(var(--d, 0ms) + 120ms); }
/* Hidden until it is split, so the heading doesn't show and then drop into its masks. */
html.cx-io .cx .reveal-lines:not([data-lines]):not(.done) { opacity: 0; }
/* The padding keeps the italics and descenders inside the mask; the negative margin keeps the layout. */
.cx .rv-w { display: inline-block; overflow: clip; vertical-align: top; padding: .1em .08em .18em; margin: -.1em -.08em -.18em; }
.cx .rv-wi { display: inline-block; translate: 0 115%; }
.cx .reveal-lines.in .rv-wi { translate: none; transition: translate 1.2s var(--ease-reveal) calc(var(--d, 0ms) + var(--k, 0ms)); }
@media (prefers-reduced-motion: reduce) {
    .cx *, .cx *::before, .cx *::after, .cx-hdr *, .cx-foot * { animation: none !important; transition: none !important; }
}
@keyframes cx-rise { from { opacity: 0; translate: 0 26px; } }
@keyframes cx-dotp { 0% { box-shadow: 0 0 0 0 rgba(var(--rgb), .5); } 100% { box-shadow: 0 0 0 8px rgba(var(--rgb), 0); } }
@keyframes cx-blink { 50% { opacity: 0; } }

/* ---------- a single-message page (purchase done, purchase canceled) ---------- */
.cx .flow { display: grid; place-items: center; min-height: calc(100vh - 260px); padding: 56px 16px 96px; }
.cx .flow .win { width: min(560px, 100%); }
.cx .flow-b { padding: 30px 30px 26px; }
.cx .flow .mark { width: 56px; height: 56px; display: block; margin-bottom: 20px; }
.cx .flow .mark circle { fill: rgba(var(--rgb), .14); stroke: var(--a400); stroke-width: 2; }
.cx .flow .mark path { fill: none; stroke: var(--a200); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cx .flow .mark.no circle { fill: rgba(229, 72, 77, .1); stroke: rgba(229, 72, 77, .7); }
.cx .flow .mark.no path { stroke: #f3a3a6; }
.cx .flow h1 { font-size: clamp(38px, 5vw, 50px); font-weight: 700; letter-spacing: -.8px; line-height: 1.02; }
.cx .flow .sub { margin-top: 12px; color: var(--fg3); font-size: 16px; }
.cx .flow-list { list-style: none; margin: 22px 0 24px; padding: 0; border-top: 1px solid var(--line); }
.cx .flow-list li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; color: var(--fg3); }
.cx .flow-list a { color: var(--a300); }
.cx .flow-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.cx .flow-acts .btn { flex: 1 1 200px; height: 50px; }
@media (prefers-reduced-motion: no-preference) {
    .cx .flow .mark circle { animation: cx-pop .55s var(--spring-bounce) both; transform-origin: center; transform-box: fill-box; }
    .cx .flow .mark path { stroke-dasharray: 40; animation: cx-draw .6s .15s var(--spring) both; }
}
@keyframes cx-pop { from { transform: scale(.6); opacity: 0; } }
@keyframes cx-draw { from { stroke-dashoffset: 40; } }

/* ---------- the content pages (FAQ, guides, about, legal, forms) ----------
   Everything that isn't a landing is built from these: .page-top for the title, then a .doc (a
   contents rail beside a reading column) or .cards, with .prose for running text. */
.content-container:has(> .cx) { max-width: none; padding: 0; }
.cx .wrap.mid { max-width: 1040px; }
.cx .page-end { padding-bottom: 104px; }
@media (max-width: 700px) { .cx .page-end { padding-bottom: 72px; } }
.cx .sec.tight { padding: 64px 0; }
.cx .sec.tight + .sec.tight { padding-top: 0; }

/* A long page: its sections listed on the left, sticky under the header; a row of chips on phones. */
.cx .doc { display: grid; grid-template-columns: 200px minmax(0, 760px); gap: 64px; align-items: start; }
.cx .doc-nav { position: sticky; top: 92px; display: grid; gap: 2px; font-size: 13.5px; }
.cx .doc-nav .lbl { margin-bottom: 10px; }
.cx .doc-nav a { padding: 6px 0 6px 14px; border-left: 1px solid var(--line2); color: var(--fg2); text-decoration: none; transition: color .15s, border-color .15s; }
.cx .doc-nav a:hover { color: var(--fg); }
.cx .doc-nav a[aria-current="true"] { color: var(--fg); border-left-color: var(--a400); }
@media (max-width: 900px) {
    .cx .doc { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .cx .doc-nav { position: static; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
    .cx .doc-nav::-webkit-scrollbar { display: none; }
    .cx .doc-nav .lbl { display: none; }
    .cx .doc-nav a { flex: none; padding: 6px 12px; border: 1px solid var(--line2); border-radius: 999px; white-space: nowrap; }
    .cx .doc-nav a[aria-current="true"] { border-color: rgba(var(--rgb), .55); }
}

/* Running text. */
.cx .prose { font-size: 16px; line-height: 1.7; color: var(--fg3); }
.cx .prose > * + * { margin-top: 14px; }
.cx .prose h2 { font-size: clamp(30px, 3.2vw, 38px); line-height: 1.08; letter-spacing: -.3px; margin-top: 64px; }
.cx .prose h3 { font: 700 17px/1.35 var(--ui); color: var(--fg); margin-top: 34px; }
.cx .prose h2 + *, .cx .prose h3 + * { margin-top: 12px; }
.cx .prose > :first-child { margin-top: 0; }
.cx .prose strong, .cx .prose b { color: var(--fg); font-weight: 600; }
.cx .prose a { color: var(--a300); text-decoration: underline; text-decoration-color: rgba(var(--rgb), .45); text-underline-offset: 3px; }
.cx .prose a:hover { text-decoration-color: currentColor; }
.cx .prose :is(ul, ol) { margin-bottom: 0; padding-left: 22px; }
.cx .prose li + li { margin-top: 6px; }
.cx .prose li::marker { color: var(--fg2); }
.cx .prose :is(code, kbd) { font: 500 .86em/1 ui-monospace, SFMono-Regular, Menlo, monospace; padding: 3px 6px; border: 1px solid var(--line2); border-radius: 6px; background: var(--cv); color: var(--fg); white-space: nowrap; }
.cx .prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.cx .prose .shot { display: block; width: 100%; height: auto; border: 1px solid var(--line2); border-radius: 12px; }
.cx .prose .shot.half { max-width: 420px; }
.cx .prose table { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.cx .prose th { text-align: left; font: 700 10.5px/1.4 var(--ui); letter-spacing: .13em; text-transform: uppercase; color: var(--fg2); padding: 10px 14px 10px 0; border-bottom: 1px solid var(--line3); }
.cx .prose td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.cx .prose td:first-child { color: var(--fg); font-weight: 600; }
.cx .table-scroll { overflow-x: auto; }

/* Numbered steps: the number in a ring, the text beside it. */
.cx .steps { list-style: none; padding: 0; margin: 0; counter-reset: step; display: grid; gap: 0; border-top: 1px solid var(--line); }
.cx .steps > li { counter-increment: step; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); margin: 0; }
.cx .steps > li::before { content: counter(step); width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line3); display: grid; place-items: center; font: 600 12.5px/1 var(--ui); color: var(--a200); }
.cx .steps > li > * + * { margin-top: 10px; }

/* An aside in the text. */
.cx .note { padding: 14px 18px; border: 1px solid var(--line2); border-radius: 12px; background: rgba(255, 255, 255, .02); font-size: 14.5px; line-height: 1.6; color: var(--fg3); }
.cx .note .lbl { display: block; margin-bottom: 6px; }
.cx .note b, .cx .note strong { color: var(--fg); }
.cx .note a { color: var(--a300); }
.cx :is(.cards, .doc, .split) + .note { margin-top: 28px; }
.cx .note.acc { border-color: rgba(var(--rgb), .35); background: rgba(var(--rgb), .06); }
.cx .note.acc .lbl { color: var(--a200); }
.cx .note.warn { border-color: rgba(216, 166, 87, .45); background: rgba(216, 166, 87, .06); }
.cx .note.warn .lbl { color: var(--amber); }

/* Cards: a panel with a small line icon, a title, a sentence, and an action at the foot. */
.cx .cards { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 18px; }
@media (max-width: 980px) { .cx .cards { grid-template-columns: repeat(min(var(--cols, 3), 2), minmax(0, 1fr)); } }
@media (max-width: 640px) { .cx .cards { grid-template-columns: 1fr; } }
.cx .card { display: flex; flex-direction: column; padding: 24px 26px; background: var(--pg); border: 1px solid var(--line); border-radius: var(--r); position: relative; }
.cx .card .ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; margin-bottom: 18px; border: 1px solid var(--line2); background: rgba(255, 255, 255, .03); color: var(--fg3); flex: none; }
.cx .card .ic svg { width: 20px; height: 20px; }
.cx .card .ic img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.cx .card h3 { font-size: 25px; }
.cx .card p { margin-top: 8px; font-size: 14.5px; color: var(--fg3); }
.cx .card p a { color: var(--a300); }
.cx .card .acts { margin-top: auto; padding-top: 20px; display: flex; gap: 10px; flex-wrap: wrap; }
.cx .card .stat { font: 700 40px/1 var(--ui); letter-spacing: -1px; color: var(--fg); }
.cx .card .stat + h3 { margin-top: 10px; }

/* Two columns: text beside a picture, a video or a player. */
.cx .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.cx .split.top { align-items: start; }
@media (max-width: 900px) { .cx .split { grid-template-columns: 1fr; gap: 28px; } }
.cx .split h2 { font-size: clamp(32px, 3.6vw, 44px); }
.cx .split .lbl { display: block; margin-bottom: 14px; }
.cx .split p { margin-top: 14px; color: var(--fg3); }

/* Embedded players and videos sit in the same frame as the site's own windows. */
.cx .embed { border: 1px solid var(--line2); border-radius: var(--r); overflow: hidden; background: var(--cv); }
.cx .embed iframe, .cx .embed video { display: block; width: 100%; border: 0; }
.cx .embed.video iframe, .cx .embed.video video { aspect-ratio: 16 / 9; height: auto; }
.cx .embed-cap { margin-top: 10px; font-size: 13px; color: var(--fg2); }

/* Form fields. */
.cx .field { display: grid; gap: 7px; }
.cx .field + .field, .cx .field-row + .field, .cx .field + .field-row { margin-top: 18px; }
.cx .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .cx .field-row { grid-template-columns: 1fr; } }
.cx .field > label, .cx .field .label { font-size: 13px; font-weight: 600; color: var(--fg3); }
.cx .field .hint { font-size: 12.5px; color: var(--fg2); }
.cx :is(.field input:not([type="checkbox"], [type="radio"], [type="file"]), .field select, .field textarea, .input) { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid rgba(139, 157, 180, .26); border-radius: 10px; background: #0b1424; color: var(--fg); font: 500 14.5px/1.4 var(--ui); outline: none; transition: border-color .15s, box-shadow .15s; }
.cx .field textarea { min-height: 110px; resize: vertical; }
.cx :is(.field input, .field select, .field textarea, .input):focus { border-color: var(--a400); box-shadow: 0 0 0 3px rgba(var(--rgb), .22); }
.cx :is(.field, .input)::placeholder, .cx .field :is(input, textarea)::placeholder { color: rgba(147, 163, 184, .7); }
.cx .check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--fg3); }
.cx .check input { accent-color: var(--a400); margin-top: 3px; }

/* The status pages (404, 403, sign-in failed, verify your email): .flow with a label for the code. */
.cx .flow .lbl { display: block; margin-bottom: 12px; }
.cx .flow .sub + .flow-acts { margin-top: 24px; }
.cx .flow .foot { margin-top: 18px; font-size: 13.5px; color: var(--fg2); }
.cx .flow .foot a { color: var(--a300); }
.cx .flow .mark.warn circle { fill: rgba(216, 166, 87, .1); stroke: rgba(216, 166, 87, .7); }
.cx .flow .mark.warn path { stroke: #ecc88e; }
.cx .prose pre { margin: 0; padding: 14px 16px; overflow-x: auto; border: 1px solid var(--line2); border-radius: 10px; background: var(--cv); font: 500 13.5px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--fg); }
.cx .prose pre code { padding: 0; border: 0; background: none; white-space: pre; }
.cx .prose a.btn { text-decoration: none; color: var(--fg); }
.cx .prose a.btn.pri { color: #0b1120; }
.cx .prose .shot + .shot { margin-top: 12px; }
.cx .page-top p :is(strong, b) { color: var(--fg); font-weight: 600; }
.cx .prose .icon-inline { display: inline; height: 22px; width: auto; vertical-align: middle; margin: 0 2px; }
.cx .prose .chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cx .prose .foot { margin-top: 56px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--fg2); }
.cx .page-top .plan-id { margin-bottom: 22px; }
.cx .page-top .plan-id .ic img { width: 40px; height: 40px; }
.cx .prose > section > * + * { margin-top: 14px; }
.cx .prose > section:first-child > h2:first-child { margin-top: 0; }
.cx .faq .a.prose code { white-space: normal; overflow-wrap: anywhere; }

/* The panel that ends a content page: a sentence or two and the next step. */
.cx .endcap { display: flex; align-items: center; justify-content: space-between; gap: 24px 40px; flex-wrap: wrap; padding: 28px 30px; }
.cx .endcap h2 { font-size: clamp(30px, 3.2vw, 38px); }
.cx .endcap .lbl + h2 { margin-top: 12px; }
.cx .endcap p { margin-top: 10px; max-width: 620px; color: var(--fg3); }
.cx .endcap .acts { display: flex; gap: 10px; flex-wrap: wrap; }
.cx .page-top .acts { margin-top: 28px; display: flex; gap: 10px; flex-wrap: wrap; }
.cx .checks b { display: block; color: var(--fg); font-weight: 600; }
.cx .checks small { display: block; margin-top: 2px; font-size: 13.5px; color: var(--fg2); }

/* base.html's confirmation popups (sign-in needed, cancel, resend), on the redesigned pages. */
body.cx-glow .popup-overlay { background: rgba(4, 8, 16, .66); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
body.cx-glow .popup-content { width: min(440px, calc(100vw - 32px)); padding: 26px; text-align: left; border: 1px solid var(--line3); border-radius: 20px; background: #111d30; box-shadow: 0 50px 120px -20px rgba(0, 0, 0, .75); font-family: var(--ui); }
body.cx-glow .popup-content h3 { font: 600 28px/1.1 var(--serif); margin: 0; color: var(--fg); }
body.cx-glow .popup-content p { margin: 10px 0 0; color: var(--fg3); font-size: 15px; }
body.cx-glow .popup-buttons { gap: 10px; }
body.cx-glow .popup-buttons .btn { height: 44px; line-height: 44px; border-radius: 12px; padding: 0 18px; font: 600 14px var(--ui); }
body.cx-glow .popup-buttons .btn-primary { background: var(--a400); color: #0b1120; }
body.cx-glow .popup-buttons .btn-primary:hover { background: var(--a300); transform: none; box-shadow: none; }
body.cx-glow .popup-buttons .btn-secondary { background: rgba(255, 255, 255, .04); border: 1px solid var(--line2); color: var(--fg); }