/* Klipto tool pages — shared styles (linked by every /tools/* page). */
:root{
  --bg:#0b0b0f;--white:#fff;--ink:#0c0c12;--muted:#8b8b95;--dim:#5c5c66;
  --ink-muted:#55555f;--ink-dim:#8b8b95;--gray:#f5f5f7;
  --pink:#ff2e79;--blue:#2f6bff;--blue-700:#1f57e6;--green:#39d98a;
  --line:rgba(255,255,255,.12);--line2:rgba(0,0,0,.09);--maxw:1040px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--white);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;line-height:1.5}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 clamp(20px,6vw,40px)}
.sec-h{font-size:clamp(28px,4.4vw,44px);line-height:1.08;letter-spacing:-.03em;font-weight:800}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;
  font-size:15px;padding:13px 26px;border-radius:999px;border:none;cursor:pointer;
  text-decoration:none;transition:.16s;white-space:nowrap}
.btn-blue{background:var(--blue);color:#fff}
.btn-blue:hover{background:var(--blue-700);transform:translateY(-1px)}

/* ---- nav (dark) ---- */
.navbar{background:var(--bg);position:sticky;top:0;z-index:50;transition:background .25s,backdrop-filter .25s}
.navbar.scrolled{background:rgba(255,255,255,.72);backdrop-filter:saturate(180%) blur(14px);-webkit-backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line2)}
.navbar.scrolled .logo-txt b{color:var(--ink)}
.navbar.scrolled .logo-txt small{color:var(--ink-dim)}
.navbar.scrolled .nav-toggle span{background:var(--ink)}
@media(min-width:941px){
  .navbar.scrolled .nav-links a{color:var(--ink-muted)}
  .navbar.scrolled .nav-links a:hover{color:var(--ink)}
  .navbar.scrolled .nav-cta{color:#fff!important}
}
nav{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:70px;
  max-width:var(--maxw);margin:0 auto;padding:12px clamp(20px,6vw,40px);position:relative;z-index:50}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo img{width:36px;height:36px;border-radius:9px;display:block;flex:none}
.logo-txt{display:flex;flex-direction:column;line-height:1.25}
.logo-txt b{color:#fff;font-weight:700;font-size:16px}
.logo-txt small{color:var(--muted);font-size:12.5px;white-space:nowrap}
.nav-links{display:flex;align-items:center;gap:24px;font-size:14px}
.nav-links a{text-decoration:none;transition:.15s;color:var(--muted)}
.nav-links a.nav-sep{margin-left:24px}
.nav-links a:hover{color:#fff}
.nav-cta{color:#fff!important;padding:9px 18px;font-size:14px}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;width:40px;height:40px;color:#fff}
.nav-toggle span{display:block;width:20px;height:2px;background:#fff;border-radius:2px;transition:.2s;margin:4px auto}
.nav-toggle.open span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:940px){
  .nav-toggle{display:block}
  .nav-links{position:absolute;top:70px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:#131318;border-top:1px solid var(--line);padding:8px 0;display:none;box-shadow:0 24px 60px rgba(0,0,0,.5)}
  .nav-links.open{display:flex}
  .nav-links a{padding:14px clamp(20px,6vw,40px);font-size:16px;color:#d6d6dc}
  .nav-links a.nav-sep{margin-left:0}
  .nav-cta{margin:10px clamp(20px,6vw,40px);text-align:center}
}

/* ---- title + tool + lead (gray) ---- */
.tool-section{background:var(--gray);padding:clamp(40px,6vw,72px) 0 clamp(40px,6vw,64px)}
.tool-head{text-align:center;max-width:820px;margin:0 auto clamp(30px,4vw,46px)}
.tool-head h1{font-size:clamp(36px,6.5vw,72px);line-height:1.04;letter-spacing:-.03em;font-weight:800;color:var(--ink)}
.tool-sub{font-size:clamp(16px,2.2vw,20px);color:var(--ink-muted);line-height:1.5;margin:18px auto 0;max-width:700px}
/* Compare pages: the "verified on" stamp. Quiet by design — it is a credibility
   signal for the reader who checks, not a headline. */
.verified{font-size:13px;color:var(--ink-dim);margin:16px auto 0;max-width:700px}
.io{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:760px){.io{grid-template-columns:1fr}}
.io .pane{display:flex;flex-direction:column}
.io label{font-size:13px;font-weight:700;color:var(--ink);margin-bottom:7px;display:flex;justify-content:space-between;align-items:center}
.io .cnt{font-weight:500;color:var(--ink-dim);font-size:12px}
textarea{width:100%;min-height:250px;resize:vertical;border:1px solid var(--line2);border-radius:14px;
  padding:16px;font-size:14px;line-height:1.65;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  color:var(--ink);background:#fff;outline:none;transition:border-color .15s}
textarea:focus{border-color:var(--blue)}
#out{background:#fbfbfd}
.controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
.controls .btn{padding:11px 20px;font-size:14px}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line2)}
.btn-ghost:hover{background:#eef0f4;text-decoration:none}
.btn-ghost[disabled]{opacity:.4;cursor:default}
.stat{margin-left:auto;font-size:13px;color:var(--ink-dim);text-align:right;line-height:1.5}
.stat b{color:#1a9e63;font-weight:700}
.toggles{border:1px solid var(--line2);border-radius:16px;padding:16px 18px;margin-top:14px;background:#fff}
.toggles .thead{margin-bottom:12px}
.toggles .thead b{color:var(--ink);font-size:14px}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 26px}
@media(max-width:760px){.tgrid{grid-template-columns:1fr}}
.tog{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--ink-muted);cursor:pointer;user-select:none}
.tog input{width:16px;height:16px;accent-color:var(--blue);cursor:pointer}
.tog .lbl{flex:1}
.tog select{font-size:12.5px;border:1px solid var(--line2);border-radius:8px;padding:3px 6px;color:var(--ink);background:#fff;cursor:pointer}
.adv{grid-column:1/-1;margin-top:4px;padding-top:12px;border-top:1px solid var(--line2)}
.privacy{text-align:center;color:var(--ink-dim);font-size:13px;margin-top:16px}
.privacy b{color:var(--ink);font-weight:650}
.lead{max-width:760px;margin:28px auto 0}
.lead p{font-size:18px;color:#0c0c12;line-height:1.7;margin-bottom:14px}

/* single-field tool helpers (converters/counters) */
.field-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 14px}
.field-row .btn{padding:11px 20px;font-size:14px}
.field-row input[type=text]{flex:1 1 260px;border:1px solid var(--line2);border-radius:12px;padding:12px 14px;
  font-size:16px;font-family:ui-monospace,"SF Mono",Menlo,monospace;background:#fff;color:var(--ink);outline:none;transition:border-color .15s}
.field-row input[type=text]:focus{border-color:var(--blue)}
.err-msg{color:#c0392b;font-size:13.5px;margin:2px 0 12px;min-height:18px;font-family:ui-monospace,Menlo,monospace}
.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
@media(max-width:640px){.result-grid{grid-template-columns:1fr}}
.result{background:#fff;border:1px solid var(--line2);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:6px;cursor:pointer;transition:.12s}
.result:hover{border-color:var(--blue)}
.result .rk{font-size:12px;font-weight:700;color:var(--ink-dim);letter-spacing:.02em}
.result .rv{font-size:15px;font-family:ui-monospace,"SF Mono",Menlo,monospace;color:var(--ink);word-break:break-all}
.metric-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.metric{background:#fff;border:1px solid var(--line2);border-radius:12px;padding:14px 18px;flex:1 1 120px;text-align:center}
.metric .mv{font-size:28px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.metric .mk{font-size:12.5px;color:var(--ink-dim);margin-top:2px}
.swatch{width:100%;height:64px;border-radius:12px;border:1px solid var(--line2);margin-top:4px}

/* ---- tools sub-nav (white bar under the header) ---- */
.tools-subnav{background:#fff;border-bottom:1px solid var(--line2)}
.tools-subnav .wrap{padding-top:12px;padding-bottom:12px}
.tsn-label{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-dim);margin-bottom:9px}
.tsn-links{display:flex;flex-wrap:wrap;gap:8px}
.tools-subnav a{font-size:13.5px;color:var(--ink-muted);text-decoration:none;padding:6px 13px;border-radius:999px;white-space:nowrap;transition:.12s;background:var(--gray)}
.tools-subnav a:hover{background:#e7e7ee;color:var(--ink);text-decoration:none}
.tools-subnav a.active{background:var(--ink);color:#fff}

/* ---- group overview shot (feature hub) — matches the tile grid width ---- */
.group-shot{margin:18px 0 6px;border-radius:16px;overflow:hidden;background:var(--gray)}
.group-shot img{width:100%;height:auto;display:block}

/* ---- download CTA band ---- */
.cta-band .cta-sub{font-size:16px;color:#c8c8d0;margin:14px auto 0;max-width:520px;line-height:1.55}
.cta-band .btn-lg{margin-top:26px;padding:16px 34px;font-size:16px}
.cta-band .cta-fine{font-size:13.5px;color:var(--muted);margin-top:16px}

/* ---- tile grid (hub / pillar pages) — homepage card style ---- */
.tile-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin:32px 0 8px}
.tile{display:flex;flex-direction:column;background:var(--gray);border:none;border-radius:16px;padding:20px 22px;text-decoration:none;color:var(--ink);transition:background .2s,transform .2s,box-shadow .2s}
.tile:hover{background:var(--ink);transform:translateY(-3px);box-shadow:0 18px 40px rgba(0,0,0,.16);text-decoration:none}
.tile h3{font-size:16px;font-weight:700;color:var(--ink);margin:0 0 6px}
.tile p{font-size:14px;color:var(--ink-muted);margin:0;line-height:1.5}
.tile .tile-go{color:var(--blue);font-weight:650;font-size:14px;margin-top:14px}
.tile:hover h3{color:#fff}
.tile:hover p{color:rgba(255,255,255,.72)}
.tile:hover .tile-go{color:#fff}
.tile-soon{cursor:default}
.tile-soon:hover{background:var(--gray);transform:none;box-shadow:none}
.tile-soon:hover h3{color:var(--ink)}
.tile-soon .tile-go{color:var(--ink-dim);font-weight:600}
.tile-h{margin:64px 0 0;font-size:clamp(20px,2.6vw,26px);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.tile-h:first-of-type{margin-top:40px}

/* ---- announce Klipto (dark, full width) ---- */
.announce{background:var(--bg);color:#fff;padding:clamp(40px,6vw,66px) 0}
.announce-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,48px);align-items:center}
@media(max-width:760px){.announce-grid{grid-template-columns:1fr}}
.announce .eyebrow{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--pink)}
.announce h2{font-size:clamp(24px,3.2vw,34px);line-height:1.12;letter-spacing:-.02em;font-weight:800;color:#fff;margin-top:10px}
.announce p{color:#c8c8d0;font-size:16px;line-height:1.6;margin-top:12px;max-width:460px}
.announce .btn{margin-top:22px}

/* ---- media placeholder slots ---- */
.media-slot{border-radius:16px;overflow:hidden;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;
  background:var(--gray);border:1.5px dashed rgba(0,0,0,.16);margin:26px 0}
.media-slot video,.media-slot img{width:100%;height:100%;object-fit:cover;display:block}
.media-ph{display:flex;flex-direction:column;gap:5px;align-items:center;text-align:center;padding:22px;
  font-family:ui-monospace,"SF Mono",Menlo,monospace}
.media-ph-t{font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--pink)}
.media-ph-p{font-size:12.5px;color:var(--ink-muted)}
.media-ph-a{font-size:12px;color:var(--ink-dim);max-width:360px;line-height:1.4}
.announce .media-slot{margin:0;background:#111;border-color:rgba(255,255,255,.16)}
.announce .media-ph-p{color:#d6d6dc}
.announce .media-ph-a{color:#8b8b95}

/* ---- inline video with hover play/pause button ---- */
.klip-video{position:relative;border-radius:16px;overflow:hidden;background:#111;aspect-ratio:1614/868;cursor:pointer}
.klip-video video{width:100%;height:100%;object-fit:contain;display:block}
.kv-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.9);width:64px;height:64px;border-radius:999px;border:none;
  background:rgba(0,0,0,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);color:#fff;
  display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transition:opacity .18s,transform .18s}
.klip-video:hover .kv-btn,.klip-video.paused .kv-btn{opacity:1;transform:translate(-50%,-50%) scale(1)}
.kv-btn svg{width:26px;height:26px;fill:#fff;display:block}
.announce .klip-video{margin:0}
.tool-section .klip-video{max-width:820px;margin:8px auto 0}

/* In-article demo clip: full-width video with the prose underneath. Reuses
   .klip-video so the hover play/pause button in common.js keeps working. */
.clip-full{margin:clamp(26px,4vw,40px) 0}
.clip-full .klip-video{margin:0;width:100%}
.clip-full .clip-text{font-size:18px;line-height:1.65;color:var(--ink);margin-top:16px}
.clip-full .clip-text p{margin:0 0 12px}
.clip-full .clip-text p:last-child{margin:0}

/* Competitor screenshot at the top of a comparison page. Bordered and captioned
   so it reads as evidence rather than as our own product shot. */
.shot{margin:clamp(22px,3.5vw,34px) 0}
.shot img{width:100%;display:block;border:1px solid var(--line2);border-radius:14px;background:var(--gray)}
.shot figcaption{font-size:13px;color:var(--ink-dim);margin-top:10px;line-height:1.5}

/* ---- article (white) — uniform 18px / #0c0c12 ---- */
.article-section{padding:clamp(48px,7vw,80px) 0}
.article{max-width:760px;margin:0 auto}
.article h2{font-size:clamp(26px,3.2vw,34px);font-weight:800;letter-spacing:-.02em;margin:44px 0 14px;color:var(--ink);line-height:1.15}
.article h2:first-child{margin-top:0}
.article h3{font-size:19px;font-weight:700;margin:28px 0 8px;color:var(--ink)}
.article p{color:#0c0c12;margin-bottom:16px;font-size:18px;line-height:1.75}
.article ul{color:#0c0c12;margin:0 0 18px 22px;font-size:18px}
.article li{margin-bottom:8px;line-height:1.7}
.article strong{color:var(--ink);font-weight:700}
.article a{color:var(--blue);text-decoration:none}
.article a:hover{text-decoration:underline}
.article code{font-family:ui-monospace,"SF Mono",Menlo,monospace;font-size:.86em;background:#f0f0f3;border:1px solid rgba(0,0,0,.08);border-radius:6px;padding:1px 6px}
/* Comparison tables run to nine columns, which will not fit the 760px text
   column. They scroll inside their own container so the page body never scrolls
   sideways, they break out past the text column on wide screens, and the first
   cell stays pinned so you can still see which app a row belongs to. */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0;
  border:1px solid var(--line2);border-radius:12px;background:#fff}
@media(min-width:1100px){
  .article .table-wrap{width:calc(100% + 240px);margin-left:-120px;margin-right:-120px}
}
.article table{width:100%;border-collapse:collapse;margin:0;font-size:15px}
.article th,.article td{border-bottom:1px solid var(--line2);border-right:1px solid var(--line2);
  padding:12px 14px;text-align:left;vertical-align:top;color:#0c0c12;min-width:108px}
.article th:last-child,.article td:last-child{border-right:none}
.article tbody tr:last-child td{border-bottom:none}
.article th{background:var(--gray);color:var(--ink);font-weight:700;white-space:nowrap}
/* first column pinned: it carries the row's identity */
.article th:first-child,.article td:first-child{position:sticky;left:0;z-index:1;min-width:150px;
  background:#fff;box-shadow:1px 0 0 var(--line2)}
.article th:first-child{background:var(--gray)}
@media(max-width:600px){
  .article th,.article td{font-size:14px;padding:10px 12px}
  .article th:first-child,.article td:first-child{min-width:120px}
}
.article blockquote{border-left:3px solid var(--line2);margin:18px 0;padding:4px 0 4px 16px;color:var(--ink-dim)}

/* ---- FAQ + Related (gray block) ---- */
.faq-block{background:var(--gray);padding:clamp(44px,6vw,76px) 0}
.faq-block h2{font-size:clamp(24px,3vw,30px);font-weight:800;letter-spacing:-.02em;color:var(--ink);max-width:760px;margin:0 auto 6px}
.faq-list{max-width:760px;margin:16px auto 0}
.faq-list details{border-top:1px solid var(--line2);padding:18px 4px}
.faq-list details:last-child{border-bottom:1px solid var(--line2)}
.faq-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;font-weight:650;font-size:16px;color:var(--ink)}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"+";color:#a0a0aa;font-size:22px;line-height:1;flex:none}
.faq-list details[open] summary::after{content:"–"}
.faq-list p{margin-top:12px;color:var(--ink-muted);font-size:15px;line-height:1.6}
.related{max-width:760px;margin:46px auto 0}
.related-h{font-size:clamp(24px,3vw,30px);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-bottom:32px}
.related-list{list-style:none;margin:0}
.related-list li{margin-bottom:13px}
.related-list a{color:var(--blue);font-size:16px;font-weight:650;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.related-list a::after{content:"›";font-size:19px;line-height:1;font-weight:700}
.related-list a:hover{text-decoration:underline}

/* ---- waitlist embed + CTA band (dark) ---- */
.kit-embed{max-width:560px;margin:30px auto 0;text-align:center}
.kit-embed .formkit-powered-by-convertkit-container{opacity:1!important;filter:invert(1) brightness(.7)}
.kit-embed .formkit-header,.kit-embed .formkit-subheader{display:none!important}
.kit-embed .formkit-form{margin-top:16px!important}
.kit-embed .formkit-fields{display:flex!important;flex-wrap:nowrap!important;gap:10px!important;align-items:stretch!important}
.kit-embed .formkit-field{flex:1 1 auto!important;margin:0!important}
.kit-embed .formkit-submit{flex:0 0 auto!important;width:auto!important;margin:0!important;white-space:nowrap}
@media(max-width:520px){.kit-embed .formkit-fields{flex-wrap:wrap!important}.kit-embed .formkit-submit{width:100%!important}}
.wl-sub{font-size:14.5px;color:var(--muted);margin:8px auto 0;max-width:470px;line-height:1.5}
.cta-band{background:var(--bg);color:#fff;text-align:center;padding:clamp(56px,8vw,88px) 0}
.cta-band h2{color:#fff}

/* ---- footer ---- */
footer{background:#fff;color:#7a7a84;border-top:1px solid var(--line2);padding:56px 0 52px}
.foot{display:grid;grid-template-columns:1.6fr 1fr 1.2fr 1fr 1.1fr;gap:clamp(24px,3vw,40px);align-items:start}
@media(max-width:860px){.foot{grid-template-columns:1fr 1fr;gap:32px}}
@media(max-width:480px){.foot{grid-template-columns:1fr}}
.foot .brand-top{display:flex;align-items:center;gap:10px;height:30px;text-decoration:none}
.foot .brand-top img{width:30px;height:30px;border-radius:8px;display:block}
.foot .brand-top b{color:var(--ink);font-size:14px;font-weight:700}
.foot .brand .tag{font-size:14px;margin-top:12px;color:#7a7a84;max-width:210px;line-height:1.45}
.foot h5{font-size:14px;color:var(--ink);font-weight:700;height:30px;line-height:30px;margin-bottom:12px}
.foot a{display:block;font-size:14px;color:#7a7a84;text-decoration:none;margin-bottom:10px}
.foot a:hover{color:var(--ink)}