/* ═══════════════════════════════════════════════════════════════════
   YT VIDEO CUTTER, SITEWIDE DESIGN SYSTEM
   Warm clay canvas, coral accent, Clash Display + Satoshi.
   Loaded LAST on every page so it beats the legacy stylesheets.
   Page-specific rules stay in that page's own <style> block.
   ═══════════════════════════════════════════════════════════════════ */
:root{
      /* surfaces */
      --bg:#FFFFFF;
      --bg-tint:#FFF6F5;
      --bg-soft:#FBF9F9;
      --surface:#FFFFFF;
      --line:#EFE9E9;
      --line-2:#E2DADA;
      /* ink */
      --ink:#16161A;
      --ink-2:#4E4E58;
      --ink-3:#83838F;
      /* brand */
      --coral:#FF7780;
      --coral-d:#E65960;
      --coral-tint:#FFF0EF;
      --coral-line:rgba(255,119,128,.28);
      /* type */
      --f-d:'Clash Display','Satoshi',-apple-system,sans-serif;
      --f-b:'Satoshi',-apple-system,BlinkMacSystemFont,sans-serif;
      /* scale */
      --t-xl:clamp(2.5rem,5.8vw,4.3rem);
      --t-l:clamp(1.95rem,3.9vw,2.95rem);
      --t-m:clamp(1.4rem,2.4vw,1.75rem);
      --t-h3:1.15rem;
      --t-body-l:1.0625rem;
      --t-body:0.9375rem;
      --t-label:0.75rem;
      /* rhythm */
      --r-sm:10px; --r:16px; --r-lg:24px; --r-pill:999px;
      --sp:clamp(4rem,8vw,7rem);
      --gut:clamp(1.15rem,4vw,3rem);
      --ease:cubic-bezier(.16,1,.3,1);
      --sh-sm:0 2px 10px rgba(22,22,26,.05);
      --sh:0 10px 30px -12px rgba(22,22,26,.14);
      --sh-coral:0 14px 34px -12px rgba(230,89,96,.45);
    }

    /* ── base ─────────────────────────────────────────────────────────── */
    body{font-family:var(--f-b);background:var(--bg);color:var(--ink-2);
      font-size:var(--t-body-l);line-height:1.7;-webkit-font-smoothing:antialiased}
    body::after{content:none}
    @media (prefers-reduced-motion:reduce){
      *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
    }

    .cv{position:relative;z-index:2;padding:var(--sp) 0;background:var(--bg)}
    .cv--tint{background:var(--bg-tint)}
    .cv--soft{background:var(--bg-soft)}
    .cv-wrap{width:min(1160px,100% - var(--gut) * 2);margin-inline:auto}
    .cv-wrap--narrow{width:min(900px,100% - var(--gut) * 2)}

    /* ── heads ────────────────────────────────────────────────────────── */
    .cv-head{text-align:center;max-width:720px;margin:0 auto clamp(2.6rem,5vw,4rem)}
    .cv-kicker{
      display:inline-flex;align-items:center;gap:.5rem;font-family:var(--f-b);
      font-size:var(--t-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
      color:var(--coral-d);background:var(--coral-tint);border:1px solid var(--coral-line);
      border-radius:var(--r-pill);padding:.4rem .95rem;margin-bottom:1.25rem;
    }
    .cv-kicker svg{width:13px;height:13px}
    .cv-h2{font-family:var(--f-d);font-weight:600;font-size:var(--t-l);line-height:1.06;
      letter-spacing:-.028em;color:var(--ink);margin:0;text-wrap:balance}
    .cv-h2 em{font-style:normal;color:var(--coral-d)}
    .cv-sub{font-size:var(--t-body-l);line-height:1.72;color:var(--ink-3);
      margin:1.1rem auto 0;max-width:56ch}

    /* ── the signature: a cut selection ───────────────────────────────── */
    .cut-rule{height:4px;border-radius:2px;background:var(--line);position:relative;overflow:hidden}
    .cut-rule::after{content:'';position:absolute;inset:0 55% 0 18%;border-radius:2px;
      background:linear-gradient(90deg,var(--coral),var(--coral-d))}

    /* ── hero ─────────────────────────────────────────────────────────── */
    .hero-section{background:var(--bg)!important;position:relative;overflow:hidden}
    .hero-section>.hero-overlay{display:none!important}
    .hero-content{position:relative;z-index:3;padding-bottom:clamp(2rem,5vw,4rem)}
    .hero-title{
      font-family:var(--f-d)!important;font-weight:600!important;
      font-size:var(--t-xl)!important;line-height:1.02!important;letter-spacing:-.038em!important;
      color:var(--ink)!important;margin:0 0 1.1rem!important;text-wrap:balance;
    }
    .hero-desc{font-size:var(--t-body-l)!important;line-height:1.68!important;
      color:var(--ink-3)!important;max-width:44ch;margin:0 auto 2.3rem!important}

    /* segmented tool switcher */
    .tool-switcher{
      display:inline-flex!important;gap:.25rem!important;flex-wrap:wrap;justify-content:center;
      background:var(--bg)!important;border:1px solid var(--line)!important;
      border-radius:var(--r-pill)!important;padding:.3rem!important;
      margin-bottom:2.2rem!important;box-shadow:var(--sh-sm)!important;
    }
    .tool-switcher .tool-switch-btn{
      background:none!important;border:0!important;box-shadow:none!important;
      border-radius:var(--r-pill)!important;padding:.6rem 1.15rem!important;
      font-family:var(--f-b)!important;font-size:.85rem!important;font-weight:700!important;
      letter-spacing:0!important;color:var(--ink-3)!important;transition:all .25s var(--ease);
    }
    .tool-switcher .tool-switch-btn:hover{color:var(--ink)!important}
    .tool-switcher .tool-switch-btn.active{
      background:linear-gradient(135deg,var(--coral),var(--coral-d))!important;color:#fff!important;
      box-shadow:0 6px 18px -8px rgba(230,89,96,.8)!important;
    }
    .tool-switcher .tool-switch-btn svg{width:14px;height:14px}

    /* URL field */
    .hero-input-group{
      max-width:660px;margin-inline:auto;border-radius:var(--r-pill)!important;
      background:var(--surface)!important;border:1px solid var(--line-2)!important;
      box-shadow:0 18px 44px -22px rgba(22,22,26,.35)!important;
      padding:.38rem .38rem .38rem .3rem!important;overflow:hidden;
      transition:border-color .28s var(--ease),box-shadow .28s var(--ease);
    }
    .hero-input-group:focus-within{border-color:var(--coral)!important;
      box-shadow:0 18px 44px -20px rgba(230,89,96,.5)!important}
    .hero-input{background:transparent!important;border:0!important;
      font-family:var(--f-b)!important;font-size:1rem!important;color:var(--ink)!important;
      padding:1rem 1.4rem!important}
    .hero-input::placeholder{color:var(--ink-3)!important}
    .hero-btn{
      background:linear-gradient(135deg,var(--coral),var(--coral-d))!important;border:0!important;
      border-radius:var(--r-pill)!important;color:#fff!important;font-family:var(--f-d)!important;
      font-weight:600!important;font-size:1rem!important;letter-spacing:0!important;
      padding:1rem 2rem!important;box-shadow:var(--sh-coral)!important;
      transition:transform .2s var(--ease),box-shadow .2s var(--ease)!important;
    }
    .hero-btn:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(230,89,96,.6)!important}

    #orText{color:var(--ink-3)!important;font-size:.7rem!important;letter-spacing:.16em!important}
    #orText::before,#orText::after{background:var(--line-2)!important}
    #uploadBtnWrap .btn-primary{
      background:var(--surface)!important;border:1px solid var(--line-2)!important;
      color:var(--ink)!important;border-radius:var(--r-pill)!important;
      backdrop-filter:none;-webkit-backdrop-filter:none;font-family:var(--f-b)!important;
      font-weight:700!important;font-size:.95rem!important;letter-spacing:0!important;
      box-shadow:var(--sh-sm)!important;padding:.85rem 1.9rem!important;
    }
    #uploadBtnWrap .btn-primary:hover{border-color:var(--coral)!important;color:var(--coral-d)!important;
      transform:translateY(-2px)!important;box-shadow:var(--sh)!important}
    #uploadText{font-size:.9rem!important;color:var(--ink-3)!important;letter-spacing:0!important}
    .input-tagline{font-family:var(--f-b)!important;font-size:.82rem!important;font-weight:700!important;
      letter-spacing:0!important;color:var(--coral-d)!important;text-transform:none}
    .input-tagline svg{stroke:var(--coral-d)!important}
    /* format chips */
    .hero-input-wrapper div[style*="rgba(255,255,255,0.08)"]{
      background:var(--surface)!important;border:1px solid var(--line)!important;
      border-radius:var(--r-pill)!important;box-shadow:var(--sh-sm);
      transition:border-color .25s,transform .25s var(--ease);
    }
    .hero-input-wrapper div[style*="rgba(255,255,255,0.08)"]:hover{
      border-color:var(--coral)!important;transform:translateY(-2px)}
    .hero-input-wrapper div[style*="rgba(255,255,255,0.08)"] span{
      color:var(--ink)!important;font-size:.78rem!important;font-weight:700!important}
    .support-us-btn{border-radius:var(--r-pill)!important;box-shadow:var(--sh-coral)!important;
      font-family:var(--f-b)!important;font-weight:700!important;font-size:.95rem!important;
      letter-spacing:0!important;padding:11px 26px!important}
    .support-us-btn+div{font-size:.85rem!important;color:var(--ink-3)!important}
    #heroPremiumCTA button{
      background:var(--surface)!important;border:1px solid #EBC98A!important;color:#B07A17!important;
      border-radius:var(--r-pill)!important;box-shadow:var(--sh-sm)!important;
      font-family:var(--f-b)!important;font-weight:700!important;font-size:.88rem!important;
      padding:9px 18px!important}
    #heroPremiumCTA button:hover{background:#FFFBF2!important}
    #heroPremiumCTA span{font-size:.85rem!important;color:var(--ink-3)!important}
    .copyright-confirm label{font-size:.82rem!important;color:var(--ink-3)!important}
    .cc-disclaimer-link{color:var(--coral-d)!important}
    .copyright-confirm+div a{font-size:.78rem!important;color:var(--ink-3)!important}

    /* ── hero mockup: the cutter, drawn in CSS ────────────────────────── */
    .cut-demo{
      max-width:820px;margin:clamp(2.4rem,5vw,3.6rem) auto 0;background:var(--surface);
      border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);
      overflow:hidden;
    }
    .cut-demo-bar{display:flex;align-items:center;gap:.45rem;padding:.85rem 1.1rem;
      border-bottom:1px solid var(--line);background:var(--bg-soft)}
    .cut-demo-dot{width:9px;height:9px;border-radius:50%;background:var(--line-2)}
    .cut-demo-dot:first-child{background:var(--coral)}
    .cut-demo-name{margin-left:.6rem;font-size:.76rem;font-weight:700;color:var(--ink-3);
      letter-spacing:.02em}
    .cut-demo-body{padding:1.1rem}
    .cut-screen{
      position:relative;aspect-ratio:16/7;border-radius:var(--r);overflow:hidden;
      background:linear-gradient(135deg,#221E20,#3A2B2D 60%,#4A3335);
      display:flex;align-items:center;justify-content:center;
    }
    .cut-screen::after{content:'';position:absolute;inset:0;
      background:radial-gradient(60% 80% at 30% 20%,rgba(255,119,128,.22),transparent 70%)}
    .cut-play{position:relative;z-index:2;width:54px;height:54px;border-radius:50%;
      background:rgba(255,255,255,.14);backdrop-filter:blur(6px);display:flex;
      align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.28)}
    .cut-play::before{content:'';border-left:15px solid #fff;border-top:9px solid transparent;
      border-bottom:9px solid transparent;margin-left:4px}
    .cut-track{position:relative;margin:1.15rem 0 .4rem;height:52px;border-radius:12px;
      background:var(--bg-soft);border:1px solid var(--line);overflow:hidden}
    .cut-frames{position:absolute;inset:0;display:flex;gap:2px;padding:2px;opacity:.55}
    .cut-frames i{flex:1;border-radius:3px;background:linear-gradient(160deg,#E9DFE0,#D9C9CB)}
    .cut-frames i:nth-child(3n){background:linear-gradient(160deg,#F1E6E7,#E2D3D5)}
    .cut-frames i:nth-child(4n){background:linear-gradient(160deg,#DED0D2,#CBBABC)}
    .cut-sel{position:absolute;top:0;bottom:0;left:22%;right:38%;
      background:rgba(255,119,128,.2);border-left:3px solid var(--coral-d);
      border-right:3px solid var(--coral-d);
      animation:cutOpen 1.1s var(--ease) .35s both}
    @keyframes cutOpen{from{left:46%;right:46%;opacity:0}to{left:22%;right:38%;opacity:1}}
    .cut-grip{position:absolute;top:50%;width:12px;height:30px;border-radius:6px;
      background:var(--coral-d);transform:translateY(-50%);box-shadow:0 2px 8px rgba(230,89,96,.5);
      display:flex;align-items:center;justify-content:center;gap:2px}
    .cut-grip::before,.cut-grip::after{content:'';width:1.5px;height:11px;
      background:rgba(255,255,255,.75);border-radius:1px}
    .cut-grip--a{left:-7px}
    .cut-grip--b{right:-7px}
    .cut-times{display:flex;justify-content:space-between;font-size:.74rem;font-weight:700;
      color:var(--ink-3);padding:0 .1rem}
    .cut-times b{color:var(--coral-d);font-weight:700}
    .cut-foot{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;margin-top:1.05rem}
    .cut-tag{font-size:.76rem;font-weight:700;color:var(--ink);background:var(--bg-soft);
      border:1px solid var(--line);border-radius:var(--r-pill);padding:.42rem .85rem}
    .cut-tag--on{background:var(--coral-tint);border-color:var(--coral-line);color:var(--coral-d)}
    .cut-go{margin-left:auto;font-family:var(--f-d);font-weight:600;font-size:.9rem;color:#fff;
      background:linear-gradient(135deg,var(--coral),var(--coral-d));border-radius:var(--r-pill);
      padding:.6rem 1.35rem;box-shadow:var(--sh-coral)}
    @media(max-width:560px){
      .cut-go{margin-left:0;width:100%;text-align:center}
      .cut-demo-body{padding:.85rem}
    }

    /* ── cards ────────────────────────────────────────────────────────── */
    .cv-grid{display:grid;gap:1.2rem;grid-template-columns:1fr}
    @media(min-width:620px){.cv-grid--2,.cv-grid--4{grid-template-columns:repeat(2,1fr)}}
    @media(min-width:980px){
      .cv-grid--3{grid-template-columns:repeat(3,1fr)}
      .cv-grid--4{grid-template-columns:repeat(4,1fr)}
    }
    .cv-card{
      background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
      padding:1.75rem 1.6rem;box-shadow:var(--sh-sm);
      transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s;
    }
    .cv-card:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:var(--coral-line)}
    .cv-ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;
      justify-content:center;background:var(--coral-tint);border:1px solid var(--coral-line);
      color:var(--coral-d);margin-bottom:1.2rem}
    .cv-ic svg{width:21px;height:21px;stroke-width:1.8}
    .cv-card h3{font-family:var(--f-d);font-weight:600;font-size:var(--t-h3);line-height:1.28;
      letter-spacing:-.014em;color:var(--ink);margin:0 0 .6rem}
    .cv-card p{font-size:var(--t-body);line-height:1.72;color:var(--ink-3);margin:0}
    .cv-card a{color:var(--coral-d);font-weight:700;text-decoration:none}
    .cv-card a:hover{text-decoration:underline}

    /* ── steps with mini mockups ──────────────────────────────────────── */
    .cv-steps{display:grid;gap:1.2rem;grid-template-columns:1fr}
    @media(min-width:620px){.cv-steps{grid-template-columns:repeat(2,1fr)}}
    @media(min-width:1060px){.cv-steps{grid-template-columns:repeat(4,1fr)}}
    .cv-step{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
      padding:1.3rem;box-shadow:var(--sh-sm);display:flex;flex-direction:column;
      transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s}
    .cv-step:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:var(--coral-line)}
    .cv-step-fig{height:96px;border-radius:12px;background:var(--bg-soft);
      border:1px solid var(--line);margin-bottom:1.15rem;padding:.8rem;
      display:flex;flex-direction:column;justify-content:center;gap:.45rem;overflow:hidden}
    .fig-bar{height:9px;border-radius:5px;background:var(--line-2)}
    .fig-bar--sm{width:55%}
    .fig-bar--xs{width:32%}
    .fig-pill{height:22px;border-radius:var(--r-pill);background:var(--surface);
      border:1px solid var(--line-2);display:flex;align-items:center;padding:0 .55rem;
      font-size:.6rem;font-weight:700;color:var(--ink-3)}
    .fig-pill--on{background:var(--coral-tint);border-color:var(--coral-line);color:var(--coral-d)}
    .fig-track{position:relative;height:26px;border-radius:8px;background:var(--surface);
      border:1px solid var(--line-2);overflow:hidden}
    .fig-track span{position:absolute;top:0;bottom:0;left:24%;right:32%;
      background:rgba(255,119,128,.24);border-left:2.5px solid var(--coral-d);
      border-right:2.5px solid var(--coral-d)}
    .fig-row{display:flex;gap:.35rem}
    .fig-row>*{flex:1}
    .fig-btn{height:26px;border-radius:8px;background:linear-gradient(135deg,var(--coral),var(--coral-d));
      display:flex;align-items:center;justify-content:center;color:#fff;font-size:.6rem;font-weight:700}
    .cv-step-n{font-family:var(--f-d);font-weight:600;font-size:.8rem;color:var(--coral-d);
      background:var(--coral-tint);border:1px solid var(--coral-line);border-radius:var(--r-pill);
      width:30px;height:30px;display:flex;align-items:center;justify-content:center;margin-bottom:.8rem}
    .cv-step h3{font-family:var(--f-d);font-weight:600;font-size:1.02rem;line-height:1.3;
      color:var(--ink);margin:0 0 .5rem;letter-spacing:-.012em}
    .cv-step p{font-size:.885rem;line-height:1.68;color:var(--ink-3);margin:0}

    /* ── format chips grid ────────────────────────────────────────────── */
    .cv-fmts{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-bottom:1.8rem}
    .cv-fmt{display:flex;align-items:center;gap:.6rem;background:var(--surface);
      border:1px solid var(--line);border-radius:14px;padding:.7rem 1.1rem;box-shadow:var(--sh-sm);
      transition:transform .28s var(--ease),border-color .28s}
    .cv-fmt:hover{transform:translateY(-3px);border-color:var(--coral-line)}
    .cv-fmt svg{width:21px;height:21px;stroke:var(--coral-d);flex:0 0 auto}
    .cv-fmt b{display:block;font-family:var(--f-d);font-weight:600;font-size:.9rem;color:var(--ink);
      line-height:1.2}
    .cv-fmt i{font-style:normal;font-size:.7rem;color:var(--ink-3)}

    /* ── check list ───────────────────────────────────────────────────── */
    .cv-checks{display:grid;gap:.7rem;grid-template-columns:1fr;max-width:720px;margin:0 auto}
    @media(min-width:700px){.cv-checks{grid-template-columns:repeat(2,1fr)}}
    .cv-check{display:flex;align-items:center;gap:.75rem;padding:.9rem 1.1rem;
      background:var(--surface);border:1px solid var(--line);border-radius:12px;
      font-size:var(--t-body);color:var(--ink-2)}
    .cv-check svg{width:17px;height:17px;stroke:var(--coral-d);stroke-width:2.6;flex:0 0 auto}

    /* ── benefits band ────────────────────────────────────────────────── */
    .cv-band{background:linear-gradient(135deg,#FFF1F0,#FFE7E6);border:1px solid var(--coral-line);
      border-radius:var(--r-lg);padding:clamp(2rem,4vw,2.8rem)}
    .cv-band h3{font-family:var(--f-d);font-weight:600;font-size:var(--t-m);color:var(--ink);
      text-align:center;margin:0 0 1.9rem;letter-spacing:-.02em}
    .cv-band-grid{display:grid;gap:1.1rem;grid-template-columns:1fr}
    @media(min-width:820px){.cv-band-grid{grid-template-columns:repeat(3,1fr)}}
    .cv-band-item{background:rgba(255,255,255,.72);border:1px solid rgba(255,255,255,.9);
      border-radius:var(--r);padding:1.4rem;text-align:center}
    .cv-band-item .cv-ic{margin:0 auto 1rem;background:#fff}
    .cv-band-item h4{font-family:var(--f-d);font-weight:600;font-size:1.02rem;color:var(--ink);
      margin:0 0 .45rem}
    .cv-band-item p{font-size:.875rem;line-height:1.68;color:var(--ink-2);margin:0}

    /* ── problem list ─────────────────────────────────────────────────── */
    .cv-probs{display:grid;gap:.85rem;grid-template-columns:1fr}
    @media(min-width:620px){.cv-probs{grid-template-columns:repeat(2,1fr)}}
    @media(min-width:980px){.cv-probs{grid-template-columns:repeat(3,1fr)}}
    .cv-prob{display:flex;align-items:flex-start;gap:.75rem;background:var(--surface);
      border:1px solid var(--line);border-left:3px solid var(--coral);border-radius:12px;
      padding:1.05rem 1.2rem;font-size:var(--t-body);color:var(--ink-2)}
    .cv-prob svg{width:16px;height:16px;stroke:var(--coral);stroke-width:2.4;flex:0 0 auto;margin-top:.28rem}

    /* ── FAQ ──────────────────────────────────────────────────────────── */
    .cv-faq{max-width:840px;margin:0 auto}
    .cv-q{background:var(--surface);border:1px solid var(--line);border-radius:14px;
      margin-bottom:.7rem;box-shadow:var(--sh-sm);transition:border-color .28s,box-shadow .28s}
    .cv-q:hover{border-color:var(--line-2)}
    .cv-q.open{border-color:var(--coral-line);box-shadow:var(--sh)}
    .cv-q button{width:100%;display:flex;gap:1.1rem;align-items:center;justify-content:space-between;
      background:none;border:0;cursor:pointer;padding:1.2rem 1.35rem;text-align:left;
      font-family:var(--f-b);font-size:1rem;font-weight:700;color:var(--ink);line-height:1.4}
    .cv-q-i{flex:0 0 auto;color:var(--ink-3);transition:transform .35s var(--ease),color .25s}
    .cv-q.open .cv-q-i{transform:rotate(45deg);color:var(--coral-d)}
    .cv-q button:hover{color:var(--coral-d)}
    .cv-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease)}
    .cv-q.open .cv-a{grid-template-rows:1fr}
    .cv-a>div{overflow:hidden}
    .cv-a p{margin:0;padding:0 1.35rem 1.3rem;font-size:var(--t-body);line-height:1.75;color:var(--ink-3)}

    /* ── prose ────────────────────────────────────────────────────────── */
    .cv-prose{max-width:72ch;margin-inline:auto}
    .cv-prose p{font-size:var(--t-body-l);line-height:1.8;color:var(--ink-3);margin:0 0 1.1rem}
    .cv-prose a{color:var(--coral-d);font-weight:700;text-decoration:none;
      border-bottom:1px solid var(--coral-line)}

    /* ── CTA ──────────────────────────────────────────────────────────── */
    .cv-cta{position:relative;overflow:hidden;text-align:center;border-radius:var(--r-lg);
      padding:clamp(2.8rem,6vw,4.5rem) 1.6rem;
      background:linear-gradient(135deg,#FFF1F0,#FFE4E3);border:1px solid var(--coral-line)}
    .cv-cta h2{font-family:var(--f-d);font-weight:600;font-size:var(--t-l);line-height:1.06;
      letter-spacing:-.03em;color:var(--ink);margin:0 0 1rem;text-wrap:balance}
    .cv-cta p{font-size:var(--t-body-l);color:var(--ink-2);max-width:52ch;margin:0 auto 2rem}
    .cv-btn{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
      font-family:var(--f-d);font-weight:600;font-size:1.02rem;color:#fff;
      background:linear-gradient(135deg,var(--coral),var(--coral-d));
      padding:1rem 2.3rem;border-radius:var(--r-pill);box-shadow:var(--sh-coral);
      transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .25s var(--ease)}
    /* black on hover (requested 2026-07-30): coral -> ink, keeps the lift */
    .cv-btn:hover{transform:translateY(-3px);color:#fff;
      background:linear-gradient(135deg,var(--ink),#000);
      box-shadow:0 20px 46px -12px rgba(22,22,26,.55)}

    /* ── reveal ───────────────────────────────────────────────────────── */
    /* visible by default; /js/cutter-ui.js adds html.js-rv to opt in, so a
       blocked or broken script can never hide content */
    .cv-rv{opacity:1}
    html.js-rv .cv-rv{opacity:0;transform:translateY(18px)}
    html.js-rv .cv-rv.in{opacity:1;transform:none;
      transition:opacity .7s var(--ease),transform .7s var(--ease)}

    /* ══ existing furniture ═══════════════════════════════════════════ */
    #promoBanner{
      background:linear-gradient(135deg,var(--coral),var(--coral-d))!important;
      font-family:var(--f-d)!important;font-size:.95rem!important;font-weight:600!important;
      letter-spacing:.02em!important;text-transform:none;color:#fff!important;
      padding:.85rem 1rem!important;text-shadow:none!important;margin-bottom:0!important;
    }
    #promoBanner:hover{filter:brightness(1.04)}
    #promoBanner .banner-confetti{display:none}

    .hero-nav{background:rgba(255,255,255,.96)!important;backdrop-filter:blur(14px);
      -webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line);
      position:relative;z-index:6}
    .hero-nav .container{max-width:1400px;padding-inline:clamp(1rem,3.2vw,2.5rem)}
    .hero-nav .nav-link{font-family:var(--f-b)!important;font-size:.92rem!important;
      font-weight:500!important;color:var(--ink-2)!important}
    .hero-nav .nav-link:hover{color:var(--coral-d)!important}
    .hero-nav .nav-ytmp3-pill{background:var(--coral-tint)!important;color:var(--coral-d)!important;
      border:1px solid var(--coral-line)!important;border-radius:var(--r-pill)!important;
      padding:6px 15px!important;font-size:.84rem!important}
    .hero-nav .nav-ytmp3-pill:hover{background:var(--coral)!important;color:#fff!important}
    .hero-nav #navLoginItem .nav-link{background:none!important;border:1px solid var(--line-2)!important;
      border-radius:var(--r-pill)!important;padding:6px 16px!important;color:var(--ink)!important;
      font-size:.84rem!important;letter-spacing:.02em!important}
    .hero-nav #navLoginItem .nav-link:hover{border-color:var(--coral)!important;color:var(--coral-d)!important}
    .hero-nav .premium-nav-btn,.premium-nav-btn-mobile{
      background:linear-gradient(135deg,var(--coral),var(--coral-d))!important;color:#fff!important;
      border:0!important;border-radius:var(--r-pill)!important;font-family:var(--f-b)!important;
      font-size:.86rem!important;font-weight:700!important;padding:9px 18px!important;
      box-shadow:var(--sh-coral)!important;transition:transform .22s var(--ease)!important}
    .hero-nav .premium-nav-btn:hover,.premium-nav-btn-mobile:hover{transform:translateY(-2px)}
    .mobile-menu-toggle{color:var(--ink)!important}
    /* the nav logo is a white-on-transparent PNG built for the old dark header,
       so on a white bar it needs a dark chip behind it to stay legible */
    .hero-nav .nav-logo .logo-brand{display:inline-flex;align-items:center;
      background:var(--ink);border-radius:12px;padding:8px 14px}
    .hero-nav .nav-logo .logo-img{display:block}

    .yt-tools-section{background:var(--bg-soft)!important;padding:var(--sp) 0!important;
      border-top:1px solid var(--line)}
    .yt-tools-header{text-align:center!important;max-width:720px!important;
      margin:0 auto clamp(2.6rem,5vw,4rem)!important}
    .yt-tools-header h2{font-family:var(--f-d)!important;font-weight:600!important;
      font-size:var(--t-l)!important;letter-spacing:-.028em!important;color:var(--ink)!important;
      line-height:1.06!important;margin:0 0 1.1rem!important}
    .yt-tools-header p{color:var(--ink-3)!important;font-size:var(--t-body-l)!important;
      line-height:1.72!important;max-width:56ch;margin:0 auto!important}
    .yt-tool-card{background:var(--surface)!important;border:1px solid var(--line)!important;
      border-radius:var(--r)!important;box-shadow:var(--sh-sm)!important;padding:1.75rem 1.6rem!important;
      transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s!important}
    .yt-tool-card::before,.yt-tool-card::after{display:none!important}
    .yt-tool-card:hover{transform:translateY(-5px)!important;box-shadow:var(--sh)!important;
      border-color:var(--coral-line)!important}
    .yt-tool-icon-wrap{width:46px!important;height:46px!important;border-radius:13px!important;
      background:var(--coral-tint)!important;border:1px solid var(--coral-line)!important;
      color:var(--coral-d)!important;box-shadow:none!important;margin:0 0 1.2rem!important;
      display:flex!important;align-items:center;justify-content:center}
    .yt-tool-icon-wrap svg{width:21px;height:21px}
    .yt-tool-card h3{font-family:var(--f-d)!important;font-weight:600!important;
      font-size:var(--t-h3)!important;color:var(--ink)!important;letter-spacing:-.014em!important}
    .yt-tool-features li{color:var(--ink-3)!important;font-size:var(--t-body)!important;line-height:1.7!important}
    .yt-tool-cta{font-family:var(--f-d)!important;font-weight:600!important;font-size:.9rem!important;
      letter-spacing:0!important;text-transform:none;color:var(--coral-d)!important}

    .platform-section{background:var(--bg)!important;border-top:1px solid var(--line)!important;
      border-bottom:1px solid var(--line)!important;padding:clamp(3.5rem,7vw,5.5rem) 0!important}
    .platform-inner{background:var(--surface)!important;border:1px solid var(--line)!important;
      border-radius:var(--r-lg)!important;box-shadow:var(--sh-sm)!important;
      padding:2.4rem 2.2rem!important;max-width:900px!important;gap:2.6rem!important}
    .platform-device{background:var(--coral-tint)!important;border:1px solid var(--coral-line)!important;
      border-radius:14px!important;color:var(--coral-d)!important;padding:1.05rem 1.25rem!important}
    .platform-device span{font-family:var(--f-b)!important;font-size:.64rem!important;
      letter-spacing:.14em!important;color:var(--ink-3)!important}
    .platform-plus{color:var(--line-2)!important;opacity:1!important}
    .platform-text h2{font-family:var(--f-d)!important;font-weight:600!important;
      font-size:var(--t-m)!important;color:var(--ink)!important;letter-spacing:-.022em!important}
    .platform-text p{color:var(--ink-3)!important;line-height:1.72!important}

    .footer-enhanced{background:var(--ink)!important;border-top:0!important;position:relative;z-index:2}
    .footer-heading{font-family:var(--f-b)!important;font-size:.68rem!important;font-weight:700!important;
      letter-spacing:.18em!important;text-transform:uppercase;color:rgba(255,255,255,.42)!important}
    .footer-link{color:rgba(255,255,255,.72)!important;font-size:.92rem!important;transition:color .2s}
    .footer-link:hover{color:var(--coral)!important}

    /* ══ the cutter editor ═════════════════════════════════════════════ */
    .video-editor{background:var(--surface);border:1px solid var(--line);
      border-radius:var(--r-lg);box-shadow:var(--sh);padding:1.35rem;
      max-width:1000px;margin-inline:auto}
    .video-placeholder{border-radius:var(--r)!important}
    .tabs{background:var(--bg-soft)!important;border:1px solid var(--line);
      border-radius:var(--r-pill)!important;padding:.28rem!important;gap:.2rem!important}
    .tab{border-radius:var(--r-pill)!important;font-family:var(--f-b)!important;
      font-weight:700!important;font-size:.9rem!important;color:var(--ink-3)!important;
      min-height:42px;transition:all .25s var(--ease)!important}
    .tab.active{background:linear-gradient(135deg,var(--coral),var(--coral-d))!important;
      color:#fff!important;box-shadow:0 6px 16px -8px rgba(230,89,96,.8)}
    .card{background:var(--surface)!important;border:1px solid var(--line);
      border-radius:var(--r)!important;box-shadow:none!important}
    .format-display{border:1px solid var(--line-2)!important;border-radius:12px!important;
      background:var(--bg-soft)!important;font-family:var(--f-b)!important;
      font-size:1rem!important;font-weight:700!important;color:var(--ink)!important;
      min-height:48px}
    .format-dropdown{border:1px solid var(--line-2)!important;border-radius:12px!important;
      box-shadow:var(--sh)!important}
    .format-option{border-radius:8px;margin:0 .25rem;font-weight:500}
    .format-option.selected{background:var(--coral-tint)!important;color:var(--coral-d)!important}
    #qualitySelect{border:1px solid var(--line-2)!important;border-radius:12px!important;
      background:var(--bg-soft)!important;color:var(--ink)!important;min-height:48px;
      font-family:var(--f-b)!important;font-weight:600}
    .time-section{background:var(--bg-soft)!important;border:1px solid var(--line);
      border-radius:var(--r)!important}
    .time-section h4{font-family:var(--f-d)!important;font-weight:600;color:var(--ink)!important}
    .dhms-input{border:1px solid var(--line-2)!important;border-radius:10px!important;
      background:var(--surface)!important;color:var(--ink)!important;font-weight:700!important}
    .range-slider-track{background:var(--line-2)!important;height:8px!important;border-radius:99px!important}
    .range-slider-fill{background:linear-gradient(90deg,var(--coral),var(--coral-d))!important;
      height:8px!important}
    .range-slider-handle{width:26px!important;height:26px!important;border:3px solid var(--coral-d)!important;
      background:#fff!important;box-shadow:0 3px 10px rgba(230,89,96,.4)!important}
    .range-slider-label{background:var(--ink)!important;color:#fff!important;font-weight:700!important;
      border-radius:6px!important;box-shadow:none!important}
    .action-row .btn-primary{background:linear-gradient(135deg,var(--coral),var(--coral-d))!important;
      border:0!important;border-radius:var(--r-pill)!important;color:#fff!important;
      font-family:var(--f-d)!important;font-weight:600!important;box-shadow:var(--sh-coral)!important}
    .action-row .btn-outline{background:var(--surface)!important;border:1px solid var(--line-2)!important;
      border-radius:var(--r-pill)!important;color:var(--ink)!important;font-family:var(--f-d)!important;
      font-weight:600!important}
    .add-clip-btn{border:2px dashed var(--coral-line)!important;color:var(--coral-d)!important;
      border-radius:12px!important;font-family:var(--f-b)!important;font-weight:700!important;
      font-size:.95rem!important;min-height:48px}
    .progress-bar{background:linear-gradient(90deg,var(--coral),var(--coral-d))!important}

    /* ══ mobile: the editor should feel like an app ════════════════════ */
    @media(max-width:760px){
      .hero-title{font-size:clamp(2.15rem,10vw,3rem)!important;letter-spacing:-.03em!important}
      .hero-desc{font-size:1rem!important;margin-bottom:1.7rem!important}
      .tool-switcher{width:100%;border-radius:20px!important}
      .tool-switcher .tool-switch-btn{flex:1 1 100%;justify-content:center;min-height:44px}
      .hero-input-group{flex-direction:column;border-radius:20px!important;
        padding:.5rem!important;gap:.5rem}
      .hero-input{text-align:left;padding:.95rem 1.05rem!important;min-height:48px}
      .hero-btn{width:100%;border-radius:14px!important;min-height:50px;padding:.9rem 1.5rem!important}
      #uploadBtnWrap .btn-primary{width:100%;justify-content:center;min-height:48px}
      .cut-demo{border-radius:18px}
      .cut-screen{aspect-ratio:16/9}
      .cut-times{font-size:.68rem}

      /* full-bleed app panel */
      .video-editor{border-radius:20px;padding:.85rem;margin-inline:0}
      .video-editor .controls-section{gap:.75rem}
      .tabs{position:sticky;top:.5rem;z-index:5}
      .tab{min-height:46px;font-size:.95rem!important}
      .format-display,#qualitySelect{min-height:52px;font-size:1.02rem!important}
      .format-quality-row{flex-direction:column;gap:.6rem!important}
      .format-quality-row>div{width:100%}
      /* six H/M/S boxes plus a separator will not fit on one 390px row, so
         Start and End stack and each gets the full width */
      .time-row{grid-template-columns:1fr!important;gap:.85rem!important}
      .time-sep{display:none}
      .time-col label{font-size:.72rem!important;font-weight:700;letter-spacing:.1em;
        text-transform:uppercase;color:var(--ink-3)!important}
      .dhms-group{gap:8px}
      .dhms-group span{gap:5px}
      .dhms-input{min-height:48px;font-size:1.1rem!important;padding:.5rem .35rem!important}
      .dhms-group i{font-size:.78rem!important;font-weight:700}
      .range-slider-container{height:56px}
      .range-slider-handle{width:32px!important;height:32px!important}
      .format-option{min-height:48px;font-size:1rem}
      /* actions become a thumb-reachable bar pinned to the bottom of the panel */
      .action-row{position:sticky;bottom:0;z-index:6;margin:0 -.85rem -.85rem;
        padding:.7rem .85rem calc(.7rem + env(safe-area-inset-bottom));
        background:rgba(255,255,255,.92);backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);gap:.6rem}
      .action-row .btn{min-height:52px;font-size:1rem!important;padding:.75rem!important}
      #editorPremiumCTA{padding-bottom:.4rem}
    }
    @media(max-width:420px){
      .cut-foot{gap:.4rem}
      .cut-tag{font-size:.7rem;padding:.36rem .7rem}
    }

    /* ══ STEP 1: deeper palette + the coral hero/nav background ════════
       hero_bg.png rebuilt in CSS: a diagonal coral gradient sampled from the
       source (#D04946 -> #FA6E6D) with rounded squares rotated 45deg for the
       chevron corners and a 4-point sparkle bottom-right. No image request. */
    :root{
      /* a little darker, warm clay instead of near-white */
      --bg:#F4ECEA;
      --bg-tint:#EFE2E0;
      --bg-soft:#E9DBD9;
      --surface:#FFFDFC;
      --line:#DFD1CF;
      --line-2:#CBB8B6;
      --ink:#241B1C;
      --ink-2:#4B3C3D;
      --ink-3:#7A6869;
      --coral-tint:#FBEAE8;
      --coral-line:rgba(214,73,70,.30);
      --sh-sm:0 2px 10px rgba(36,27,28,.07);
      --sh:0 12px 32px -12px rgba(36,27,28,.22);
      --hero-1:#D04946;
      --hero-2:#DE524D;
      --hero-3:#E75F5B;
      --hero-4:#FA6E6D;
      --coral-art:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201344%20768%22%20preserveAspectRatio=%22xMidYMid%20slice%22%3E%3Crect%20x=%22-586%22%20y=%22-235%22%20width=%22900%22%20height=%22900%22%20rx=%22150%22%20transform=%22rotate%2845%20-136%20215%29%22%20fill=%22white%22%20fill-opacity=%22.13%22/%3E%3Crect%20x=%22-386%22%20y=%22-130%22%20width=%22900%22%20height=%22900%22%20rx=%22150%22%20transform=%22rotate%2845%2064%20320%29%22%20fill=%22white%22%20fill-opacity=%22.07%22/%3E%3Crect%20x=%221000%22%20y=%22540%22%20width=%221000%22%20height=%221000%22%20rx=%22170%22%20transform=%22rotate%2845%201500%201040%29%22%20fill=%22white%22%20fill-opacity=%22.15%22/%3E%3Crect%20x=%22870%22%20y=%22-670%22%20width=%22620%22%20height=%22620%22%20rx=%22120%22%20transform=%22rotate%2845%201180%20-360%29%22%20fill=%22white%22%20fill-opacity=%22.08%22/%3E%3Cpath%20d=%22M1291,688%20C1294.64,710.36%201294.64,710.36%201317,714%20C1294.64,717.64%201294.64,717.64%201291,740%20C1287.36,717.64%201287.36,717.64%201265,714%20C1287.36,710.36%201287.36,710.36%201291,688%20Z%22%20fill=%22white%22%20fill-opacity=%22.85%22/%3E%3C/svg%3E");
    }

    /* hero now sits on the coral art, so its old tints come off */
    .bg-coral,.hero-section{
      background-image:var(--coral-art),
        linear-gradient(118deg,var(--hero-1) 0%,var(--hero-2) 26%,var(--hero-3) 56%,#F96A69 82%,var(--hero-4) 100%)!important;
      background-size:cover,auto!important;background-position:center,center!important;
      background-repeat:no-repeat,no-repeat!important;
    }
    /* Top vignette only: it seats the nav against the coral art. The gradient used
       to end on var(--bg), which painted the page's clay colour INSIDE the hero and
       read as a white smudge along its bottom edge. Sections now meet on a hard
       edge, which is what the reference designs do. */
    .hero-section::before{
      content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
      background:linear-gradient(180deg,rgba(36,27,28,.18) 0%,rgba(36,27,28,0) 38%)!important;
    }
    .hero-title{color:#fff!important;text-shadow:0 2px 18px rgba(120,30,28,.28)}
    .hero-desc{color:rgba(255,255,255,.86)!important}
    .input-tagline{color:rgba(255,255,255,.9)!important}
    .input-tagline svg{stroke:#fff!important}
    #uploadText{color:rgba(255,255,255,.78)!important}
    #orText{color:rgba(255,255,255,.6)!important}
    #orText::before,#orText::after{background:rgba(255,255,255,.32)!important}
    .copyright-confirm label{color:rgba(255,255,255,.82)!important}
    .cc-disclaimer-link{color:#fff!important;text-decoration:underline}
    .copyright-confirm+div a{color:rgba(255,255,255,.7)!important}
    #heroPremiumCTA span{color:rgba(255,255,255,.82)!important}
    .support-us-btn+div{color:rgba(255,255,255,.82)!important}
    #copyrightAgree{accent-color:#fff}

    /* on coral, the primary action inverts to white so it still reads loudest */
    .hero-btn{
      background:#fff!important;color:var(--hero-1)!important;
      box-shadow:0 10px 26px -10px rgba(90,20,20,.55)!important;
    }
    .hero-btn:hover{background:#fff!important;color:#B93F3D!important}
    .hero-input-group{
      background:rgba(255,255,255,.94)!important;border-color:rgba(255,255,255,.5)!important;
      box-shadow:0 20px 50px -22px rgba(80,18,18,.6)!important;
    }
    .hero-input-group:focus-within{border-color:#fff!important;
      box-shadow:0 20px 54px -20px rgba(80,18,18,.7)!important}
    .tool-switcher{
      background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.3)!important;
      backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:none!important;
    }
    .tool-switcher .tool-switch-btn{color:rgba(255,255,255,.78)!important}
    .tool-switcher .tool-switch-btn:hover{color:#fff!important}
    .tool-switcher .tool-switch-btn.active{
      background:#fff!important;color:var(--hero-1)!important;
      box-shadow:0 4px 14px -6px rgba(80,18,18,.6)!important;
    }
    .hero-input-wrapper div[style*="rgba(255,255,255,0.08)"]{
      background:rgba(255,255,255,.15)!important;border-color:rgba(255,255,255,.28)!important;
      box-shadow:none!important;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
    }
    .hero-input-wrapper div[style*="rgba(255,255,255,0.08)"]:hover{
      background:rgba(255,255,255,.28)!important;border-color:rgba(255,255,255,.5)!important}
    .hero-input-wrapper div[style*="rgba(255,255,255,0.08)"] span{color:#fff!important}
    .hero-input-wrapper div[style*="rgba(255,255,255,0.08)"] svg{stroke:#fff!important}
    .support-us-btn{
      background:rgba(255,255,255,.16)!important;border:1px solid rgba(255,255,255,.45)!important;
      color:#fff!important;box-shadow:none!important;backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
    }
    .support-us-btn:hover{background:#fff!important;color:var(--hero-1)!important}
    #heroPremiumCTA button{
      background:rgba(255,255,255,.14)!important;border:1px solid rgba(255,255,255,.42)!important;
      color:#fff!important;box-shadow:none!important;backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);
    }
    #heroPremiumCTA button:hover{background:#fff!important;color:#B07A17!important}

    /* nav rides the same art, so it goes transparent with a hairline */
    .hero-nav{
      background:transparent!important;backdrop-filter:none;-webkit-backdrop-filter:none;
      border-bottom:1px solid rgba(255,255,255,.18)!important;
    }
    .hero-nav .nav-link{color:rgba(255,255,255,.86)!important}
    .hero-nav .nav-link:hover{color:#fff!important}
    .hero-nav .nav-ytmp3-pill{background:rgba(255,255,255,.18)!important;color:#fff!important;
      border-color:rgba(255,255,255,.4)!important}
    .hero-nav .nav-ytmp3-pill:hover{background:#fff!important;color:var(--hero-1)!important}
    .hero-nav #navLoginItem .nav-link{border-color:rgba(255,255,255,.45)!important;color:#fff!important}
    .hero-nav #navLoginItem .nav-link:hover{background:#fff!important;color:var(--hero-1)!important}
    .hero-nav .premium-nav-btn,.premium-nav-btn-mobile{
      background:#fff!important;color:var(--hero-1)!important;
      box-shadow:0 8px 20px -10px rgba(80,18,18,.6)!important;
    }
    .hero-nav .nav-logo .logo-brand{background:transparent;padding:0}
    .mobile-menu-toggle{color:#fff!important}
    /* the promo strip must not vanish into the coral behind it */
    #promoBanner{
      background:rgba(36,27,28,.35)!important;backdrop-filter:blur(8px);
      -webkit-backdrop-filter:blur(8px);border-top:1px solid rgba(255,255,255,.14);
      border-bottom:1px solid rgba(255,255,255,.14);color:#fff!important;
    }
    #promoBanner:hover{background:rgba(36,27,28,.45)!important;filter:none}

/* ═══════════════════════════════════════════════════════════════════
   INNER PAGES
   Same hierarchy as the homepage: coral hero, warm clay body, lifted
   cards, Clash Display headings. `.pg-hero` is the compact variant of
   the homepage hero for pages with no tool in them.
   ═══════════════════════════════════════════════════════════════════ */

.hero-section.pg-hero{min-height:0!important;padding-bottom:0}
.pg-hero .hero-content{padding:clamp(2.6rem,6vw,4.6rem) 0 clamp(3rem,6vw,4.6rem)!important;
  text-align:center}
.pg-hero .hero-title{font-size:clamp(2.1rem,4.8vw,3.6rem)!important;margin:0 0 1rem!important}
.pg-lead{font-size:var(--t-body-l);line-height:1.7;color:rgba(255,255,255,.88);
  max-width:60ch;margin:0 auto}
.pg-crumb{display:inline-flex;align-items:center;gap:.5rem;font-size:.76rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.78);
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  border-radius:var(--r-pill);padding:.4rem .95rem;margin-bottom:1.15rem;
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.pg-crumb a{color:inherit;text-decoration:none}
.pg-crumb a:hover{color:#fff}

/* long-form / legal */
.pg-prose{max-width:74ch;margin-inline:auto}
.pg-prose>h2{font-family:var(--f-d);font-weight:600;font-size:var(--t-m);line-height:1.16;
  letter-spacing:-.02em;color:var(--ink);margin:2.8rem 0 .9rem;scroll-margin-top:5rem}
.pg-prose>h2:first-child{margin-top:0}
.pg-prose>h3{font-family:var(--f-d);font-weight:600;font-size:1.1rem;color:var(--ink);
  margin:2rem 0 .7rem}
.pg-prose p{font-size:var(--t-body-l);line-height:1.82;color:var(--ink-3);margin:0 0 1.1rem}
.pg-prose ul,.pg-prose ol{margin:0 0 1.25rem;padding:0 0 0 0;list-style:none}
.pg-prose ol{counter-reset:pgi}
.pg-prose li{position:relative;padding-left:1.75rem;margin-bottom:.6rem;
  font-size:var(--t-body-l);line-height:1.75;color:var(--ink-3)}
.pg-prose ul>li::before{content:'';position:absolute;left:.15rem;top:.72em;width:.48rem;
  height:.48rem;border-radius:50%;background:var(--coral);opacity:.8}
.pg-prose ol>li{counter-increment:pgi}
.pg-prose ol>li::before{content:counter(pgi);position:absolute;left:0;top:.1em;
  font-family:var(--f-d);font-weight:600;font-size:.85rem;color:var(--coral-d)}
.pg-prose a{color:var(--coral-d);font-weight:700;text-decoration:none;
  border-bottom:1px solid var(--coral-line);transition:border-color .2s}
.pg-prose a:hover{border-bottom-color:var(--coral-d)}
.pg-prose strong{color:var(--ink);font-weight:700}
.pg-note{background:var(--coral-tint);border:1px solid var(--coral-line);
  border-left:3px solid var(--coral);border-radius:var(--r);padding:1.2rem 1.4rem;
  margin:0 0 1.6rem;font-size:var(--t-body);line-height:1.72;color:var(--ink-2)}
.pg-updated{font-size:.82rem;font-weight:700;letter-spacing:.02em;color:var(--ink-3);
  margin:0 0 2.2rem;padding-bottom:1.4rem;border-bottom:1px solid var(--line)}

/* a sticky section index beside long legal text */
.pg-split{display:grid;gap:2.6rem;grid-template-columns:1fr}
@media(min-width:1020px){.pg-split{grid-template-columns:minmax(0,15rem) minmax(0,1fr);gap:4rem}
  .pg-toc{position:sticky;top:2.2rem;align-self:start}}
.pg-toc-h{font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 1rem}
.pg-toc ol{list-style:none;margin:0;padding:0;counter-reset:toc}
.pg-toc li{counter-increment:toc;margin-bottom:.15rem}
.pg-toc a{display:flex;gap:.7rem;padding:.5rem .7rem;border-radius:9px;text-decoration:none;
  font-size:.875rem;line-height:1.45;color:var(--ink-3);transition:background .2s,color .2s}
.pg-toc a::before{content:counter(toc,decimal-leading-zero);font-weight:700;
  color:var(--line-2);flex:0 0 auto}
.pg-toc a:hover{background:var(--coral-tint);color:var(--coral-d)}
.pg-toc a:hover::before{color:var(--coral)}

/* forms */
.pg-form{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh);padding:clamp(1.6rem,4vw,2.6rem)}
.pg-field{margin-bottom:1.1rem}
.pg-field label{display:block;font-size:.8rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.5rem}
.pg-field input,.pg-field textarea,.pg-field select{
  width:100%;box-sizing:border-box;min-height:52px;padding:.85rem 1.05rem;
  border:1px solid var(--line-2);border-radius:12px;background:var(--bg);
  font-family:var(--f-b);font-size:1rem;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.pg-field textarea{min-height:150px;resize:vertical;line-height:1.65}
.pg-field input:focus,.pg-field textarea:focus,.pg-field select:focus{
  outline:none;border-color:var(--coral);box-shadow:0 0 0 4px var(--coral-tint)}
.pg-field input::placeholder,.pg-field textarea::placeholder{color:var(--ink-3);opacity:.7}
.pg-submit{width:100%;min-height:54px;border:0;border-radius:var(--r-pill);cursor:pointer;
  font-family:var(--f-d);font-weight:600;font-size:1.02rem;color:#fff;
  background:linear-gradient(135deg,var(--coral),var(--coral-d));box-shadow:var(--sh-coral);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.pg-submit:hover{transform:translateY(-2px);box-shadow:0 18px 40px -12px rgba(230,89,96,.6)}
.pg-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}
.pg-formnote{font-size:.85rem;color:var(--ink-3);text-align:center;margin:1rem 0 0}

/* contact / info tiles */
.pg-tiles{display:grid;gap:1.1rem;grid-template-columns:1fr}
@media(min-width:640px){.pg-tiles{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.pg-tiles--3{grid-template-columns:repeat(3,1fr)}}
.pg-tile{display:flex;gap:1rem;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:1.4rem;box-shadow:var(--sh-sm);
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s}
.pg-tile:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--coral-line)}
.pg-tile .cv-ic{margin:0;flex:0 0 auto;width:40px;height:40px;border-radius:11px}
.pg-tile .cv-ic svg{width:18px;height:18px}
.pg-tile h3{font-family:var(--f-d);font-weight:600;font-size:1rem;color:var(--ink);margin:0 0 .3rem}
.pg-tile p{font-size:.9rem;line-height:1.65;color:var(--ink-3);margin:0}
.pg-tile a{color:var(--coral-d);font-weight:700;text-decoration:none}

/* auth card */
.pg-auth{max-width:460px;margin-inline:auto}
.pg-auth .pg-form{text-align:left}
.pg-auth-h{text-align:center;margin-bottom:1.8rem}
.pg-auth-h h2{font-family:var(--f-d);font-weight:600;font-size:1.6rem;color:var(--ink);
  margin:0 0 .5rem;letter-spacing:-.02em}
.pg-auth-h p{font-size:.95rem;line-height:1.65;color:var(--ink-3);margin:0}
.pg-or{display:flex;align-items:center;gap:1rem;margin:1.4rem 0;font-size:.75rem;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.pg-or::before,.pg-or::after{content:'';flex:1;height:1px;background:var(--line)}
.pg-oauth{width:100%;min-height:52px;display:flex;align-items:center;justify-content:center;
  gap:.7rem;background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-pill);
  font-family:var(--f-b);font-weight:700;font-size:.95rem;color:var(--ink);cursor:pointer;
  transition:border-color .2s,background .2s}
.pg-oauth:hover{border-color:var(--coral);background:var(--coral-tint)}

/* contact-style split: info rail is wider than the legal TOC rail */
@media(min-width:1020px){
  .pg-split--form{grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr);gap:2.4rem}
  .pg-split--form>*:first-child{position:static}
}
.pg-tile p{word-break:break-word}

/* ═══════════════════════════════════════════════════════════════════
   PRICING
   The page keeps its own markup and checkout JS; only the surface
   changes so it matches the rest of the system.
   ═══════════════════════════════════════════════════════════════════ */
.pr-section{background:var(--bg)!important;padding:var(--sp) 0!important}
.pr-intro{color:var(--ink-3)!important;font-size:var(--t-body-l)!important;line-height:1.72!important;
  max-width:56ch;margin:0 auto 1rem!important;text-align:center}
.pr-billing-note{color:var(--ink-3)!important;font-size:.88rem!important;text-align:center;
  margin-bottom:clamp(2.4rem,5vw,3.4rem)!important}
.pr-grid{gap:1.2rem!important;align-items:stretch!important}
.pr-card{
  background:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:var(--r-lg)!important;box-shadow:var(--sh-sm)!important;
  padding:1.9rem 1.7rem!important;position:relative;
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s!important;
}
.pr-card:hover{transform:translateY(-6px)!important;box-shadow:var(--sh)!important;
  border-color:var(--coral-line)!important}
.pr-card.primary{border-color:var(--coral)!important;box-shadow:var(--sh)!important}
.pr-tag{
  background:linear-gradient(135deg,var(--coral),var(--coral-d))!important;color:#fff!important;
  font-family:var(--f-b)!important;font-size:.66rem!important;font-weight:700!important;
  letter-spacing:.13em!important;text-transform:uppercase;border-radius:var(--r-pill)!important;
  padding:.34rem .85rem!important;box-shadow:0 6px 16px -8px rgba(230,89,96,.8)!important;
}
.pr-name{font-family:var(--f-b)!important;font-size:.72rem!important;font-weight:700!important;
  letter-spacing:.15em!important;text-transform:uppercase;color:var(--ink-3)!important}
.pr-price{font-family:var(--f-d)!important;font-weight:600!important;
  font-size:2.5rem!important;line-height:1.05!important;letter-spacing:-.03em!important;
  color:var(--ink)!important}
.pr-sub{color:var(--ink-3)!important;font-size:.86rem!important}
.pr-save{background:var(--coral-tint)!important;color:var(--coral-d)!important;
  border:1px solid var(--coral-line)!important;border-radius:var(--r-pill)!important;
  font-size:.68rem!important;font-weight:700!important;letter-spacing:.06em!important;
  padding:.26rem .6rem!important}
.pr-feat{color:var(--ink-2)!important;font-size:.9rem!important;line-height:1.6!important}
.pr-feat svg,.pr-feat .chk{color:var(--coral-d)!important;stroke:var(--coral-d)!important}
.pr-cta{
  background:linear-gradient(135deg,var(--coral),var(--coral-d))!important;color:#fff!important;
  border:0!important;border-radius:var(--r-pill)!important;font-family:var(--f-d)!important;
  font-weight:600!important;font-size:.98rem!important;min-height:50px;
  box-shadow:var(--sh-coral)!important;transition:transform .22s var(--ease)!important;
}
.pr-cta:hover{transform:translateY(-2px)}
.pr-lifetime{
  background:linear-gradient(135deg,#FFF1F0,#FFE4E3)!important;
  border:1px solid var(--coral-line)!important;border-radius:var(--r-lg)!important;
  box-shadow:none!important;padding:clamp(1.8rem,4vw,2.6rem)!important;
}
.pr-lt-tag{background:var(--ink)!important;color:#fff!important;border-radius:var(--r-pill)!important;
  font-size:.66rem!important;font-weight:700!important;letter-spacing:.13em!important;
  text-transform:uppercase;padding:.34rem .85rem!important}
.pr-lt-left h3,.pr-lt-left h2{font-family:var(--f-d)!important;font-weight:600!important;
  color:var(--ink)!important;letter-spacing:-.02em!important}
.pr-lt-left p{color:var(--ink-2)!important;line-height:1.72!important}
.pr-lt-price{font-family:var(--f-d)!important;font-weight:600!important;font-size:2.6rem!important;
  color:var(--ink)!important;letter-spacing:-.03em!important}
.pr-lt-btn{background:var(--ink)!important;color:#fff!important;border:0!important;
  border-radius:var(--r-pill)!important;font-family:var(--f-d)!important;font-weight:600!important;
  min-height:50px;box-shadow:var(--sh)!important;transition:transform .22s var(--ease)!important}
.pr-lt-btn:hover{transform:translateY(-2px)}
.pr-trust{color:var(--ink-3)!important;font-size:.88rem!important;line-height:1.7!important;
  max-width:64ch;margin-inline:auto;text-align:center}
.pr-faq{max-width:840px;margin-inline:auto}
.pr-faq-item{background:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:14px!important;box-shadow:var(--sh-sm)!important;margin-bottom:.7rem!important}
.pr-faq-item h3,.pr-faq-item summary,.pr-faq-item .q{font-family:var(--f-b)!important;
  font-weight:700!important;color:var(--ink)!important}
.pr-faq-item p{color:var(--ink-3)!important;line-height:1.75!important}
.pr-modal-overlay{background:rgba(36,27,28,.55)!important;backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px)}
.pr-modal{background:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:var(--r-lg)!important;box-shadow:0 30px 70px -20px rgba(36,27,28,.5)!important}
.pr-modal h3,.pr-modal-plan{font-family:var(--f-d)!important;font-weight:600!important;
  color:var(--ink)!important}
.pr-modal input{min-height:52px;border:1px solid var(--line-2)!important;border-radius:12px!important;
  background:var(--bg)!important;color:var(--ink)!important;font-family:var(--f-b)!important}
.pr-modal input:focus{outline:none;border-color:var(--coral)!important;
  box-shadow:0 0 0 4px var(--coral-tint)!important}
.pr-modal-fine{color:var(--ink-3)!important;font-size:.8rem!important}
.pr-or{color:var(--ink-3)!important;font-size:.75rem!important;font-weight:700!important;
  letter-spacing:.14em!important;text-transform:uppercase}
/* the intro now lives in the hero, and the FAQ band should not be pure white */
.pr-section .pr-intro{display:none}
.pr-faq,.pr-faq-wrap,section.pr-faq-section{background:transparent!important}

/* ═══════════════════════════════════════════════════════════════════
   BLOG (markup is generated in blog.go)
   ═══════════════════════════════════════════════════════════════════ */
.blog-hero .hero-title{font-size:clamp(2.1rem,4.8vw,3.4rem)!important}
.blog-hero .hero-subtitle{font-size:var(--t-body-l)!important;line-height:1.7!important;
  color:rgba(255,255,255,.86)!important;max-width:58ch;margin:.9rem auto 0!important}
/* only the nav goes transparent; the SECTION must keep the coral art, and a
   2-class shorthand here would reset background-image to none */
.hero-section.blog-hero .hero-nav{background:transparent!important}
.hero-section.blog-hero{background-color:transparent!important}
.hero-section.blog-hero .hero-title,.hero-section.blog-hero .nav-link{color:#fff!important}
.post-meta-bar{display:flex;flex-wrap:wrap;gap:.6rem;justify-content:center;align-items:center;
  font-size:.85rem;font-weight:600;color:rgba(255,255,255,.82)!important;margin-top:1rem}

.posts-grid{display:grid!important;gap:1.4rem!important;grid-template-columns:1fr!important;
  max-width:1160px;margin-inline:auto}
@media(min-width:640px){.posts-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(min-width:1000px){.posts-grid{grid-template-columns:repeat(3,1fr)!important}}
.post-card{
  position:relative;display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:var(--r-lg)!important;box-shadow:var(--sh-sm)!important;
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s!important;
}
.post-card:hover{transform:translateY(-6px)!important;box-shadow:var(--sh)!important;
  border-color:var(--coral-line)!important}
.post-thumb{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
  background:linear-gradient(135deg,#F3DEDB,#E9CFCC)!important;border:0!important}
.post-body{padding:1.4rem 1.5rem 1.6rem!important;display:flex;flex-direction:column;flex:1}
.post-meta{font-size:.74rem!important;font-weight:700!important;letter-spacing:.1em!important;
  text-transform:uppercase;color:var(--ink-3)!important;margin-bottom:.6rem!important}
.post-title{font-family:var(--f-d)!important;font-weight:600!important;font-size:1.14rem!important;
  line-height:1.3!important;letter-spacing:-.014em!important;color:var(--ink)!important;
  margin:0 0 .85rem!important}
.post-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-bottom:1rem}
.tag-pill{background:var(--coral-tint)!important;color:var(--coral-d)!important;
  border:1px solid var(--coral-line)!important;border-radius:var(--r-pill)!important;
  font-size:.68rem!important;font-weight:700!important;letter-spacing:.04em!important;
  padding:.26rem .68rem!important}
.post-link{margin-top:auto;font-family:var(--f-d)!important;font-weight:600!important;
  font-size:.92rem!important;color:var(--coral-d)!important;text-decoration:none!important}

/* article body */
.post-content{max-width:74ch;margin-inline:auto}
.post-content h2{font-family:var(--f-d);font-weight:600;font-size:var(--t-m);line-height:1.16;
  letter-spacing:-.02em;color:var(--ink);margin:2.6rem 0 .9rem}
.post-content h3{font-family:var(--f-d);font-weight:600;font-size:1.14rem;color:var(--ink);
  margin:2rem 0 .7rem}
.post-content p{font-size:var(--t-body-l);line-height:1.82;color:var(--ink-3);margin:0 0 1.15rem}
.post-content ul,.post-content ol{margin:0 0 1.25rem;padding-left:1.3rem}
.post-content li{font-size:var(--t-body-l);line-height:1.75;color:var(--ink-3);margin-bottom:.5rem}
.post-content li::marker{color:var(--coral)}
.post-content a{color:var(--coral-d);font-weight:700;text-decoration:none;
  border-bottom:1px solid var(--coral-line)}
.post-content a:hover{border-bottom-color:var(--coral-d)}
.post-content img{max-width:100%;height:auto;border-radius:var(--r);border:1px solid var(--line)}
.post-content blockquote{margin:0 0 1.4rem;padding:1.1rem 1.4rem;background:var(--coral-tint);
  border-left:3px solid var(--coral);border-radius:var(--r);color:var(--ink-2)}
.post-content pre{background:var(--ink);color:#F6F5F7;padding:1.1rem 1.3rem;border-radius:var(--r);
  overflow-x:auto;font-size:.9rem}
.post-content code{background:var(--bg-soft);border:1px solid var(--line);border-radius:6px;
  padding:.1rem .35rem;font-size:.9em}
.post-content pre code{background:none;border:0;padding:0}
/* blog index hero uses .blog-hero on the content, not the section */
.pg-hero .hero-content.blog-hero{padding:clamp(2.6rem,6vw,4.6rem) 0 clamp(3rem,6vw,4.6rem)!important}

/* ═══════════════════════════════════════════════════════════════════
   YOUTUBE TO MP3
   Keeps its own markup and converter JS; surface only.
   ═══════════════════════════════════════════════════════════════════ */
.tool-features,.tool-steps,.mp3-intro,.mp3-steps,.mp3-usecases,.mp3-why,.mp3-safe,.tool-faq{
  padding:var(--sp) 0!important}
.tool-features,.mp3-steps,.mp3-safe{background:var(--bg)!important}
.tool-steps,.mp3-usecases,.tool-faq{background:var(--bg-tint)!important}
.mp3-intro,.mp3-why{background:var(--bg-soft)!important}
.tool-features .section-title,.tool-steps .section-title,.tool-faq .section-title,
.mp3-intro h2,.mp3-steps h2,.mp3-usecases h2,.mp3-why h2,.mp3-safe h2{
  font-family:var(--f-d)!important;font-weight:600!important;font-size:var(--t-l)!important;
  line-height:1.06!important;letter-spacing:-.028em!important;color:var(--ink)!important;
  text-align:center;margin:0 auto 1.1rem!important;max-width:22ch}
.mp3-intro p,.mp3-why p,.mp3-safe p,.mp3-why-intro{
  color:var(--ink-3)!important;font-size:var(--t-body-l)!important;line-height:1.8!important}
.mp3-why-intro{max-width:60ch;margin-inline:auto;text-align:center}

/* the tool card at the top of the page */
.tool-input-card{background:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:var(--r-lg)!important;box-shadow:var(--sh)!important}
.tool-input-group{border-radius:var(--r-pill)!important;background:var(--surface)!important}

/* card families */
.feature-card,.step-item,.mp3-step-card,.mp3-usecase-card,.mp3-benefit-card{
  background:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:var(--r)!important;box-shadow:var(--sh-sm)!important;
  transition:transform .32s var(--ease),box-shadow .32s var(--ease),border-color .32s!important}
/* .step-item is the odd one out: the rule above turns it into a card, but unlike
   .feature-card / .mp3-*-card it has no padding of its own in the page CSS, so its
   text sat flush against the border. Added 2026-07-30. */
.step-item{padding:1.6rem 1.25rem!important}
.step-item:hover{transform:translateY(-5px)!important;box-shadow:var(--sh)!important;
  border-color:var(--coral-line)!important}
.feature-card:hover,.mp3-step-card:hover,.mp3-usecase-card:hover,.mp3-benefit-card:hover{
  transform:translateY(-5px)!important;box-shadow:var(--sh)!important;
  border-color:var(--coral-line)!important}
.feature-card h3,.step-item h3,.mp3-step-card h3,.mp3-usecase-card h3,.mp3-benefit-card h3,
.mp3-benefit-header{font-family:var(--f-d)!important;font-weight:600!important;
  font-size:var(--t-h3)!important;color:var(--ink)!important;letter-spacing:-.014em!important}
.feature-card p,.step-item p,.mp3-step-card p,.mp3-usecase-card p,.mp3-benefit-card p{
  color:var(--ink-3)!important;font-size:var(--t-body)!important;line-height:1.72!important}
.feature-icon,.mp3-usecase-icon{width:46px!important;height:46px!important;border-radius:13px!important;
  background:var(--coral-tint)!important;border:1px solid var(--coral-line)!important;
  color:var(--coral-d)!important;display:flex!important;align-items:center;justify-content:center;
  box-shadow:none!important}
.feature-icon svg,.mp3-usecase-icon svg{width:21px;height:21px;stroke:var(--coral-d)}
.step-num,.mp3-step-num{background:linear-gradient(135deg,var(--coral),var(--coral-d))!important;
  color:#fff!important;font-family:var(--f-d)!important;font-weight:600!important;
  box-shadow:0 6px 16px -8px rgba(230,89,96,.8)!important;border:0!important}
.mp3-benefit-badge,.mp3-safe-badge{background:var(--coral-tint)!important;color:var(--coral-d)!important;
  border:1px solid var(--coral-line)!important;border-radius:var(--r-pill)!important;
  font-size:.68rem!important;font-weight:700!important;letter-spacing:.1em!important;
  text-transform:uppercase;padding:.3rem .75rem!important}

/* this page ships its own accordion convention */
.tool-faq .faq-item{background:var(--surface)!important;border:1px solid var(--line)!important;
  border-radius:14px!important;box-shadow:var(--sh-sm)!important;margin-bottom:.7rem!important;
  overflow:hidden}
.tool-faq .faq-item.open{border-color:var(--coral-line)!important;box-shadow:var(--sh)!important}
.tool-faq .faq-question{font-family:var(--f-b)!important;font-weight:700!important;
  font-size:1rem!important;color:var(--ink)!important;padding:1.2rem 1.35rem!important;
  background:none!important;min-height:52px}
.tool-faq .faq-question:hover{color:var(--coral-d)!important}
.tool-faq .faq-icon{stroke:var(--ink-3)!important}
.tool-faq .faq-item.open .faq-icon{stroke:var(--coral-d)!important}
.tool-faq .faq-answer{padding:0 1.35rem 1.3rem!important}
.tool-faq .faq-answer p{color:var(--ink-3)!important;font-size:var(--t-body)!important;
  line-height:1.75!important;margin:0!important}
/* On /youtube-to-mp3 the support + copyright block sits INSIDE a white card,
   so the white-on-coral hero treatment has to be undone there. */
.tool-input-card .support-us-btn{
  background:linear-gradient(135deg,var(--coral),var(--coral-d))!important;
  border:0!important;color:#fff!important;box-shadow:var(--sh-coral)!important}
.tool-input-card .support-us-btn:hover{color:#fff!important;filter:brightness(1.04)}
.tool-input-card .support-us-btn+div{color:var(--ink-3)!important}
.tool-input-card .copyright-confirm label{color:var(--ink-3)!important}
.tool-input-card .cc-disclaimer-link{color:var(--coral-d)!important}
.tool-input-card .copyright-confirm+div a{color:var(--ink-3)!important}
.tool-input-card #copyrightAgree{accent-color:var(--coral)}
.tool-input-card .input-tagline{color:var(--coral-d)!important}
.tool-input-card .input-tagline svg{stroke:var(--coral-d)!important}

/* ── comparison tables and answer blocks (ytmp3 page) ──────────────────── */
.cv-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);
  border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--sh-sm);max-width:900px;
  margin-inline:auto}
.cv-table{width:100%;min-width:560px;border-collapse:collapse;text-align:left}
.cv-table th,.cv-table td{padding:1.05rem 1.35rem;vertical-align:top;font-size:var(--t-body);
  line-height:1.62}
.cv-table thead th{font-family:var(--f-b);font-size:.72rem;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);background:var(--bg-soft);
  border-bottom:1px solid var(--line)}
.cv-table tbody tr{border-bottom:1px solid var(--line)}
.cv-table tbody tr:last-child{border-bottom:0}
.cv-table td:first-child{font-family:var(--f-d);font-weight:600;color:var(--ink);white-space:nowrap}
.cv-table td{color:var(--ink-3)}
.cv-table td.yes{color:var(--ink);font-weight:500}
.cv-answer{max-width:800px;margin:0 auto clamp(2rem,4vw,3rem);padding:1.5rem 1.7rem;
  background:var(--coral-tint);border:1px solid var(--coral-line);border-left:3px solid var(--coral);
  border-radius:var(--r);font-size:var(--t-body-l);line-height:1.72;color:var(--ink-2)}
.cv-answer strong{color:var(--ink)}
.cv-verdict{max-width:900px;margin:1.6rem auto 0;font-size:var(--t-body);line-height:1.7;
  color:var(--ink-3);text-align:center}
@media(max-width:620px){.cv-table th,.cv-table td{padding:.85rem 1rem}}

    /* ══ TOOL SWITCHER: 3 tabs, app-style tab bar on mobile ═══════════
       Added 2026-07-30. On phones the tabs used to stack into a vertical
       list of full-width buttons. Two older rules caused that and are
       overridden below:
         ui-sections.css  @640px  .tool-switcher{flex-direction:column}
         cutter-theme.css @760px  .tool-switch-btn{flex:1 1 100%}
       !important is required here only because the base rules above
       (padding/font-size on .tool-switcher .tool-switch-btn) use it.
       ══════════════════════════════════════════════════════════════ */
    .tool-switcher{flex-wrap:nowrap!important}
    .tool-switcher .tool-switch-btn{white-space:nowrap}

    @media(max-width:760px){
      .tool-switcher{
        display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
        width:100%!important;max-width:none!important;
        gap:.2rem!important;padding:.28rem!important;margin-bottom:1.6rem!important;
      }
      /* each tab: icon above label, equal width, thumb-sized target */
      .tool-switcher .tool-switch-btn{
        flex:1 1 0!important;width:auto!important;min-width:0!important;
        display:flex!important;flex-direction:column!important;align-items:center!important;
        justify-content:center!important;gap:.25rem!important;
        padding:.5rem .28rem!important;min-height:54px!important;
        font-size:.68rem!important;font-weight:700!important;line-height:1.15!important;
        letter-spacing:.01em!important;text-align:center!important;
        white-space:normal!important;border-radius:16px!important;
      }
      .tool-switcher .tool-switch-btn svg{width:17px!important;height:17px!important}
      .tsw-label{display:block;overflow-wrap:anywhere}
    }