.tool-landing{--tl-void:#081420;--tl-ink-950:#001e33;--tl-ink-900:#003052;--tl-ink-800:#00477a;--tl-ink-700:#005fa3;--tl-line:rgba(250,246,239,.14);--tl-line-soft:rgba(250,246,239,.08);--tl-accent:#0095ff;--tl-accent-light:#33aaff;--tl-amber-600:#0077cc;--tl-amber-700:#005fa3;--tl-amber-800:#00477a;--tl-amber-900:#003052;--tl-amber-950:#001e33;--tl-amber-050:#cce9ff;--tl-paper:#f7fafd;--tl-paper-dim:#e6edf8;--tl-ink-0:#f2f7fb;--tl-ink-200:#cddced;--tl-ink-300:#aec2dc;--tl-ink-500:#7891ae;--tl-ink-600:#56698a;--tl-paper-ink-900:#201a10;--tl-paper-ink-700:#463c29;--tl-paper-ink-500:#786b52;--tl-header-h:54px;--tl-radius-lg:26px;--tl-radius-md:16px;--tl-radius-sm:10px;--tl-radius-pill:999px;--tl-good:#3ddc97;--tl-fs-lg:19px;--tl-fs-body:17px;--tl-fs-base:16px;--tl-fs-sm:14px;--tl-fs-2xs:12px;--tl-fs-3xs:11px;--tl-fs-h3:18px;--tl-fs-price:32px}

@keyframes tl-upload-spin{to{transform:rotate(360deg)}}

/* Base. Scoped to the wrapper so nothing leaks into the rest of the theme. */
.tool-landing{background:var(--tl-void);color:var(--tl-ink-200);font-family:'Inter',system-ui,-apple-system,Segoe UI,sans-serif;font-size:var(--tl-fs-body);line-height:1.5}
.tool-landing *{box-sizing:border-box}
.tool-landing h1,.tool-landing h2,.tool-landing h3{font-family:'Inter',system-ui,sans-serif;color:var(--tl-ink-0);margin:0;font-weight:500;line-height:1.25;letter-spacing:-.02em;text-wrap:balance}
.tool-landing p{margin:0}
.tool-landing button,.tool-landing input{font-family:inherit}
.tool-landing a{color:var(--tl-accent-light)}
.tool-landing ::selection{background:var(--tl-accent);color:#fff}
.tool-landing :focus-visible{outline:2px solid var(--tl-accent);outline-offset:2px;border-radius:6px}
.tool-landing [hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){.tool-landing *{animation-duration:.001ms!important;transition-duration:.001ms!important}}
.tool-landing img{max-width:100%}

/* Every section is full bleed and carries the gutter, the .container inside it
   holds the 1180px measure. Bootstrap 3 is loaded on this template and sets
   .container to fixed widths (1170px at 1200px up) plus 15px padding, so these
   rules must stay scoped to .tool-landing to outrank it. Do not flatten them
   to a bare .container. */
.tool-landing section{width:100%;max-width:100%}
.tool-landing section>.container{width:100%;max-width:1180px;margin:0 auto;padding:0}
.tool-landing .tl-section{padding:100px 30px}
.tool-landing .tl-kicker{font-family:'Inter',sans-serif;font-size:var(--tl-fs-2xs)!important;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--tl-accent-light)}
.tool-landing .tl-section-head{max-width:640px;margin:0 auto 48px;text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center}
.tool-landing .tl-section-head h2{font-size:clamp(27px,3.4vw,40px)}
.tool-landing .tl-section-head p{font-size:var(--tl-fs-body);color:var(--tl-ink-300);line-height:1.5}

/* buttons */
.tool-landing .tl-btn{font-size:var(--tl-fs-base);font-weight:700;border-radius:var(--tl-radius-pill);padding:14px 26px;border:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .12s ease,background .15s ease,box-shadow .15s ease,border-color .15s ease;text-decoration:none;white-space:nowrap}
.tool-landing .tl-btn:active{transform:translateY(1px)}
.tool-landing .tl-btn-amber{background:var(--tl-accent-light);color:#fff;box-shadow:0 10px 24px -10px rgba(0,149,255,.55)}
.tool-landing .tl-btn-amber:hover{background:#2b3ba1;color:#fff}
.tool-landing .tl-btn-ghost{background:transparent;color:var(--tl-ink-200);border:1px solid var(--tl-line)}
.tool-landing .tl-btn-ghost:hover{border-color:var(--tl-ink-500);background:rgba(250,246,239,.04);color:var(--tl-ink-200)}
.tool-landing .tl-btn-ghost-dark{background:transparent;color:var(--tl-accent-light);border:1px solid var(--tl-accent-light)}
.tool-landing .tl-btn-ghost-dark:hover{border-color:var(--tl-accent-light);background:var(--tl-accent-light);color:#fff}
.tool-landing .tl-btn-outline-amber{background:transparent;color:var(--tl-amber-600);border:1.5px solid var(--tl-accent)}
.tool-landing .tl-btn-outline-amber:hover{background:var(--tl-accent);color:#fff}
.tool-landing .tl-btn-sm{font-size:var(--tl-fs-sm);padding:10px 18px}
.tool-landing .tl-btn-rate{font-family:'Inter',sans-serif;font-size:var(--tl-fs-2xs)!important;font-weight:700;color:var(--tl-ink-300);background:rgba(250,246,239,.06);border:1px solid var(--tl-line);border-radius:999px;padding:6px 14px;cursor:pointer;transition:border-color .15s ease,color .15s ease}
.tool-landing .tl-btn-rate:hover{border-color:var(--tl-accent);color:var(--tl-ink-0)}

/* hero */
.tool-landing .tl-hero{background:radial-gradient(1000px 460px at 15% -10%,rgba(0,149,255,.16),transparent 60%),linear-gradient(180deg,var(--tl-ink-950) 0%,var(--tl-ink-900) 100%);padding:96px 30px 100px;min-height:calc(100vh - var(--tl-header-h));display:flex;align-items:center}
.tool-landing .tl-hero .tl-hero-row{display:flex;flex-wrap:wrap;gap:56px;align-items:center}
.tool-landing .tl-hero .tl-copy{flex:1 1 0;min-width:300px;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:20px}
.tool-landing .tl-hero .tl-demo{flex:1 1 0;min-width:300px;display:flex;flex-direction:column;align-items:center;gap:14px}
.tool-landing .tl-breadcrumb{display:flex;align-items:center;gap:8px;font-size:var(--tl-fs-2xs)!important;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--tl-ink-500);margin-bottom:-8px;background:none;padding:0}
.tool-landing .tl-breadcrumb a{color:var(--tl-ink-500);text-decoration:none;transition:color .15s ease}
.tool-landing .tl-breadcrumb a:hover{color:var(--tl-ink-0)}
.tool-landing .tl-breadcrumb .tl-crumb-sep{color:var(--tl-ink-600)}
.tool-landing .tl-breadcrumb .tl-crumb-current{color:var(--tl-accent-light)}
.tool-landing .tl-hero h1{font-size:clamp(34px,4.6vw,56px)}
.tool-landing .tl-hero h1 em,.tool-landing .tl-hero h1 span{font-style:normal;color:var(--tl-accent-light)}
.tool-landing .tl-hero .tl-sub{font-size:var(--tl-fs-lg);color:var(--tl-ink-300);max-width:44ch;line-height:1.55;font-weight:400}
.tool-landing .tl-hero .tl-sub p{margin:0;font:inherit;color:inherit}
.tool-landing .tl-hero .tl-sub p+p{margin-top:.6em}
.tool-landing .tl-hero .tl-sub strong,.tool-landing .tl-hero .tl-sub b{font-weight:600;color:#fff}
.tool-landing .tl-hero .tl-sub a{color:#33aaff;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.tool-landing .tl-hero .tl-trust-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
.tool-landing .tl-hero .tl-stars{display:inline-flex;align-items:center;gap:5px}
.tool-landing .tl-hero .tl-stars svg{width:15px;height:15px;color:var(--tl-accent-light)}
.tool-landing .tl-hero .tl-rating-text{font-size:var(--tl-fs-sm)!important;font-weight:600;color:var(--tl-ink-300);margin-left:2px}
.tool-landing .tl-upload-formats{font-size:var(--tl-fs-2xs)!important;color:var(--tl-ink-500)}
.tool-landing .tl-hero .tl-stock-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px}
.tool-landing .tl-hero .tl-stock-row p{font-size:var(--tl-fs-sm)!important;color:var(--tl-ink-500)}
.tool-landing .tl-tile{width:56px;height:56px;border-radius:14px;border:1px solid var(--tl-line);cursor:pointer;overflow:hidden;background:var(--tl-ink-800);transition:transform .12s ease,border-color .12s ease;padding:0;margin:0;flex:none;line-height:0;font-size:0;appearance:none;-webkit-appearance:none}
.tool-landing .tl-tile:hover{transform:translateY(-2px);border-color:var(--tl-accent)}
.tool-landing .tl-tile img{width:100%;height:100%;object-fit:cover;display:block}
.tool-landing .tl-hero .tl-demo-cap{font-size:var(--tl-fs-sm)!important;color:var(--tl-ink-500);text-align:center}

/* hero enhancer */
.tool-landing .tl-upload-box{width:100%;background:var(--tl-ink-800);border:1.5px dashed var(--tl-line);border-radius:var(--tl-radius-md);padding:26px 22px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;cursor:pointer;transition:border-color .15s ease,background .15s ease}
.tool-landing .tl-upload-box:hover,.tool-landing .tl-upload-box:focus-visible,.tool-landing .tl-upload-box.tl-is-dragover{border-color:var(--tl-accent);background:var(--tl-ink-700)}
.tool-landing .tl-upload-box.tl-is-processing{cursor:default;border-style:solid;border-color:var(--tl-accent)}
.tool-landing .tl-upload-state{display:flex;flex-direction:column;align-items:center;gap:8px}
.tool-landing .tl-upload-icon{width:44px;height:44px;border-radius:12px;background:rgba(0,149,255,.16);color:var(--tl-accent-light);display:flex;align-items:center;justify-content:center;margin-bottom:2px}
.tool-landing .tl-upload-icon svg{width:22px;height:22px;display:block}
.tool-landing .tl-upload-spinner{width:26px;height:26px;border-radius:50%;border:3px solid rgba(250,246,239,.18);border-top-color:var(--tl-accent);animation:tl-upload-spin .8s linear infinite;margin-bottom:2px}
.tool-landing .tl-upload-title{font-size:var(--tl-fs-base);color:var(--tl-ink-0);font-weight:600}
.tool-landing .tl-upload-title strong{color:var(--tl-accent-light)}
.tool-landing .tl-upload-error{font-size:var(--tl-fs-2xs)!important;color:#ffb4b4;margin:0}
.tool-landing .tl-compare-card.tl-is-empty{background:var(--tl-ink-800)}
.tool-landing .tl-compare-card.tl-is-empty .tl-compare-label,.tool-landing .tl-compare-card.tl-is-empty .tl-compare-hint,.tool-landing .tl-compare-card.tl-is-empty .tl-compare-handle{opacity:0}
.tool-landing .tl-hero .tl-compare-card{aspect-ratio:4/3.1;box-shadow:0 34px 80px -30px rgba(0,0,0,.6)}
.tool-landing .tl-demo-actions{display:flex;gap:10px;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .3s ease,transform .3s ease}
.tool-landing .tl-demo-actions.tl-visible{opacity:1;transform:translateY(0);pointer-events:auto}
/* bulk hero at rest: the same preview the single image tool shows */
.tool-landing .tl-preview{display:flex;flex-direction:column;gap:12px;width:100%}

/* bulk hero queue: file state only, the pairs live in the results section */
.tool-landing .tl-queue{width:100%;background:rgba(8,20,32,.5);border:1px solid var(--tl-line-soft);border-radius:var(--tl-radius-md);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.tool-landing .tl-queue-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.tool-landing .tl-queue-head strong{color:var(--tl-ink-0);font-size:var(--tl-fs-sm);font-weight:700}
.tool-landing .tl-queue-count{font-size:var(--tl-fs-2xs)!important;color:var(--tl-ink-500);font-variant-numeric:tabular-nums}
.tool-landing .tl-queue-list{display:flex;flex-direction:column;gap:7px}
.tool-landing .tl-queue-list:empty{display:none}
.tool-landing .tl-queue-row{display:flex;align-items:center;gap:10px;font-size:var(--tl-fs-2xs)}
.tool-landing .tl-queue-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--tl-ink-300);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.tool-landing .tl-queue-state{flex:none;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-size:var(--tl-fs-3xs)!important}
.tool-landing .tl-queue-row[data-state="done"] .tl-queue-state{color:var(--tl-good)}
.tool-landing .tl-queue-row[data-state="working"] .tl-queue-state{color:var(--tl-accent-light)}
.tool-landing .tl-queue-empty{font-size:var(--tl-fs-2xs)!important;color:var(--tl-ink-500)}
.tool-landing .tl-spin{width:11px;height:11px;flex:none;border-radius:50%;border:2px solid rgba(250,246,239,.18);border-top-color:var(--tl-accent);animation:tl-upload-spin .8s linear infinite}
.tool-landing .tl-jump{align-self:flex-start;font-size:var(--tl-fs-2xs)!important;font-weight:700;color:var(--tl-accent-light);text-decoration:none;border-bottom:1px solid transparent}
.tool-landing .tl-jump:hover{border-bottom-color:var(--tl-accent-light)}

/* results section: one row per image, the pair side by side */
.tool-landing .tl-results{scroll-margin-top:100px;background:var(--tl-ink-950);border-top:1px solid var(--tl-line)}
.tool-landing .tl-results-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:28px}
.tool-landing .tl-results-head h2{font-size:clamp(25px,3vw,34px)}
.tool-landing .tl-results-meta{display:flex;flex-direction:column;gap:6px}
.tool-landing .tl-results-sum{font-size:var(--tl-fs-sm)!important;color:var(--tl-ink-500);font-variant-numeric:tabular-nums}
.tool-landing .tl-results-actions{display:flex;gap:10px;flex-wrap:wrap}
/* Clear space under the last row. It also gives the page somewhere to scroll,
   so revealResult can bring the final result to the top rather than stopping
   short because the document has run out. */
.tool-landing .tl-results-list{padding-bottom:80px}
.tool-landing .tl-result{scroll-margin-top:100px;border:1px solid var(--tl-line-soft);border-radius:var(--tl-radius-md);background:rgba(8,20,32,.42);overflow:hidden}
.tool-landing .tl-result+.tl-result{margin-top:16px}
.tool-landing .tl-result-bar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;padding:13px 18px;border-bottom:1px solid var(--tl-line-soft)}
.tool-landing .tl-result-name{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--tl-fs-sm);color:var(--tl-ink-0);flex:1 1 200px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tool-landing .tl-chip{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--tl-fs-3xs)!important;color:var(--tl-accent-light);background:rgba(0,149,255,.13);border:1px solid rgba(0,149,255,.28);border-radius:6px;padding:3px 8px;white-space:nowrap}
.tool-landing .tl-dims{font-size:var(--tl-fs-2xs)!important;color:var(--tl-ink-500);font-variant-numeric:tabular-nums;white-space:nowrap}
.tool-landing .tl-dims b{color:var(--tl-ink-200);font-weight:600}
.tool-landing .tl-pair{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--tl-line-soft)}
.tool-landing .tl-panel{position:relative;background:var(--tl-void)}
.tool-landing .tl-panel img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.tool-landing .tl-panel-tag{position:absolute;top:10px;left:10px;font-size:var(--tl-fs-3xs)!important;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:4px 9px;border-radius:5px;background:rgba(8,20,32,.78);color:var(--tl-ink-200)}
.tool-landing .tl-panel-tag.tl-is-after{background:var(--tl-accent);color:#fff}
.tool-landing .tl-panel-pending{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;background:var(--tl-void)}
.tool-landing .tl-pending-label{font-size:var(--tl-fs-2xs)!important;color:var(--tl-ink-500)}
.tool-landing .tl-result-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding:13px 18px}
.tool-landing .tl-delta{font-size:var(--tl-fs-2xs)!important;color:var(--tl-ink-500);font-variant-numeric:tabular-nums}
.tool-landing .tl-delta b{color:var(--tl-good);font-weight:700}
.tool-landing .tl-row-actions{display:flex;gap:8px;flex-wrap:wrap}
.tool-landing .tl-mini{font-size:var(--tl-fs-2xs)!important;font-weight:700;padding:7px 14px;border-radius:var(--tl-radius-pill);border:1px solid var(--tl-line);background:transparent;color:var(--tl-ink-200);cursor:pointer;font-family:inherit;text-decoration:none;transition:border-color .15s ease,color .15s ease}
.tool-landing .tl-mini:hover{border-color:var(--tl-ink-500);color:var(--tl-ink-0)}
.tool-landing .tl-mini.tl-is-primary{background:var(--tl-accent);border-color:var(--tl-accent);color:#fff}
.tool-landing .tl-mini.tl-is-primary:hover{background:var(--tl-accent-light);color:#fff}

/* compare card, shared by the gallery */
.tool-landing .tl-compare-card{width:100%;border-radius:var(--tl-radius-md);overflow:hidden;border:1px solid var(--tl-line);position:relative;background:var(--tl-ink-950);touch-action:none;cursor:ew-resize;user-select:none;-webkit-user-select:none;transition:border-color .15s ease,box-shadow .3s ease}
.tool-landing .tl-compare-card:hover{border-color:var(--tl-accent)}
.tool-landing .tl-compare-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;user-select:none;-webkit-user-drag:none}
.tool-landing .tl-compare-after{position:absolute;inset:0;clip-path:inset(0 0 0 52%)}
.tool-landing .tl-compare-after.tl-anim,.tool-landing .tl-compare-handle.tl-anim{transition:left .5s ease,clip-path .5s ease}
.tool-landing .tl-compare-label{position:absolute;top:12px;font-size:var(--tl-fs-3xs)!important;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#201a10;background:rgba(250,246,239,.92);padding:4px 10px;border-radius:6px;pointer-events:none}
.tool-landing .tl-compare-label.tl-left{left:12px}
.tool-landing .tl-compare-label.tl-right{right:12px;background:var(--tl-accent);color:#fff}
.tool-landing .tl-compare-handle{position:absolute;top:0;bottom:0;left:52%;width:0;transform:translateX(-50%)}
.tool-landing .tl-compare-handle:before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.25)}
.tool-landing .tl-grip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(1);width:36px;height:36px;border-radius:50%;background:var(--tl-accent);display:flex;align-items:center;justify-content:center;gap:2px;color:#fff;box-shadow:0 4px 14px rgba(0,0,0,.4);transition:transform .15s ease,box-shadow .15s ease}
.tool-landing .tl-grip svg{width:9px;height:9px}
.tool-landing .tl-compare-card:hover .tl-grip{transform:translate(-50%,-50%) scale(1.08)}
.tool-landing .tl-compare-card.tl-dragging .tl-grip{transform:translate(-50%,-50%) scale(1.16)}
.tool-landing .tl-compare-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,26px);font-size:var(--tl-fs-3xs)!important;font-weight:700;letter-spacing:.03em;color:#201a10;background:rgba(250,246,239,.92);padding:5px 11px;border-radius:999px;white-space:nowrap;pointer-events:none;opacity:1;transition:opacity .35s ease}
.tool-landing .tl-compare-hint.tl-gone{opacity:0}

/* developer api cta */
.tool-landing .tl-api-cta{background:radial-gradient(900px 380px at 50% -10%,rgba(0,149,255,.22),transparent 60%),var(--tl-ink-900);border-top:1px solid var(--tl-line);border-bottom:1px solid var(--tl-line-soft)}
.tool-landing .tl-api-cta>.container{display:flex;flex-direction:column;align-items:center;gap:28px}
.tool-landing .tl-api-cta .tl-section-head{margin-bottom:0}
.tool-landing .tl-cta-row{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.tool-landing .tl-code-card{width:100%;max-width:900px;background:var(--tl-void);border:1px solid var(--tl-line);border-radius:var(--tl-radius-md);font-family:'Inter',sans-serif;font-size:var(--tl-fs-sm);line-height:1.6;box-shadow:0 20px 50px -25px rgba(2,8,23,.8)}
.tool-landing .tl-code-bar{display:flex;gap:6px;padding:11px 14px;border-bottom:1px solid var(--tl-line-soft)}
.tool-landing .tl-code-bar span{width:9px;height:9px;border-radius:50%;background:var(--tl-line)}
.tool-landing .tl-tok-key{color:var(--tl-accent-light)}
.tool-landing .tl-tok-str{color:var(--tl-ink-0)}
.tool-landing .tl-tok-com{color:var(--tl-ink-600)}
.tool-landing .tl-tok-num{color:var(--tl-ink-300)}
.tool-landing .tl-code-tabs{display:flex;flex-wrap:nowrap;gap:2px;padding:6px 10px 0;border-bottom:1px solid var(--tl-line-soft);overflow-x:auto;scrollbar-width:thin}
.tool-landing .tl-code-tab{flex:none;white-space:nowrap;background:transparent;border:none;color:var(--tl-ink-500);font-family:'Inter',sans-serif;font-size:var(--tl-fs-2xs)!important;font-weight:500;padding:6px 8px;border-radius:8px 8px 0 0;cursor:pointer;transition:color .15s ease,background .15s ease}
.tool-landing .tl-code-tab:hover{color:var(--tl-ink-0)}
.tool-landing .tl-code-tab.tl-active{color:var(--tl-accent-light);background:var(--tl-ink-900)}
.tool-landing .tl-code-panel{display:none;margin:0;padding:16px 18px;white-space:pre-wrap;word-break:break-word;color:var(--tl-ink-200);font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;font-size:var(--tl-fs-sm);line-height:1.6;max-height:340px;overflow:auto;background:none;border:none}
.tool-landing .tl-code-panel.tl-active{display:block}

/* features */
.tool-landing .tl-features{background:radial-gradient(1000px 420px at 85% 0%,rgba(0,149,255,.10),transparent 55%),var(--tl-ink-950)}
.tool-landing .tl-bento{display:flex;flex-wrap:wrap;gap:18px}
.tool-landing .tl-bento>*{flex:0 0 calc((100% - 36px)/3);min-width:0}
.tool-landing .tl-bento-card{background:var(--tl-ink-900);border:1px solid var(--tl-line-soft);border-radius:var(--tl-radius-md);padding:26px;display:flex;flex-direction:column;gap:14px}
.tool-landing .tl-bento-card h3{font-size:var(--tl-fs-h3)}
.tool-landing .tl-bento-card p{font-size:var(--tl-fs-base);color:var(--tl-ink-300);line-height:1.5}
.tool-landing .tl-bento-icon{width:40px;height:40px;border-radius:11px;background:rgba(0,149,255,.14);color:var(--tl-accent-light);display:flex;align-items:center;justify-content:center;flex:none}
.tool-landing .tl-bento-icon img,.tool-landing .tl-bento-icon svg{width:19px;height:19px;display:block}

/* image and text. DOM order is always copy then image, the switch only flips
   the flex direction, so the heading is read before the image either way. */
.tool-landing .tl-media-row{display:flex;flex-wrap:wrap;align-items:center;gap:56px}
.tool-landing .tl-media-row.tl-image-right{flex-direction:row-reverse}
.tool-landing .tl-media-copy{flex:1 1 380px;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.tool-landing .tl-media-copy h2{font-size:clamp(25px,3vw,34px)}
.tool-landing .tl-media-figure{flex:1 1 380px;min-width:0}
.tool-landing .tl-media-figure img{width:100%;height:auto;display:block;border-radius:var(--tl-radius-md);border:1px solid var(--tl-line-soft)}
.tool-landing .tl-media-body{font-size:var(--tl-fs-body);color:var(--tl-ink-300);line-height:1.6}
.tool-landing .tl-media-body>*+*{margin-top:14px}
.tool-landing .tl-media-body p{margin:0}
.tool-landing .tl-media-body ul,.tool-landing .tl-media-body ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:8px}
.tool-landing .tl-media-body li{line-height:1.55}
.tool-landing .tl-media-body strong{color:var(--tl-ink-0);font-weight:700}
.tool-landing .tl-media-body a{color:var(--tl-accent-light);text-decoration:underline;text-underline-offset:2px}
.tool-landing .tl-media-body h3{font-size:var(--tl-fs-h3);margin:0}

/* Two modes. Each paints its own ground and every text colour, so the section
   does not inherit the surrounding band and reads correctly anywhere in the
   order. These replace the old .tl-paper-zone overrides for this section. */
.tool-landing .tl-media-text.tl-bg-dark{background:var(--tl-ink-950)}
.tool-landing .tl-media-text.tl-bg-dark h2,.tool-landing .tl-media-text.tl-bg-dark h3{color:var(--tl-ink-0)}
.tool-landing .tl-media-text.tl-bg-dark .tl-kicker{color:var(--tl-accent-light)}
.tool-landing .tl-media-text.tl-bg-dark .tl-media-body{color:var(--tl-ink-300)}
.tool-landing .tl-media-text.tl-bg-dark .tl-media-body strong{color:var(--tl-ink-0)}
.tool-landing .tl-media-text.tl-bg-dark .tl-media-body a{color:var(--tl-accent-light)}
.tool-landing .tl-media-text.tl-bg-dark .tl-media-figure img{border-color:var(--tl-line-soft)}
.tool-landing .tl-media-text.tl-bg-light{background:var(--tl-paper)}
.tool-landing .tl-media-text.tl-bg-light h2,.tool-landing .tl-media-text.tl-bg-light h3{color:var(--tl-paper-ink-900)}
.tool-landing .tl-media-text.tl-bg-light .tl-kicker{color:var(--tl-amber-600)}
.tool-landing .tl-media-text.tl-bg-light .tl-media-body{color:var(--tl-paper-ink-700)}
.tool-landing .tl-media-text.tl-bg-light .tl-media-body strong{color:var(--tl-paper-ink-900)}
.tool-landing .tl-media-text.tl-bg-light .tl-media-body a{color:var(--tl-amber-600)}
.tool-landing .tl-media-text.tl-bg-light .tl-media-figure img{border-color:rgba(32,26,16,.1)}

/* light zone */
.tool-landing .tl-paper-zone{background:var(--tl-paper)}
.tool-landing .tl-paper-zone .tl-kicker{color:var(--tl-amber-600)}
.tool-landing .tl-paper-zone h1,.tool-landing .tl-paper-zone h2,.tool-landing .tl-paper-zone h3{color:var(--tl-paper-ink-900)}
.tool-landing .tl-paper-zone .tl-section-head p{color:var(--tl-paper-ink-700)}

/* how it works */
.tool-landing .tl-how{background:var(--tl-paper)}
.tool-landing .tl-how .tl-cta-row{margin:-16px auto 40px}
.tool-landing .tl-step-grid{display:flex;flex-wrap:wrap;gap:24px}
.tool-landing .tl-step-grid>*{flex:0 0 calc((100% - 48px)/3);min-width:0}
.tool-landing .tl-step-card{position:relative;background:#fff;border:1px solid rgba(32,26,16,.1);border-radius:var(--tl-radius-md);padding:30px 24px 26px;box-shadow:0 18px 40px -28px rgba(32,26,16,.25)}
.tool-landing .tl-step-num{width:38px;height:38px;border-radius:50%;background:var(--tl-accent);color:#fff;font-weight:800;font-size:var(--tl-fs-base);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.tool-landing .tl-step-card h3{font-size:var(--tl-fs-lg);margin-bottom:8px}
.tool-landing .tl-step-card p{font-size:var(--tl-fs-base);color:var(--tl-paper-ink-700);line-height:1.5}

/* gallery */
.tool-landing .tl-gallery{background:var(--tl-paper-dim)}
.tool-landing .tl-gallery-grid{display:flex;flex-wrap:wrap;gap:24px}
.tool-landing .tl-gallery-grid>*{flex:0 0 calc((100% - 48px)/3);min-width:0}
.tool-landing .tl-gallery-item{display:flex;flex-direction:column;gap:12px;margin:0}
.tool-landing .tl-gallery-item .tl-compare-card{aspect-ratio:1/1}
.tool-landing .tl-gallery-item h3{font-size:var(--tl-fs-body);color:var(--tl-paper-ink-900)}
.tool-landing .tl-gallery-item p{font-size:var(--tl-fs-sm);color:var(--tl-paper-ink-500)}

/* use cases */
.tool-landing .tl-use-cases{background:var(--tl-paper)}
.tool-landing .tl-usecase-grid{display:flex;flex-wrap:wrap;gap:18px}
.tool-landing .tl-usecase-grid>*{flex:0 0 calc((100% - 36px)/3);min-width:0}
.tool-landing .tl-usecase-card{display:flex;gap:14px;padding:22px;border:1px solid rgba(32,26,16,.1);border-radius:var(--tl-radius-md);background:var(--tl-paper-dim)}
.tool-landing .tl-usecase-icon{width:38px;height:38px;flex:none;border-radius:10px;background:rgba(0,119,204,.14);color:var(--tl-amber-600);display:flex;align-items:center;justify-content:center}
.tool-landing .tl-usecase-icon img,.tool-landing .tl-usecase-icon svg{width:18px;height:18px;display:block}
.tool-landing .tl-usecase-card h3{font-size:var(--tl-fs-body);margin-bottom:4px;color:var(--tl-paper-ink-900)}
.tool-landing .tl-usecase-card p{font-size:var(--tl-fs-base);color:var(--tl-paper-ink-700);line-height:1.5}

/* pricing */
.tool-landing .tl-pricing{background:var(--tl-paper-dim)}
.tool-landing .tl-billing-toggle{display:flex;align-items:center;justify-content:center;gap:12px;margin:-8px 0 40px}
.tool-landing .tl-billing-label{font-size:var(--tl-fs-sm)!important;font-weight:600;color:var(--tl-paper-ink-500);transition:color .15s ease}
.tool-landing .tl-billing-label.tl-active{color:var(--tl-paper-ink-900)}
.tool-landing .tl-toggle-switch{position:relative;width:44px;height:24px;border-radius:999px;background:var(--tl-accent);border:none;cursor:pointer;padding:0;flex:none}
.tool-landing .tl-toggle-knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .18s ease}
.tool-landing .tl-toggle-switch[aria-checked="true"] .tl-toggle-knob{transform:translateX(20px)}
.tool-landing .tl-price-grid{display:flex;flex-wrap:wrap;gap:20px;align-items:stretch}
.tool-landing .tl-price-grid>*{flex:0 0 calc((100% - 60px)/4);min-width:0}
.tool-landing .tl-price-card{background:#fff;border:1px solid rgba(32,26,16,.1);border-radius:var(--tl-radius-lg);padding:30px 24px;display:flex;flex-direction:column;gap:16px;box-shadow:0 18px 40px -28px rgba(32,26,16,.2)}
.tool-landing .tl-price-card.tl-pro{border-color:var(--tl-accent);box-shadow:0 24px 50px -30px rgba(0,119,204,.4);position:relative}
.tool-landing .tl-plan-badge{position:absolute;top:-13px;left:24px;background:var(--tl-accent);color:#fff;font-size:var(--tl-fs-3xs)!important;font-weight:800;letter-spacing:.05em;text-transform:uppercase;padding:4px 12px;border-radius:999px}
.tool-landing .tl-price-card h3{font-size:var(--tl-fs-lg);color:var(--tl-paper-ink-900)}
.tool-landing .tl-plan-desc{font-size:var(--tl-fs-sm)!important;color:var(--tl-paper-ink-500);line-height:1.5;min-height:36px}
.tool-landing .tl-price{font-size:var(--tl-fs-price);font-weight:900;color:var(--tl-paper-ink-900)}
.tool-landing .tl-price span{font-size:var(--tl-fs-sm);font-weight:500;color:var(--tl-paper-ink-500);margin-left:5px}
.tool-landing .tl-price .tl-price-amount{font-size:var(--tl-fs-price);font-weight:900;color:var(--tl-paper-ink-900);margin-left:0}
.tool-landing .tl-price-custom,.tool-landing .tl-price-meta{font-size:var(--tl-fs-sm)!important;color:var(--tl-paper-ink-700);line-height:1.6;margin:0}
.tool-landing .tl-price-card hr{border:none;border-top:1px solid rgba(32,26,16,.1);margin:0;width:100%}
.tool-landing .tl-features-label{font-size:var(--tl-fs-sm)!important;font-weight:700;color:var(--tl-paper-ink-900)}
.tool-landing .tl-features-label small{font-weight:500;color:var(--tl-paper-ink-500)}
.tool-landing .tl-price-card ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.tool-landing .tl-price-card li{display:flex;gap:9px;align-items:flex-start;font-size:var(--tl-fs-sm);color:var(--tl-paper-ink-700);line-height:1.4}
.tool-landing .tl-price-card li svg{width:15px;height:15px;flex:none;color:var(--tl-amber-600);margin-top:2px}

/* related tools */
.tool-landing .tl-related{background:var(--tl-paper)}
.tool-landing .tl-related-grid{display:flex;flex-wrap:wrap;gap:16px}
.tool-landing .tl-related-grid>*{flex:0 0 calc((100% - 32px)/3);min-width:0}
.tool-landing .tl-tool-card{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 18px;border:1px solid rgba(32,26,16,.1);border-radius:var(--tl-radius-md);background:var(--tl-paper-dim);text-decoration:none;transition:border-color .15s ease,transform .12s ease}
.tool-landing .tl-tool-card:hover{border-color:var(--tl-accent);transform:translateY(-2px)}
.tool-landing .tl-tool-card-main{display:flex;align-items:center;gap:12px;min-width:0}
.tool-landing .tl-tool-icon{width:34px;height:34px;flex:none;border-radius:9px;background:rgba(0,119,204,.14);color:var(--tl-amber-600);display:flex;align-items:center;justify-content:center;overflow:hidden}
.tool-landing .tl-tool-icon img,.tool-landing .tl-tool-icon svg{width:16px;height:16px;display:block}
.tool-landing .tl-tool-card span{font-size:var(--tl-fs-base);font-weight:700;color:var(--tl-paper-ink-900)}
.tool-landing .tl-tool-arrow{width:16px;height:16px;color:var(--tl-paper-ink-500);flex:none}

/* faq */
.tool-landing .tl-faq{background:var(--tl-paper-dim)}
.tool-landing .tl-faq-list{max-width:760px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.tool-landing details.tl-faq-item{background:var(--tl-paper);border:1px solid rgba(32,26,16,.08);border-radius:var(--tl-radius-md);padding:4px 20px}
.tool-landing details.tl-faq-item summary{list-style:none;cursor:pointer;padding:18px 0;font-size:var(--tl-fs-body);font-weight:700;color:var(--tl-paper-ink-900);display:flex;justify-content:space-between;align-items:center;gap:12px}
.tool-landing details.tl-faq-item summary::-webkit-details-marker{display:none}
.tool-landing details.tl-faq-item summary .tl-plus{flex:none;width:20px;height:20px;color:var(--tl-amber-600);transition:transform .2s ease}
.tool-landing details.tl-faq-item[open] summary .tl-plus{transform:rotate(45deg)}
.tool-landing .tl-faq-answer{padding-bottom:18px}
.tool-landing details.tl-faq-item p{font-size:var(--tl-fs-base);color:var(--tl-paper-ink-700);line-height:1.55;margin:0}
.tool-landing .tl-faq-answer ol,.tool-landing .tl-faq-answer ul{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:8px}
.tool-landing .tl-faq-answer li{font-size:var(--tl-fs-base);color:var(--tl-paper-ink-700);line-height:1.55}
.tool-landing .tl-faq-answer strong{color:var(--tl-paper-ink-900)}

/* closing cta */
.tool-landing .tl-cta-final{background:radial-gradient(900px 400px at 50% -20%,rgba(0,149,255,.22),transparent 60%),linear-gradient(180deg,var(--tl-ink-900) 0%,var(--tl-ink-950) 100%);text-align:center}
.tool-landing .tl-cta-final>.container{display:flex;flex-direction:column;align-items:center;gap:24px}
.tool-landing .tl-cta-final h2{font-size:clamp(28px,3.6vw,42px);max-width:22ch}
.tool-landing .tl-cta-final p{font-size:var(--tl-fs-body);color:var(--tl-ink-300);max-width:46ch}
.tool-landing .tl-cta-final-form{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:6px}

/* Breakpoints mirror the mockup, which tunes each component separately rather
   than moving everything at two global widths. */
@media (max-width:980px){
.tool-landing .tl-price-grid>*{flex-basis:calc((100% - 20px)/2)}
}
@media (max-width:900px){
.tool-landing{--tl-fs-lg:18px;--tl-fs-body:16px;--tl-fs-h3:17px;--tl-fs-price:28px}
.tool-landing .tl-hero .tl-hero-row{flex-direction:column}
.tool-landing .tl-hero .tl-copy{align-items:center;text-align:center;flex-basis:auto}
.tool-landing .tl-hero .tl-demo{flex-basis:auto;width:100%}
.tool-landing .tl-hero .tl-trust-row,.tool-landing .tl-hero .tl-stock-row{justify-content:center}
.tool-landing .tl-bento>*{flex-basis:calc((100% - 18px)/2)}
}
@media (max-width:860px){
.tool-landing .tl-step-grid>*{flex-basis:100%}
.tool-landing .tl-gallery-grid>*{flex-basis:100%}
.tool-landing .tl-usecase-grid>*{flex-basis:calc((100% - 18px)/2)}
.tool-landing .tl-related-grid>*{flex-basis:calc((100% - 16px)/2)}
}
@media (max-width:700px){
.tool-landing .tl-media-row,.tool-landing .tl-media-row.tl-image-right{flex-direction:column;gap:28px}
.tool-landing .tl-media-figure{order:-1;width:100%}
.tool-landing .tl-pair{grid-template-columns:1fr}
}
@media (max-width:600px){
.tool-landing .tl-price-grid>*{flex-basis:100%}
}
@media (max-width:560px){
.tool-landing{--tl-fs-lg:17px;--tl-fs-body:16px;--tl-fs-base:16px;--tl-fs-sm:13px;--tl-fs-h3:17px;--tl-fs-price:26px}
.tool-landing .tl-section{padding:70px 20px}
.tool-landing .tl-hero{padding:70px 20px 76px;--tl-header-h:67px}
.tool-landing .tl-bento>*{flex-basis:100%}
.tool-landing .tl-usecase-grid>*{flex-basis:100%}
.tool-landing .tl-related-grid>*{flex-basis:100%}
}