/* Clico creation pages: light canvas, compact input, visual capability studies. */
.creative-page { --creative-line:#dfe5ed; --creative-muted:#667181; --creative-blue:#225cdf; --creative-section-gap:80px; background:#f8fafc; color:#18202b; }
.creative-page * { box-sizing:border-box; }
.creative-main { --creative-heading-size:clamp(36px,3.6vw,52px); --creative-control-size:14px; width:min(1280px,calc(100% - 80px)); margin:auto; padding:118px 0 120px; font-family:var(--sans); }
.creative-main h1 { letter-spacing:-.055em; }
.creative-main h2 { letter-spacing:-.065em; }
.creative-main h3 { letter-spacing:-.035em; }
.creative-main h1 { margin:0; font-size:clamp(48px,4.8vw,68px); line-height:1.06; }
.creative-main h1>span { display:block; white-space:nowrap; }
.creative-main h1>span:first-child { color:var(--creative-blue); }
.creative-main h2 { margin:0 0 20px; font-size:var(--creative-heading-size); line-height:1.12; }
.creative-main h3 { margin:0 0 15px; font-size:25px; line-height:1.2; }
.creative-main p { color:var(--creative-muted); line-height:1.6; }
.creative-main a { color:inherit; }
.creative-main button,.creative-main input,.creative-main textarea,.creative-main select { font:inherit; color:inherit; }
.creative-main button,.creative-main select { cursor:pointer; }
.creative-main :is(button,a,input,textarea,select,summary):focus-visible { outline:3px solid #477be4; outline-offset:4px; }
.creative-main svg { width:20px; height:20px; flex-shrink:0; }
.creative-main .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.creative-main [hidden] { display:none!important; }
.creative-main>.site-breadcrumbs { display:flex; gap:12px; margin:0 0 34px; padding:0; font-family:var(--sans); font-size:11px; text-transform:none; letter-spacing:0; color:#768190; }
.creative-path a { text-decoration:none; }
.creative-path a:hover { text-decoration:underline; }
.creative-hero { text-align:center; }
.creative-lede { font-size:17px; line-height:1.55; max-width:690px; margin:22px auto 30px; }
.creative-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:44px; padding:11px 20px; border:1px solid var(--creative-line); border-radius:999px; background:white; text-decoration:none; font-size:13px; font-weight:550; transition:background 160ms ease,transform 160ms ease; }
.creative-main .creative-button--primary { background:var(--creative-blue); border-color:var(--creative-blue); color:white; box-shadow:none; }
.creative-main .creative-button--primary:hover { background:#174fc6; }
.creative-button:disabled { opacity:.55; cursor:wait; }
.model-mark { display:block; object-fit:contain; width:32px; height:32px; }
.creative-main .model-mark[src$="/openai.svg"],.creative-main .model-mark[src$="/grok.svg"] { padding:5px; border-radius:50%; background:#253243; }
/* An image strip is the hero's visual statement, with original Gallery links. */
.creative-filmstrip { display:flex; gap:16px; width:calc(100vw - 32px); margin:50px 0 0 calc((100% - 100vw + 32px)/2); overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x proximity; scrollbar-width:none; }
.creative-filmstrip::-webkit-scrollbar { display:none; }
.creative-filmstrip>a { display:block; flex:1 0 calc(280px * var(--art-ratio)); height:280px; scroll-snap-align:center; border-radius:15px; overflow:hidden; }
.creative-filmstrip img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease; }
.creative-filmstrip a:hover img { transform:scale(1.025); }
.creative-section { margin-top:var(--creative-section-gap); scroll-margin-top:110px; }
.creative-section__head { text-align:left; margin:0 0 28px; max-width:none; }
.creative-section__head p { margin:0; max-width:620px; font-size:17px; }
.creative-section__head>div h2 { margin-bottom:16px; }
.creative-text-link { display:inline-flex; align-items:center; gap:8px; font-size:13px; text-decoration:none; color:var(--creative-blue)!important; }
.creative-section__head>a { margin-top:18px; }
/* Each visual study has a real editable prompt, rather than a feature card. */
.creative-studio-tabs { display:flex; justify-content:flex-start; gap:6px; margin:0 0 24px; }
.creative-studio-tabs button { padding:10px 22px; background:transparent; border:0; border-radius:999px; font-size:14px; color:#738091; }
.creative-studio-tabs button[aria-selected="true"] { background:#e8efff; color:#1d56d1; }
.creative-studio-panel { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:48px; align-items:center; }
.creative-studio-art { min-width:0; display:flex; align-items:center; justify-content:center; }
.creative-studio-art img { width:100%; height:auto; max-height:560px; object-fit:contain; display:block; }
.creative-studio-copy { align-self:center; }
.creative-studio-copy h3 { font-size:32px; line-height:1.15; }
.creative-studio-copy>p { font-size:15px; }
.creative-studio-copy blockquote { margin:24px 0; padding:0 0 0 16px; border-left:2px solid #b9c8dc; font-size:13px; line-height:1.65; color:#637083; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:5; overflow:hidden; }
.creative-framing { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.3fr); gap:70px; align-items:center; }
.creative-framing-copy>p { font-size:16px; max-width:370px; }
.creative-frame-options { display:flex; gap:12px; margin:30px 0 18px; }
.creative-frame-options button { display:flex; align-items:center; gap:10px; border:1px solid transparent; border-radius:10px; background:transparent; padding:11px 12px; font-size:12px; }
.creative-frame-options button>span { display:block; height:20px; border:1.4px solid currentColor; border-radius:2px; }
.creative-frame-options button[aria-pressed="true"] { color:#225cdf; border-color:#b7caf4; background:#edf3ff; }
.creative-frame-options button:disabled { opacity:.35; cursor:not-allowed; }
.creative-frame-stage { display:flex; align-items:center; justify-content:center; min-height:440px; padding:24px; border-radius:24px; background:#eaf0f7; }
.creative-frame-preview { --frame-ratio:1.777778; width:min(100%,calc(390px * var(--frame-ratio))); overflow:hidden; border-radius:10px; box-shadow:0 16px 32px #2e4a6814; transition:width .35s ease,aspect-ratio .35s ease; }
.creative-frame-preview img { width:100%; height:100%; display:block; object-fit:cover; }
.creative-caption,.creative-framing-copy>.creative-caption { font-size:11px; line-height:1.6; }
/* A real extracted first frame and its original video, without invented outcomes. */
.creative-motion-canvas { display:grid; grid-template-columns:minmax(0,.38fr) 44px minmax(0,1fr); gap:24px; align-items:center; }
.creative-motion-canvas figure { margin:0; min-width:0; }
.creative-motion-canvas img,.creative-motion-canvas video { width:100%; height:auto; aspect-ratio:16/9; display:block; object-fit:cover; border-radius:18px; background:#e8edf4; }
.creative-motion-arrow { display:grid; place-items:center; color:#8799b1; }
.creative-motion-arrow svg { width:32px; height:32px; }
.creative-motion-actions { display:flex; align-items:center; justify-content:flex-end; gap:24px; margin-top:24px; }
/* Model discovery stays factual and easy to scan. */
.creative-model-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; }
.creative-model-card { display:flex; flex-direction:column; min-width:0; padding:24px 0; border-top:1px solid var(--creative-line); background:transparent; }
.creative-model-card__identity { display:flex; align-items:center; gap:10px; margin-bottom:16px; font-size:12px; color:var(--creative-muted); }
.creative-model-card h3 { font-size:25px; margin-bottom:10px; }
.creative-model-card h3 a { text-decoration:none; }
.creative-model-card h3 a:hover { color:var(--creative-blue); }
.creative-model-card p { font-size:13px; margin:0 0 18px; }
.creative-model-card ul { display:flex; flex-wrap:wrap; gap:6px 14px; list-style:none; padding:0; margin:0 0 22px; }
.creative-model-card li { font-size:11px; color:#6b788a; }
.creative-model-card__action { display:inline-flex; align-items:center; gap:8px; margin-top:auto; font-size:12px; font-weight:500; text-decoration:none; color:var(--creative-blue)!important; }
.creative-model-card__action svg { width:16px; }
.creative-model-overview { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:start; padding:50px 0; border-top:1px solid var(--creative-line); }
.creative-model-overview__provider { display:flex; align-items:center; gap:10px; margin-bottom:24px; font-size:12px; }
.creative-model-overview h2 { font-size:40px; }
.creative-model-overview p { font-size:14px; max-width:460px; }
.creative-specs { display:grid; grid-template-columns:1fr 1fr; gap:24px 28px; margin:0; }
.creative-specs>div { min-width:0; }
.creative-specs dt { color:var(--creative-muted); font-size:11px; margin-bottom:8px; }
.creative-specs dd { margin:0; font-size:14px; line-height:1.6; }
.creative-directory-hero { text-align:center; margin:25px auto 52px; }
.creative-directory-hero h1 { font-size:64px; }
.creative-directory-hero .creative-lede { max-width:620px; margin:22px auto; }
.creative-directory-hero>.creative-button { margin-top:0; }
.creative-mode-tabs { display:flex; gap:32px; border-bottom:1px solid var(--creative-line); }
.creative-mode-tabs a { display:inline-flex; align-items:center; gap:10px; padding:0 0 18px; margin-bottom:-1px; border-bottom:2px solid transparent; text-decoration:none; font-size:15px; color:#728096; }
.creative-mode-tabs a[aria-current] { color:var(--creative-blue); border-color:var(--creative-blue); }
.creative-mode-tabs span { font-size:10px; color:#8492a5; }
.creative-filters { display:flex; gap:12px; margin-top:26px; }
.creative-search { display:flex; align-items:center; gap:10px; flex:1; border:1px solid var(--creative-line); border-radius:10px; padding:0 14px; background:white; }
.creative-main .creative-search input { width:100%; height:45px; border:0; box-shadow:none; outline:none; min-width:0; font-size:13px; background:transparent; }
.creative-filters select { max-width:100%; height:47px; padding:0 30px 0 13px; border:1px solid var(--creative-line); border-radius:10px; background:#fff; font-size:12px; appearance:auto; }
.creative-directory__summary { display:flex; justify-content:space-between; gap:16px; margin:12px 0 10px; }
.creative-directory__summary p { font-size:11px; }
.creative-directory .creative-model-grid { grid-template-columns:1fr 1fr; gap:10px 70px; }
.creative-directory .creative-model-card { position:relative; padding:26px 0 26px 58px; }
.creative-directory .creative-model-card__identity .model-mark { position:absolute; top:28px; left:0; width:36px; height:36px; }
.creative-directory .creative-model-card__identity { margin-bottom:8px; font-size:11px; }
.creative-directory .creative-model-card h3 { font-size:23px; }
.creative-directory .creative-model-card p { max-width:440px; }
.creative-directory .creative-model-card ul { margin-bottom:16px; }
.creative-no-results { padding:60px 0; text-align:center; }
.creative-no-results h2 { font-size:28px; }
.creative-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:50px; margin-top:40px; }
.creative-steps h3 { font-size:22px; }
.creative-steps p { margin:0; font-size:14px; }
.creative-model-guide>h2 { text-align:center; }
.creative-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.creative-media { min-width:0; margin:0; }
.creative-media>a { display:block; }
.creative-media img,.creative-media video { display:block; width:100%; height:320px; object-fit:cover; border-radius:16px; background:#e8edf4; }
.creative-media video { height:auto; aspect-ratio:16/9; }
.creative-gallery-source { display:flex; align-items:center; justify-content:flex-end; margin-top:24px; gap:20px; font-size:11px; color:var(--creative-muted); }
.creative-gallery-source a { display:inline-flex; align-items:center; gap:8px; text-decoration:none; }
.creative-faq { max-width:none; margin-left:0; margin-right:0; }
.creative-faq>h2 { text-align:left; font-size:40px; margin-bottom:38px; }
.creative-faq details { border-bottom:1px solid var(--creative-line); }
.creative-faq summary { display:flex; justify-content:space-between; align-items:center; gap:20px; list-style:none; cursor:pointer; font-size:15px; padding:23px 0; }
.creative-faq summary::-webkit-details-marker { display:none; }
.creative-faq summary>span { display:inline-flex; flex-shrink:0; font-size:20px; transition:transform 260ms cubic-bezier(.22,1,.36,1); }
.creative-faq details[open] summary>span { transform:rotate(45deg); }
.creative-faq details p { margin:0 32px 24px 0; font-size:14px; }
@media (max-width:1023px) {
 .creative-main { width:calc(100% - 48px); }
 .creative-main h1 { font-size:52px; }
 .creative-lede { font-size:16px; max-width:620px; }
 .creative-filmstrip>a { height:240px; flex-basis:calc(240px * var(--art-ratio)); }
 .creative-page { --creative-section-gap:64px; }
 .creative-studio-panel { gap:32px; }
 .creative-studio-copy h3 { font-size:27px; }
 .creative-framing { gap:35px; }
 .creative-frame-stage { min-height:360px; padding:18px; }
 .creative-frame-preview { width:min(100%,calc(320px * var(--frame-ratio))); }
 .creative-model-grid { gap:25px; }
 .creative-model-overview { gap:45px; }
 .creative-directory .creative-model-grid { gap:10px 36px; }
 .creative-motion-canvas { gap:16px; grid-template-columns:minmax(0,.38fr) 24px minmax(0,1fr); }
 .creative-gallery img { height:270px; }
}
@media (max-width:767px) {
 .creative-main { width:calc(100% - 36px); padding-top:99px; padding-bottom:72px; }
 .creative-main>.site-breadcrumbs { font-size:10px; gap:8px; margin-bottom:28px; }
 .creative-main h1 { font-size:clamp(28px,8vw,48px); line-height:1.1; }
 .creative-main { --creative-heading-size:35px; --creative-control-size:12px; }
 .creative-lede { font-size:14px; line-height:1.55; max-width:440px; margin:18px auto 23px; }
 .creative-filmstrip { gap:10px; margin-top:30px; width:calc(100vw - 20px); margin-left:calc((100% - 100vw + 20px)/2); }
 .creative-filmstrip>a { height:200px; flex-basis:calc(200px * var(--art-ratio)); border-radius:11px; }
 .creative-page { --creative-section-gap:48px; }
 .creative-section__head { margin-bottom:26px; }
 .creative-section__head p { font-size:14px; }
 .creative-studio-tabs { gap:0; justify-content:space-between; margin-bottom:18px; }
 .creative-studio-tabs button { font-size:12px; padding:9px 14px; }
 .creative-studio-panel { grid-template-columns:1fr; gap:28px; }
 .creative-studio-art img { min-height:0; height:300px; max-height:none; }
 .creative-studio-copy h3 { font-size:28px; }
 .creative-studio-copy>p { font-size:14px; }
 .creative-studio-copy blockquote { font-size:12px; margin:20px 0; -webkit-line-clamp:4; }
 .creative-framing { grid-template-columns:1fr; gap:22px; }
 .creative-framing-copy { text-align:left; }
 .creative-framing-copy>p { margin-left:0; margin-right:0; font-size:14px; }
 .creative-frame-options { justify-content:center; margin:22px 0 16px; }
 .creative-frame-options button { font-size:11px; padding:10px; }
 .creative-frame-stage { min-height:310px; padding:20px; border-radius:17px; }
 .creative-frame-preview { width:min(100%,calc(270px * var(--frame-ratio))); }
 .creative-motion-canvas { grid-template-columns:1fr; gap:12px; }
 .creative-motion-canvas>figure:first-child { width:45%; }
 .creative-motion-canvas>figure:first-child img { border-radius:10px; }
 .creative-motion-arrow { display:none; }
 .creative-motion-canvas video { border-radius:14px; }
 .creative-motion-actions { display:block; margin-top:22px; }
 .creative-motion-actions .creative-button { font-size:12px; }
 .creative-model-grid { grid-template-columns:1fr; gap:0; }
 .creative-model-card { padding:22px 0; }
 .creative-model-card h3 { font-size:23px; }
 .creative-model-card__identity { margin-bottom:12px; }
 .creative-model-card ul { margin-bottom:18px; }
 .creative-model-overview { grid-template-columns:1fr; gap:32px; padding:30px 0; }
 .creative-model-overview h2 { font-size:32px; }
 .creative-specs { gap:24px; }
 .creative-specs dd { font-size:13px; }
 .creative-directory-hero { margin:22px auto 42px; }
 .creative-directory-hero h1 { font-size:clamp(31px,8.8vw,50px); }
 .creative-directory-hero .creative-lede { font-size:14px; margin:18px auto 24px; }
 .creative-mode-tabs { gap:25px; }
 .creative-mode-tabs a { font-size:13px; gap:7px; }
 .creative-filters { flex-wrap:wrap; gap:8px; margin-top:20px; }
 .creative-search { flex:1 1 100%; }
 .creative-filters>label:not(.creative-search) { flex:1; min-width:0; }
 .creative-filters select { width:100%; font-size:11px; padding-right:8px; }
 .creative-directory__summary { gap:8px; }
 .creative-directory__summary p { font-size:10px; }
 .creative-directory .creative-model-grid { grid-template-columns:1fr; gap:0; }
 .creative-directory .creative-model-card { padding:22px 0 22px 47px; }
 .creative-directory .creative-model-card__identity .model-mark { top:24px; width:30px; height:30px; }
 .creative-directory .creative-model-card h3 { font-size:23px; }
 .creative-gallery { grid-template-columns:1fr; gap:28px; }
 .creative-gallery img { height:auto; max-height:470px; object-fit:contain; }
 .creative-gallery-source { font-size:10px; gap:10px; }
 .creative-faq>h2 { font-size:32px; }
 .creative-faq summary { font-size:13px; line-height:1.5; padding:20px 0; }
 .creative-faq details p { font-size:13px; }
 .creative-steps { grid-template-columns:1fr; gap:28px; }
}
@media (max-width:359px) {
 .creative-main { width:calc(100% - 28px); padding-top:90px; }
 .creative-main h1 { font-size:26px; }
 .creative-main { --creative-heading-size:31px; --creative-control-size:11px; }
 .creative-main>.site-breadcrumbs { font-size:9px; gap:6px; margin-bottom:24px; }
 .creative-lede { font-size:13px; margin:16px auto 20px; }
 .creative-studio-tabs button { font-size:11px; padding:9px 11px; }
 .creative-directory-hero h1 { font-size:29px; }
}
@media (prefers-reduced-motion:reduce) { .creative-page *,.creative-page *::before,.creative-page *::after { scroll-behavior:auto!important; animation:none!important; transition:none!important; } }
.creative-tools-hub .tools-main { padding-top: 126px; }
.creative-tools-hub .tools-hero { min-height: 0; }
.creative-tools-hub .tools-hero h1 { margin-top: 0; }
.creative-tools-hub .tools-hero h1 span { display: block; white-space: nowrap; }
.creative-tools-hub .tools-hero p { margin-top: 24px; }
.creative-tools-hub .tools-categories { grid-template-columns: repeat(4,minmax(0,1fr)); }
.creative-tools-hub .creative-tools-showcase { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 60px 0; }
.creative-tools-hub .creative-tools-showcase a { display: block; text-decoration: none; color: inherit; min-width: 0; }
.creative-tools-hub .creative-tools-showcase img { display: block; width: 100%; height: 280px; object-fit: cover; border-radius: 18px; }
.creative-tools-hub .creative-tools-showcase strong { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; font-size: 17px; font-weight: 500; }
.creative-tools-hub .creative-tools-showcase svg { width: 20px; height: 20px; }
@media (max-width: 767px) {
  .creative-tools-hub .tools-main { padding-top: 105px; }
  .creative-tools-hub .tools-hero h1 { font-size: clamp(37px, 9.5vw, 56px); }
  .creative-tools-hub .tools-categories { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .creative-tools-hub .creative-tools-showcase { gap: 12px; margin: 38px 0; }
  .creative-tools-hub .creative-tools-showcase img { height: 220px; }
  .creative-tools-hub .creative-tools-showcase strong { font-size: 13px; }
}
.creative-tools-hub .tools-hero h1 { font-weight:500; letter-spacing:-.055em; }
.edit-study { max-width:none; margin-left:0; margin-right:0; }
.edit-study-tabs { display:flex; justify-content:flex-start; flex-wrap:wrap; gap:8px; margin-bottom:26px; }
.edit-study-tabs button { border:0; border-radius:30px; padding:12px 22px; background:transparent; font-size:14px; }
.edit-study-tabs button[aria-selected="true"] { background:#18202b; color:white; }
.edit-comparison { position:relative; aspect-ratio:3/2; border-radius:18px; overflow:hidden; }
.edit-comparison img { position:absolute; width:100%; height:100%; object-fit:cover; }
.edit-comparison-original { clip-path:inset(0 calc(100% - var(--reveal)) 0 0); }
.edit-comparison>span { position:absolute; bottom:18px; padding:7px 12px; border-radius:20px; background:#ffffffed; font-size:12px; }
.edit-original-label { left:18px; }.edit-result-label { right:18px; }
.edit-divider { position:absolute; left:var(--reveal); top:0; bottom:0; width:2px; background:white; box-shadow:0 0 8px #0003; }
.edit-reveal-control { display:flex; align-items:center; gap:22px; margin:20px 0; font-size:12px; color:#647184; }.edit-reveal-control input { flex:1; accent-color:#225cdf; min-width:60px; }
.edit-study-copy { display:flex; align-items:center; gap:32px; justify-content:space-between; }.edit-study-copy p { max-width:660px; margin:0; }.edit-study-copy button { flex-shrink:0; }
.motion-source { margin:0 auto 28px; max-width:360px; }.motion-source img { display:block; width:100%; height:auto; border-radius:12px; }.motion-source figcaption { margin-top:10px; font-size:12px; color:#647184; text-align:center; }
.tested-motion-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }.tested-motion-grid video { display:block; width:100%; height:auto; border-radius:16px; background:#101820; }.tested-motion-grid h3 { margin-top:22px; }.tested-motion-grid p { min-height:78px; }
.creative-next>div { display:grid; grid-template-columns:1fr 1fr; gap:40px; }.creative-next a { text-decoration:none; border-top:1px solid #d8e1e8; padding-top:22px; }.creative-next a:hover h3 { color:#225cdf; }
.tools-main h1 { font-size:clamp(27px,4vw,58px); letter-spacing:-.04em; }
.tools-directory__group header h3 { font-size:30px; }.tools-directory__group:has(#images-tools-title) .tools-grid,.tools-directory__group:has(#video-tools-title) .tools-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.creative-article { max-width:1050px; }.creative-article .article-prose { max-width:720px; margin:50px auto; }.creative-article .article-prose h2 { font-size:32px; margin-top:44px; }.creative-article .article-prose p { font-size:17px; }.creative-article .article-meta { text-align:center; font-size:13px; }.creative-article figure { margin:38px 0; }.creative-article figure img { width:100%; height:auto; border-radius:16px; }.creative-article figcaption { margin:12px 0; font-size:13px; color:#647184; }.creative-article details { border-top:1px solid #d8e1e8; padding:16px 0; }.creative-article summary { cursor:pointer; }.creative-article blockquote { margin:18px 0; padding-left:22px; border-left:2px solid #225cdf; color:#445164; font-size:15px; line-height:1.75; }.creative-article table { border-collapse:collapse; width:100%; margin:28px 0; font-size:14px; }.creative-article td,.creative-article th { padding:14px 10px; border-bottom:1px solid #d8e1e8; text-align:left; }
@media(max-width:767px) { .edit-study-tabs button { padding:10px 13px; font-size:12px; }.edit-study-copy { flex-direction:column; align-items:flex-start; gap:16px; }.edit-reveal-control { gap:12px; font-size:11px; }.tested-motion-grid,.creative-next>div { grid-template-columns:1fr; }.tested-motion-grid p { min-height:0; }.tools-directory__group:has(#images-tools-title) .tools-grid,.tools-directory__group:has(#video-tools-title) .tools-grid { grid-template-columns:1fr; }.creative-article .article-prose p { font-size:16px; }.creative-article .article-prose h2 { font-size:28px; } }
.tools-categories>a { display:block; }.tools-categories>a>span { display:block; max-width:none; }.tools-categories strong,.tools-categories small { display:block; }.tools-categories small { max-width:32ch; margin-top:8px; }.tools-main h2,.tools-main h3,.tools-main blockquote { letter-spacing:-.035em; }
.tools-main .tool-card--creative { display:block; padding:0; overflow:hidden; background:#fff; box-shadow:none; border:1px solid #dbe2e9; border-radius:18px; }.tool-card--creative .tool-card__visual { aspect-ratio:16/10; overflow:hidden; }.tool-card__visual img,.tool-card__visual video { display:block; width:100%; height:100%; object-fit:cover; transition:transform .25s; }.tool-card--creative:hover .tool-card__visual img,.tool-card--creative:hover .tool-card__visual video { transform:scale(1.025); }.tool-card--creative .tool-card__copy { padding:24px; }.tool-card--creative h3 { font-size:28px; margin:0 0 10px; }.tool-card--creative p { margin:0 0 18px; }.tool-card--creative .tool-card__copy>span { display:flex; justify-content:space-between; font-size:13px; color:#225cdf; }

/* Tool thumbnails show the existing editor and reference composer around the artwork. */
.tool-card__visual--workspace { position:relative; container-type:inline-size; background:#edf0f4; padding:5%; }
.tool-card__visual--workspace svg { display:block; width:1.25em; height:1.25em; flex-shrink:0; }
.tool-card--creative .tool-card__visual--workspace :is(img,video) { transform:none; transition:none; }
.tool-editor-window { display:grid; grid-template-rows:12% minmax(0,1fr) 26%; gap:3%; height:100%; padding:2% 4% 3%; background:#f5f6f8; border:1px solid #fff; border-radius:3cqw; box-shadow:0 2cqw 5cqw #283e571a; color:#192129; font-size:clamp(9px,2.2cqw,14px); }
.tool-editor-window__toolbar { display:flex; justify-content:center; align-items:center; gap:1.5%; white-space:nowrap; }
.tool-editor-window__toolbar>span { display:flex; align-items:center; justify-content:center; gap:.45em; height:100%; padding:0 .65em; border-radius:.6em; color:#65717d; }
.tool-editor-window__toolbar>span.is-selected { color:#fff; background:#192129; box-shadow:0 2px 4px #19212916; }
.tool-editor-window__canvas { width:88%; min-height:0; margin:0 auto; overflow:hidden; }
.tool-editor-window__canvas img { object-fit:cover; }
.tool-editor-window__footer { display:flex; flex-direction:column; justify-content:space-between; gap:.4em; }
.tool-editor-window__zoom { display:flex; align-items:center; gap:.8em; height:30%; padding:0 .6em; font-size:.85em; }
.tool-editor-window__zoom i { height:1.2em; border-left:1px solid #19212920; }
.tool-editor-window__zoom i~svg { color:#969da4; }
.tool-editor-window__input { display:flex; align-items:center; justify-content:space-between; min-height:60%; padding:.4em .5em .4em 1em; border:1px solid #19212915; border-radius:1.1em; background:#fff; color:#92979d; }
.tool-preview-send { display:grid; place-items:center; flex-shrink:0; width:2.25em; height:2.25em; border-radius:50%; background:#192129; color:#fff; }
.tool-editor-window .tool-preview-send { background:#19212945; }
.tool-motion-window { position:relative; height:100%; color:#192129; font-size:clamp(9px,2.2cqw,14px); }
.tool-motion-window__result { position:absolute; top:0; right:0; width:87%; aspect-ratio:16/9; overflow:hidden; border:1px solid #ffffffb3; border-radius:2cqw; box-shadow:0 1cqw 3cqw #283e5714; }
.tool-motion-window__result video { object-fit:contain; }
.tool-motion-window__composer { position:absolute; left:0; bottom:0; width:91%; padding:3%; border:1px solid #fff; border-radius:2.6cqw; background:#f5f6f8f5; box-shadow:0 1.5cqw 4cqw #283e571f; }
.tool-motion-window__prompt { display:flex; align-items:center; gap:1em; line-height:1.5; }
.tool-motion-window__reference { position:relative; flex-shrink:0; width:24%; overflow:hidden; border-radius:.5em; }
.tool-motion-window__reference img { aspect-ratio:16/9; }
.tool-motion-window__reference>span { position:absolute; bottom:0; left:0; right:0; padding:.1em .4em; color:#fff; background:#1921299c; font-size:.75em; }
.tool-motion-window__controls { display:flex; align-items:center; gap:.7em; margin-top:.8em; }
.tool-motion-window__mode { display:inline-flex; align-items:center; gap:.4em; padding:.4em .7em; color:#225cdf; background:#e5ecfc; border-radius:2em; }
.tool-motion-window__settings { display:inline-flex; gap:.7em; padding:.4em .7em; color:#65717d; }
.tool-motion-window__controls .tool-preview-send { margin-left:auto; background:#809ed6; }

.creative-hero [data-home-composer-mount] { display:block; max-width:980px; margin:auto; min-height:210px; text-align:left; scroll-margin-top:110px; }
.creative-example-status { margin:0; font-size:12px; }
.creative-main .creative-tools-module { margin-bottom:0; }
.creative-filmstrip video { display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }
@media(max-width:639px) { .creative-hero [data-home-composer-mount] { min-height:260px; } }

/* Shared creative disclosure, adapted from the reviewed accordion recipe.
   Native details remains usable without JavaScript. */
.creative-faq summary { transition:color 180ms ease; }
.creative-faq summary:hover,.creative-faq details[data-expanded="true"] summary { color:var(--creative-blue); }
.creative-faq-answer { display:grid; grid-template-rows:1fr; }
.creative-faq-answer__inner { min-height:0; overflow:hidden; }
.creative-faq details[data-faq-enhanced] .creative-faq-answer { grid-template-rows:0fr; transition:grid-template-rows 260ms cubic-bezier(.22,1,.36,1); }
.creative-faq details[data-faq-enhanced] .creative-faq-answer__inner { opacity:0; transform:translateY(-4px); transition:opacity 200ms ease,transform 260ms cubic-bezier(.22,1,.36,1); }
.creative-faq details[data-expanded="true"] .creative-faq-answer { grid-template-rows:1fr; }
.creative-faq details[data-expanded="true"] .creative-faq-answer__inner { opacity:1; transform:none; }
.creative-faq details[data-expanded="false"] summary>span { transform:rotate(0); }
/* Apply the open media treatment to image editing and both video tasks too. */
.creative-frame-stage { padding:0; border-radius:0; background:transparent; }
.creative-frame-preview { border-radius:0; box-shadow:none; }
.creative-motion-canvas img,.creative-motion-canvas video,.creative-media img,.creative-media video,
.edit-comparison,.motion-source img,.tested-motion-grid video { border-radius:0; background:transparent; box-shadow:none; }
@media(prefers-reduced-motion:reduce) {
 .creative-faq summary,.creative-faq summary>span,.creative-faq-answer,.creative-faq-answer__inner { transition:none!important; }
}

/* Related tools uses the same heading and control scale as the creative sections. */
.creative-main .creative-tools-module .story-footer-links h2 {
  max-width:none; font-size:var(--creative-heading-size); line-height:1.12; letter-spacing:-.065em;
}
.creative-main .creative-studio-tabs button,
.creative-main .creative-tools-module .story-tools-links a,
.creative-main .creative-tools-module .story-tools-all {
  font:400 var(--creative-control-size)/1.5 var(--sans); letter-spacing:normal;
}

/* Use case media shares the open layout and typography of the creative pages. */
.creative-usecases-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:64px 48px; }
.creative-usecase { min-width:0; }
.creative-usecase figure { margin:0 0 24px; }
.creative-usecase img,.creative-usecase video { display:block; width:100%; height:360px; object-fit:contain; }
.creative-usecase-copy h3 { font-size:30px; }
.creative-usecase-copy>p { max-width:56ch; margin:0 0 18px; font-size:15px; }
.creative-usecase--featured { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); align-items:center; gap:48px; grid-column:1/-1; }
.creative-usecase--featured figure { margin:0; }
.creative-usecase--featured img,.creative-usecase--featured video { height:420px; }
.creative-hero--video { position:relative; isolation:isolate; width:100vw; margin-left:calc((100% - 100vw)/2); padding:36px 24px 70px; background:#14201c; }
.creative-hero-background,.creative-hero-shade { position:absolute; top:-180px; left:0; width:100%; height:calc(100% + 180px); }
.creative-hero-background { display:block; object-fit:cover; pointer-events:none; }
.creative-hero-shade { background:linear-gradient(180deg,rgba(5,13,19,.45),rgba(5,13,19,.45) 45%,rgba(5,13,19,.65)); }
.creative-hero-content { position:relative; z-index:1; max-width:1100px; margin:auto; }
.creative-main .creative-hero--video h1,.creative-main .creative-hero--video h1>span:first-child { color:#fff; }
.creative-hero--video .creative-lede { color:#edf2f6; }
.creative-page[data-creative-page="video"] .creative-path { position:relative; z-index:2; color:#e0e8ed; }
.creative-hero-media-controls { position:absolute; z-index:1; bottom:20px; left:24px; right:24px; display:flex; align-items:center; justify-content:space-between; gap:16px; color:#fff; font-size:12px; }
.creative-hero-media-controls a { text-decoration:none; }
.creative-hero-media-controls button { padding:8px 12px; border:1px solid #ffffff70; border-radius:999px; color:inherit; background:#10201950; font-size:12px; }
@media(max-width:767px) {
 .creative-usecases-grid { grid-template-columns:1fr; gap:44px; }
 .creative-usecase--featured { display:block; }
 .creative-usecase--featured figure { margin-bottom:24px; }
 .creative-usecase img,.creative-usecase video,.creative-usecase--featured img,.creative-usecase--featured video { height:300px; }
 .creative-usecase-copy h3 { font-size:28px; }
 .creative-usecase-copy>p { font-size:14px; }
 .creative-hero--video { padding:18px 18px 65px; }
 .creative-hero-media-controls { left:18px; right:18px; font-size:10px; gap:8px; }
 .creative-hero-media-controls button { font-size:10px; }
}


/* Reference-led showcase: large media, adjacent copy and direct case selection. */
[data-creative-showcase] { display:block; }
[data-creative-showcase]>article { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); align-items:center; gap:40px; margin:0; }
[data-creative-showcase]>article>figure { margin:0; }
[data-creative-showcase] figure img,[data-creative-showcase] figure video { display:block; width:100%; height:clamp(300px,40vw,540px); object-fit:contain; }
[data-creative-showcase] h3 { font-size:30px; margin:0; }
[data-creative-showcase] p { min-height:0; max-width:65ch; margin:0; font-size:15px; }
[data-creative-showcase]>article>div { display:flex; flex-direction:column; align-items:flex-start; gap:20px; }
.creative-showcase-tabs { display:flex; flex-wrap:wrap; gap:8px 28px; border-bottom:1px solid var(--creative-line); margin:0 0 24px; }
.creative-showcase-tabs button { border:0; border-bottom:2px solid transparent; background:none; padding:14px 0; font-size:14px; color:var(--creative-muted); }
.creative-showcase-tabs button[aria-selected=true] { border-bottom-color:var(--creative-blue); color:var(--creative-blue); }
.creative-usecases .creative-section__head,.tested-motion .creative-section__head { text-align:left; align-items:start; max-width:none; margin:0 0 24px; }
.creative-usecases .creative-section__head p,.tested-motion .creative-section__head p { margin-left:0; max-width:720px; font-size:16px; }
@media(max-width:767px) {
 .creative-showcase-tabs { gap:0 18px; }
 .creative-showcase-tabs button { font-size:12px; padding:10px 0; }
 [data-creative-showcase] figure img,[data-creative-showcase] figure video { height:280px; }
 [data-creative-showcase]>article { display:flex; flex-direction:column-reverse; align-items:stretch; gap:24px; }
 [data-creative-showcase]>article>div { display:block; }
 [data-creative-showcase] h3 { font-size:28px; margin-bottom:12px; }
 [data-creative-showcase] p { margin-bottom:18px; }
}

/* Equal media heights with widths derived from each source aspect ratio. */
[data-case-carousel] { --case-height:360px; display:flex; gap:24px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:none; }
[data-case-carousel]::-webkit-scrollbar { display:none; }
[data-case-carousel]>.creative-usecase { position:relative; display:block; height:var(--case-height); flex:0 0 calc(var(--case-height) * var(--case-ratio)); scroll-snap-align:start; }
[data-case-carousel] .creative-usecase figure { margin:0; }
[data-case-carousel] .creative-usecase img,[data-case-carousel] .creative-usecase video { height:var(--case-height); width:100%; object-fit:contain; object-position:center top; }
[data-case-carousel] .creative-usecase-copy { position:absolute; inset:auto 0 0; display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; padding:36px 18px 18px; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.78)); opacity:0; visibility:hidden; pointer-events:none; transition:opacity 180ms ease,visibility 180ms ease; }
[data-case-carousel] .creative-usecase-copy h3 { font-size:21px; line-height:1.15; margin:0 0 10px; color:#fff; }
[data-case-carousel] .creative-usecase-copy p { display:none; }
[data-case-carousel] .creative-button { margin:0; min-height:44px; padding:6px 0; border:0; border-radius:0; background:transparent; color:#fff; font-size:13px; }
.creative-carousel-controls { display:flex; justify-content:flex-end; gap:10px; margin-top:16px; }
.creative-carousel-controls button { display:grid; place-items:center; width:44px; height:44px; border:1px solid var(--creative-line); border-radius:50%; background:transparent; font-size:22px; }
.creative-carousel-controls button:disabled { opacity:.3; cursor:default; }
.creative-tools-module .story-footer-links { margin-top:var(--creative-section-gap); padding-top:0; }
@media(max-width:767px) {
 [data-case-carousel] { --case-height:320px; }
 [data-case-carousel] .creative-usecase-copy h3 { font-size:21px; }
}

.edit-study-panel { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); column-gap:40px; align-items:center; }
.edit-study-panel .edit-comparison { grid-column:1; grid-row:1; }
.edit-study-panel .edit-reveal-control { grid-column:1; grid-row:2; }
.edit-study-panel .edit-study-copy { grid-column:2; grid-row:1/3; flex-direction:column; align-items:flex-start; gap:20px; }
@media(max-width:767px) {
 .creative-studio-copy { grid-row:1; }
 .edit-study-panel { display:flex; flex-direction:column; align-items:stretch; }
 .edit-study-panel .edit-study-copy { order:-1; margin-bottom:24px; }
}

[data-case-carousel] .creative-usecase:focus-within .creative-usecase-copy { opacity:1; visibility:visible; }
[data-case-carousel] .creative-usecase:has(video[controls]) .creative-usecase-copy { bottom:48px; }
@media(hover:hover) and (pointer:fine) {
 [data-case-carousel] .creative-usecase:hover .creative-usecase-copy { opacity:1; visibility:visible; }
}
.creative-main .creative-tools-module .story-footer-links { padding:0; text-align:center; }
.creative-main .creative-tools-module .story-footer-links h2 { margin-left:auto; margin-right:auto; max-width:none; text-align:center; }
.creative-main .creative-tools-module .story-tools-links { max-width:1120px; margin:28px auto 0; justify-content:center; }
.creative-main .creative-tools-module .story-tools-all { margin-left:auto; margin-right:auto; }
.creative-main .creative-tools-module { width:100%; margin-left:0; margin-right:0; }
.creative-main .creative-tools-module .story-container { width:100%; max-width:none; margin:0; padding:0; }

[data-case-carousel] .creative-usecase:is(:hover,:focus-within) .creative-button { pointer-events:auto; }

[data-case-carousel] .creative-usecase { container-type:inline-size; }
.creative-case-actions { display:flex; flex-wrap:wrap; gap:0 18px; }
@container(max-width:240px) {
 [data-case-carousel] .creative-usecase-copy { padding:28px 12px 12px; }
 [data-case-carousel] .creative-usecase-copy h3 { font-size:18px; }
 .creative-case-actions { gap:0 12px; }
}

.creative-case-actions .creative-button { justify-content:flex-start; text-align:left; gap:8px; }