.cutline-app{
  box-sizing:border-box;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.cutline-app *{box-sizing:border-box;}
.cutline-app{scroll-behavior:smooth;}

.cutline-app {
  --ink: #14151A;
  --ink-soft: #3C3E46;
  --paper: #FAF9F5;
  --paper-raised: #FFFFFF;
  --line: #E6E2D8;
  --signal: #2F5CFF;
  --signal-dark: #1E43D6;
  --lime: #C6FF3D;
  --muted: #6E7280;
  --radius: 14px;
  --radius-lg: 22px;
  --shadow: 0 1px 2px rgba(20,21,26,0.04), 0 8px 24px rgba(20,21,26,0.06);
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-mono: "JetBrains Mono", monospace;
}
.cutline-app * {box-sizing:border-box;}
.cutline-app {scroll-behavior:smooth;}
.cutline-app {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.cutline-app h1, .cutline-app h2, .cutline-app h3 {font-family:var(--font-display); margin:0; letter-spacing:-0.01em;}
.cutline-app p {margin:0;}
.cutline-app a {color:inherit; text-decoration:none;}
.cutline-app button {font-family:var(--font-body); cursor:pointer;}
.cutline-app :focus-visible {outline:2px solid var(--signal); outline-offset:2px;}
.cutline-app .hidden {display:none !important;}
.cutline-app .muted {color:var(--muted); font-weight:400;}
@media (prefers-reduced-motion: reduce) {
.cutline-app * {animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}
.cutline-app .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:13px 22px; border-radius:999px; border:1px solid transparent;
  font-size:0.95rem; font-weight:600; transition:transform .15s ease, background .15s ease;
}
.cutline-app .btn:active {transform:scale(0.97);}
.cutline-app .btn-primary {background:var(--ink); color:var(--paper);}
.cutline-app .btn-primary:hover {background:var(--signal);}
.cutline-app .btn-primary:disabled {background:var(--line); color:var(--muted); cursor:not-allowed;}
.cutline-app .btn-secondary {background:var(--signal); color:#fff;}
.cutline-app .btn-secondary:hover {background:var(--signal-dark);}
.cutline-app .btn-ghost {background:transparent; color:var(--ink); border:1px solid var(--line);}
.cutline-app .btn-ghost:hover {border-color:var(--ink);}
.cutline-app .btn-small {padding:8px 16px; font-size:0.85rem;}
.cutline-app .btn-block {width:100%;}
.cutline-app .nav {position:sticky; top:0; z-index:50; background:rgba(250,249,245,0.9); backdrop-filter:blur(8px); border-bottom:1px solid var(--line);}
.cutline-app .nav-inner {max-width:1180px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:16px 28px;}
.cutline-app .brand {display:flex; align-items:center; gap:8px; font-family:var(--font-display); font-weight:700; font-size:1.15rem;}
.cutline-app .brand-mark {width:24px; height:24px; color:var(--signal);}
.cutline-app .nav-links {display:flex; gap:28px; font-size:0.92rem; font-weight:500;}
.cutline-app .nav-links a {color:var(--ink-soft); transition:color .15s;}
.cutline-app .nav-links a:hover {color:var(--signal);}
@media (max-width: 760px) {
.cutline-app .nav-links {display:none;}
}
.cutline-app .hero {padding:64px 28px 40px;}
.cutline-app .hero-inner {max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1.05fr 1fr; gap:56px; align-items:center;}
.cutline-app .eyebrow {font-family:var(--font-mono); font-size:0.78rem; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); margin-bottom:14px;}
.cutline-app .hero h1 {font-size:clamp(2.6rem, 5.5vw, 4.2rem); font-weight:700; line-height:0.98;}
.cutline-app .hero h1 .dot {color:var(--signal);}
.cutline-app .hero-sub {margin-top:18px; font-size:1.08rem; color:var(--ink-soft); max-width:480px;}
.cutline-app .hero-ctas {display:flex; gap:14px; margin-top:28px; flex-wrap:wrap;}
.cutline-app .hero-fineprint {margin-top:16px; font-size:0.82rem; color:var(--muted); font-family:var(--font-mono);}
.cutline-app .hero-stage {display:flex; flex-direction:column; gap:14px;}
.cutline-app .dropzone {
  position:relative; background:var(--paper-raised); border-radius:var(--radius-lg);
  border:1.5px dashed var(--line); min-height:340px; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow); transition:border-color .15s, background .15s; overflow:hidden;
}
.cutline-app .dropzone.drag-over {border-color:var(--signal); background:#F1F4FF;}
.cutline-app .dropzone-empty {text-align:center; padding:32px;}
.cutline-app .cut-marquee {width:120px; height:120px; margin:0 auto 14px; color:var(--muted);}
.cutline-app .marquee-rect {fill:none; stroke:currentColor; stroke-width:2; stroke-dasharray:8 7; animation:march 18s linear infinite;}
@keyframes march {to{stroke-dashoffset:-500;}}
.cutline-app .dz-title {font-family:var(--font-display); font-weight:600; font-size:1.15rem;}
.cutline-app .dz-sub {margin-top:6px; font-size:0.9rem; color:var(--muted);}
.cutline-app .link-inline {color:var(--signal); font-weight:600; cursor:pointer; text-decoration:underline; text-underline-offset:2px;}
.cutline-app .url-paste {display:flex; gap:8px; margin-top:16px;}
.cutline-app .url-paste input {flex:1; padding:9px 12px; border-radius:8px; border:1px solid var(--line); font-family:var(--font-mono); font-size:0.82rem;}
.cutline-app .dropzone-working {text-align:center; padding:32px;}
.cutline-app .spinner {width:38px; height:38px; border-radius:50%; border:3px solid var(--line); border-top-color:var(--signal); margin:0 auto 16px; animation:spin 0.9s linear infinite;}
@keyframes spin {to{transform:rotate(360deg);}}
.cutline-app .progress-track {width:220px; height:6px; border-radius:99px; background:var(--line); margin:14px auto 0; overflow:hidden;}
.cutline-app .progress-fill {height:100%; width:4%; background:var(--signal); border-radius:99px; transition:width .2s ease;}
.cutline-app #working-label {font-size:0.9rem; color:var(--ink-soft); font-family:var(--font-mono);}
.cutline-app .stage-caption {font-size:0.82rem; color:var(--muted); font-family:var(--font-mono);}
.cutline-app .sample-row {display:flex; gap:10px;}
.cutline-app .sample-thumb {width:56px; height:56px; border-radius:10px; object-fit:cover; cursor:pointer; border:1.5px solid var(--line); transition:border-color .15s, transform .15s;}
.cutline-app .sample-thumb:hover {border-color:var(--signal); transform:translateY(-2px);}
@media (max-width: 900px) {
.cutline-app .hero-inner {grid-template-columns:1fr;}
}
.cutline-app .workspace {padding:20px 28px 80px;}
.cutline-app .workspace-inner {max-width:1180px; margin:0 auto;}
.cutline-app .workspace-header {display:flex; align-items:baseline; justify-content:space-between; margin-bottom:18px;}
.cutline-app .workspace-header h2 {font-size:1.6rem;}
.cutline-app .workspace-grid {display:grid; grid-template-columns:1.2fr 0.9fr; gap:32px;}
@media (max-width:900px) {
.cutline-app .workspace-grid {grid-template-columns:1fr;}
}
.cutline-app .preview-panel {background:var(--paper-raised); border-radius:var(--radius-lg); box-shadow:var(--shadow); padding:18px;}
.cutline-app .compare-frame {
  position:relative; width:100%; aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden;
  background-image: linear-gradient(45deg,#eee 25%,transparent 25%),linear-gradient(-45deg,#eee 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#eee 75%),linear-gradient(-45deg,transparent 75%,#eee 75%);
  background-size:20px 20px; background-position:0 0,0 10px,10px -10px,-10px 0px;
}
.cutline-app .compare-frame canvas {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:contain;}
.cutline-app #canvas-result {clip-path:inset(0 0 0 50%);}
.cutline-app .compare-handle {
  position:absolute; top:0; left:50%; width:2px; height:100%; background:#fff; cursor:ew-resize;
  box-shadow:0 0 0 1px rgba(0,0,0,0.15);
}
.cutline-app .compare-handle-grip {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:34px; height:34px; border-radius:50%; background:#fff; display:flex; align-items:center; justify-content:center;
  box-shadow:0 2px 8px rgba(0,0,0,0.2); font-size:0.8rem;
}
.cutline-app .compare-caption {text-align:center; font-size:0.82rem; color:var(--muted); margin-top:12px; font-family:var(--font-mono);}
.cutline-app .controls-panel {display:flex; flex-direction:column; gap:18px;}
.cutline-app .control-block {background:var(--paper-raised); border-radius:var(--radius); box-shadow:var(--shadow); padding:18px;}
.cutline-app .control-block h3 {font-size:0.95rem; margin-bottom:12px; text-transform:uppercase; letter-spacing:0.04em; font-family:var(--font-mono); font-weight:500; color:var(--ink-soft);}
.cutline-app .bg-swatches {display:flex; gap:10px; flex-wrap:wrap;}
.cutline-app .swatch {width:36px; height:36px; border-radius:10px; border:2px solid var(--line); padding:0; position:relative; overflow:hidden;}
.cutline-app .swatch.active {border-color:var(--signal); box-shadow:0 0 0 2px rgba(47,92,255,0.2);}
.cutline-app .swatch-transparent {background-image:linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%); background-size:10px 10px; background-position:0 0,0 5px,5px -5px,-5px 0px; background-color:#fff;}
.cutline-app .swatch-custom {display:flex; align-items:center; justify-content:center; background:conic-gradient(red,yellow,lime,cyan,blue,magenta,red); cursor:pointer;}
.cutline-app .swatch-custom input {opacity:0; position:absolute; width:1px; height:1px;}
.cutline-app .swatch-image-upload {display:flex; align-items:center; justify-content:center; background:var(--paper); color:var(--muted); font-size:1.3rem; cursor:pointer;}
.cutline-app .slider-row {display:grid; grid-template-columns:90px 1fr 48px; align-items:center; gap:10px; margin-bottom:10px;}
.cutline-app .slider-row label {font-size:0.85rem; color:var(--ink-soft);}
.cutline-app .slider-row input[type=range] {width:100%; accent-color:var(--signal);}
.cutline-app .slider-val {font-family:var(--font-mono); font-size:0.78rem; color:var(--muted); text-align:right;}
.cutline-app .dl-row {display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:12px;}
.cutline-app .dl-row label {font-size:0.85rem; color:var(--ink-soft); flex-shrink:0;}
.cutline-app .dl-row select {flex:1; padding:8px 10px; border-radius:8px; border:1px solid var(--line); font-size:0.85rem; background:var(--paper);}
.cutline-app .est-size {font-family:var(--font-mono); font-size:0.78rem; color:var(--muted); margin-bottom:12px;}
.cutline-app .steps {padding:70px 28px; background:var(--paper-raised); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.cutline-app .steps-inner {max-width:1180px; margin:0 auto;}
.cutline-app .steps h2 {font-size:1.9rem; margin-bottom:36px; max-width:600px;}
.cutline-app .steps-grid {display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.cutline-app .step-num {font-family:var(--font-mono); color:var(--signal); font-size:0.85rem;}
.cutline-app .step h3 {margin-top:8px; font-size:1.2rem;}
.cutline-app .step p {margin-top:8px; color:var(--ink-soft); font-size:0.95rem;}
@media (max-width:760px) {
.cutline-app .steps-grid {grid-template-columns:1fr;}
}
.cutline-app .icons {padding:80px 28px;}
.cutline-app .icons-inner {max-width:1180px; margin:0 auto;}
.cutline-app .icons-head {max-width:600px; margin-bottom:36px;}
.cutline-app .icons-head h2 {font-size:2rem; margin-top:8px;}
.cutline-app .icons-sub {margin-top:10px; color:var(--ink-soft);}
.cutline-app .icons-grid {display:grid; grid-template-columns:1fr 1.1fr; gap:32px;}
@media (max-width:900px) {
.cutline-app .icons-grid {grid-template-columns:1fr;}
}
.cutline-app .dropzone-small {min-height:220px;}
.cutline-app .icon-preview-img {max-width:100%; max-height:180px; border-radius:10px;}
.cutline-app .checkbox-row {display:flex; align-items:center; gap:10px; font-size:0.9rem; margin:14px 0; color:var(--ink-soft);}
.cutline-app .checkbox-row input {width:16px; height:16px; accent-color:var(--signal);}
.cutline-app .icons-options {background:var(--paper-raised); border-radius:var(--radius); box-shadow:var(--shadow); padding:24px;}
.cutline-app .icons-options h3 {font-family:var(--font-mono); font-size:0.85rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--ink-soft); margin-bottom:12px;}
.cutline-app .icon-actions {margin-top:18px;}
.cutline-app .icon-progress {margin-top:16px;}
.cutline-app #icon-progress-label {font-family:var(--font-mono); font-size:0.78rem; color:var(--muted); margin-top:8px;}
.cutline-app .icon-results {margin-top:24px; border-top:1px solid var(--line); padding-top:20px;}
.cutline-app .icon-results-label {font-family:var(--font-mono); font-size:0.78rem; text-transform:uppercase; color:var(--muted); margin-bottom:10px;}
.cutline-app .icon-swatch-grid {display:flex; gap:10px; flex-wrap:wrap; margin-bottom:16px;}
.cutline-app .icon-swatch-grid img {border-radius:8px; border:1px solid var(--line); background:#fff;}
.cutline-app .features {padding:80px 28px; background:var(--paper-raised); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.cutline-app .features-inner {max-width:1180px; margin:0 auto;}
.cutline-app .features h2 {font-size:1.9rem; margin-bottom:36px; max-width:600px;}
.cutline-app .features-grid {display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.cutline-app .feature h3 {font-size:1.05rem;}
.cutline-app .feature p {margin-top:8px; color:var(--ink-soft); font-size:0.92rem;}
@media (max-width:760px) {
.cutline-app .features-grid {grid-template-columns:1fr;}
}
.cutline-app .testimonials {padding:80px 28px;}
.cutline-app .testimonials-inner {max-width:1180px; margin:0 auto;}
.cutline-app .testimonials h2 {font-size:1.9rem; margin-bottom:36px; max-width:600px;}
.cutline-app .testimonial-grid {display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.cutline-app .testimonial-grid blockquote {margin:0; background:var(--paper-raised); border-radius:var(--radius); padding:22px; box-shadow:var(--shadow);}
.cutline-app .testimonial-grid p {font-size:0.95rem; color:var(--ink-soft); font-style:italic;}
.cutline-app .testimonial-grid cite {display:block; margin-top:14px; font-size:0.8rem; color:var(--muted); font-family:var(--font-mono); font-style:normal;}
@media (max-width:900px) {
.cutline-app .testimonial-grid {grid-template-columns:1fr;}
}
.cutline-app .faq {padding:80px 28px; background:var(--paper-raised); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.cutline-app .faq-inner {max-width:760px; margin:0 auto;}
.cutline-app .faq h2 {font-size:1.9rem; margin-bottom:24px;}
.cutline-app .faq-list details {border-bottom:1px solid var(--line); padding:16px 0;}
.cutline-app .faq-list summary {cursor:pointer; font-weight:600; font-size:1rem;}
.cutline-app .faq-list p {margin-top:10px; color:var(--ink-soft); font-size:0.92rem;}
.cutline-app .scope {padding:60px 28px;}
.cutline-app .scope-inner {max-width:760px; margin:0 auto;}
.cutline-app .scope h2 {font-size:1.5rem; margin-bottom:14px;}
.cutline-app .scope p {color:var(--ink-soft);}
.cutline-app .scope ul {margin-top:14px; padding-left:20px; color:var(--ink-soft); font-size:0.92rem;}
.cutline-app .scope li {margin-bottom:10px;}
.cutline-app .footer {padding:40px 28px; border-top:1px solid var(--line);}
.cutline-app .footer-inner {max-width:1180px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;}
.cutline-app .footer-brand {font-family:var(--font-display); font-weight:700;}
.cutline-app .footer-links {display:flex; gap:20px; font-size:0.88rem; color:var(--ink-soft);}
.cutline-app .footer-copy {width:100%; font-size:0.8rem; color:var(--muted); margin-top:8px; font-family:var(--font-mono);}
/* =====================================================================
   VIVID PASS — added color accents to make the page punchier / stickier.
   Additive only; nothing above this line was changed.
   ===================================================================== */

.cutline-app{
  --coral: #FF6B4A;
  --violet: #7C5CFF;
  --mint: #12B886;
  --amber: #FFC24B;
  --danger: #E63946;
}

/* red performance note under the H1 */
.cutline-app .speed-note{
  color:var(--danger);
  font-weight:600;
  font-size:0.85rem;
  margin-top:10px;
  font-family:var(--font-mono);
}

/* colorful hero backdrop */
.cutline-app .hero{ position:relative; overflow:hidden; }
.cutline-app .hero::before{
  content:""; position:absolute; top:-140px; left:-100px;
  width:440px; height:440px; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(124,92,255,0.30), transparent 70%);
  filter:blur(6px);
}
.cutline-app .hero::after{
  content:""; position:absolute; top:-80px; right:-120px;
  width:400px; height:400px; z-index:0; pointer-events:none;
  background:radial-gradient(circle, rgba(255,107,74,0.26), transparent 70%);
  filter:blur(6px);
}
.cutline-app .hero-inner{ position:relative; z-index:1; }

/* gradient pill eyebrow badge (used across sections) */
.cutline-app .eyebrow{
  display:inline-block;
  background:linear-gradient(90deg,var(--violet),var(--signal));
  color:#fff;
  padding:5px 14px;
  border-radius:999px;
  font-family:var(--font-mono);
  font-size:0.72rem;
  letter-spacing:0.06em;
}

/* gradient underline accent on section headings */
.cutline-app .steps h2,
.cutline-app .icons-head h2,
.cutline-app .features h2,
.cutline-app .testimonials h2,
.cutline-app .faq h2{
  position:relative; display:inline-block; padding-bottom:14px;
}
.cutline-app .steps h2::after,
.cutline-app .icons-head h2::after,
.cutline-app .features h2::after,
.cutline-app .testimonials h2::after,
.cutline-app .faq h2::after{
  content:""; position:absolute; left:0; bottom:0;
  width:56px; height:5px; border-radius:99px;
  background:linear-gradient(90deg,var(--signal),var(--violet),var(--coral));
}

/* vivid buttons */
.cutline-app .btn-primary{ background:linear-gradient(90deg,#14151A,#3C3E46); }
.cutline-app .btn-primary:hover{ background:linear-gradient(90deg,var(--signal),var(--violet)); }
.cutline-app .btn-secondary{ background:linear-gradient(90deg,var(--signal),var(--violet)); }
.cutline-app .btn-secondary:hover{ background:linear-gradient(90deg,var(--violet),var(--coral)); }

/* colored swatch focus ring */
.cutline-app .swatch.active{
  border-color:var(--violet);
  box-shadow:0 0 0 3px rgba(124,92,255,0.32);
}

/* feature cards get a cycling top accent */
.cutline-app .feature{ border-top:4px solid var(--signal); padding-top:16px; }
.cutline-app .feature:nth-child(2){ border-top-color:var(--violet); }
.cutline-app .feature:nth-child(3){ border-top-color:var(--coral); }
.cutline-app .feature:nth-child(4){ border-top-color:var(--mint); }
.cutline-app .feature:nth-child(5){ border-top-color:var(--amber); }
.cutline-app .feature:nth-child(6){ border-top-color:var(--signal); }

/* testimonial cards get a cycling left accent */
.cutline-app .testimonial-grid blockquote{ border-left:4px solid var(--violet); }
.cutline-app .testimonial-grid blockquote:nth-child(2){ border-left-color:var(--coral); }
.cutline-app .testimonial-grid blockquote:nth-child(3){ border-left-color:var(--mint); }

/* soft tint wash behind Icon Studio to separate it visually */
.cutline-app .icons{
  background:linear-gradient(180deg, rgba(124,92,255,0.06), transparent 60%);
}