/* Twinsoft Innovations — site styles
   One file, no framework, no build step. ~9KB. */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --ink:#070C18; --ink-2:#0D1526; --ink-3:#16203A;
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --txt:#F4F6F9; --muted:#9AA3B7; --dim:#6B7387;

  --paper:#fff; --paper-2:#F5F7FA;
  --dark:#0A1020; --body:#4E566A; --hair:#E2E6EE;

  --acc:#2563EB; --acc-lo:#60A5FA; --acc-dk:#1D4ED8; --acc-soft:#EFF5FF;
  --ok:#0E7C57;
  --r:14px; --max:1180px;
}

html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  background:var(--paper);color:var(--body);
  font-size:16.5px;line-height:1.65;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{color:var(--dark);line-height:1.18;letter-spacing:-.03em;font-weight:680}
h1{font-size:clamp(2.1rem,4.4vw,3.4rem);letter-spacing:-.04em}
h2{font-size:clamp(1.6rem,2.9vw,2.3rem)}
h3{font-size:1.14rem;letter-spacing:-.02em}
p{margin-bottom:1em}p:last-child{margin-bottom:0}
a{color:var(--acc);text-decoration:none}
a:hover{text-decoration:underline}
img,svg{max-width:100%;display:block}
:focus-visible{outline:3px solid var(--acc);outline-offset:2px;border-radius:3px}

.wrap{max-width:var(--max);margin:0 auto;padding:0 26px}
.wrap.narrow>*{max-width:760px}
.measure{max-width:760px}
.sec{padding:76px 0}
.sec.alt{background:var(--paper-2)}
.sec-lede{font-size:1.06rem;max-width:62ch;margin-bottom:38px}
.eyebrow{font-size:.76rem;text-transform:uppercase;letter-spacing:.15em;color:var(--acc);
  font-weight:750;margin-bottom:12px}
.lede{font-size:1.13rem;max-width:64ch}

.skip{position:absolute;left:-9999px;top:0;background:var(--acc);color:#fff;padding:10px 16px;z-index:999}
.skip:focus{left:8px;top:8px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;border-radius:9px;font-weight:610;font-size:.95rem;
  border:1.5px solid transparent;cursor:pointer;transition:all .18s;text-decoration:none}
.btn:hover{text-decoration:none}
.btn-p{background:var(--acc);color:#fff;box-shadow:0 3px 12px rgba(37,99,235,.22)}
.btn-p:hover{background:var(--acc-dk);transform:translateY(-1px)}
.btn-o{background:transparent;border-color:var(--line-2);color:var(--txt)}
.btn-o:hover{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.06)}
.btn-d{background:transparent;border-color:var(--hair);color:var(--dark)}
.btn-d:hover{border-color:var(--dark);background:var(--paper-2)}
.btn-lg{padding:14px 28px;font-size:1rem}

/* header */
.site-head{position:sticky;top:0;z-index:100;background:rgba(7,12,24,.94);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
.head-in{display:flex;align-items:center;gap:32px;padding:14px 26px}
.brand{display:flex;align-items:center;gap:10px;color:var(--txt);font-weight:720;
  font-size:1.05rem;letter-spacing:-.035em}
.brand:hover{text-decoration:none}
.logo-mark{width:26px;height:26px;flex:none;color:#fff}
.nav{display:flex;gap:26px;margin-left:auto}
.nav a{color:var(--muted);font-size:.93rem;font-weight:500}
.nav a:hover,.nav a[aria-current]{color:var(--txt);text-decoration:none}
.nav-cta{padding:9px 18px;font-size:.9rem}
.menu-btn{display:none;background:none;border:0;padding:8px;cursor:pointer;margin-left:auto}
.menu-btn span{display:block;width:22px;height:2px;background:var(--txt);margin:4px 0;border-radius:2px}
.m-nav{display:none;flex-direction:column;padding:8px 26px 18px;border-top:1px solid var(--line)}
.m-nav a{color:var(--muted);padding:11px 0;font-size:1rem;border-bottom:1px solid var(--line)}
.m-nav.open{display:flex}

/* hero */
.hero{background:var(--ink);color:var(--txt);padding:84px 0 92px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 55% at 72% 0%,rgba(37,99,235,.20),transparent 62%)}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .75fr;gap:56px;align-items:center}
.hero h1{color:#fff;margin-bottom:20px}
.hero h1 em{font-style:normal;color:var(--acc-lo)}
.hero .lede{color:var(--muted);margin-bottom:30px}
.pill{display:inline-flex;align-items:center;gap:9px;padding:6px 15px;border-radius:99px;
  background:rgba(255,255,255,.06);border:1px solid var(--line-2);color:var(--muted);
  font-size:.81rem;font-weight:540;margin-bottom:22px}
.dot{width:6px;height:6px;border-radius:50%;background:#34D399}
.hero-act{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:26px}

.ticks{list-style:none;display:flex;gap:22px;flex-wrap:wrap;font-size:.88rem;color:var(--dim)}
.ticks li{position:relative;padding-left:20px}
.ticks li::before{content:'';position:absolute;left:0;top:.5em;width:11px;height:6px;
  border-left:2px solid var(--acc-lo);border-bottom:2px solid var(--acc-lo);
  transform:rotate(-45deg)}
.sec .ticks,.ticks.big{display:grid;gap:11px;color:var(--body);font-size:.98rem}
.ticks.big li::before{border-color:var(--acc)}

.hero-card{background:linear-gradient(165deg,var(--ink-3),var(--ink-2));border:1px solid var(--line-2);
  border-radius:16px;padding:26px;box-shadow:0 20px 60px rgba(0,0,0,.45)}
.hero-card h2{color:#fff;font-size:1rem;margin-bottom:16px;letter-spacing:-.02em}
.hero-card dl{display:grid;gap:13px}
.hero-card dl>div{display:flex;justify-content:space-between;gap:14px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.hero-card dl>div:last-child{border-bottom:0;padding-bottom:0}
.hero-card dt{font-size:.84rem;color:var(--dim)}
.hero-card dd{font-size:.9rem;color:var(--txt);font-weight:580;text-align:right}
.hero-card-note{margin-top:16px;font-size:.82rem;color:var(--dim);line-height:1.6}

/* page heads */
.page-head{background:var(--ink);color:var(--txt);padding:62px 0 66px;position:relative;overflow:hidden}
.page-head::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 60% 60% at 78% 0%,rgba(37,99,235,.16),transparent 62%)}
.page-head .wrap{position:relative;z-index:1}
.page-head h1{color:#fff;margin-bottom:16px}
.page-head .lede{color:var(--muted)}
.page-head .hero-act{margin-top:26px;margin-bottom:0}
.svc-head::before{background:radial-gradient(ellipse 60% 60% at 78% 0%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 62%)}

.crumbs{background:var(--ink);border-bottom:1px solid var(--line);
  font-size:.83rem;color:var(--dim);padding:11px 0}
.crumbs a{color:var(--muted)}
.crumbs span{color:var(--dim)}

/* grids & cards */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.card{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:28px;
  transition:transform .2s,box-shadow .2s,border-color .2s;position:relative;overflow:hidden}
.card::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--accent,var(--acc));transform:scaleX(0);transform-origin:left;transition:transform .26s}
.card:hover{transform:translateY(-3px);box-shadow:0 14px 38px rgba(10,16,32,.09);border-color:#CFD6E2}
.card:hover::after{transform:scaleX(1)}
.svc h2,.svc h3{margin-bottom:9px;font-size:1.16rem}
.svc h2 a,.svc h3 a{color:var(--dark)}
.svc p{font-size:.95rem;margin-bottom:14px}
.svc ul{list-style:none;display:grid;gap:6px;margin-bottom:16px}
.svc li{font-size:.86rem;color:var(--dim);padding-left:14px;position:relative}
.svc li::before{content:'';position:absolute;left:0;top:.62em;width:5px;height:5px;
  border-radius:50%;background:var(--accent,var(--acc));opacity:.5}
.more{font-size:.9rem;font-weight:600}

.bi{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:26px}
.bi h3{margin-bottom:8px}
.bi p{font-size:.95rem;margin:0}
.sec.alt .bi{background:#fff}

.prose h2{margin:32px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p{font-size:1.03rem}
.legal p{font-size:1rem}

/* steps */
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;counter-reset:s}
.step .n{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:11px;
  background:var(--dark);color:#fff;font-weight:740;font-size:.95rem;margin-bottom:15px}
.step:first-child .n{background:var(--acc)}
.step h3{margin-bottom:8px}
.step p{font-size:.93rem;margin:0}

.why h3{margin-bottom:8px}
.why p{font-size:.95rem;margin:0}
.wi{padding-top:20px;border-top:2px solid var(--acc)}

/* industries */
.ind-row{display:flex;flex-wrap:wrap;gap:10px}
.ind{padding:10px 18px;border:1px solid var(--hair);border-radius:99px;color:var(--dark);
  font-size:.92rem;font-weight:540;background:#fff}
.ind:hover{border-color:var(--acc);background:var(--acc-soft);text-decoration:none}
.inds .ind-card{background:#fff;border:1px solid var(--hair);border-radius:var(--r);padding:28px;scroll-margin-top:90px}
.ind-card h2{font-size:1.16rem;margin-bottom:9px}
.ind-card p{font-size:.95rem;margin:0}

/* products */
.product,.product-feature{background:#fff;border:1px solid var(--hair);border-radius:var(--r);
  padding:32px;margin-bottom:22px}

/* ── products ─────────────────────────────────────────────────────────────────
   Four stacked grey boxes read as one long list. A grid with per-product accent
   colour, a mark and one featured card gives each product its own identity. */
.prod-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;
  align-items:stretch;margin-bottom:26px}
.prod{position:relative;background:#fff;border:1px solid var(--hair);border-radius:var(--r);
  padding:32px 30px;overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease}
.prod::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--accent,var(--acc))}
.prod:hover{border-color:var(--accent,var(--acc));transform:translateY(-2px);
  box-shadow:0 18px 40px -26px rgba(7,12,24,.45)}
.prod.is-feature{grid-column:1/-1;display:grid;grid-template-columns:1.25fr .85fr;gap:44px;
  padding:38px 36px}
.prod.is-feature::before{height:4px}
.p-top{display:flex;align-items:center;gap:15px;margin-bottom:18px}
.p-name{flex:1;min-width:0}
.p-name h2,.p-name h3{font-size:1.28rem;margin:0;line-height:1.25}
.prod.is-feature .p-name h2{font-size:1.6rem}
.p-for{font-size:.85rem;color:var(--dim);margin:3px 0 0;font-weight:500}
.prod .p-sum{font-size:1.06rem;font-weight:600;color:var(--dark);margin-bottom:14px;line-height:1.45}
.prod.is-feature .p-sum{font-size:1.2rem}
.prod p{margin-bottom:14px}
.prod .ticks{margin:4px 0 6px}
.prod.is-wide{grid-column:1/-1}
.prod.is-wide .p-sum,.prod.is-wide>p,.prod.is-wide .p-top{max-width:74ch}
.prod.is-wide .p-foot{margin-top:22px}
.p-side{display:flex;flex-direction:column;justify-content:center;
  background:var(--paper-2);border-radius:14px;padding:26px 24px}
.p-side .p-foot{margin-top:20px;padding-top:18px}
.prod .p-foot{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:auto;
  padding-top:20px;border-top:1px solid var(--hair)}
.badges{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:15px}
.badge{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:5px 11px;border-radius:6px;background:var(--paper-2);color:var(--dim);border:1px solid var(--hair)}
.badge.live{background:#E6F7F0;color:var(--ok);border-color:#BFE8D8}
.product h2{font-size:1.4rem;margin-bottom:10px}
.product-feature h3{font-size:1.35rem;margin-bottom:10px}
.p-sum{font-weight:560;color:var(--dark)}
.p-foot{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:22px;
  padding-top:20px;border-top:1px solid var(--hair)}
.price{font-weight:640;color:var(--dark);font-size:.95rem}
.note{background:var(--paper-2);border-left:3px solid var(--acc);border-radius:0 10px 10px 0;padding:20px 24px}
.note p{font-size:.96rem;margin:0}

/* about */
.about-grid{display:grid;grid-template-columns:1.6fr .9fr;gap:52px;align-items:start}
.facts{background:var(--paper-2);border:1px solid var(--hair);border-radius:var(--r);padding:26px;
  position:sticky;top:88px}
.facts h2{font-size:.95rem;margin-bottom:16px}
.facts dl{display:grid;gap:12px}
.facts dl>div{display:flex;justify-content:space-between;gap:12px;padding-bottom:11px;
  border-bottom:1px solid var(--hair)}
.facts dl>div:last-child{border-bottom:0;padding-bottom:0}
.facts dt{font-size:.85rem;color:var(--dim)}
.facts dd{font-size:.88rem;font-weight:580;color:var(--dark);text-align:right}
.facts-note{margin-top:16px;font-size:.83rem;color:var(--dim)}

/* faq */
.faq details{background:#fff;border:1px solid var(--hair);border-radius:12px;margin-bottom:10px;overflow:hidden}
.faq details[open]{border-color:#C9D0DC}
.faq summary{padding:19px 24px;cursor:pointer;list-style:none;display:flex;
  justify-content:space-between;gap:18px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary h3{font-size:1.01rem;font-weight:585;margin:0}
.faq summary::after{content:'+';font-size:1.35rem;color:var(--dim);font-weight:300;flex:none;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{background:var(--paper-2)}
.faq details p{padding:0 24px 21px;font-size:.97rem;max-width:80ch}
.faq h2{margin-bottom:26px}
.faq-list{max-width:900px}

/* related */
.rels .rel{display:flex;gap:14px;align-items:flex-start;background:#fff;border:1px solid var(--hair);
  border-radius:var(--r);padding:22px}
.rels .rel:hover{border-color:var(--accent,var(--acc));text-decoration:none}
.rel-txt{display:block}
.rel strong{display:block;color:var(--dark);margin-bottom:6px;font-size:1.02rem}
.rel span{font-size:.9rem;color:var(--body)}

/* ── icon marks ───────────────────────────────────────────────────────────────
   One family: a rounded tile carrying a 24-grid line icon, tinted with the
   accent the tool or product owns. Solid fill on products (they are the
   commercial things and should feel confident), tinted wash on tools (they are
   free utilities and should not shout over the page). */
.p-icon,.t-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:48px;height:48px;border-radius:14px}
.p-icon svg,.t-icon svg{width:25px;height:25px;display:block}
.p-icon{background:var(--accent,var(--acc));color:#fff;
  box-shadow:0 6px 18px -8px var(--accent,var(--acc))}
.t-icon{background:var(--accent,var(--acc));color:#fff;opacity:.96}
.t-icon.sm{width:40px;height:40px;border-radius:11px}
.t-icon.sm svg{width:21px;height:21px}
.t-icon.lg{width:60px;height:60px;border-radius:17px;margin-bottom:20px}
.t-icon.lg svg{width:31px;height:31px}
.tool-card .t-icon{margin-bottom:16px}
.page-head.has-mark .t-icon.lg{box-shadow:0 10px 30px -10px var(--accent,var(--acc))}

/* cta */
.cta{background:var(--ink);color:var(--txt);position:relative;overflow:hidden}
.cta::before{content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse 55% 60% at 80% 30%,rgba(37,99,235,.20),transparent 62%)}
.cta-in{position:relative;z-index:1;display:flex;gap:44px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.cta h2{color:#fff;margin-bottom:12px}
.cta p{color:var(--muted);max-width:56ch;margin:0}
.cta-act{display:flex;gap:12px;flex-wrap:wrap}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.4fr .8fr;gap:52px;align-items:start}
.form label{display:block;font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--dim);font-weight:690;margin-bottom:6px}
.form input,.form select,.form textarea{width:100%;padding:12px 14px;border-radius:9px;
  border:1px solid var(--hair);background:#fff;font-family:inherit;font-size:.96rem;color:var(--dark)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--acc);
  box-shadow:0 0 0 3px var(--acc-soft)}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form p{margin-bottom:16px}
.form-note{font-size:.85rem;color:var(--dim)}
.contact-side h2{font-size:.95rem;margin:26px 0 8px}
.contact-side h2:first-child{margin-top:0}
.contact-side p,.contact-side address{font-size:.95rem;font-style:normal}
.big-mail{font-size:1rem;font-weight:600}
.next{padding-left:18px;font-size:.95rem}
.next li{margin-bottom:7px}

/* footer */
.site-foot{background:var(--ink);color:var(--dim);border-top:1px solid var(--line);
  padding:56px 0 34px;font-size:.9rem}
.site-foot .brand{margin-bottom:14px}
.foot-grid{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:36px;
  padding-bottom:34px;border-bottom:1px solid var(--line)}
.foot-about p{font-size:.89rem;max-width:34ch;line-height:1.7}
.foot-mail a{color:var(--muted)}
.foot-col h2{font-size:.76rem;text-transform:uppercase;letter-spacing:.12em;color:var(--txt);
  margin-bottom:14px;font-weight:700}
.foot-col a{display:block;padding:5px 0;color:var(--dim);font-size:.88rem}
.foot-col a:hover{color:var(--txt);text-decoration:none}
.foot-bot{padding-top:24px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:.82rem}
.foot-bot p{margin:0}
.foot-bot strong{color:var(--muted);font-weight:560}

@media(max-width:980px){
  .hero-in,.about-grid,.contact-grid{grid-template-columns:1fr;gap:38px}
  .grid-3,.steps{grid-template-columns:1fr 1fr}
  .prod.is-feature{grid-template-columns:1fr;gap:26px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
  .facts{position:static}
}
@media(max-width:720px){
  .nav,.nav-cta{display:none}
  .menu-btn{display:block}
  .grid-3,.grid-2,.steps,.form .row,.foot-grid,.prod-grid{grid-template-columns:1fr}
  .prod,.prod.is-feature{padding:26px 22px}
  /* The status badge squeezes the product name into three wrapped lines on a
     phone. Grid puts icon + name on one row and the badge underneath. */
  .p-top{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px 14px;align-items:center}
  .p-name{grid-column:2}
  .p-top .badge{grid-column:1/-1;justify-self:start}
  .p-side{padding:22px 20px}
  .sec{padding:56px 0}
  .hero{padding:56px 0 64px}
  body{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ── accent tokens (replaces inline styles, so CSP can forbid them) ───────── */
[data-accent="blue"]  {--accent:#2563EB}
[data-accent="indigo"]{--accent:#4F46E5}
[data-accent="teal"]  {--accent:#0D9488}
[data-accent="violet"]{--accent:#7C3AED}
[data-accent="amber"] {--accent:#D97706}
[data-accent="cyan"]  {--accent:#0891B2}

/* ── product status badges ────────────────────────────────────────────────── */
.badge.live{background:#E6F7F0;color:var(--ok);border-color:#BFE8D8}
.badge.beta{background:#EEF0FF;color:#3730A3;border-color:#CBD2FA}
.badge.building{background:#FFF4E5;color:#9A5B00;border-color:#F3D9AE}
.badge.planned{background:var(--paper-2);color:var(--dim);border-color:var(--hair)}
.badge.free{background:#E6F7F0;color:var(--ok);border-color:#BFE8D8}

/* ── tools ────────────────────────────────────────────────────────────────── */
.tool-privacy{margin-top:14px;font-size:.86rem;color:var(--muted)}
.tool-sec{padding-top:44px}
.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.tool-pane{display:flex;flex-direction:column}
.tool-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;min-height:34px}
.tool-bar label{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);font-weight:690}
.tool-actions{display:flex;gap:10px;align-items:center}
.tool textarea{width:100%;padding:14px;border-radius:10px;border:1px solid var(--hair);
  background:#fff;font-family:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  font-size:.88rem;line-height:1.6;color:var(--dark);resize:vertical;tab-size:2}
.tool textarea:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.tool textarea[readonly]{background:var(--paper-2)}
.tool-meta{font-size:.82rem;color:var(--dim);margin:8px 0 0;min-height:1.2em}
.tool-btns{display:flex;gap:9px;margin:10px 0 0}
.btn-sm{padding:8px 16px;font-size:.87rem}
.linkbtn{background:none;border:0;padding:0;color:var(--acc);font:inherit;font-size:.85rem;
  cursor:pointer;text-decoration:underline}
.linkbtn:hover{color:var(--acc-dk)}
.is-copied{background:var(--ok)!important;border-color:var(--ok)!important}

.tool-opts{margin-top:22px;border:1px solid var(--hair);border-radius:var(--r);padding:20px 24px 22px}
.tool-opts legend{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--dim);
  font-weight:690;padding:0 8px}
.opt-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 20px}
.opt-grid p{margin:0}
.opt-grid label{display:block;font-size:.78rem;color:var(--dim);font-weight:600;margin-bottom:5px}
.opt-grid select,.opt-grid input[type=text]{width:100%;padding:9px 11px;border-radius:8px;
  border:1px solid var(--hair);background:#fff;font-family:inherit;font-size:.9rem;color:var(--dark)}
.opt-grid select:focus,.opt-grid input:focus{outline:none;border-color:var(--acc)}
.opt-checks{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:16px;padding-top:16px;border-top:1px solid var(--hair)}
.opt-checks label{font-size:.88rem;color:var(--body);display:flex;align-items:center;gap:7px;cursor:pointer}

.tool-status{margin-top:18px;border-radius:10px;padding:14px 18px;font-size:.92rem;border:1px solid}
.tool-status strong{display:block;margin-bottom:2px}
.tool-status p{margin:0;font-size:.89rem}
.tool-status ul{margin:8px 0 0 18px;font-size:.88rem}
.tool-status li{margin-bottom:3px}
.tool-status.is-ok{background:#E6F7F0;border-color:#BFE8D8;color:#0B5C40}
.tool-status.is-ok strong{color:var(--ok)}
.tool-status.is-fixed{background:#FFF4E5;border-color:#F3D9AE;color:#7A4A00}
.tool-status.is-error{background:#FDECEC;border-color:#F5C2C2;color:#96201F}

.tool-card h2,.tool-card h3{margin-bottom:8px;font-size:1.14rem}
.tool-card h2 a,.tool-card h3 a{color:var(--dark)}
.tool-card p{font-size:.95rem;margin-bottom:14px}

.ad-slot{max-width:var(--max);margin:0 auto;padding:0 26px 40px;min-height:1px}
.ad-slot ins{display:block}

/* ── form hardening bits ──────────────────────────────────────────────────── */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--body);
  text-transform:none;letter-spacing:0;font-weight:400}
.consent input{margin-top:3px;flex:none}
.cf-turnstile{margin-bottom:16px}

@media(max-width:880px){
  .tool-grid{grid-template-columns:1fr}
  .opt-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  .opt-grid{grid-template-columns:1fr}
}
.legal-note{margin-top:36px}
.legal-note p{font-size:.92rem}

/* ── language picker ──────────────────────────────────────────────────────── */
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.lang-picker{margin-top:22px;padding:20px 22px;border:1px solid var(--hair);
  border-radius:var(--r);background:var(--paper-2)}
.lang-label{font-size:.78rem;text-transform:uppercase;letter-spacing:.09em;color:var(--dim);
  font-weight:700;margin:0 0 12px}
.lang-pills{display:flex;flex-wrap:wrap;gap:8px}
.lang{padding:8px 15px;border-radius:8px;border:1px solid var(--hair);background:#fff;
  color:var(--body);font:inherit;font-size:.88rem;font-weight:560;cursor:pointer;
  transition:border-color .15s,background .15s,color .15s}
.lang:hover{border-color:var(--acc);color:var(--acc)}
.lang.is-on{background:var(--acc);border-color:var(--acc);color:#fff;
  box-shadow:0 2px 8px rgba(37,99,235,.24)}
.lang:focus-visible{outline:3px solid var(--acc);outline-offset:2px}

/* ── hero service list (replaces the old credentials card) ────────────────── */
.hero-list{list-style:none;display:grid;gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:16px}
.hero-list li{background:var(--ink-2)}
.hero-list a{display:block;padding:12px 16px;color:var(--txt);font-size:.93rem;
  font-weight:560;text-decoration:none;transition:background .15s}
.hero-list a:hover{background:var(--ink-3);text-decoration:none}
.hero-list span{display:block;font-size:.82rem;color:var(--dim);font-weight:400;margin-top:2px}
.hero-card-link{font-size:.88rem;font-weight:600;color:var(--acc-lo)}
.howto{padding-left:20px;margin:14px 0 8px}
.howto li{margin-bottom:9px;font-size:1rem;scroll-margin-top:90px}
.howto strong{color:var(--dark)}
.supports{padding-left:20px;margin:14px 0}
.supports li{margin-bottom:6px;font-size:.97rem}

/* Single-column hero (no right-hand card). Constrain the text, not the
   container, so the left edge still lines up with the header and the
   sections below it. */
.hero-in.hero-solo{grid-template-columns:1fr}
.hero-in.hero-solo .hero-txt{max-width:820px}

/* ── image compressor ─────────────────────────────────────────────────────── */
.drop{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  padding:46px 24px;border:2px dashed var(--hair);border-radius:var(--r);background:var(--paper-2);
  cursor:pointer;text-align:center;transition:border-color .18s,background .18s}
.drop:hover,.drop.is-over{border-color:var(--acc);background:var(--acc-soft)}
.drop:focus-visible{outline:3px solid var(--acc);outline-offset:3px}
.drop svg{width:34px;height:34px;color:var(--acc);margin-bottom:4px}
.drop strong{font-size:1.05rem;color:var(--dark)}
.drop span{font-size:.9rem;color:var(--dim)}

.tool-notice{margin-top:12px;padding:10px 14px;border-radius:9px;background:#FDECEC;
  border:1px solid #F5C2C2;color:#96201F;font-size:.9rem}
.tool-busy{margin-top:14px;font-size:.9rem;color:var(--dim)}

.q-out{float:right;font-weight:700;color:var(--acc);text-transform:none;letter-spacing:0}
.q-out.is-low{color:#B45309}
input[type=range]{width:100%;accent-color:var(--acc);margin-top:4px}

.img-summary{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:20px;padding:14px 18px;border-radius:10px;background:#E6F7F0;border:1px solid #BFE8D8;
  color:#0B5C40;font-size:.95rem;font-weight:560}
.img-summary-act{display:flex;gap:12px;align-items:center}

.img-list{list-style:none;margin-top:16px;display:grid;gap:10px}
.img-row{display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:center;
  padding:12px 14px;border:1px solid var(--hair);border-radius:11px;background:#fff}
.img-thumb{width:56px;height:56px;border-radius:8px;overflow:hidden;background:var(--paper-2);
  display:grid;place-items:center;flex:none}
.img-thumb img{width:100%;height:100%;object-fit:cover}
.img-meta{min-width:0;display:flex;flex-direction:column;gap:2px}
.img-meta strong{font-size:.94rem;color:var(--dark);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.img-meta span{font-size:.86rem;color:var(--dim)}
.img-save{align-self:flex-start;margin-top:3px;font-size:.76rem;font-weight:700;padding:2px 8px;
  border-radius:5px;background:#E6F7F0;color:var(--ok)}
.img-save.is-none{background:var(--paper-2);color:var(--dim)}
.img-err{color:#96201F!important}
.img-actions{display:flex;gap:10px;align-items:center;flex:none}

@media(max-width:560px){
  .img-row{grid-template-columns:auto 1fr;row-gap:10px}
  .img-actions{grid-column:1 / -1;justify-content:flex-end}
}

/* ── invoice generator ────────────────────────────────────────────────────────
   Form on the left, a live preview of the actual page on the right. The preview
   is deliberately a scaled-down sheet of paper rather than a styled web block:
   people trust an invoice tool when they can see the document itself. */
.inv-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:34px;align-items:start}
.inv-form fieldset{margin-bottom:18px}
.inv-form p{margin-bottom:12px}
.inv-form label{display:block;font-size:.82rem;font-weight:640;color:var(--dark);
  margin-bottom:5px;letter-spacing:.01em}
.inv-form input[type=text],.inv-form input[type=email],.inv-form input[type=url],
.inv-form input[type=date],.inv-form input[type=number],.inv-form textarea,.inv-form select{
  width:100%;padding:9px 11px;border:1px solid var(--hair);border-radius:9px;
  font:inherit;font-size:.93rem;background:#fff;color:var(--dark)}
.inv-form textarea{resize:vertical;line-height:1.45}
.inv-form input:focus,.inv-form textarea:focus,.inv-form select:focus{
  outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)}
.inv-opt{font-weight:400;color:var(--dim);font-size:.8rem}

.inv-logo-row{display:flex;gap:16px;align-items:center;margin-bottom:16px}
.inv-logo-box{width:104px;height:64px;border:1px dashed var(--hair);border-radius:10px;
  display:flex;align-items:center;justify-content:center;background:var(--paper-2);
  overflow:hidden;flex:none}
.inv-logo-box img{max-width:96px;max-height:56px;object-fit:contain}
.inv-logo-box span{font-size:.78rem;color:var(--dim)}
.inv-logo-act{margin:0}
.inv-logo-act .btn{cursor:pointer;display:inline-block}
.inv-remember{border-top:1px solid var(--hair);padding-top:14px;margin-top:4px}
.inv-remember .consent span{font-size:.84rem}
.inv-rc .consent span{font-size:.86rem}

.inv-item{display:grid;grid-template-columns:minmax(0,1fr) 62px 96px 74px 26px;
  gap:9px;align-items:end;margin-bottom:9px}
.inv-item p{margin:0}
.inv-del{border:1px solid var(--hair);background:#fff;border-radius:8px;height:36px;width:26px;
  font-size:1.15rem;line-height:1;color:var(--dim);cursor:pointer;padding:0}
.inv-del:hover{border-color:#DC2626;color:#DC2626}

.inv-side{position:sticky;top:88px}
.inv-actions{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.inv-check{border:1px solid var(--hair);border-radius:12px;padding:18px 20px;margin-bottom:20px;
  background:#fff}
.inv-check.is-warn{border-color:#F3D9AE;background:#FFFBF3}
.inv-check.is-ok{border-color:#BFE8D8;background:#F2FBF7}
.inv-check h3{font-size:.95rem;margin-bottom:9px}
.inv-check ul{list-style:none;margin:0;padding:0}
.inv-check li{font-size:.86rem;color:var(--body);padding-left:19px;position:relative;
  margin-bottom:5px;line-height:1.45}
.inv-check li::before{content:'\2713';position:absolute;left:0;color:var(--ok);font-weight:700}
.inv-check li.is-missing::before{content:'\2022';color:#B45309;font-size:1.2rem;line-height:1.05}
.inv-check-note{font-size:.8rem;color:var(--dim);margin:11px 0 0;padding-top:10px;
  border-top:1px solid var(--hair);line-height:1.5}

.inv-preview-label{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);margin-bottom:8px}
.inv-paper{background:#fff;border:1px solid var(--hair);border-radius:6px;padding:30px 30px 34px;
  box-shadow:0 12px 34px -22px rgba(7,12,24,.5);font-size:.8rem;color:var(--dark);
  max-height:70vh;overflow-y:auto}
.ip-head{display:flex;justify-content:space-between;gap:24px;margin-bottom:24px}
.ip-brand{display:flex;flex-direction:column;gap:2px;min-width:0}
.ip-brand strong{font-size:1rem;margin-bottom:3px}
.ip-brand span{color:var(--dim);font-size:.76rem}
.ip-logo{max-width:130px;max-height:46px;object-fit:contain;margin-bottom:9px;align-self:flex-start}
.ip-meta{text-align:right;flex:none}
.ip-meta h4{font-size:1.15rem;letter-spacing:.01em;margin-bottom:9px}
.ip-meta p{display:flex;gap:14px;justify-content:flex-end;margin:0 0 3px}
.ip-k{color:var(--dim);font-size:.74rem}
.ip-v{font-weight:640;font-size:.76rem}
.ip-to{margin-bottom:20px;display:flex;flex-direction:column;gap:2px}
.ip-cap{font-size:.68rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--acc);margin-bottom:5px}
.ip-to span{color:var(--dim);font-size:.76rem}
.ip-table{width:100%;border-collapse:collapse;margin-bottom:16px}
.ip-table th{background:var(--paper-2);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--dim);padding:7px 8px;text-align:left;font-weight:700}
.ip-table td{padding:7px 8px;border-bottom:1px solid var(--hair);font-size:.77rem;
  vertical-align:top}
.ip-table .num{text-align:right;white-space:nowrap}
.ip-sum{margin-left:auto;width:min(260px,100%)}
.ip-sum p{display:flex;justify-content:space-between;gap:18px;margin:0 0 5px;font-size:.78rem;
  color:var(--dim)}
.ip-sum p.is-total{border-top:1px solid var(--hair);margin-top:8px;padding-top:8px;
  font-size:.95rem;font-weight:700;color:var(--dark)}
.ip-rc{background:var(--paper-2);border-radius:8px;padding:10px 12px;font-size:.74rem;
  color:var(--body);margin-top:14px}
.ip-pay{background:var(--paper-2);border-radius:8px;padding:14px 16px;margin-top:18px;
  display:flex;flex-direction:column;gap:3px}
.ip-pay span{font-size:.76rem;color:var(--body)}
.ip-pay .ip-link{word-break:break-all}
.ip-notes{font-size:.76rem;color:var(--dim);margin-top:16px;white-space:pre-line}

@media(max-width:1080px){
  .inv-grid{grid-template-columns:1fr;gap:26px}
  .inv-side{position:static}
  .inv-paper{max-height:none}
}
@media(max-width:560px){
  /* Five inputs will not fit across a phone. Each line becomes its own small
     card with two columns, and every row shows its own labels — on a wide
     screen only the first row is labelled, which makes no sense once the rows
     are stacked. */
  .inv-item{grid-template-columns:1fr 1fr;gap:11px;padding:14px;margin-bottom:12px;
    border:1px solid var(--hair);border-radius:11px;align-items:start}
  .inv-item .inv-i-desc{grid-column:1/-1}
  .inv-item label.visually-hidden{position:static!important;width:auto;height:auto;
    margin:0 0 5px;overflow:visible;clip:auto;white-space:normal}
  .inv-del{grid-column:2;justify-self:end;align-self:end;width:44px;height:38px}
}

/* Printing: the sheet, and nothing else. This is also the fallback route for
   scripts the built-in PDF fonts cannot draw. */
@media print{
  body{background:#fff}
  .nav-wrap,.crumbs,.page-head,.cta,.foot,.inv-form,.inv-actions,.inv-check,
  .inv-preview-label,.ad-slot,.sec.alt,.rels,.faq,.tool-privacy{display:none!important}
  .inv-paper{border:0;box-shadow:none;max-height:none;overflow:visible;padding:0;
    font-size:11px;border-radius:0}
  .sec,.wrap{padding:0!important;margin:0!important;max-width:none!important}
  @page{margin:16mm}
}

/* Contact form, unconfigured state. Styled as a deliberate route rather than a
   broken thing — a visitor should feel directed, not stranded. */
.form-offline{display:flex;flex-direction:column;align-items:flex-start;
  background:var(--paper-2);border:1px solid var(--hair);border-radius:var(--r);
  padding:34px 32px}
.form-offline h2{font-size:1.25rem;margin-bottom:12px}
.form-offline p{margin-bottom:16px;max-width:52ch}
.form-offline .btn{margin-bottom:6px}

/* Thank-you page */
.steps-plain{list-style:none;counter-reset:s;margin:0 0 26px;padding:0}
.steps-plain li{counter-increment:s;position:relative;padding-left:44px;
  margin-bottom:18px;line-height:1.6}
.steps-plain li::before{content:counter(s);position:absolute;left:0;top:1px;
  width:28px;height:28px;border-radius:50%;background:var(--acc);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:.82rem;font-weight:700}
.thanks-note{font-size:.95rem;color:var(--dim);border-top:1px solid var(--hair);
  padding-top:18px}