:root{
    --bg:#14161a;
    --panel:#1b1e24;
    --panel-alt:#21252c;
    --line:#2c313a;
    --text:#f1efea;
    --text-dim:#8b909a;
    --amber:#e8a33d;
    --amber-dim:#5a4326;
    --teal:#4fd1c5;
    --teal-dim:#204944;
    --danger:#e15554;
    --radius:10px;
    --header-h:96px;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  html,body{margin:0;padding:0;}
  body{
    background:
      radial-gradient(1200px 600px at 15% -10%, rgba(232,163,61,0.09), transparent 60%),
      radial-gradient(1000px 500px at 100% 0%, rgba(79,209,197,0.08), transparent 55%),
      var(--bg);
    color:var(--text);
    font-family:'Inter',system-ui,sans-serif;
    font-size:16px;
    min-height:100vh;
  }
  .wrap{max-width:980px;margin:0 auto;padding:28px 18px 60px;}

  /* ---- Trust badges (inspired by videotoframes.com) ---- */
  .trust-row{
    display:flex; flex-wrap:wrap; gap:10px;
    margin:0 0 18px;
  }
  .trust-badge{
    display:inline-flex; align-items:center; gap:6px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:999px;
    padding:7px 13px;
    font-size:12.5px;
    font-weight:600;
    color:var(--text-dim);
  }
  .trust-badge b{color:var(--text); font-weight:700;}
  .source-note{
    text-align:center;
    font-size:11.5px;
    color:var(--text-dim);
    font-family:'JetBrains Mono',monospace;
    margin-top:6px;
  }
  .source-note a{color:var(--teal); text-decoration:none;}
  .source-note a:hover{text-decoration:underline;}

  /* ---- Working modal ---- */
  .modal-overlay{
    display:none;
    position:fixed; inset:0;
    background:rgba(8,9,11,0.78);
    backdrop-filter:blur(2px);
    align-items:center; justify-content:center;
    z-index:1000;
    padding:20px;
  }
  .modal-overlay.show{display:flex;}
  .modal-box{
    width:100%; max-width:420px;
    background:var(--panel-alt);
    border:1px solid var(--line);
    border-radius:14px;
    padding:28px 26px 24px;
    text-align:center;
    box-shadow:0 20px 60px rgba(0,0,0,0.5);
  }
  .modal-spinner{
    width:44px; height:44px;
    margin:0 auto 16px;
    border-radius:50%;
    border:4px solid var(--line);
    border-top-color:var(--amber);
    animation:spin 0.9s linear infinite;
  }
  #f2v-tab .modal-spinner{border-top-color:var(--teal);}
  @keyframes spin{ to{ transform:rotate(360deg); } }
  .modal-title{
    font-family:'Bebas Neue',sans-serif;
    font-size:22px;
    letter-spacing:1px;
    margin-bottom:14px;
  }
  .modal-box .progress-bar{margin-top:4px;}
  .modal-box .progress-label{margin-top:10px; font-size:12px;}
  .modal-hint{
    margin-top:14px;
    font-size:11px;
    color:var(--text-dim);
    font-family:'JetBrains Mono',monospace;
  }
  .modal-warning{
    margin-top:8px;
    font-size:11.5px;
    font-weight:700;
    color:var(--amber);
    font-family:'JetBrains Mono',monospace;
    background:rgba(232,163,61,0.08);
    border:1px solid var(--amber-dim);
    border-radius:8px;
    padding:8px 10px;
  }

  /* ---- Site header (flat bar, full width, single line) ---- */
  .site-header{
    width:100%;
    margin-bottom:26px;
    padding:16px 28px;
    border-bottom:1px solid var(--line);
    background:#0d0e11;
    position:sticky;
    top:0;
    z-index:950;
    box-shadow:0 8px 24px rgba(0,0,0,0.35);
  }
  .header-row{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:nowrap;
    gap:22px;
    z-index:1;
    position:relative;
    max-width:1400px;
    margin:0 auto;
  }
  .brand{display:flex;align-items:center;gap:10px;flex-shrink:0;}
  .brand .logo{
    font-family:'Bebas Neue',sans-serif;
    font-size:30px;
    letter-spacing:1.5px;
    margin:0;
    color:var(--text);
    line-height:1;
    white-space:nowrap;
  }
  .brand .logo span{color:var(--amber);}
  .brand .tagline{
    font-family:'JetBrains Mono',monospace;
    color:var(--text-dim);
    font-size:11px;
    letter-spacing:.5px;
    line-height:1.5;
    margin:0;
    white-space:nowrap;
  }
  .brand .tagline b{color:var(--amber); font-weight:700;}

  /* ---- Primary nav ---- */
  .site-nav{
    display:flex;
    align-items:center;
    gap:20px;
    flex-shrink:0;
    margin-left:auto;
  }
  .site-nav a{
    font-family:'JetBrains Mono',monospace;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.5px;
    color:var(--text-dim);
    text-decoration:none;
    white-space:nowrap;
    transition:color .15s ease;
  }
  .site-nav a:hover,
  .site-nav a:focus-visible{color:var(--amber);}

  /* ---- Right side of header: privacy badge + social ---- */
  .header-right{
    display:flex;
    align-items:center;
    gap:12px;
    flex-shrink:0;
    margin-left:24px;
  }

  /* ---- Social badges ---- */
  .social-badges-inline{
    display:flex;
    align-items:center;
    gap:8px;
    flex-shrink:0;
  }
  .social-badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:34px;
    height:34px;
    border-radius:8px;
    border:1px solid var(--line);
    background:var(--panel-alt);
    color:var(--text-dim);
    flex-shrink:0;
    transition:color .15s ease, border-color .15s ease, background .15s ease, transform .15s ease;
  }
  .social-badge svg{width:16px; height:16px;}
  .social-badge:hover,
  .social-badge:focus-visible{
    transform:translateY(-1px);
    color:var(--text);
  }
  .social-badge.badge-x:hover,
  .social-badge.badge-x:focus-visible{
    border-color:var(--text);
    background:rgba(241,239,234,0.08);
  }
  .social-badge.badge-yt:hover,
  .social-badge.badge-yt:focus-visible{
    border-color:var(--danger);
    background:rgba(225,85,84,0.12);
    color:var(--danger);
  }

  /* ---- Real, descriptive H1 (semantically primary, visually secondary to the logo) ---- */
  .page-h1{
    font-family:'Inter',sans-serif;
    font-weight:800;
    font-size:19px;
    line-height:1.35;
    letter-spacing:.2px;
    color:var(--text);
    margin:0 0 8px;
    max-width:640px;
  }
  .page-h1 .accent{color:var(--amber);}
  .hero-intro{
    color:var(--text-dim);
    font-size:14.5px;
    line-height:1.6;
    margin:0 0 22px;
    max-width:640px;
  }
  .visually-hidden{
    position:absolute; width:1px; height:1px;
    padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  .skip-link{
    position:absolute; left:10px; top:-60px;
    background:var(--amber); color:#1a1200;
    padding:10px 16px; border-radius:8px;
    font-weight:700; font-size:13px; text-decoration:none;
    z-index:2000; transition:top .15s ease;
  }
  .skip-link:focus{top:10px;}
  .privacy-badge{
    z-index:1;
    font-family:'JetBrains Mono',monospace;
    font-size:12px;
    font-weight:700;
    color:var(--teal);
    border:1px solid var(--teal);
    background:rgba(79,209,197,0.1);
    padding:7px 12px;
    border-radius:999px;
    white-space:nowrap;
  }

  /* ---- Tabs styled as filmstrip frames ---- */
  .tabs{
    display:flex;
    gap:10px;
    margin-bottom:22px;
  }
  .tab{
    flex:1;
    position:relative;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:16px 18px 14px;
    cursor:pointer;
    text-align:left;
    color:var(--text-dim);
    font-family:'Inter',sans-serif;
    transition:border-color .15s ease, background .15s ease, transform .1s ease;
  }
  .tab .tsprockets{
    position:absolute; top:6px; bottom:6px; width:6px;
    display:flex; flex-direction:column; justify-content:space-between;
  }
  .tab .tsprockets.l{left:6px;} .tab .tsprockets.r{right:6px;}
  .tab .tsprockets span{width:6px;height:6px;border-radius:1px;background:var(--line);}
  .tab .eyebrow{
    font-family:'JetBrains Mono',monospace;
    font-size:11px;
    letter-spacing:1.5px;
    display:block;
    margin-bottom:4px;
  }
  .tab .label{
    font-family:'Bebas Neue',sans-serif;
    font-size:26px;
    letter-spacing:1px;
    color:var(--text);
    display:block;
  }
  .tab:hover{border-color:#3a4048;}
  .tab.active{background:var(--panel-alt);}
  .tab[data-tab="v2f"].active{border-color:var(--amber);}
  .tab[data-tab="v2f"].active .eyebrow{color:var(--amber);}
  .tab[data-tab="f2v"].active{border-color:var(--teal);}
  .tab[data-tab="f2v"].active .eyebrow{color:var(--teal);}

  .panel{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px;
    display:none;
  }
  .panel.active{display:block;}

  h2.section-title{
    font-family:'Bebas Neue',sans-serif;
    font-size:25px;
    letter-spacing:1px;
    margin:0 0 6px;
  }
  p.section-sub{
    color:var(--text-dim);
    font-size:14.5px;
    margin:0 0 18px;
  }

  /* ---- Dropzone ---- */
  .dropzone{
    border:1.5px dashed var(--line);
    border-radius:var(--radius);
    background:var(--panel-alt);
    padding:34px 20px;
    text-align:center;
    cursor:pointer;
    transition:border-color .15s ease, background .15s ease;
  }
  .dropzone.drag{border-color:var(--amber); background:rgba(232,163,61,0.06);}
  #f2v-tab .dropzone.drag{border-color:var(--teal); background:rgba(79,209,197,0.06);}
  .dropzone .dz-icon{font-size:32px; margin-bottom:10px; opacity:.9;}
  .dropzone .dz-main{font-weight:700; font-size:16px;}
  .dropzone .dz-sub{color:var(--text-dim); font-size:13px; margin-top:5px;}
  input[type="file"]{display:none;}

  /* ---- Video preview + scrubber ---- */
  .stage{
    margin-top:18px;
    display:none;
    scroll-margin-top:var(--header-h);
  }
  .stage.show{display:block;}
  video{
    width:100%;
    max-height:420px;
    background:#000;
    border-radius:8px;
    display:block;
  }
  .scrubber-track{
    position:relative;
    margin-top:14px;
    padding:10px 0;
  }
  .scrubber-track .rail{
    height:6px;
    border-radius:3px;
    background:var(--panel-alt);
    border:1px solid var(--line);
    position:relative;
    overflow:hidden;
  }
  .scrubber-track .rail .fill{
    position:absolute; left:0; top:0; bottom:0;
    background:linear-gradient(90deg, var(--amber-dim), var(--amber));
    width:0%;
  }
  input[type="range"]{
    -webkit-appearance:none;
    width:100%;
    background:transparent;
    position:relative;
    top:-16px;
    margin:0;
    height:20px;
  }
  input[type="range"]::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:16px;height:16px;
    border-radius:50%;
    background:var(--amber);
    border:2px solid #0d0e11;
    cursor:pointer;
    margin-top:-5px;
  }
  input[type="range"]::-webkit-slider-runnable-track{
    height:6px; background:transparent;
  }
  .timecode-row{
    display:flex; justify-content:space-between; align-items:center;
    font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--text-dim);
    margin-top:-8px;
  }
  .timecode-row .now{color:var(--amber); font-weight:700;}

  .controls-row{
    display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:16px;
  }
  select, .num-input{
    background:var(--panel-alt);
    border:1px solid #454b55;
    color:var(--text);
    padding:11px 12px;
    border-radius:8px;
    font-family:'JetBrains Mono',monospace;
    font-size:13px;
    font-weight:600;
  }
  .num-input{width:96px;}
  .timecode-input{width:118px; letter-spacing:.5px;}
  .btn-capture-now{padding:9px 14px; font-size:13px; white-space:nowrap;}

  button{
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:14.5px;
    border-radius:9px;
    border:1px solid transparent;
    padding:13px 20px;
    cursor:pointer;
    transition:opacity .15s ease, transform .1s ease, box-shadow .15s ease;
  }
  button:disabled{opacity:.4; cursor:not-allowed;}
  button:active:not(:disabled){transform:translateY(1px);}
  .btn-amber{background:var(--amber); color:#1a1200; box-shadow:0 2px 14px rgba(232,163,61,0.25);}
  .btn-amber:hover:not(:disabled){opacity:.92; box-shadow:0 4px 18px rgba(232,163,61,0.4);}
  .btn-teal{background:var(--teal); color:#04201d; box-shadow:0 2px 14px rgba(79,209,197,0.25);}
  .btn-teal:hover:not(:disabled){opacity:.92; box-shadow:0 4px 18px rgba(79,209,197,0.4);}
  .btn-ghost{background:var(--panel-alt); border-color:#454b55; color:var(--text); font-weight:600;}
  .btn-ghost:hover:not(:disabled){border-color:var(--text-dim);}
  .btn-danger{background:transparent; border-color:var(--danger); color:var(--danger);}

  hr.divider{
    border:none; border-top:1px solid var(--line); margin:22px 0;
  }

  .batch-row{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
  .small-label{
    font-family:'JetBrains Mono',monospace;
    font-size:12px; color:var(--text-dim); letter-spacing:.5px; font-weight:700;
  }

  .zip-only-row{
    display:flex; align-items:center; gap:8px;
    margin-top:12px;
  }
  .zip-only-row input[type="checkbox"]{
    width:17px; height:17px; accent-color:var(--amber); cursor:pointer;
  }
  .zip-only-row label{
    font-size:13px; color:var(--text); cursor:pointer; font-weight:600;
  }

  /* ---- Segmented toggle (mode switches) ---- */
  .segmented{
    display:inline-flex;
    background:var(--panel-alt);
    border:1px solid var(--line);
    border-radius:8px;
    padding:3px;
    gap:2px;
  }
  .segmented button{
    padding:9px 14px;
    font-size:13px;
    border-radius:6px;
    background:transparent;
    color:var(--text-dim);
    border:none;
  }
  .segmented button.active{background:var(--amber); color:#1a1200;}
  #f2v-tab .segmented button.active{background:var(--teal); color:#04201d;}

  .thumb-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(120px,1fr));
    gap:10px;
    margin-top:16px;
  }
  .thumb{
    background:var(--panel-alt);
    border:1px solid var(--line);
    border-radius:8px;
    overflow:hidden;
    position:relative;
  }
  .thumb img{width:100%; display:block; aspect-ratio:16/9; object-fit:cover;}
  .thumb .tc{
    font-family:'JetBrains Mono',monospace;
    font-size:10px; color:var(--text-dim);
    padding:5px 6px; display:flex; justify-content:space-between; align-items:center;
  }
  .thumb .tc a{color:var(--amber); text-decoration:none; font-weight:700;}

  /* ---- Frames to video: frame count ---- */
  .frame-count{
    margin-top:16px;
  }
  .frame-count .count-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:var(--panel-alt);
    border:1px solid var(--line);
    border-radius:8px;
    padding:10px 14px;
    font-family:'JetBrains Mono',monospace;
    font-size:13px;
    color:var(--text);
  }
  .frame-count .count-badge strong{
    color:var(--teal);
    font-size:16px;
  }
  .frame-list{
    display:flex; flex-direction:column; gap:8px; margin-top:16px;
  }
  .frame-item{
    display:flex; align-items:center; gap:12px;
    background:var(--panel-alt);
    border:1px solid var(--line);
    border-radius:8px;
    padding:8px 10px;
  }
  .frame-item img{
    width:64px; height:40px; object-fit:cover; border-radius:4px; flex-shrink:0;
    border:1px solid var(--line);
  }
  .frame-item .fname{
    flex:1; font-size:12px; color:var(--text-dim);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .frame-item .order-badge{
    font-family:'JetBrains Mono',monospace; font-size:11px;
    color:var(--teal); width:22px; text-align:center; flex-shrink:0;
  }
  .frame-item .actions{display:flex; gap:4px; flex-shrink:0;}
  .icon-btn{
    background:transparent; border:1px solid var(--line); color:var(--text-dim);
    width:26px; height:26px; padding:0; border-radius:6px; font-size:12px; line-height:1;
  }
  .icon-btn:hover:not(:disabled){color:var(--text); border-color:#454b55;}

  .progress-wrap{
    margin-top:16px; display:none;
  }
  .progress-wrap.show{display:block;}
  .progress-bar{
    height:8px; border-radius:4px; background:var(--panel-alt);
    border:1px solid var(--line); overflow:hidden;
  }
  .progress-bar .fill{
    height:100%; width:0%;
    background:linear-gradient(90deg, var(--teal-dim), var(--teal));
    transition:width .12s linear;
  }
  .progress-label{
    font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-dim);
    margin-top:6px;
  }

  .url-row{
    display:flex; flex-wrap:wrap; gap:8px; align-items:center;
    margin-top:14px;
  }
  .url-row .url-input{
    flex:1; min-width:220px;
    background:var(--panel-alt);
    border:1px solid #454b55;
    color:var(--text);
    padding:11px 12px;
    border-radius:8px;
    font-family:'JetBrains Mono',monospace;
    font-size:12.5px;
  }
  .url-row .url-input::placeholder{color:var(--text-dim);}
  .url-hint{
    font-size:12px; color:var(--text-dim); margin-top:8px; line-height:1.5;
  }
  .url-hint b{color:var(--text);}
  .url-note{
    font-size:11.5px; color:var(--text-dim); margin-top:4px;
    font-family:'JetBrains Mono',monospace;
  }
  .url-error{
    display:none;
    margin-top:10px;
    background:rgba(225,85,84,0.08);
    border:1px solid var(--danger);
    color:var(--danger);
    border-radius:8px;
    padding:10px 12px;
    font-size:12.5px;
  }
  .url-error.show{display:block;}
  .url-error.info{
    background:rgba(232,163,61,0.08);
    border-color:var(--amber);
    color:var(--amber);
  }

  .result-video{margin-top:18px; display:none;}
  .result-video.show{display:block;}

  .compose-export-actions{
    display:none;
    gap:10px; align-items:center;
    margin-left:auto;
  }
  .compose-export-actions.show{display:flex;}

  .fmt-note{
    display:none;
    font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-dim);
    margin-top:10px;
  }
  .fmt-note.show{display:block;}

  /* ---- New-project confirm modal ---- */
  .confirm-box{max-width:380px;}
  .confirm-icon{font-size:30px; margin-bottom:10px;}
  .confirm-message{
    font-size:13.5px; color:var(--text-dim); line-height:1.5;
    margin-top:-4px; margin-bottom:20px;
  }
  .confirm-actions{display:flex; gap:10px; justify-content:center;}
  .btn-danger-solid{
    background:var(--danger); color:#2a0d0d; box-shadow:0 2px 14px rgba(225,85,84,0.3);
  }
  .btn-danger-solid:hover:not(:disabled){opacity:.92; box-shadow:0 4px 18px rgba(225,85,84,0.45);}

  /* ---- Action row: primary download + destructive "new project" ---- */
  .action-row{
    display:flex; flex-wrap:wrap; gap:10px; align-items:center;
    justify-content:space-between; margin-top:14px;
  }
  .action-row .primary-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:center;}
  .btn-newproject{
    background:transparent; border:1px solid var(--line); color:var(--text-dim);
    font-weight:600;
  }
  .btn-newproject:hover:not(:disabled){border-color:var(--danger); color:var(--danger);}

  /* ---- Download toast ---- */
  .download-toast-backdrop{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.8);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .25s ease, visibility .25s ease;
    z-index:1099;
  }
  .download-toast-backdrop.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .download-toast{
    position:fixed;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%) scale(0.94);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:8px;
    width:min(92vw, 380px);
    background:var(--panel-alt);
    border:1px solid var(--line);
    border-top:3px solid var(--amber);
    border-radius:14px;
    padding:26px 30px 20px;
    box-shadow:0 20px 60px rgba(0,0,0,0.55);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease, border-color .25s ease;
    z-index:1100;
  }
  .download-toast.show{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translate(-50%, -50%) scale(1);
  }
  .download-toast.success{border-top-color:var(--teal);}
  .download-toast-icon{font-size:26px; line-height:1;}
  .download-toast-text{font-size:14px; line-height:1.45; color:var(--text); font-family:'JetBrains Mono',monospace;}
  .download-toast-countdown{font-size:11px; color:var(--text-dim); font-family:'JetBrains Mono',monospace;}
  .download-toast-close{
    position:absolute;
    top:8px;
    right:10px;
    width:26px;
    height:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:transparent;
    border:none;
    border-radius:50%;
    color:var(--text-dim);
    font-size:18px;
    line-height:1;
    cursor:pointer;
    transition:background .15s ease, color .15s ease;
  }
  .download-toast-close:hover,
  .download-toast-close:focus-visible{
    background:rgba(255,255,255,0.08);
    color:var(--text);
  }

  /* ---- Back to top ---- */
  .back-to-top{
    position:fixed;
    right:22px;
    bottom:22px;
    width:46px;
    height:46px;
    border-radius:50%;
    border:1px solid var(--line);
    background:var(--panel-alt);
    color:var(--text);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    box-shadow:0 6px 20px rgba(0,0,0,0.35);
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:opacity .2s ease, transform .2s ease, visibility .2s ease, border-color .15s ease, background .15s ease;
    z-index:900;
  }
  .back-to-top svg{width:22px; height:22px; display:block; flex-shrink:0;}
  .back-to-top.visible{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
  }
  .back-to-top:hover,
  .back-to-top:focus-visible{
    border-color:var(--amber);
    background:rgba(232,163,61,0.12);
    color:var(--amber);
  }

  /* ---- "download it now" nudge shown after compose finishes ---- */
  .download-nudge{
    display:none;
    align-items:center; gap:8px;
    margin-top:12px;
    font-family:'JetBrains Mono',monospace;
    font-size:13px; font-weight:700;
    color:var(--teal);
  }
  .download-nudge.show{display:flex; animation:nudge-bounce 1.4s ease-in-out infinite;}
  .download-nudge .arrow{font-size:16px;}
  @keyframes nudge-bounce{
    0%,100%{transform:translateX(0);}
    50%{transform:translateX(5px);}
  }

  /* ---- Visible keyboard focus (accessibility) ---- */
  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  .dropzone:focus-visible,
  .tab:focus-visible,
  .faq-question:focus-visible{
    outline:2px solid var(--teal);
    outline-offset:2px;
    border-radius:6px;
  }
  #f2v-tab .dropzone:focus-visible,
  #f2v-tab .tab:focus-visible{ outline-color:var(--teal); }
  #v2f-tab .dropzone:focus-visible{ outline-color:var(--amber); }

  /* ---- Inline video error state ---- */
  .video-error{
    display:none;
    margin-top:14px;
    background:rgba(225,85,84,0.08);
    border:1px solid var(--danger);
    color:var(--danger);
    border-radius:8px;
    padding:12px 14px;
    font-size:13px;
    line-height:1.5;
  }
  .video-error.show{display:block;}

  /* ---- Content sections: How It Works / Why Frame/Works / Formats / FAQ ---- */
  .content-section{
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:24px;
    margin-top:22px;
    scroll-margin-top:var(--header-h);
  }
  .content-section h2{
    font-family:'Bebas Neue',sans-serif;
    font-size:25px;
    letter-spacing:1px;
    margin:0 0 6px;
  }
  .content-section > p.section-sub{margin-bottom:20px;}
  .how-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    margin-top:6px;
  }
  .how-card h3{
    font-family:'Inter',sans-serif;
    font-size:15px;
    color:var(--amber);
    margin:0 0 6px;
  }
  #f2v-tab .how-card h3, .how-card.teal h3{color:var(--teal);}
  .how-card p{
    color:var(--text-dim);
    font-size:13.5px;
    line-height:1.6;
    margin:0;
  }
  .why-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px;
    margin-top:6px;
  }
  .why-card h3{
    font-family:'Inter',sans-serif;
    font-size:14.5px;
    color:var(--text);
    margin:0 0 6px;
  }
  .why-card p{
    color:var(--text-dim);
    font-size:13px;
    line-height:1.6;
    margin:0;
  }
  .formats-list{
    font-family:'JetBrains Mono',monospace;
    font-size:13px;
    color:var(--text);
    line-height:1.8;
    background:var(--panel-alt);
    border:1px solid var(--line);
    border-radius:8px;
    padding:14px 16px;
    margin:0 0 12px;
  }
  .formats-note{
    color:var(--text-dim);
    font-size:13px;
    line-height:1.6;
    margin:0;
  }

  /* ---- FAQ accordion ---- */
  .faq-category{margin-top:22px;}
  .faq-category:first-of-type{margin-top:6px;}
  .faq-category h3{
    font-family:'Inter',sans-serif;
    font-size:13px;
    letter-spacing:1px;
    text-transform:uppercase;
    color:var(--amber);
    margin:0 0 10px;
  }
  .faq-item{
    border:1px solid var(--line);
    border-radius:8px;
    background:var(--panel-alt);
    margin-bottom:8px;
    overflow:hidden;
  }
  .faq-question{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    background:transparent;
    border:none;
    color:var(--text);
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:14px;
    text-align:left;
    padding:13px 16px;
    cursor:pointer;
    border-radius:0;
  }
  .faq-question:hover{background:rgba(255,255,255,0.02);}
  .faq-question .chev{
    flex-shrink:0;
    font-family:'JetBrains Mono',monospace;
    color:var(--text-dim);
    transition:transform .15s ease;
  }
  .faq-question[aria-expanded="true"] .chev{transform:rotate(45deg); color:var(--amber);}
  .faq-answer{
    max-height:0;
    overflow:hidden;
    transition:max-height .2s ease;
  }
  .faq-answer p{
    margin:0;
    padding:0 16px 14px;
    color:var(--text-dim);
    font-size:13.5px;
    line-height:1.6;
  }

  /* ---- Our Tools promo strip ---- */
  .our-tools{
    margin-top:34px;
    padding-top:24px;
    border-top:1px solid var(--line);
  }
  .our-tools-h{
    font-family:'JetBrains Mono',monospace;
    font-size:12px;
    font-weight:700;
    letter-spacing:2px;
    color:var(--text-dim);
    text-transform:uppercase;
    margin:0 0 16px;
  }
  .tool-pills{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
  }
  .tool-pill{
    position:relative;
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:14px 22px;
    border-radius:999px;
    color:#fff;
    font-weight:700;
    font-size:14.5px;
    text-decoration:none;
    letter-spacing:.2px;
    isolation:isolate;
    transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
  }
  .tool-pill svg{width:19px; height:19px; flex-shrink:0;}
  .tool-pill:hover{
    transform:translateY(-2px);
    filter:brightness(1.08);
  }
  .tool-pill:focus-visible{
    outline:2px solid #fff;
    outline-offset:3px;
  }
  .pill-purple{
    background:linear-gradient(135deg,#a020e0,#c026d3);
    box-shadow:0 0 26px rgba(192,38,211,0.45), inset 0 1px 0 rgba(255,255,255,0.15);
  }
  .pill-purple:hover{box-shadow:0 0 36px rgba(192,38,211,0.65), inset 0 1px 0 rgba(255,255,255,0.2);}
  .pill-teal{
    background:linear-gradient(135deg,#0ea5c8,#38bdf8);
    box-shadow:0 0 26px rgba(56,189,248,0.45), inset 0 1px 0 rgba(255,255,255,0.15);
  }
  .pill-teal:hover{box-shadow:0 0 36px rgba(56,189,248,0.65), inset 0 1px 0 rgba(255,255,255,0.2);}
  .pill-amber{
    background:linear-gradient(135deg,#ea7c1f,#f5a524);
    box-shadow:0 0 26px rgba(245,165,36,0.45), inset 0 1px 0 rgba(255,255,255,0.15);
  }
  .pill-amber:hover{box-shadow:0 0 36px rgba(245,165,36,0.65), inset 0 1px 0 rgba(255,255,255,0.2);}
  .pill-green{
    background:linear-gradient(135deg,#0f9d63,#14b881);
    box-shadow:0 0 26px rgba(20,184,129,0.45), inset 0 1px 0 rgba(255,255,255,0.15);
  }
  .pill-green:hover{box-shadow:0 0 36px rgba(20,184,129,0.65), inset 0 1px 0 rgba(255,255,255,0.2);}

  .pill-badge{
    position:absolute;
    top:-10px;
    right:-8px;
    background:#f5c518;
    color:#221900;
    font-family:'JetBrains Mono',monospace;
    font-size:10px;
    font-weight:800;
    letter-spacing:.5px;
    padding:3px 8px;
    border-radius:999px;
    box-shadow:0 0 12px rgba(245,197,24,0.7), 0 2px 6px rgba(0,0,0,0.4);
    transform:rotate(6deg);
  }

  footer{
    text-align:center; color:var(--text-dim); font-size:12px;
    font-family:'JetBrains Mono',monospace; margin-top:28px; letter-spacing:.5px;
  }
  footer nav{margin-top:8px;}
  footer nav a{color:var(--teal); text-decoration:none; margin:0 6px;}
  footer nav a:hover{text-decoration:underline;}

  @media (max-width:700px){
    :root{--header-h:74px;}
    .site-header{padding:14px 16px;}
    .brand .logo{font-size:22px;}
    .brand .tagline{display:none;}
    .page-h1{font-size:16px;}
    .header-row{overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;}
    .header-row::-webkit-scrollbar{display:none;}
    .site-nav{gap:14px;}
    .privacy-badge{font-size:11px; padding:6px 10px;}
    .tabs{flex-direction:column;}
    .how-grid, .why-grid{grid-template-columns:1fr;}
    .back-to-top{right:14px; bottom:14px; width:42px; height:42px;}
    .download-toast{padding:22px 22px 16px; width:92vw;}
    .tool-pills{flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 -18px; padding:0 18px 6px;}
    .tool-pills::-webkit-scrollbar{display:none;}
    .tool-pill{flex-shrink:0;}
  }