/* ClipCatch pages (/clipcatch/…). Uses the shared tokens from styles.css.
   The one extra colour is ClipCatch's own yellow, used only for the product
   illustration so the extension stays recognisable. */
.clipcatch-page{--cc-yellow:#ffd43b;--cc-ink:#17191d}

/* hero */
.cc-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center;padding-block:88px 72px}
.cc-hero .eyebrow{color:var(--muted);margin-bottom:var(--space-20)}
.cc-hero h1{font-size:clamp(2.6rem,5.6vw,4.6rem);line-height:1.02}
.cc-lead{color:var(--muted);font-size:1.125rem;line-height:1.7;margin-top:var(--space-24);max-width:540px}
.cc-actions{display:flex;flex-wrap:wrap;gap:var(--space-12);margin-top:var(--space-32)}
.cc-note{color:var(--subtle);font-size:.8125rem;margin-top:var(--space-16)}
.cc-soon{cursor:default;color:var(--muted)}
.cc-soon:hover{background:var(--raised)}

/* illustration */
.cc-art{position:relative}
.cc-player{position:relative;aspect-ratio:16/10;border-radius:var(--radius-card);overflow:hidden;border:1px solid var(--line);background:#0b0f1c}
.cc-frame{position:absolute;inset:0;background:
  radial-gradient(120% 90% at 20% 15%,color-mix(in srgb,var(--violet-mid) 70%,transparent),transparent 60%),
  radial-gradient(90% 80% at 85% 85%,color-mix(in srgb,var(--cyan) 45%,transparent),transparent 60%),
  linear-gradient(135deg,#141b33,#0a0d18)}
.cc-pill{position:absolute;top:14px;right:14px;display:flex;align-items:center;gap:2px;padding:3px;border-radius:999px;background:rgba(17,18,22,.86);border:1px solid rgba(255,255,255,.14);box-shadow:0 6px 18px rgba(0,0,0,.4);font-size:.75rem;font-weight:600;color:#fff;white-space:nowrap}
.cc-pill img{width:22px;height:22px;border-radius:6px;margin:0 3px}
.cc-pill span{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-radius:999px}
.cc-pill .cc-q{background:rgba(255,255,255,.1)}
.cc-pill .icon{width:14px;height:14px}
.cc-timeline{position:relative;margin:18px 6px 0;height:52px}
.cc-strip{position:absolute;inset:0;display:grid;grid-template-columns:repeat(9,1fr);gap:2px;border-radius:10px;overflow:hidden}
.cc-strip i{background:linear-gradient(180deg,color-mix(in srgb,var(--violet-mid) calc(30% + var(--i)*6%),#0d1222),color-mix(in srgb,var(--cyan) calc(10% + var(--i)*5%),#0b0f1c))}
.cc-shade{position:absolute;top:0;bottom:0;background:rgba(6,10,20,.6)}
.cc-shade.l{left:0;width:34%;border-radius:10px 0 0 10px}
.cc-shade.r{left:64%;right:0;border-radius:0 10px 10px 0}
.cc-sel{position:absolute;top:-4px;bottom:-4px;left:34%;width:30%;border:3px solid var(--cc-yellow);border-radius:7px}
.cc-sel b{position:absolute;top:-3px;bottom:-3px;width:12px;background:var(--cc-yellow)}
.cc-sel b:first-child{left:-3px;border-radius:5px 0 0 5px}
.cc-sel b:nth-child(2){right:-3px;border-radius:0 5px 5px 0}
.cc-sel em{position:absolute;top:-28px;left:50%;transform:translateX(-50%);background:var(--cc-yellow);color:var(--cc-ink);font:700 .6875rem/1 var(--font-sans);font-style:normal;padding:4px 8px;border-radius:6px}
.cc-strip{clip-path:inset(0 round 10px)}

/* features */
.cc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-16)}
.cc-card{border:1px solid var(--line);background:color-mix(in srgb,var(--white) 1.6%,transparent);border-radius:var(--radius-card);padding:26px}
.cc-card h3{margin-bottom:var(--space-12)}
.cc-card p{color:var(--muted);font-size:.9375rem;line-height:1.7}

/* steps + formats */
.cc-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-16)}
.cc-steps li{border-top:1px solid var(--line);padding-top:var(--space-24)}
.cc-num{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--cc-yellow);color:var(--cc-ink);font-weight:800;margin-bottom:var(--space-16)}
.cc-steps h3{margin-bottom:var(--space-8)}
.cc-steps p{color:var(--muted);font-size:.9375rem;line-height:1.7}
.cc-formats{margin-top:var(--space-48);border:1px solid var(--line);border-radius:var(--radius-card);padding:28px}
.cc-formats h3{margin-bottom:var(--space-16)}
.cc-formats dl{margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-16) var(--space-32)}
.cc-formats dt{font-weight:600;font-size:.9375rem}
.cc-formats dd{margin:4px 0 0;color:var(--muted);font-size:.875rem;line-height:1.7}

/* from the maker */
.cc-products{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-16)}
.cc-product{display:grid;grid-template-columns:200px 1fr;border:1px solid var(--line);border-radius:var(--radius-card);overflow:hidden;background:var(--surface);transition:transform .2s,border-color .2s}
.cc-product:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 50%,var(--line))}
.cc-product-art{background:#0b0f1c;min-height:180px}
.cc-product-art img{width:100%;height:100%;object-fit:cover}
.cc-product-body{padding:24px;display:flex;flex-direction:column;gap:8px}
.cc-tag{font-size:.6875rem;font-weight:700;letter-spacing:.14em;color:var(--purple)}
.cc-product-body p:not(.cc-tag){color:var(--muted);font-size:.9375rem;line-height:1.7}
.cc-product-body .text-link{margin-top:auto}

/* closing call to action */
.cc-final{text-align:center;padding-block:40px 110px;display:flex;flex-direction:column;align-items:center;gap:var(--space-20)}
.cc-final h2{font-size:clamp(2rem,4vw,3rem)}
.cc-final img,.cc-goodbye>img{border-radius:14px}

/* goodbye */
.cc-goodbye>img{margin-bottom:var(--space-24)}
.cc-reasons{display:flex;flex-wrap:wrap;gap:var(--space-12)}
.cc-reasons .button{min-height:48px;padding:12px 18px;white-space:normal;text-align:left}
.cc-back{margin-top:var(--space-24);color:var(--muted)}
.cc-goodbye .business-help{margin-top:var(--space-48)}
.clipcatch-page .faq-list p a,.clipcatch-page .faq-section .muted a,.clipcatch-page .business-notice a{color:var(--purple);text-decoration:underline;text-underline-offset:4px}

@media(max-width:1100px){.cc-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){
  .cc-hero{grid-template-columns:1fr;padding-block:56px 40px}
  .cc-products{grid-template-columns:1fr}
}
@media(max-width:700px){
  .cc-grid,.cc-steps,.cc-formats dl{grid-template-columns:1fr}
  .cc-product{grid-template-columns:1fr}
  .cc-product-art{aspect-ratio:16/9;min-height:0}
  .cc-pill span:not(.cc-q){padding:0 7px}
}