/*
 * Picked from the homepage options (24 and 25 Oct 2026): the hero's Meet Raqoon chip and film dialog, the
 * Ask your AI chat box under Start Free Trial. Also the tile tooltip's thumbnail.
 * The slim cookie bar picked then is in components.marketing-tracking, for every page.
 */

/* Raqoon, in the hero */
.c9-film-chip { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 12px; margin-bottom: clamp(20px, 2.2vw, 30px); padding: 5px 18px 5px 5px; border: 1px solid #d6dce2; border-radius: 16px; background: #ffffffd9; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 1px 2px #1c1f2a0f, 0 12px 26px -18px #1c1f2a73; text-align: left; transition: border-color .2s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease); }
.c9-film-chip:hover { border-color: #aeb6c0; transform: translateY(-1px); box-shadow: 0 1px 2px #1c1f2a0f, 0 16px 30px -18px #1c1f2a80; }
.c9-film-thumb { position: relative; flex: none; width: 76px; height: 43px; overflow: hidden; border-radius: 11px; background: #d7dde3; }
.c9-film-thumb img { width: 100%; height: 100%; object-fit: cover; }
.c9-film-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: #dc2626; color: #fff; box-shadow: 0 0 0 3px #dc262640, 0 6px 14px -6px #7f1d1d; transform: translate(-50%, -50%); transition: transform .25s var(--ease), background .2s; }
.c9-film-play svg { width: 11px; height: 11px; margin-left: 2px; }
.c9-film-chip:hover .c9-film-play { background: #b91c1c; transform: translate(-50%, -50%) scale(1.08); }
.c9-film-text { display: grid; gap: 1px; }
.c9-film-text strong { font-size: 15px; font-weight: 600; letter-spacing: -.02em; color: var(--ink); }
.c9-film-text small { font-size: 13px; color: var(--muted); }
/* Now and then Raqoon's head pops up from behind the chip (ui.js setupFilmPeek). His clip is filmed on white, so it
   multiplies over a patch of the hero's own ground colour, which leaves only him. */
.c9-film { position: relative; display: flex; }
.c9-film-chip { position: relative; z-index: 1; }
.c9-film-peek { position: absolute; left: 50%; top: 18px; height: 84px; aspect-ratio: 440 / 240; translate: -50% -100%; background: var(--ground); pointer-events: none; }
.c9-film-peek[hidden] { display: none; }
.c9-film-peek video { display: block; width: 100%; height: 100%; mix-blend-mode: multiply; }

/* Height caps the width too, so a short screen such as a phone on its side keeps the film and the close button above it on screen. */
.c9-film-dialog { width: min(1120px, calc(100vw - 32px), calc((100svh - 130px) * 16 / 9)); max-width: none; max-height: none; padding: 0; border: 0; border-radius: 20px; background: #000; overflow: visible; box-shadow: 0 40px 120px -30px #000; }
.c9-film-dialog::backdrop { background: #0d1017e0; backdrop-filter: blur(6px); }
.c9-film-dialog[open] { animation: c9-film-in .35s var(--ease); }
@keyframes c9-film-in { from { opacity: 0; transform: scale(.97); } }
.c9-film-frame { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 20px; }
.c9-film-frame video { display: block; width: 100%; height: 100%; background: #000; object-fit: contain; }
.c9 .c9-film-close { position: absolute; top: -54px; right: 0; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; background: #ffffff24; color: #fff; transition: background .2s; }
.c9 .c9-film-close:hover { background: #ffffff3d; }
@media (max-width: 760px) {
    .c9-film-dialog { width: min(calc(100vw - 20px), calc((100svh - 130px) * 16 / 9)); border-radius: 14px; }
    .c9-film-frame { border-radius: 14px; }
}
/* The 9:16 cut on an upright phone: as tall as the screen allows below the close button. */
.c9-film-dialog.is-portrait { width: min(calc(100vw - 20px), calc((100svh - 130px) * 9 / 16)); }
.c9-film-dialog.is-portrait .c9-film-frame { aspect-ratio: 9 / 16; }

/* With the film chip and the Ask chat box the hero still fits the first screen below the floating bar,
   with room for the slim cookie bar. */
@media (min-width: 761px) {
    .c9-headlines { font-size: min(clamp(46px, 6.1vw, 92px), calc((100svh - 200px) * .1)); }
}
.c9-film-chip { margin-bottom: clamp(16px, 2.4svh, 26px); }
.c9-actions { margin-top: clamp(18px, 2.8svh, 30px); }
.c9-hero-intro { margin-top: clamp(12px, 1.8svh, 20px); }
/* Phones: one line for the film. */
@media (max-width: 899px) {
    .c9-film-chip { gap: 10px; margin-bottom: 14px; padding: 4px 14px 4px 4px; border-radius: 14px; }
    .c9-film-thumb { width: 58px; height: 33px; border-radius: 10px; }
    .c9-film-play { width: 20px; height: 20px; }
    .c9-film-text small { display: none; }
}

/* The tile tooltip leads with the tool's designed card thumbnail (php artisan tools:thumbnails) */
.c9 .c9-tip { width: 440px; padding: 8px 8px 15px; gap: 7px; }
.c9 .c9-tip > :not(.c9-tip-thumb) { margin-inline: 10px; }
.c9-tip-thumb { display: block; margin-bottom: 5px; aspect-ratio: 800 / 468; overflow: hidden; border-radius: 11px; border: 1px solid #e6e9ee; background: #f3f5f7; }
.c9-tip-thumb[hidden] { display: none; }
.c9-tip-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .18s; }
.c9-tip-thumb.is-ready img { opacity: 1; }

/* Ask your AI: a chat box like ChatGPT's or Claude's, with the question typed and waiting, a picker for the
   visitor's own assistant and a send button that names it. The line above and the caption below say it opens
   their own AI rather than answering here. */
.c9-ask { position: relative; z-index: 4; width: min(680px, 100%); margin-top: clamp(16px, 2.6svh, 26px); text-align: left; }
.c9 .c9-ask-lead { margin: 0 0 10px; font-size: 15px; font-weight: 500; letter-spacing: -.012em; line-height: 1.4; color: var(--ink-2); text-align: center; }
.c9-ask-box { padding: 20px 16px 16px; border: 1px solid #e3e6ea; border-radius: 28px; background: #fff; box-shadow: 0 1px 1px rgb(13 13 13 / 3%), 0 6px 14px -6px rgb(13 13 13 / 8%), 0 24px 48px -28px rgb(13 13 13 / 30%); }
/* The question starts where the chosen assistant's chip starts, inside the choices' 3px track. */
.c9 .c9-ask-question { margin: 0 0 16px; padding: 0 3px; font-size: 17px; font-weight: 400; letter-spacing: -.012em; line-height: 1.5; color: #0d0d0d; }
.c9-ask-typed { display: grid; }
.c9-ask-typed > * { grid-area: 1 / 1; }
.c9-ask-typed > :first-child { visibility: hidden; }
/* Every question sits in the hidden first cell, so the box keeps the height of the longest as they take turns. */
.c9-ask-ghosts { display: grid; }
.c9-ask-ghosts > * { grid-area: 1 / 1; }
.c9-ask-typed [data-c9-typed]::after { content: ''; display: inline-block; width: 1.5px; height: 1.15em; margin-left: 2px; vertical-align: -.2em; border-radius: 1px; background: #0d0d0d; animation: c9-caret 1.06s steps(1) infinite; }
.c9-ask.is-typing [data-c9-typed]::after { animation: none; }
@keyframes c9-caret { 50% { opacity: 0; } }
/* The choices sit in one track, the chosen one raised in white, the same height as send at the far end. */
.c9-ask-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.c9-ask-models { display: flex; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 999px; background: #f3f4f6; box-shadow: inset 0 0 0 1px #eaecef; }
.c9 .c9-ask-model { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 13px 0 9px; border: 0; border-radius: 999px; background: none; color: #5f646d; font-size: 14px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; transition: background-color .15s, color .15s, box-shadow .15s; }
.c9 .c9-ask-model:hover { color: #0d0d0d; }
.c9 .c9-ask-model[aria-checked="true"] { background: #fff; color: #0d0d0d; box-shadow: 0 1px 2px rgb(13 13 13 / 10%), 0 0 0 1px rgb(13 13 13 / 5%); }
.c9 .c9-ask-model:focus-visible { outline: 2px solid #0d0d0d; outline-offset: 1px; }
.c9-ask-logos { display: inline-flex; }
.c9-ask-logos img { width: 18px; height: 18px; border-radius: 4px; }
.c9-ask-logos img + img { margin-left: -5px; padding: 1px; border-radius: 50%; background: #fff; }
.c9-ask-model:not([aria-checked="true"]) .c9-ask-logos { opacity: .85; }
.c9 .c9-ask-go { display: inline-flex; flex: none; align-items: center; gap: 7px; height: 38px; margin-left: auto; padding: 0 14px 0 17px; border: 0; border-radius: 999px; background: #0d0d0d; color: #fff; font-size: 14.5px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; text-decoration: none; transition: background-color .2s, transform .2s var(--ease); }
.c9-ask-go:hover { background: #33363c; transform: translateY(-1px); }
.c9-ask-go[data-model="claude"] { background: #c6613f; }
.c9-ask-go[data-model="claude"]:hover { background: #b0532f; }
.c9-ask-go svg { width: 16px; height: 16px; }
.c9 .c9-ask-go[hidden], .c9-ask-copy .c9-icon-done, .c9-ask-copy.is-copied .c9-icon-copy { display: none; }
.c9-ask-copy.is-copied .c9-icon-done { display: block; }
.c9 .c9-ask-go.c9-ask-copy.is-copied { background: var(--green); }
.c9 .c9-ask-caption, .c9 .c9-ask-status { position: absolute; top: calc(100% + 10px); left: 0; right: 0; margin: 0; font-size: 12.5px; line-height: 1.4; text-align: center; }
.c9 .c9-ask-caption { color: var(--faint); }
/* Phones keep the caption to one short line. */
@media (max-width: 760px) { .c9-ask-more { display: none; } }
.c9 .c9-ask-status { color: var(--green); }
.c9-ask:has(.c9-ask-status:not(:empty)) .c9-ask-caption { visibility: hidden; }
@media (max-width: 760px) {
    .c9-ask { margin-top: 18px; }
    .c9 .c9-ask-lead { margin-bottom: 8px; font-size: 14px; }
    .c9-ask-box { padding: 16px 12px 12px; border-radius: 24px; }
    .c9 .c9-ask-question { margin-bottom: 12px; font-size: 16px; }
    .c9 .c9-ask-model { height: 30px; padding: 0 11px 0 8px; font-size: 13.5px; }
    .c9 .c9-ask-go { height: 36px; padding: 0 12px 0 15px; font-size: 14px; }
    .c9 .c9-ask-caption, .c9 .c9-ask-status { top: calc(100% + 8px); font-size: 12px; }
}
/* Phones keep the choices and send on one row: the choices not picked show just their logos (named in their title
   and to screen readers), and on the narrowest phones send is just its arrow, with its full name as its label. */
.c9-ask-name { white-space: nowrap; }
@media (max-width: 560px) {
    .c9-ask-bar { flex-wrap: nowrap; gap: 8px; }
    .c9-ask-models { flex-wrap: nowrap; min-width: 0; }
    .c9 .c9-ask-model { gap: 6px; padding: 0 10px 0 7px; }
    .c9 .c9-ask-model:not([aria-checked="true"]) { padding: 0 8px; }
    .c9-ask-model:not([aria-checked="true"]) .c9-ask-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .c9 .c9-ask-go { gap: 5px; padding: 0 10px 0 13px; }
}
@media (max-width: 389px) {
    .c9 .c9-ask-lead { font-size: 13px; }
    .c9 .c9-ask-go { width: 36px; padding: 0; justify-content: center; }
    .c9-ask-go-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
    .c9-ask-typed [data-c9-typed]::after { animation: none; }
}

/* Without WebGL the flat hero tiles are graphite too, rimmed in their type's colour. */
.c9[data-tier=flat] .c9-hero-fallback span { background: linear-gradient(160deg, #3a3f48, #24282f); box-shadow: inset 0 0 0 2px #1e2126, inset 0 0 0 3px rgb(255 255 255 / 18%), var(--shadow-tile); }
.c9[data-tier=flat] .c9-hero-fallback span[style] { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c9-tile) 70%, #1e2126), inset 0 0 0 3px rgb(255 255 255 / 18%), var(--shadow-tile); }
.c9[data-tier=flat] .c9-hero-fallback span img { filter: brightness(0) invert(1); opacity: .86; }

/* The spotlight on the ring: a veil the colour of the page, fixed to the viewport because the ring also passes behind
   the floating bar. scene-hero.js places the light and sets the veil's strength; it stays clear until the scene runs. */
.c9-hero-veil { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--ground); opacity: calc(var(--spot, 0) * .94); -webkit-mask: radial-gradient(circle var(--light, 300px) at var(--x, -999px) var(--y, -999px), transparent 0, transparent 32%, #000 100%); mask: radial-gradient(circle var(--light, 300px) at var(--x, -999px) var(--y, -999px), transparent 0, transparent 32%, #000 100%); }
.c9:not([data-tier=motion]) .c9-hero-veil { display: none; }
.c9-hero-copy { z-index: 2; }
@media (max-width: 760px) { .c9-hero-veil { --light: 200px; } }