/* The idea box (partials/composer.php, assets/js/composer.js): the app's Home composer (app/ui/css/home.css .c2-*)
   as the website's free try, in the pre-footer CTA and the homepage hero. 30 Oct 2026, 18:05 (Fernando: the same box
   as the app's): its rows, sizes, chips and menus, with the site's colours. Loaded on every page type: the homepage
   (site.css tokens on :root) and the pages in the free tools' look (the same tokens on .lp, chrome.css), so it only
   uses those tokens and sets every property it needs on its own elements (the app's CSS is on those pages too). */
.fin.cc .fin-copy { width: 100%; grid-template-columns: minmax(0, 1fr); }   /* the box, not its row of chips, sets the width */
/* the box's menus reach past the card's edges instead of being cut off by it (30 Oct 2026, Fernando: the source menu
   was cut at the card's bottom). The card stays above the footer, and its background keeps the rounded corners. */
.stage.fin.cc { overflow: visible; z-index: 2; }
.stage.fin.cc > .aura { border-radius: inherit; }
.cc-box { position: relative; z-index: 5; width: min(820px, 100%); min-width: 0; margin-top: 32px; padding: 6px 8px 8px; border-radius: 22px; background: var(--card); box-shadow: var(--shadow-float), 0 40px 80px -40px rgb(70 40 130 / .3); text-align: start; container: cc / inline-size; transition: box-shadow var(--d-fast) var(--ease); }
.cc-box:focus-within { box-shadow: 0 0 0 2px var(--violet-line), var(--shadow-float), 0 40px 80px -40px rgb(70 40 130 / .3); }
.cc-box :where(button, a, select, input, textarea) { font: inherit; letter-spacing: inherit; }
/* a low-weight reset (:where), so each control's own rule below wins */
.cc-box :where(button:not(.btn)) { margin: 0; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cc-box :where(a) { text-decoration: none; }
.cc-box .ic { flex: none; width: 16px; height: 16px; fill: currentColor; }
.cc-box [hidden] { display: none !important; }
.cc-box .cc-pro { display: inline-flex; align-items: center; flex: none; height: 18px; padding: 0 6px; border-radius: 999px; background: var(--ink); color: #fff; font-size: .625rem; font-weight: 600; line-height: 1; letter-spacing: .01em; }

/* what to make (the app's tabs; off in the hero since 30 Oct 2026, 22:18) */
.cc-box .cc-tabs { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 2px 0 2px; }
.cc-box .cc-kinds { display: flex; gap: 2px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cc-box .cc-kinds::-webkit-scrollbar { display: none; }
.cc-box .cc-tab { display: inline-flex; align-items: center; gap: 8px; flex: none; height: 36px; padding: 0 12px; border-radius: 10px; font-size: .9375rem; font-weight: 500; color: var(--ink); white-space: nowrap; transition: background-color var(--d-fast) var(--ease); }
.cc-box .cc-tab .ic { width: 18px; height: 18px; }
.cc-box .cc-tab:hover { background: var(--hover); }
.cc-box .cc-tab[aria-pressed="true"] { background: rgb(31 26 46 / .07); }
.cc-box .cc-free { order: 2; display: inline-flex; align-items: center; gap: 6px; flex: none; height: 34px; margin-inline-start: auto; padding: 0 12px; border-radius: 10px; background: var(--violet-soft); color: var(--violet-ink); font-size: .8125rem; font-weight: 500; white-space: nowrap; }
.cc-box .cc-free .ic { width: 13px; height: 13px; }

/* Add source (above the idea, as in the app) */
.cc-box .cc-refs { display: flex; align-items: center; gap: 8px; padding: 6px 4px 0; }
.cc-box .cc-add { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 8px 0 10px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgb(31 26 46 / .2); background-image: none; color: var(--muted); font-size: .8125rem; font-weight: 500; transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease); }
.cc-box button.cc-add { box-shadow: none; outline: 1px dashed rgb(31 26 46 / .24); outline-offset: -1px; }
.cc-box .cc-add .ic { width: 15px; height: 15px; }
.cc-box .cc-add:hover, .cc-box .cc-add[aria-expanded="true"] { background: var(--hover); color: var(--ink); outline-color: rgb(31 26 46 / .36); }

/* the idea */
.cc-box textarea[name="idea"] { display: block; width: 100%; min-height: 60px; margin: 0; padding: 10px 8px 4px; border: 0; outline: 0; resize: none; background: transparent; box-shadow: none; font-size: 1.1875rem; line-height: 1.45; letter-spacing: -.012em; color: var(--ink); }
.cc-box textarea[name="idea"]::placeholder { color: var(--subtle); opacity: 1; }
/* 30 Oct 2026: the box's own ring is the focus state; no second outline on the field (the site's :focus-visible) */
.cc-box textarea[name="idea"]:focus, .cc-box textarea[name="idea"]:focus-visible, .lp .cc-box textarea[name="idea"]:focus-visible { outline: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0; }

/* the formats (the app's chips) */
.cc-box .cc-chips-row { display: flex; align-items: center; gap: 6px; padding: 4px 4px 8px; }
.cc-box .cc-chips { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.cc-box .cc-chips::-webkit-scrollbar { display: none; }
/* more chips than room: they scroll, and fade at the edge that has more (composer.js sets the classes) */
.cc-box .cc-chips.fade-r { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent); }
.cc-box .cc-chips.fade-l { -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to left, #000 calc(100% - 36px), transparent); }
.cc-box .cc-chips.fade-l.fade-r { -webkit-mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(to right, transparent, #000 36px, #000 calc(100% - 36px), transparent); }
.cc-box .cc-chip { display: inline-flex; align-items: center; gap: 6px; flex: none; height: 30px; padding: 0 11px; border-radius: 10px; background: rgb(31 26 46 / .05); color: var(--muted); font-size: .8125rem; font-weight: 500; white-space: nowrap; transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease); }
.cc-box .cc-chip .ic { width: 15px; height: 15px; }
.cc-box .cc-chip:hover, .cc-box .cc-chip[aria-expanded="true"] { background: rgb(31 26 46 / .09); color: var(--ink); }
.cc-box .cc-chip[aria-pressed="true"] { background: var(--ink); color: #fff; }
.cc-box[data-kind="image"] .cc-chips-row, .cc-box[data-kind="video"] .cc-chips-row, .cc-box[data-kind="image"] [data-param-slides], .cc-box[data-kind="video"] [data-param-slides] { display: none; }

/* the bar: Auto writer, Auto theme, Auto length, More options · size, Generate */
.cc-box .cc-bar { display: flex; align-items: center; gap: 6px; padding: 2px 0 0 2px; }
.cc-box .cc-params { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; min-width: 0; flex: 1; }
.cc-box .cc-go { display: flex; align-items: center; gap: 8px; flex: none; }
.cc-box .cc-pw { position: relative; flex: none; }
.cc-box .cc-p { display: inline-flex; align-items: center; gap: 7px; height: 36px; max-width: 220px; padding: 0 10px; border-radius: 10px; font-size: .875rem; font-weight: 500; color: var(--muted); white-space: nowrap; transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease); }
.cc-box .cc-p > span:not(.cc-mark) { overflow: hidden; text-overflow: ellipsis; }
.cc-box .cc-p .ic { width: 17px; height: 17px; }
.cc-box .cc-p:hover, .cc-box .cc-p[aria-expanded="true"] { background: rgb(31 26 46 / .05); color: var(--ink); }
.cc-box .cc-more .ic { width: 13px; height: 13px; margin-inline-start: -2px; }
.cc-box .cc-mark { display: inline-flex; flex: none; width: 20px; height: 20px; border-radius: 6px; overflow: hidden; }
.cc-box .cc-mark .byl { --bs: 20px; }
.cc-box .cc-plat { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 10px 0 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-2); background: var(--card); font-size: .875rem; font-weight: 500; color: var(--ink); white-space: nowrap; transition: background-color var(--d-fast) var(--ease), box-shadow var(--d-fast) var(--ease); }
.cc-box .cc-plat:hover, .cc-box .cc-plat[aria-expanded="true"] { background: rgb(31 26 46 / .025); box-shadow: inset 0 0 0 1px var(--line-3); }
.cc-box .cc-plat .ic { width: 18px; height: 18px; }
.cc-box .cc-plat-r { font-weight: 400; color: var(--muted); }
.cc-box .cc-plat .cc-car { width: 12px; height: 12px; color: var(--muted); }
.cc-box .cc-gen { --h: 40px; height: 40px; padding: 0 16px 0 13px; gap: 7px; border-radius: 12px; font-size: .875rem; }
.cc-box .cc-gen .ic { width: 16px; height: 16px; }
.cc-box.is-busy .cc-gen { opacity: .72; cursor: progress; }

/* the example ideas */
.cc-box .cc-try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 8px -8px -8px; padding: 10px 16px 12px; border-top: 1px solid var(--line); border-radius: 0 0 22px 22px; background: #fcfbfe; font-size: .8125rem; color: var(--muted); }
.cc-box .cc-try > span { margin-inline-end: 4px; }
.cc-box .cc-try button { display: inline-flex; align-items: center; gap: 5px; height: 28px; padding: 0 10px; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-2); background: var(--card); color: var(--text-soft); font-size: .8125rem; transition: box-shadow var(--d-fast) var(--ease), color var(--d-fast) var(--ease); }
.cc-box .cc-try button:hover { color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-3); }
.cc-box .cc-try .ic { width: 12px; height: 12px; color: var(--muted); }
.cc-box .cc-msg { margin: 10px 8px 2px; font-size: .8125rem; color: var(--violet-ink); }
/* the human check: out of sight unless Cloudflare asks for a click (30 Oct 2026: its frame made a strip under the box) */
.cc-box .cc-ts { height: 0; margin: 0; overflow: hidden; }
.cc-box .cc-ts.is-ask { height: auto; margin: 10px 4px 2px; overflow: visible; }

/* menus (they open upwards, over the slides; the source menu downwards) */
.cc-box .cc-pop { position: absolute; z-index: 30; left: 0; bottom: calc(100% + 8px); width: 340px; max-width: calc(100vw - 24px); max-height: min(460px, calc(100dvh - 96px)); padding: 6px; border-radius: 16px; background: var(--card); box-shadow: var(--shadow-popover), 0 24px 48px -16px rgb(40 24 70 / .22); color: var(--ink); text-align: start; overflow-y: auto; overscroll-behavior: contain; animation: cc-pop .18s var(--ease-out); }
.cc-box .cc-pop.is-down { bottom: auto; top: calc(100% + 8px); }
.cc-box .cc-pop-r { left: auto; right: 0; }
.cc-box .cc-pop-wr { width: 380px; }
.cc-box .cc-pop-th { width: 460px; }
.cc-box .cc-pop-len { width: 330px; }
.cc-box .cc-pop-len .cc-row small { white-space: normal; }
.cc-box .cc-pop-plat .cc-row-ic { color: var(--ink); }
.cc-box .cc-pop-plat { width: 260px; }
.cc-box .cc-pop-fmt { width: 360px; }
@keyframes cc-pop { from { opacity: 0; transform: translateY(4px) scale(.98); } }
.cc-box .cc-pop-l, .cc-box .cc-pop-h { margin: 0; padding: 8px 8px 6px; font-size: .75rem; font-weight: 500; line-height: 1.3; color: var(--muted); }
.cc-box .cc-pop-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cc-box .cc-pop-h a { padding: 3px 8px; margin: -3px -2px; border-radius: 7px; color: var(--muted); }
.cc-box .cc-pop-h a:hover { background: var(--hover); color: var(--ink); }
.cc-box .cc-rows { display: flex; flex-direction: column; gap: 1px; }
.cc-box .cc-group { margin: 0; padding: 12px 10px 4px; font-size: .75rem; font-weight: 500; color: var(--muted); }
.cc-box .cc-row { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 6px 10px 6px 8px; border-radius: 10px; text-align: start; color: var(--ink); transition: background-color var(--d-fast) var(--ease); }
.cc-box .cc-row:hover { background: rgb(31 26 46 / .035); }
.cc-box .cc-row[aria-checked="true"] { background: rgb(31 26 46 / .055); }
.cc-box .cc-row.is-hl { animation: cc-hl 1.2s var(--ease); }
.cc-box .cc-row-s { min-height: 40px; padding-inline-start: 12px; }
.cc-box .cc-row-t { flex: 1; min-width: 0; }
.cc-box .cc-row b { display: block; font-size: .875rem; font-weight: 500; line-height: 1.35; color: var(--ink); }
.cc-box .cc-row b span { font-weight: 400; color: var(--muted); }
.cc-box .cc-row small { display: block; overflow: hidden; font-size: .75rem; line-height: 1.35; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.cc-box .cc-row-mark { display: inline-flex; flex: none; }
.cc-box .cc-row-mark .byl { --bs: 28px; }
.cc-box .cc-row-ic { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: rgb(31 26 46 / .05); color: var(--violet); }
.cc-box .cc-row-ic .ic { width: 16px; height: 16px; }
.cc-box .cc-row .cc-tick { width: 16px; height: 16px; color: var(--ink); visibility: hidden; }
.cc-box .cc-row[aria-checked="true"] .cc-tick { visibility: visible; }
.cc-box .cc-row[data-locked] .cc-row-t, .cc-box .cc-row[data-locked] .cc-row-mark, .cc-box .cc-row[data-locked] .cc-row-ic { opacity: .78; }
.cc-box .cc-row[data-locked]:hover .cc-row-t, .cc-box .cc-row[data-locked]:hover .cc-row-mark, .cc-box .cc-row[data-locked]:hover .cc-row-ic { opacity: 1; }
.cc-box .cc-th-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 6px 6px 8px; }
.cc-box .cc-th { display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 4px; border-radius: 10px; text-align: start; font-size: .75rem; line-height: 1.25; color: var(--muted); transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease); }
.cc-box .cc-th:hover { background: rgb(31 26 46 / .035); color: var(--ink); }
.cc-box .cc-th-art { position: relative; display: block; aspect-ratio: 4 / 5; border-radius: 6px; overflow: hidden; background: var(--page-2); box-shadow: 0 0 0 1px var(--line); }
.cc-box .cc-th-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cc-box .cc-th-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-box .cc-th[aria-checked="true"] { color: var(--ink); }
.cc-box .cc-th[aria-checked="true"] .cc-th-art { box-shadow: 0 0 0 2px var(--ink); }
.cc-box .cc-pop-f { display: flex; align-items: center; gap: 8px; margin: 4px -6px -6px; padding: 12px 14px; border-top: 1px solid var(--line); font-size: .8125rem; font-weight: 500; color: var(--ink); }
.cc-box .cc-pop-f:hover { background: rgb(31 26 46 / .03); }
.cc-box .cc-pop-f .cc-out { margin-inline-start: auto; width: 13px; height: 13px; color: var(--muted); }
/* a Pro choice: the menu says what the free try does, and where Pro is */
.cc-box .cc-lock { position: sticky; bottom: -6px; margin: 6px -6px -6px; padding: 12px 14px 12px; border-top: 1px solid var(--violet-line); background: #f7f3fe; }
.cc-box .cc-lock.is-hl { animation: cc-lock .5s var(--ease-out); }
.cc-box .cc-lock p { display: flex; gap: 10px; margin: 0; font-size: .75rem; line-height: 1.45; color: var(--text-soft); }
.cc-box .cc-lock p .ic { width: 16px; height: 16px; margin-top: 1px; color: var(--violet); }
.cc-box .cc-lock b { display: block; font-size: .8125rem; font-weight: 600; color: var(--ink); }
.cc-box .cc-unlock { display: inline-flex; align-items: center; gap: 6px; height: 32px; margin: 10px 0 0 26px; padding: 0 12px; border-radius: 9px; background: var(--ink); color: #fff; font-size: .8125rem; font-weight: 500; }
.cc-box .cc-unlock:hover { background: var(--ink-2, #2c2540); color: #fff; }
.cc-box .cc-unlock .ic { width: 13px; height: 13px; }
@keyframes cc-lock { from { opacity: .4; transform: translateY(6px); } }
@keyframes cc-hl { 0%, 40% { background: var(--violet-soft); } }

/* More options: the app's sheet */
.cc-dlg { width: min(720px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 48px); margin: auto; padding: 0; border: 0; border-radius: 20px; background: var(--card); color: var(--ink); box-shadow: 0 30px 80px -20px rgb(24 21 31 / .4), 0 0 0 1px var(--line); text-align: start; overflow: hidden; }
.cc-dlg[open] { display: flex; flex-direction: column; animation: cc-dlg .22s var(--ease-out); }
.cc-dlg::backdrop { background: rgb(24 21 31 / .36); }
@keyframes cc-dlg { from { opacity: 0; transform: translateY(10px) scale(.985); } }
.cc-dlg .cc-dlg-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 16px 4px 24px; }
.cc-dlg h3 { margin: 0; font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.cc-dlg .cc-x { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: var(--muted); }
.cc-dlg .cc-x:hover { background: var(--hover); color: var(--ink); }
.cc-dlg .cc-x .ic { width: 18px; height: 18px; }
.cc-dlg .cc-dlg-b { overflow-y: auto; padding: 6px 24px 18px; overscroll-behavior: contain; }
.cc-dlg .cc-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.cc-dlg h4 { display: flex; align-items: center; gap: 8px; margin: 12px 0 4px; font-size: .8125rem; font-weight: 600; color: var(--ink); }
.cc-dlg h4 .ic { width: 16px; height: 16px; color: var(--violet); }
.cc-dlg .cc-set { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 12px; margin: 0; padding: 6px 0; }
.cc-dlg .cc-set > span { font-size: .8125rem; color: var(--text-soft); }
.cc-dlg select { width: 100%; height: 38px; margin: 0; padding: 0 32px 0 12px; border: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-2); background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%236f6a7b'%3E%3Cpath d='M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z'/%3E%3C/svg%3E") no-repeat right 11px center / 12px 12px; font-size: .875rem; color: var(--ink); text-overflow: ellipsis; cursor: pointer; -webkit-appearance: none; appearance: none; }
.cc-dlg select:hover { box-shadow: inset 0 0 0 1px var(--line-3); }
.cc-dlg select:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; }
.cc-dlg .cc-field { display: block; margin: 16px 0 0; }
.cc-dlg .cc-field > span { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: .8125rem; font-weight: 500; color: var(--ink); }
.cc-dlg .cc-field input, .cc-dlg .cc-field textarea { display: block; width: 100%; margin: 0; padding: 10px 12px; border: 0; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-2); background: rgb(31 26 46 / .025); font-size: .875rem; line-height: 1.45; color: var(--muted); resize: none; cursor: not-allowed; }
.cc-dlg .cc-field input::placeholder, .cc-dlg .cc-field textarea::placeholder { color: var(--subtle); opacity: 1; }
.cc-dlg .cc-field input:focus, .cc-dlg .cc-field textarea:focus { outline: none; }
.cc-dlg .cc-callout { display: flex; gap: 10px; margin: 16px 0 0; padding: 11px 14px; border-radius: 12px; background: var(--page-2); font-size: .8125rem; line-height: 1.45; color: var(--text-soft); }
.cc-dlg .cc-callout .ic { width: 16px; height: 16px; margin-top: 2px; color: var(--muted); }
.cc-dlg .cc-dlg-f { display: flex; align-items: center; gap: 10px; padding: 14px 20px 16px 24px; border-top: 1px solid var(--line); background: #fcfbfe; }
.cc-dlg .cc-dlg-f p { display: flex; flex: 1; gap: 8px; margin: 0; font-size: .8125rem; line-height: 1.45; color: var(--text-soft); }
.cc-dlg .cc-dlg-f p .ic { width: 16px; height: 16px; margin-top: 2px; color: var(--violet); }
.cc-dlg .cc-dlg-f.is-hl p { animation: cc-shake .45s var(--ease); color: var(--ink); }
.cc-dlg .cc-dlg-f .btn { flex: none; height: 40px; padding: 0 16px; font-size: .875rem; }
@keyframes cc-shake { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-2px); } 80% { transform: translateX(2px); } }

/* a narrow box (a phone, a narrow column): the bar wraps, as the app's does */
@container cc (max-width: 640px) {
  .cc-box .cc-plat-name { display: none; }
  .cc-box .cc-chip-more span { display: none; }
  .cc-box .cc-chip-more { width: 30px; padding: 0; justify-content: center; }
}
@container cc (max-width: 560px) {
  .cc-box .cc-bar { flex-wrap: wrap; row-gap: 6px; padding-left: 0; }
  .cc-box .cc-params { flex: 1 1 100%; }
  .cc-box .cc-go { flex: 1 1 100%; }
  .cc-box .cc-gen { flex: 1; height: 44px; justify-content: center; }
  .cc-box .cc-plat { height: 44px; }
  .cc-box .cc-p { padding: 0 8px; gap: 6px; }
  .cc-box .cc-tab { padding: 0 10px; font-size: .875rem; gap: 6px; }
  .cc-box .cc-tab .ic { width: 16px; height: 16px; }
}
@media (max-width: 719px) {
  .cc-box { margin-top: 26px; padding: 6px 6px 6px; border-radius: 18px; }
  .cc-box textarea[name="idea"] { min-height: 56px; padding: 8px 8px 2px; font-size: 1.0625rem; }
  .cc-box .cc-chips-row { padding: 4px 2px 8px; }
  .cc-box .cc-try { flex-wrap: nowrap; margin: 8px -6px -6px; padding: 10px 12px 12px; border-radius: 0 0 18px 18px; overflow-x: auto; scrollbar-width: none; }
  .cc-box .cc-try::-webkit-scrollbar { display: none; }
  .cc-box .cc-try > * { flex: none; }
  .cc-box .cc-free { height: 30px; padding: 0 10px; font-size: .75rem; }
  /* menus are as wide as the screen allows */
  .cc-box .cc-pop { max-width: calc(100vw - 24px); }
  .cc-box .cc-th-grid { gap: 6px; padding: 4px 4px 6px; }
  /* More options: a sheet from the bottom */
  .cc-dlg { width: 100vw; max-height: 90dvh; margin: auto 0 0; border-radius: 20px 20px 0 0; }
  .cc-dlg .cc-dlg-h { padding: 16px 12px 2px 18px; }
  .cc-dlg .cc-dlg-b { padding: 4px 18px 16px; }
  .cc-dlg .cc-cols { grid-template-columns: minmax(0, 1fr); }
  .cc-dlg .cc-set { grid-template-columns: 104px minmax(0, 1fr); }
  .cc-dlg .cc-dlg-f { flex-wrap: wrap; padding: 12px 18px max(16px, env(safe-area-inset-bottom)); }
  .cc-dlg .cc-dlg-f p { flex: 1 1 100%; }
  .cc-dlg .cc-dlg-f .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .cc-box .cc-pop, .cc-dlg[open], .cc-box .cc-lock.is-hl, .cc-dlg .cc-dlg-f.is-hl p { animation: none; }
}

/* the fan above the pre-footer box: three carousels the app made (partials/cta.php, 30 Oct 2026) */
.fin-card > .sc-pic { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 0 0 1px rgb(24 21 31 / .06), 0 2px 4px rgb(24 21 31 / .06), 0 18px 34px -14px rgb(40 24 70 / .32); animation: fin-float 6.5s ease-in-out infinite alternate paused; animation-delay: calc(var(--i) * -1.8s); }
.fin.is-live .fin-card > .sc-pic { animation-play-state: running; }
@media (prefers-reduced-motion: reduce) { .fin-card > .sc-pic { animation: none; } }

/* the plain button that takes the box's place once the free try is used, or for someone signed in (30 Oct 2026) */
.cc-alt { margin-top: 30px; display: flex; justify-content: center; }
.cc-alt[hidden], .fin-checks li[hidden] { display: none; }
.cc-alt .btn { gap: 9px; padding-inline: 26px; }