/* Clipping pages extend Prolifik's existing Scrollcraft tokens. */

.clip-demo-section { border-top:1px solid var(--glass-edge); }
.clip-demo-grid { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,.65fr); gap:var(--sc-7); align-items:start; }
.clip-demo-source,.clip-demo-output { margin:0; min-width:0; }
.clip-demo-label { display:flex; justify-content:space-between; gap:var(--sc-3); align-items:center; margin:0 0 var(--sc-4); font-size:var(--sc-t-xs); color:var(--sc-ink-soft); }
.clip-demo-label strong { color:var(--sc-ink); font-family:var(--sc-font-display); font-size:var(--sc-t-sm); }
.clip-demo-source video { width:100%; height:auto; aspect-ratio:16/9; background:var(--sc-surface); border:1px solid var(--glass-edge); border-radius:var(--sc-r-lg); }
.clip-demo-output video { display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:contain; background:var(--sc-surface); border:1px solid var(--glass-edge); border-radius:var(--sc-r-lg); }
.clip-demo-choices { display:grid; gap:var(--sc-3); margin-top:var(--sc-5); }
.clip-demo-choice { appearance:none; border:1px solid var(--glass-edge); border-radius:var(--sc-r-md); background:var(--clip-panel); color:var(--sc-ink-soft); padding:var(--sc-4) var(--sc-5); text-align:left; cursor:pointer; display:grid; grid-template-columns:3rem minmax(0,1fr) auto; align-items:center; gap:var(--sc-3); transition:background-color var(--sc-d-base),border-color var(--sc-d-base); }
.clip-demo-choice:hover { border-color:var(--sc-accent); }
.clip-demo-choice[aria-pressed="true"] { border-color:var(--sc-accent); background:var(--clip-wash); color:var(--sc-ink); }
.clip-demo-choice:focus-visible { outline:2px solid var(--sc-accent); outline-offset:3px; }
.clip-demo-choice:active { background:var(--sc-surface); }
.clip-demo-choice span { font-size:var(--sc-t-xs); font-variant-numeric:tabular-nums; }
.clip-demo-choice strong { font-family:var(--sc-font-display); font-size:var(--sc-t-sm); line-height:1.35; font-weight:600; }
.clip-demo-choice time { font-size:var(--sc-t-xs); white-space:nowrap; font-variant-numeric:tabular-nums; }
.clip-demo-output figcaption { margin-top:var(--sc-4); }
.clip-demo-output h3 { font-family:var(--sc-font-display); font-size:var(--sc-t-lg); line-height:1.2; margin:0 0 var(--sc-3); min-height:2.4em; }
.clip-demo-output p { font-size:var(--sc-t-sm); color:var(--sc-ink-soft); margin:0 0 var(--sc-4); }
.clip-demo-output button { appearance:none; font-size:var(--sc-t-sm); cursor:pointer; }
.clip-demo-note { margin:var(--sc-5) 0 0; color:var(--sc-ink-soft); font-size:var(--sc-t-sm); max-width:62ch; }
.clip-demo-credit { border-top:1px solid var(--glass-edge); padding-top:var(--sc-5); margin:var(--sc-7) 0 0; color:var(--sc-ink-soft); font-size:var(--sc-t-xs); line-height:1.7; max-width:100ch; }
.clip-demo-credit a { color:var(--sc-ink); text-underline-offset:.2em; }
.clip-demo-error { color:var(--sc-ink); border-left:2px solid var(--sc-accent); padding:var(--sc-3); font-size:var(--sc-t-sm); }
@media(max-width:860px) {
 .clip-demo-grid { grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); gap:var(--sc-5); }
 .clip-demo-choice { grid-template-columns:2.7rem minmax(0,1fr); padding:var(--sc-4); }
 .clip-demo-choice time { grid-column:2; }
}
@media(max-width:640px) {
 .clip-demo-grid { grid-template-columns:1fr; gap:var(--sc-6); }
 .clip-demo-output { width:min(100%,280px); margin-inline:auto; }
 .clip-demo-output h3 { min-height:0; }
 .clip-demo-choices { gap:var(--sc-2); }
 .clip-demo-choice strong { font-size:var(--sc-t-sm); }
}
@media(prefers-reduced-motion:reduce) { .clip-demo-choice { transition:none; } }


/* Selection and audience sections are editorial information, not mocked app UI. */
.clip-selection-grid { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:var(--sc-8); align-items:start; }
.clip-signal-list { list-style:none; padding:0; margin:0; counter-reset:signal; }
.clip-signal-list li { position:relative; border-top:1px solid var(--glass-edge); padding:var(--sc-5) 0 var(--sc-5) var(--sc-7); }
.clip-signal-list li::before { counter-increment:signal; content:"0" counter(signal); position:absolute; left:0; top:var(--sc-5); color:var(--sc-accent); font-size:var(--sc-t-xs); font-variant-numeric:tabular-nums; }
.clip-signal-list strong { display:block; font-family:var(--sc-font-display); font-size:var(--sc-t-lg); font-weight:600; line-height:1.2; margin:0 0 var(--sc-3); }
.clip-signal-list p { color:var(--sc-ink-soft); margin:0; font-size:var(--sc-t-sm); max-width:50ch; }
.clip-selection-aside { border:1px solid var(--glass-edge); border-radius:var(--sc-r-lg); background:var(--sc-canvas); padding:var(--sc-6); }
.clip-selection-aside h3 { font-family:var(--sc-font-display); font-size:var(--sc-t-xl); line-height:1.15; letter-spacing:var(--sc-track-snug); margin:0 0 var(--sc-4); }
.clip-selection-aside > p:not(.eyebrow) { font-size:var(--sc-t-sm); color:var(--sc-ink-soft); margin:0 0 var(--sc-5); }
.clip-selection-aside dl { margin:0; }
.clip-selection-aside dl > div { display:grid; grid-template-columns:4rem minmax(0,1fr); gap:var(--sc-4); padding:var(--sc-4) 0; border-top:1px solid var(--glass-edge); font-size:var(--sc-t-sm); }
.clip-selection-aside dt { font-family:var(--sc-font-display); font-weight:600; }
.clip-selection-aside dd { color:var(--sc-ink-soft); margin:0; }
.clip-selection-aside .clip-selection-note { border-top:1px solid var(--glass-edge); padding-top:var(--sc-4); margin:var(--sc-3) 0 0!important; font-size:var(--sc-t-xs)!important; }
.clip-audience-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sc-6); }
.clip-audience { border-top:1px solid var(--glass-edge); padding-top:var(--sc-5); display:flex; flex-direction:column; align-items:start; min-width:0; }
.clip-audience__label { color:var(--sc-accent); font-size:var(--sc-t-xs); letter-spacing:.06em; text-transform:uppercase; }
.clip-audience h3 { font-family:var(--sc-font-display); font-size:var(--sc-t-xl); line-height:1.14; letter-spacing:var(--sc-track-snug); margin:var(--sc-5) 0 var(--sc-4); }
.clip-audience > p { color:var(--sc-ink-soft); font-size:var(--sc-t-sm); margin:0; }
.clip-audience dl { margin:var(--sc-5) 0; font-size:var(--sc-t-sm); }
.clip-audience dt { color:var(--sc-ink); font-family:var(--sc-font-display); font-weight:600; margin-bottom:var(--sc-2); }
.clip-audience dd { color:var(--sc-ink-soft); margin:0; }
.clip-audience a { margin-top:auto; font-size:var(--sc-t-sm); text-underline-offset:.25em; }
@media(max-width:860px) { .clip-selection-grid { grid-template-columns:1fr; gap:var(--sc-5); } .clip-audience-grid { gap:var(--sc-5); } }
@media(max-width:640px) { .clip-selection-aside { padding:var(--sc-5); } .clip-audience-grid { grid-template-columns:1fr; gap:var(--sc-7); } .clip-audience h3 br { display:none; } }

.clipper-page {
  --clip-panel: color-mix(in oklab, var(--sc-surface) 82%, var(--sc-canvas));
  --clip-line: var(--glass-edge);
  --clip-wash: color-mix(in oklab, var(--sc-accent) 12%, transparent);
}
.clipper-page main { overflow: clip; }
.clipper-page p { text-wrap: pretty; }
.clipper-page .sc-section { padding-block: clamp(3.5rem, 7vw, 6.5rem); }
.clipper-page .sc-display { overflow-wrap: anywhere; min-width: 0; }
.clipper-page .sc-body { color: var(--sc-ink-soft); max-width: 62ch; }
.clipper-page .eyebrow { margin: 0 0 var(--sc-4); }
.clip-hero { padding: clamp(5rem, 8vw, 7rem) 0 3.5rem; position: relative; isolation: isolate; }
.clip-hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,transparent 30%,var(--sc-canvas)),url("/assets/sky.webp") center 45%/cover; opacity:.48; }
.clip-hero__grid { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr); gap:var(--sc-8); align-items:center; }
.clip-hero .crumb { margin-bottom:var(--sc-7); }
.clip-hero h1 { font-size:clamp(3rem,5.8vw,5.6rem); max-width:12ch; margin:0; line-height:1.02; }
.clip-hero__lede { font-size:var(--sc-t-lg); max-width:40ch; line-height:1.6; color:var(--sc-ink-soft); margin:var(--sc-5) 0 var(--sc-6); }
.clip-actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--sc-3); }
.clip-trial { color:var(--sc-ink-soft); font-size:var(--sc-t-sm); margin:var(--sc-4) 0 0; }
.clip-sources { display:flex; flex-wrap:wrap; gap:var(--sc-3); align-items:center; margin:var(--sc-7) 0 0; padding:0; list-style:none; font-size:var(--sc-t-sm); color:var(--sc-ink-soft); }
.clip-sources li:not(:last-child)::after { content:""; display:inline-block; width:3px; height:3px; border-radius:50%; margin-left:var(--sc-3); vertical-align:middle; background:var(--sc-ink-soft); }
.clip-hero__media { position:relative; display:flex; justify-content:center; padding:var(--sc-4); }
.clip-hero__video { width:min(100%,290px); border-radius:var(--sc-r-lg); overflow:clip; background:var(--sc-surface); border:1px solid var(--glass-edge); box-shadow:var(--sc-e3),var(--sc-edge); margin:0; }
.clip-hero__video video { width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; }
.clip-hero__video figcaption { padding:var(--sc-3) var(--sc-4); display:flex; justify-content:space-between; gap:var(--sc-3); color:var(--sc-ink-soft); font-size:var(--sc-t-xs); }



.clip-path { border-top:1px solid var(--glass-edge); border-bottom:1px solid var(--glass-edge); }
.clip-path__inner { display:flex; align-items:center; gap:var(--sc-5); padding-block:var(--sc-4); }
.clip-path__label { font-size:var(--sc-t-xs); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; color:var(--sc-ink-soft); }
.clip-path nav { display:flex; flex-wrap:wrap; gap:var(--sc-5); }
.clip-path a { color:var(--sc-ink); text-decoration:none; font-size:var(--sc-t-sm); white-space:nowrap; }
.clip-path a:hover { color:var(--sc-accent); }
.clip-section-head { display:flex; justify-content:space-between; align-items:end; gap:var(--sc-7); margin-bottom:var(--sc-7); }
.clip-section-head h2 { max-width:17ch; margin:0; }
.clip-section-head p { max-width:40ch; margin:0; }
.clip-examples { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sc-5); }
.clip-example { margin:0; min-width:0; }
.clip-example__media { border-radius:var(--sc-r-lg); border:1px solid var(--glass-edge); overflow:clip; box-shadow:var(--sc-e2); background:var(--sc-surface); }
.clip-example video { display:block; width:100%; height:auto; aspect-ratio:9/16; object-fit:cover; }
.clip-example figcaption { padding:var(--sc-4) 0 0; }
.clip-example h3 { margin:0 0 var(--sc-2); font-family:var(--sc-font-display); font-size:var(--sc-t-base); line-height:1.25; }
.clip-example p { font-size:var(--sc-t-sm); color:var(--sc-ink-soft); margin:0; }
.clip-section--surface { background:var(--clip-panel); border-block:1px solid var(--sc-hairline); }
.clip-feature-list { border-top:1px solid var(--glass-edge); }
.clip-feature { display:grid; grid-template-columns:48px minmax(0,1fr) minmax(0,.8fr); gap:var(--sc-7); padding-block:var(--sc-7); border-bottom:1px solid var(--glass-edge); align-items:center; }
.clip-feature__n { align-self:start; color:var(--sc-accent); font-size:var(--sc-t-sm); font-variant-numeric:tabular-nums; padding-top:.25rem; }
.clip-feature h3 { margin:0 0 var(--sc-3); font-family:var(--sc-font-display); font-size:var(--sc-t-xl); font-weight:600; line-height:1.16; letter-spacing:var(--sc-track-snug); max-width:23ch; }
.clip-feature p { margin:0; }
.clip-feature__aside { margin:0; padding:var(--sc-5); border-radius:var(--sc-r-md); border:1px solid var(--glass-edge); background:var(--sc-canvas); }
.clip-feature__aside small { display:block; color:var(--sc-ink-soft); font-size:var(--sc-t-xs); margin-bottom:var(--sc-3); }
.clip-focus-example { font-family:var(--sc-font-display); font-size:var(--sc-t-lg); line-height:1.45; color:var(--sc-ink); margin:0; }
.clip-spelling { display:flex; gap:var(--sc-5); align-items:center; flex-wrap:wrap; }
.clip-spelling del { color:var(--sc-ink-soft); }
.clip-spelling strong { color:var(--sc-ink); font-size:var(--sc-t-lg); font-weight:600; }
.clip-frame-set { display:flex; gap:var(--sc-4); align-items:end; justify-content:space-between; padding-top:var(--sc-3); }
.clip-frame { display:grid; justify-items:center; gap:var(--sc-3); font-size:var(--sc-t-xs); color:var(--sc-ink-soft); }
.clip-frame i { display:block; border:1px solid var(--sc-accent); border-radius:4px; background:var(--clip-wash); width:var(--frame-w); aspect-ratio:var(--frame-ratio); }
.clip-frame:nth-child(1) { --frame-w:39px; --frame-ratio:9/16; }
.clip-frame:nth-child(2) { --frame-w:55px; --frame-ratio:1; }
.clip-frame:nth-child(3) { --frame-w:78px; --frame-ratio:16/9; }
.clip-frame:nth-child(4) { --frame-w:46px; --frame-ratio:4/5; }
.clip-edit-options { display:flex; flex-wrap:wrap; gap:var(--sc-2); }
.clip-edit-options span { font-size:var(--sc-t-sm); color:var(--sc-ink); padding:var(--sc-2) var(--sc-3); border-radius:var(--sc-r-sm); background:var(--sc-surface); }
.clip-workflow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sc-6); counter-reset:workflow; }
.clip-workflow article { padding-top:var(--sc-5); border-top:1px solid var(--glass-edge); min-width:0; }
.clip-workflow article::before { counter-increment:workflow; content:"0" counter(workflow); font-size:var(--sc-t-xs); color:var(--sc-accent); font-family:var(--sc-font-display); }
.clip-workflow h3 { font-family:var(--sc-font-display); font-size:var(--sc-t-lg); line-height:1.2; margin:var(--sc-5) 0 var(--sc-3); }
.clip-workflow p { margin:0; font-size:var(--sc-t-sm); color:var(--sc-ink-soft); }
.clip-monitor { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:var(--sc-8); align-items:center; padding:clamp(1.5rem,4vw,3.5rem); border:1px solid var(--glass-edge); border-radius:var(--sc-r-lg); background:var(--clip-panel); }
.clip-monitor h2 { margin:0 0 var(--sc-5); max-width:15ch; }
.clip-monitor p { margin:0 0 var(--sc-5); }
.clip-monitor__details { display:grid; gap:var(--sc-5); }
.clip-monitor__details div { padding-bottom:var(--sc-5); border-bottom:1px solid var(--glass-edge); }
.clip-monitor__details div:last-child { border:0; padding:0; }
.clip-monitor__details strong { display:block; font-family:var(--sc-font-display); font-size:var(--sc-t-base); margin-bottom:var(--sc-2); }
.clip-monitor__details p { margin:0; font-size:var(--sc-t-sm); }
.clip-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sc-5); }
.clip-plan { border:1px solid var(--glass-edge); border-radius:var(--sc-r-lg); padding:var(--sc-6); background:var(--clip-panel); }
.clip-plan h3 { margin:0 0 var(--sc-5); font-family:var(--sc-font-display); font-size:var(--sc-t-lg); }
.clip-plan__price { font-family:var(--sc-font-display); font-size:var(--sc-t-2xl); line-height:1.1; margin-bottom:var(--sc-6); letter-spacing:var(--sc-track-tight); }
.clip-plan__price small { font-size:var(--sc-t-sm); color:var(--sc-ink-soft); font-weight:400; letter-spacing:normal; }
.clip-plan__minutes { font-size:var(--sc-t-xl); font-family:var(--sc-font-display); margin-bottom:var(--sc-2); }
.clip-plan p { margin:0; color:var(--sc-ink-soft); font-size:var(--sc-t-sm); }
.clip-pricing-note { display:flex; justify-content:space-between; align-items:start; gap:var(--sc-7); margin-top:var(--sc-6); }
.clip-pricing-note p { font-size:var(--sc-t-sm); max-width:60ch; margin:0; }
.clip-pricing-note a { white-space:nowrap; font-size:var(--sc-t-sm); }
.clip-faq-wrap { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--sc-8); }
.clip-faq-wrap h2 { margin:0 0 var(--sc-5); }
.clip-faq-wrap .faq { max-width:none; }
.clip-faq-wrap .a { padding:0 1.25rem 1.25rem; color:var(--sc-ink-soft); font-size:var(--sc-t-sm); }
.clip-close { text-align:center; border-top:1px solid var(--glass-edge); }
.clip-close h2 { max-width:18ch; margin:0 auto var(--sc-5); }
.clip-close p { max-width:46ch; margin:0 auto var(--sc-6); }
.clip-close .clip-actions { justify-content:center; }
.clip-home-entry { display:flex; align-items:center; gap:var(--sc-3); color:var(--sc-ink-soft); font-size:var(--sc-t-sm); margin:0; }
.clip-home-entry a { color:var(--sc-ink); font-weight:600; text-underline-offset:.25em; }
@media(max-width:1100px) {
  .clip-hero__grid { gap:var(--sc-6); grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); }
  
  .clip-feature { gap:var(--sc-5); grid-template-columns:32px minmax(0,1fr) minmax(0,.8fr); }
  .clip-examples { gap:var(--sc-4); }
}
@media(max-width:860px) {
  .clip-hero { padding-top:var(--sc-8); }
  .clip-hero__grid { grid-template-columns:1fr; }
  .clip-hero .crumb { margin-bottom:var(--sc-6); }
  .clip-hero h1 { max-width:16ch; font-size:var(--sc-t-3xl); }
  .clip-hero__media { margin-top:var(--sc-5); }
  
  .clip-section-head { display:block; }
  .clip-section-head p { margin-top:var(--sc-5); }
  .clip-examples { grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sc-4); }
  .clip-feature { grid-template-columns:32px minmax(0,1fr); }
  .clip-feature__aside { grid-column:2; }
  .clip-workflow { grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sc-6); }
  .clip-monitor { grid-template-columns:1fr; gap:var(--sc-6); }
  .clip-plan-grid { gap:var(--sc-3); }
  .clip-plan { padding:var(--sc-5); }
  .clip-plan__price { font-size:var(--sc-t-xl); }
  .clip-faq-wrap { grid-template-columns:1fr; gap:var(--sc-6); }
}
@media(max-width:640px) {
  .clipper-page .sc-section { padding-block:var(--sc-7); }
  .clip-hero { padding-top:var(--sc-7); padding-bottom:var(--sc-7); }
  .clip-hero h1 { font-size:clamp(2.45rem,10.5vw,3.5rem); max-width:14ch; }
  .clip-hero__lede { font-size:var(--sc-t-base); }
  .clip-hero__media { padding:0; justify-content:center; }
  .clip-hero__video { width:80%; max-width:270px; }
  
  
  .clip-path__inner { display:block; }
  .clip-path__label { display:none; }
  .clip-path nav { gap:var(--sc-3) var(--sc-5); }
  .clip-examples { display:flex; overflow-x:auto; gap:var(--sc-5); padding-bottom:var(--sc-4); scroll-snap-type:x proximity; }
  .clip-example { width:70%; }
  .clip-example { flex:0 0 70%; scroll-snap-align:start; }
  .clip-feature { padding-block:var(--sc-6); gap:var(--sc-4); }
  .clip-feature__n { font-size:var(--sc-t-xs); }
  .clip-feature h3 { font-size:var(--sc-t-xl); }
  .clip-feature__aside { padding:var(--sc-4); min-width:0; }
  .clip-frame-set { gap:var(--sc-2); }
  .clip-frame:nth-child(1) { --frame-w:26px; }
  .clip-frame:nth-child(2) { --frame-w:36px; }
  .clip-frame:nth-child(3) { --frame-w:52px; }
  .clip-frame:nth-child(4) { --frame-w:31px; }
  .clip-workflow { gap:var(--sc-6) var(--sc-5); }
  .clip-workflow h3 { margin-top:var(--sc-4); }
  .clip-plan-grid { grid-template-columns:1fr; gap:var(--sc-3); }
  .clip-plan { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sc-3); align-items:center; }
  .clip-plan h3 { margin:0; font-size:var(--sc-t-base); }
  .clip-plan__price { text-align:right; margin:0; }
  .clip-plan__minutes { font-size:var(--sc-t-lg); margin:0; }
  .clip-plan p { text-align:right; }
  .clip-pricing-note { display:block; }
  .clip-pricing-note a { display:inline-block; margin-top:var(--sc-4); }
  .clip-close .clip-actions { flex-direction:column; }
  .clip-home-entry { display:block; max-width:28ch; line-height:1.65; }
  .clip-home-entry a { white-space:nowrap; }
}
@media(prefers-reduced-motion:reduce) {
  .clipper-page [data-sc-in], .clipper-page [data-sc-in] > * { opacity:1!important; transform:none!important; transition:none!important; }
}