/* issmart.in — Instant Solutions.  Design system, rebuilt 2026.
 *
 * One stylesheet, no framework, and NOTHING fetched from another server — no
 * web fonts, no CDN, no analytics. The site is shown to clients on whatever
 * machine is to hand, often on hotel wifi and sometimes on none at all, so it
 * has to render the same with the network unplugged. Everything here is local.
 *
 * Two ideas carry the look:
 *   1. A blueprint. These are tools, made by people who care how a thing is
 *      built, so the page wears a faint engineering grid and a "spec line"
 *      motif — a hairline rule with a small square node — instead of stock
 *      gradients.
 *   2. Each tool keeps its own colour. A tool's logo colour becomes its accent,
 *      set per card and per page, so the site and the app look like one family.
 *
 * Light is the default on every machine (it is shown across a desk, printed,
 * and thrown on a projector in a lit room — all of which a dark page loses).
 * Dark is one click away and remembered per browser. Every colour goes through
 * a token, so the two themes are two blocks and nothing else.
 */

/* ------------------------------------------------------------------ tokens -- */
:root{
  /* surfaces */
  --bg:#ffffff;
  --bg2:#f4f7fc;          /* panelled sections */
  --panel:#fbfcfe;        /* a hair off white, for raised strips */
  --card:#ffffff;
  --line:#e0e7f2;
  --line2:#eef2f9;        /* the blueprint grid line — barely there */

  /* ink */
  --ink:#0c1424;          /* near-black navy */
  --ink2:#18233a;
  --soft:#465067;         /* body text, 8:1 on white */
  --faint:#5b6577;        /* labels — 5.4:1 on white, holds on a projector */

  /* brand — indigo into teal, the two ends of every primary gradient.
     Both were measured with white on them: 4.9:1 and 5.1:1. */
  --brand:#1466f5;
  --brandink:#0f56d4;     /* one step darker, where white text sits on it */
  --brand2:#0b8ea9;       /* teal end of the gradient */
  --ok:#0f9d58;

  /* accent falls back to brand until a tool sets its own */
  --accent:var(--brand);
  --accent-ink:var(--brandink);
  --accent-lit:var(--brand);

  /* effects */
  --radius:16px;
  --radius-lg:22px;
  --shadow:0 20px 50px -24px rgba(12,20,36,.35);
  --shadow-sm:0 2px 4px rgba(12,20,36,.05);
  --ring:0 0 0 3px rgba(20,102,245,.35);
  --navbg:rgba(255,255,255,.82);
  --glow1:rgba(20,102,245,.13);
  --glow2:rgba(11,142,169,.12);
  --tint:rgba(12,20,36,.05);
  --onbrand:#ffffff;      /* text on a brand-coloured button */
  --wrap:1200px;

  /* status pills need darker fills on white — small uppercase text must clear
     4.5:1, not 3. Dark mode swaps the bright pair back in below. */
  --soonink:#8a6400;
  --freeink:#0c7f47;
}

:root[data-theme="dark"]{
  --bg:#080d19;
  --bg2:#0f1729;
  --panel:#111a30;
  --card:#141d34;
  --line:#233250;
  --line2:#1a2540;

  --ink:#eef2ff;
  --ink2:#dbe3fb;
  --soft:#aab6d6;
  --faint:#8b96ba;         /* 4.7:1 on the dark card */

  --brand:#3b82ff;
  --brandink:#3b82ff;
  --brand2:#22d3ee;
  --ok:#34d399;

  --accent:var(--brand);
  --accent-ink:var(--brand);
  --accent-lit:var(--brand);

  --shadow:0 26px 60px -20px rgba(0,0,0,.7);
  --shadow-sm:0 2px 4px rgba(0,0,0,.3);
  --ring:0 0 0 3px rgba(59,130,255,.4);
  --navbg:rgba(8,13,25,.82);
  --glow1:rgba(59,130,255,.22);
  --glow2:rgba(34,211,238,.14);
  --tint:rgba(255,255,255,.06);
  --onbrand:#04101f;

  --soonink:#fbbf24;
  --freeink:#34d399;
}

/* -------------------------------------------------------------- foundation -- */
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  font-family:"Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:8px; }
.wrap{ width:100%; max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.mono{ font-family:"Cascadia Code",Consolas,"SF Mono",monospace; }

/* the spec-line label used above section headings and in the hero */
.spec{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.74rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-ink); margin:0 0 14px;
}
:root[data-theme="dark"] .spec{ color:var(--accent-lit); }
.spec::before{
  content:""; width:22px; height:2px; background:currentColor; opacity:.6;
}
.spec::after{
  content:""; width:6px; height:6px; margin-left:-6px; background:currentColor;
  transform:rotate(45deg); border-radius:1px;
}

/* ---------------------------------------------------------------------- nav -- */
.nav{
  position:sticky; top:0; z-index:50;
  background:var(--navbg);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--line);
}
.nav .wrap{ display:flex; align-items:center; gap:18px; height:66px; }
.logo{ display:flex; align-items:center; gap:11px; font-weight:800; font-size:1.05rem; letter-spacing:.01em; }
.logo .mark{ height:27px; width:auto; }
.logo em{ font-style:normal; color:var(--brand2); }
.nav nav{ margin-left:auto; display:flex; gap:4px; align-items:center; }
.nav nav a{
  padding:9px 14px; border-radius:10px; font-size:.9rem; font-weight:600; color:var(--soft);
  transition:background .14s ease,color .14s ease;
}
.nav nav a:hover{ background:var(--tint); color:var(--ink); }
.nav nav a.cta{
  background:linear-gradient(135deg,var(--brandink),var(--brand2)); color:var(--onbrand); font-weight:700;
}
.nav nav a.cta:hover{ filter:brightness(1.07); color:var(--onbrand); }
.burger{ display:none; background:none; border:0; color:var(--ink); font-size:1.5rem; cursor:pointer; }
.themebtn{
  width:38px; height:38px; flex:0 0 auto; margin-left:6px;
  border:1px solid var(--line); border-radius:11px; background:var(--card);
  color:var(--soft); cursor:pointer; display:grid; place-items:center; font-size:1.05rem;
  transition:color .14s ease,border-color .14s ease;
}
.themebtn:hover{ color:var(--ink); border-color:var(--accent); }

/* --------------------------------------------------------------------- hero -- */
.hero{ position:relative; overflow:hidden; padding:96px 0 72px; }
/* the blueprint grid — a faint square mesh that fades out downward */
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line2) 1px,transparent 1px),
    linear-gradient(90deg,var(--line2) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%,#000 40%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 0%,#000 40%,transparent 78%);
  opacity:.8;
}
.hero::after{
  content:""; position:absolute; inset:-30% 40% 40% -15%; pointer-events:none;
  background:radial-gradient(closest-side,var(--glow1),transparent);
}
.hero .wrap{ position:relative; display:grid; grid-template-columns:1.15fr .85fr; gap:52px; align-items:center; }
.hero .lede{ min-width:0; }
.hero h1{
  margin:0 0 20px; font-size:clamp(2.3rem,5.2vw,3.7rem); line-height:1.08;
  font-weight:800; letter-spacing:-.025em; text-wrap:balance;
}
.hero h1 em{
  font-style:normal;
  background:linear-gradient(115deg,var(--brand),var(--brand2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero p.lead{ font-size:1.14rem; color:var(--soft); max-width:56ch; margin:0 0 30px; }
.actions{ display:flex; gap:12px; flex-wrap:wrap; }

.stats{
  display:flex; gap:14px 34px; margin-top:42px; flex-wrap:wrap;
  padding-top:26px; border-top:1px solid var(--line);
}
.stat b{ display:block; font-size:1.75rem; font-weight:800; letter-spacing:-.02em; font-variant-numeric:tabular-nums; }
.stat span{ font-size:.82rem; color:var(--faint); }

/* the tool-logo constellation on the right of the hero */
.constel{ position:relative; min-height:340px; }
.constel .board{
  display:grid; grid-template-columns:repeat(4,1fr); gap:14px;
  padding:22px; border:1px solid var(--line); border-radius:var(--radius-lg);
  background:linear-gradient(160deg,var(--panel),var(--card));
  box-shadow:var(--shadow);
}
.constel .board span{
  aspect-ratio:1; border-radius:14px; background:var(--bg2);
  border:1px solid var(--line); display:grid; place-items:center;
  transition:transform .18s ease,border-color .18s ease,background .18s ease;
}
.constel .board span:hover{ transform:translateY(-3px); border-color:var(--accent); background:var(--card); }
.constel .board img{ width:60%; height:60%; object-fit:contain; }
.constel .chip{
  position:absolute; right:-10px; bottom:-14px;
  background:var(--card); border:1px solid var(--line); border-radius:999px;
  padding:9px 16px; font-size:.82rem; font-weight:700; color:var(--soft);
  box-shadow:var(--shadow); display:flex; align-items:center; gap:8px;
}
.constel .chip .dot{ width:8px; height:8px; border-radius:50%; background:var(--ok); box-shadow:0 0 0 4px rgba(15,157,88,.18); }

/* --------------------------------------------------------------- trust strip -- */
.trust{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--panel); }
.trust .wrap{ display:flex; flex-wrap:wrap; gap:12px 30px; padding:16px 24px; align-items:center; }
.trust b{ font-size:.86rem; font-weight:600; color:var(--soft); display:flex; align-items:center; gap:9px; }
.trust b svg{ width:17px; height:17px; color:var(--accent-ink); flex:0 0 auto; }
:root[data-theme="dark"] .trust b svg{ color:var(--brand2); }

/* buttons ------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 22px; border-radius:12px; font-weight:700; font-size:.94rem;
  border:1px solid var(--line); background:var(--card); color:var(--ink);
  cursor:pointer; transition:transform .12s ease, filter .12s ease, border-color .12s ease;
}
.btn:hover{ transform:translateY(-1px); border-color:var(--accent); }
.btn.primary{
  background:linear-gradient(135deg,var(--brandink),var(--brand2));
  border-color:transparent; color:var(--onbrand);
}
.btn.primary:hover{ filter:brightness(1.08); border-color:transparent; }
.btn.ghost{ background:transparent; }
.btn svg{ width:17px; height:17px; }

/* ----------------------------------------------------------------- sections -- */
section{ padding:76px 0; }
.shead{ margin-bottom:36px; max-width:64ch; }
.shead h2{ margin:0 0 12px; font-size:clamp(1.65rem,3vw,2.3rem); font-weight:800; letter-spacing:-.02em; text-wrap:balance; }
.shead p{ margin:0; color:var(--soft); font-size:1.02rem; }
.alt{ background:var(--bg2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }

/* -------------------------------------------------------------------- filter -- */
.filters{ display:flex; flex-wrap:wrap; gap:9px; margin-bottom:28px; }
.filters button{
  padding:8px 15px; border-radius:999px; font-size:.85rem; font-weight:600;
  border:1px solid var(--line); background:var(--card); color:var(--soft); cursor:pointer;
  transition:all .14s ease;
}
.filters button:hover{ color:var(--ink); border-color:var(--accent); }
.filters button[aria-pressed="true"]{
  background:linear-gradient(135deg,var(--brandink),var(--brand2)); color:var(--onbrand); border-color:transparent;
}

/* ---------------------------------------------------------------------- grid -- */
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px; }
.tool{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-sm);
  padding:24px; display:flex; flex-direction:column; gap:14px;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  position:relative; overflow:hidden;
}
.tool::before{
  content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg,var(--accent),transparent 82%);
}
.tool:hover{ transform:translateY(-4px); border-color:var(--accent); box-shadow:var(--shadow); }
.tool.hidden{ display:none; }
.tool .top{ display:flex; align-items:center; gap:14px; }
.tool .top img{ width:52px; height:52px; flex:0 0 auto; }
.tool h3{ margin:0; font-size:1.18rem; font-weight:800; letter-spacing:-.01em; }
.tool .kicker{ font-size:.72rem; color:var(--accent-ink);
               font-weight:700; letter-spacing:.07em; text-transform:uppercase; }
:root[data-theme="dark"] .tool .kicker{ color:var(--accent-lit); }
.tool > p{ margin:0; color:var(--soft); font-size:.92rem; flex:1; }
.tool ul{ margin:0; padding-left:18px; color:var(--faint); font-size:.85rem; line-height:1.7; }
.tool .foot{ display:flex; align-items:center; gap:10px; margin-top:4px; }
.tool .foot .btn{ padding:9px 15px; font-size:.85rem; }
.tag{
  font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; border:1px solid var(--line); color:var(--faint);
  white-space:nowrap;
}
.tag.soon{ color:var(--soonink); border-color:rgba(251,191,36,.45); background:rgba(251,191,36,.10); }
.tag.free{ color:var(--freeink); border-color:rgba(15,157,88,.35); background:rgba(15,157,88,.08); }
.tag.new{ color:var(--onbrand); border-color:transparent; background:linear-gradient(135deg,var(--brandink),var(--brand2)); }

/* ---------------------------------------------------------------- spotlight -- */
/* the "what's new" band — fleet management: vLog + vLog Server + vScreen */
.spotlight{ position:relative; overflow:hidden; }
.spotlight::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(70% 120% at 85% 0%,var(--glow2),transparent 60%);
}
.spot-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:8px; }
.spot{
  position:relative; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 24px; display:flex; flex-direction:column; gap:12px;
  box-shadow:var(--shadow-sm);
}
.spot .ic{
  width:46px; height:46px; border-radius:13px; display:grid; place-items:center; flex:0 0 auto;
  background:linear-gradient(135deg,var(--accent),var(--accent-ink));
  color:#fff;
}
.spot .ic svg{ width:24px; height:24px; }
.spot h4{ margin:0; font-size:1.08rem; font-weight:800; letter-spacing:-.01em; }
.spot p{ margin:0; color:var(--soft); font-size:.92rem; }
.spot .more{ margin-top:auto; font-size:.85rem; font-weight:700; color:var(--accent-ink); display:inline-flex; align-items:center; gap:6px; }
:root[data-theme="dark"] .spot .more{ color:var(--brand2); }
.spot ul{ margin:2px 0 0; padding-left:18px; color:var(--faint); font-size:.86rem; line-height:1.7; }

/* -------------------------------------------------------------------- detail -- */
.detail{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center;
  padding:38px 0; border-top:1px solid var(--line);
}
.detail:first-of-type{ border-top:0; }
.detail.flip .art{ order:-1; }
.detail .art{
  position:relative; overflow:hidden;
  background:
    radial-gradient(closest-side,var(--accent-soft,var(--glow1)),transparent 78%),
    linear-gradient(160deg,var(--bg2),var(--card));
  border:1px solid var(--line); border-radius:var(--radius-lg);
  display:grid; place-items:center; padding:52px; min-height:260px;
}
.detail .art::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.6;
  background-image:
    linear-gradient(var(--line2) 1px,transparent 1px),
    linear-gradient(90deg,var(--line2) 1px,transparent 1px);
  background-size:30px 30px;
  -webkit-mask-image:radial-gradient(80% 80% at 50% 50%,#000,transparent 75%);
          mask-image:radial-gradient(80% 80% at 50% 50%,#000,transparent 75%);
}
.detail .art img{ position:relative; width:148px; height:148px; filter:drop-shadow(0 18px 34px rgba(0,0,0,.28)); }
.detail h3{ margin:0 0 10px; font-size:clamp(1.35rem,2.4vw,1.7rem); font-weight:800; letter-spacing:-.02em; text-wrap:balance; }
.detail .kicker{ font-size:.74rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; margin-bottom:12px; color:var(--accent-ink); }
.detail p{ color:var(--soft); margin:0 0 16px; }
.detail ul{ margin:0 0 22px; padding-left:20px; color:var(--soft); font-size:.93rem; line-height:1.8; }
.detail ul b{ color:var(--ink); }
.detail .actions .btn.primary{ background:linear-gradient(135deg,var(--accent),var(--accent-ink)); }

/* --------------------------------------------------------------------- why -- */
.why{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; }
.why div{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:26px;
  position:relative;
}
.why .ic{
  width:44px; height:44px; border-radius:12px; display:grid; place-items:center; margin-bottom:14px;
  background:linear-gradient(135deg,var(--brandink),var(--brand2)); color:#fff;
}
.why .ic svg{ width:22px; height:22px; }
.why h4{ margin:0 0 9px; font-size:1.04rem; font-weight:700; }
.why p{ margin:0; color:var(--soft); font-size:.9rem; }

/* ------------------------------------------------------------------ contact -- */
.contact{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--glow1),var(--glow2));
  border:1px solid var(--line); border-radius:26px; padding:56px 48px; text-align:center;
}
.contact::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(var(--line2) 1px,transparent 1px),
    linear-gradient(90deg,var(--line2) 1px,transparent 1px);
  background-size:34px 34px;
  -webkit-mask-image:radial-gradient(90% 90% at 50% 0%,#000,transparent 80%);
          mask-image:radial-gradient(90% 90% at 50% 0%,#000,transparent 80%);
}
.contact > *{ position:relative; }
.contact h2{ margin:0 0 12px; font-size:clamp(1.6rem,3vw,2.1rem); font-weight:800; letter-spacing:-.02em; }
.contact p{ color:var(--soft); margin:0 0 26px; }
.contact .actions{ justify-content:center; }
.contact .reach{ margin:20px 0 0; font-size:.88rem; color:var(--faint); }
.contact .reach a{ color:var(--brand2); font-weight:600; }

/* ------------------------------------------------------------------- footer -- */
footer{ border-top:1px solid var(--line); padding:44px 0; color:var(--faint); font-size:.87rem; background:var(--panel); }
footer .wrap{ display:flex; gap:20px; flex-wrap:wrap; align-items:center; }
footer a:hover{ color:var(--ink); }

/* ------------------------------------------------------------------- mobile -- */
@media (max-width:920px){
  .hero .wrap{ grid-template-columns:1fr; gap:38px; }
  .constel{ min-height:0; max-width:440px; }
  .spot-grid{ grid-template-columns:1fr; }
  .detail{ grid-template-columns:1fr; gap:26px; }
  .detail.flip .art{ order:0; }
  .detail .art{ padding:36px; min-height:0; }
  .detail .art img{ width:112px; height:112px; }
}
@media (max-width:720px){
  .nav nav{
    display:none; position:absolute; top:66px; left:0; right:0;
    flex-direction:column; gap:4px; padding:12px 24px 18px;
    background:var(--bg); border-bottom:1px solid var(--line);
  }
  .nav nav.open{ display:flex; }
  .nav nav a{ padding:11px 13px; }
  .burger{ display:block; margin-left:0; }
  .themebtn{ margin-left:auto; }
  .hero{ padding:60px 0 48px; }
  .stats{ gap:18px 24px; }
  .contact{ padding:34px 22px; }
  section{ padding:56px 0; }
}

/* Somebody will print this for a meeting. Make that legible rather than a
   sheet of dark blue. */
@media print{
  body{ background:#fff; color:#111; }
  .nav,.hero::before,.hero::after,.constel,.contact,.btn,.filters,.themebtn{ display:none !important; }
  .tool,.detail .art,.why div,.spot{ border:1px solid #bbb; background:#fff; box-shadow:none; }
  .tool p,.detail p,.shead p,.spot p{ color:#333; }
}

@media (prefers-reduced-motion:reduce){
  *{ scroll-behavior:auto !important; }
}

/* ======================================================== a tool's own page -- */
/* One layout, every tool. Everything a visitor could want about one tool in a
   single scroll, in the order the questions actually arrive. */

.thero{ padding:60px 0 46px; position:relative; overflow:hidden; }
.thero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:
    linear-gradient(var(--line2) 1px,transparent 1px),
    linear-gradient(90deg,var(--line2) 1px,transparent 1px);
  background-size:36px 36px;
  -webkit-mask-image:radial-gradient(120% 80% at 20% 0%,#000 30%,transparent 72%);
          mask-image:radial-gradient(120% 80% at 20% 0%,#000 30%,transparent 72%);
}
.thero::after{
  content:""; position:absolute; inset:-50% 40% 30% -10%; pointer-events:none;
  background:radial-gradient(closest-side,var(--accent-soft,var(--glow1)),transparent);
}
.thero .wrap{ position:relative; display:flex; gap:36px; align-items:center; flex-wrap:wrap; }
.thero .badge{
  width:116px; height:116px; flex:0 0 auto; border-radius:26px;
  background:linear-gradient(160deg,var(--panel),var(--card)); border:1px solid var(--line);
  display:grid; place-items:center; box-shadow:var(--shadow);
}
.thero .badge img{ width:78px; height:78px; }
.thero .who{ flex:1; min-width:280px; }
.thero h1{ margin:0 0 8px; font-size:clamp(2rem,4.5vw,3rem); font-weight:800; letter-spacing:-.025em; }
.thero .role{
  font-size:.76rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--accent-ink); margin-bottom:10px;
}
:root[data-theme="dark"] .thero .role{ color:var(--accent-lit); }
.thero .tag2{ font-size:1.1rem; color:var(--soft); margin:0 0 20px; max-width:58ch; }
.thero .actions{ display:flex; gap:11px; flex-wrap:wrap; }
.thero .actions .btn.primary{ background:linear-gradient(135deg,var(--accent),var(--accent-ink)); }

.crumbs{ padding:18px 0 0; font-size:.84rem; color:var(--faint); }
.crumbs a{ color:var(--soft); }
.crumbs a:hover{ color:var(--ink); }

/* the problem it solves — set apart, because it is the part that sells */
.problem{
  background:var(--card); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:0 var(--radius) var(--radius) 0; padding:26px 30px; margin:0; box-shadow:var(--shadow-sm);
}
.problem h2{ margin:0 0 10px; font-size:1.25rem; font-weight:800; }
.problem p{ margin:0 0 12px; color:var(--soft); }
.problem p:last-child{ margin-bottom:0; }

/* features */
.feats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:18px; }
.feat{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:22px 24px; box-shadow:var(--shadow-sm); transition:border-color .14s ease,transform .14s ease;
}
.feat:hover{ border-color:var(--accent); transform:translateY(-2px); }
.feat h4{ margin:0 0 8px; font-size:1.02rem; font-weight:700; display:flex; align-items:center; gap:11px; }
.feat h4 .n{
  width:26px; height:26px; border-radius:8px; flex:0 0 auto;
  background:linear-gradient(135deg,var(--accent),var(--accent-ink)); color:#fff;
  display:grid; place-items:center; font-size:.74rem; font-weight:800;
}
.feat p{ margin:0; color:var(--soft); font-size:.9rem; }

/* advantages — two columns of plain claims */
.adv{ display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:18px 32px; }
.adv > div{ display:flex; gap:13px; align-items:flex-start; }
.adv .tick{
  width:24px; height:24px; border-radius:50%; flex:0 0 auto; margin-top:1px;
  background:linear-gradient(135deg,var(--accent),var(--accent-ink)); color:#fff;
  display:grid; place-items:center; font-size:.72rem; font-weight:900;
}
.adv b{ display:block; margin-bottom:3px; }
.adv p{ margin:0; color:var(--soft); font-size:.89rem; }

/* usage — numbered steps */
.steps{ display:flex; flex-direction:column; gap:14px; max-width:840px; }
.step{ display:flex; gap:16px; align-items:flex-start; }
.step .num{
  width:32px; height:32px; flex:0 0 auto; border-radius:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent-ink)); color:#fff;
  display:grid; place-items:center; font-weight:800; font-size:.9rem;
}
.step b{ display:block; margin-bottom:3px; }
.step p{ margin:0; color:var(--soft); font-size:.92rem; }

/* a plain fact table, for requirements */
.facts{ width:100%; border-collapse:collapse; max-width:840px; }
.facts th{
  text-align:left; padding:12px 16px 12px 0; width:220px; vertical-align:top;
  color:var(--faint); font-weight:600; font-size:.88rem; border-bottom:1px solid var(--line);
}
.facts td{ padding:12px 0; color:var(--soft); font-size:.92rem; border-bottom:1px solid var(--line); }
.facts tr:last-child th, .facts tr:last-child td{ border-bottom:0; }

/* an honest limitation, said out loud */
.caveat{
  border:1px solid var(--line); border-radius:var(--radius); padding:22px 26px;
  background:var(--bg2);
}
.caveat h4{ margin:0 0 8px; font-size:1rem; }
.caveat p{ margin:0 0 10px; color:var(--soft); font-size:.9rem; }
.caveat p:last-child{ margin-bottom:0; }

/* next / previous tool */
.moretools{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.moretools a{
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  padding:14px; display:flex; align-items:center; gap:11px; font-size:.88rem; font-weight:600;
  transition:border-color .14s ease,transform .14s ease;
}
.moretools a:hover{ border-color:var(--accent); transform:translateY(-2px); }
.moretools img{ width:30px; height:30px; }

@media (max-width:720px){
  .thero .badge{ width:88px; height:88px; }
  .thero .badge img{ width:58px; height:58px; }
  .facts th{ width:auto; display:block; padding-bottom:2px; border-bottom:0; }
  .facts td{ display:block; padding-top:0; }
}