/* Header Scanner — headerscanner.com
   The shared design system for every site in the family. Only the four
   --brand values on the :root block below differ between sites.
   Generated 2026-10-20 from the Claim Disk copy by the redesign build. */

/* ==========================================================================
   CLUE TOOLS — SHARED SITE SYSTEM  (identical on every site in the family)
   Only --brand* changes per site.  Category hues are fixed family-wide.
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  /* Neutrals — identical on every site */
  --ink:#141c27; --body:#404d5e; --muted:#6c7b8e; --faint:#8d99a9;
  --line:#e2e8f0; --line-2:#eef2f7;
  --bg:#ffffff; --bg-2:#f7f9fc; --bg-3:#edf2f8;

  /* Per-site accent — the ONLY color that changes between sites.
     Claim Disk = teal.  LAN Fixer = indigo.  Sending Pics = amber. etc. */
  --brand:#0369a1; --brand-d:#075985; --brand-t:#e7f3fa; --brand-l:#bfe0f2;   /* Header Scanner */

  /* Category hues — fixed across the whole family, so a returning visitor
     learns "teal = disk, indigo = network, amber = sharing, rose = messaging" */
  --c-disk:#0f766e;  --c-disk-t:#e9f5f3;
  --c-net:#3b4bc4;   --c-net-t:#ecedfc;
  --c-share:#a4690f; --c-share-t:#fbf2e1;
  --c-msg:#b2234a;   --c-msg-t:#fbebef;
  --c-web:#54637a;   --c-web-t:#eef1f5;

  --sh-s:0 1px 2px rgba(20,28,39,.05);
  --sh-m:0 4px 18px rgba(20,28,39,.07);
  --sh-l:0 20px 56px rgba(20,28,39,.13);
  --wrap:1140px;
}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color:var(--body);background:var(--bg);line-height:1.65;font-size:16.5px;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
h1,h2,h3,h4{color:var(--ink);letter-spacing:-.021em;line-height:1.22;font-weight:650}
a{color:var(--brand)}
img{max-width:100%;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}
.center{text-align:center}
[id]{scroll-margin-top:88px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-weight:600;font-size:.97rem;line-height:1.2;border-radius:9px;
  padding:.78rem 1.35rem;text-decoration:none;border:1px solid transparent;
  transition:background .16s,border-color .16s,box-shadow .16s,color .16s;cursor:pointer}
.btn-primary{background:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(20,28,39,.16)}
.btn-primary:hover{background:var(--brand-d)}
.btn-quiet{background:#fff;color:var(--ink);border-color:var(--line)}
.btn-quiet:hover{border-color:#cdd8e4;background:var(--bg-2)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:#0b1220}
.btn-lg{padding:1rem 1.8rem;font-size:1.06rem;border-radius:11px}
.btn svg{width:18px;height:18px;flex:none}

/* ---------- section rhythm ---------- */
.sec{padding:86px 0}
.sec.tint{background:var(--bg-2);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.head{max-width:700px;margin:0 auto 48px}
.head.center{text-align:center}
.kick{font-size:.76rem;letter-spacing:.15em;text-transform:uppercase;color:var(--brand);font-weight:700;margin-bottom:.75rem}
.head h2{font-size:clamp(1.6rem,3.1vw,2.15rem);margin-bottom:.85rem}
.head p{color:var(--muted);font-size:1.05rem}

/* ---------- pills ---------- */
.pill{display:inline-flex;align-items:center;gap:.55rem;background:var(--brand-t);
  color:var(--brand-d);border:1px solid var(--brand-l);border-radius:999px;
  padding:.4rem 1rem .42rem;font-size:.86rem;font-weight:600}
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--brand);flex:none}
.pill-n{background:var(--bg-2);color:var(--muted);border-color:var(--line)}

/* ---------- feature cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:22px}
.card{background:#fff;border:1px solid var(--line);border-radius:13px;padding:26px 24px;
  transition:border-color .18s,box-shadow .18s}
.card:hover{border-color:#d3dde9;box-shadow:var(--sh-m)}
.card .ic{width:40px;height:40px;border-radius:10px;background:var(--brand-t);color:var(--brand);
  display:grid;place-items:center;margin-bottom:16px}
.card .ic svg{width:21px;height:21px}
.card h3{font-size:1.06rem;margin-bottom:.45rem}
.card p{color:var(--muted);font-size:.955rem;line-height:1.6}

/* ---------- screenshot frames ---------- */
.shot{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;box-shadow:var(--sh-m)}
.shot .chrome{height:34px;background:linear-gradient(180deg,#fcfdfe,#f4f7fb);
  border-bottom:1px solid var(--line-2);display:flex;align-items:center;gap:7px;padding:0 14px}
.shot .chrome i{width:9px;height:9px;border-radius:50%;background:#dfe6ef;display:block}
.shot .frame{position:relative;aspect-ratio:16/10;background:
  repeating-linear-gradient(135deg,#f7f9fc 0 11px,#f2f6fa 11px 22px);display:grid;place-items:center}
.shot .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot .ph{text-align:center;padding:24px;color:var(--faint)}
.shot .ph svg{width:30px;height:30px;margin:0 auto 10px;opacity:.6}
.shot .ph b{display:block;color:var(--muted);font-size:.95rem;font-weight:600;margin-bottom:.2rem}
.shot .ph span{font-size:.82rem}
.shot-cap{font-size:.88rem;color:var(--muted);text-align:center;margin-top:12px}

/* ---------- comparison table ---------- */
.tbl{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border:1px solid var(--line);
  border-radius:13px;overflow:hidden;font-size:.95rem}
.tbl th,.tbl td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--line-2);vertical-align:top}
.tbl thead th{background:var(--bg-2);color:var(--ink);font-weight:650;font-size:.88rem;
  letter-spacing:.02em;white-space:nowrap}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td:first-child{color:var(--ink);font-weight:600;width:27%}
.tbl .yes{color:var(--brand-d);font-weight:600}
.tbl td.other{color:var(--faint)}

/* ---------- licensing ---------- */
.lic{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}
.lic-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:32px 30px;
  display:flex;flex-direction:column}
.lic-card.free{border-color:var(--brand-l);background:linear-gradient(180deg,var(--brand-t),#fff 58%)}
.lic-tag{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;font-weight:700;
  color:var(--muted);margin-bottom:.9rem}
.lic-card.free .lic-tag{color:var(--brand-d)}
.lic-card h3{font-size:1.5rem;margin-bottom:.35rem}
.lic-price{font-size:1.02rem;color:var(--muted);margin-bottom:1.3rem}
.lic-card ul{list-style:none;margin:0 0 1.7rem;display:grid;gap:.6rem}
.lic-card li{position:relative;padding-left:1.7rem;font-size:.96rem;color:var(--body)}
.lic-card li::before{content:"";position:absolute;left:0;top:.52em;width:11px;height:6px;
  border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(-45deg)}
.lic-card .btn{margin-top:auto;width:100%}
.tiers{width:100%;border-collapse:separate;border-spacing:0;margin-top:28px;background:#fff;
  border:1px solid var(--line);border-radius:13px;overflow:hidden;font-size:.95rem}
.tiers th,.tiers td{padding:13px 18px;text-align:left;border-bottom:1px solid var(--line-2)}
.tiers thead th{background:var(--bg-2);font-size:.86rem;font-weight:650;color:var(--ink)}
.tiers tbody tr:last-child td{border-bottom:0}
.tiers td:first-child{color:var(--ink);font-weight:600}
.tiers td:last-child{text-align:right;color:var(--ink);font-weight:650;font-variant-numeric:tabular-nums}

/* ---------- faq ---------- */
.faq{max-width:820px;margin:0 auto;border:1px solid var(--line);border-radius:13px;background:#fff;overflow:hidden}
.faq details{border-bottom:1px solid var(--line-2)}
.faq details:last-child{border-bottom:0}
.faq summary{list-style:none;cursor:pointer;padding:18px 54px 18px 24px;position:relative;
  font-weight:600;color:var(--ink);font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:24px;top:26px;width:9px;height:9px;
  border-right:2px solid var(--faint);border-bottom:2px solid var(--faint);
  transform:rotate(45deg);transition:transform .18s}
.faq details[open] summary::after{transform:rotate(-135deg);top:30px}
.faq details[open] summary{color:var(--brand-d)}
.faq .a{padding:0 60px 20px 24px;color:var(--muted);font-size:.96rem}

/* ---------- footer ---------- */
footer.site{background:#fff;border-top:1px solid var(--line);padding:56px 0 30px;font-size:.93rem}
.f-top{display:grid;grid-template-columns:1.3fr 3fr;gap:44px;padding-bottom:36px;border-bottom:1px solid var(--line-2)}
.f-brand p{color:var(--muted);margin-top:.7rem;max-width:280px;font-size:.92rem}
.f-dir{display:grid;grid-template-columns:repeat(5,1fr);gap:26px}
.f-dir h5{font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);
  font-weight:700;margin-bottom:.85rem}
.f-dir a{display:block;color:var(--body);text-decoration:none;padding:3px 0;font-size:.9rem}
.f-dir a:hover{color:var(--brand-d)}
.f-dir a.here{color:var(--ink);font-weight:650}
.f-bot{display:flex;justify-content:space-between;gap:20px;padding-top:24px;
  color:var(--faint);font-size:.87rem;flex-wrap:wrap}
.f-bot a{color:var(--faint);text-decoration:none}
.f-bot a:hover{color:var(--body)}
.f-links{display:flex;gap:22px;flex-wrap:wrap}

@media (max-width:900px){
  .sec{padding:64px 0}
  .lic{grid-template-columns:1fr}
  .f-top{grid-template-columns:1fr;gap:32px}
  .f-dir{grid-template-columns:repeat(2,1fr)}
}

/* ---------- fact band ---------- */
.band{background:var(--bg-2);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.band .wrap{display:grid;grid-template-columns:repeat(3,1fr)}
.band .b{padding:28px 30px}
.band .b+.b{border-left:1px solid var(--line)}
.band b{display:block;color:var(--ink);font-size:1.03rem;font-weight:650;margin-bottom:.15rem}
.band span{color:var(--muted);font-size:.93rem}

/* ---------- gallery ---------- */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.gal .wide{grid-column:1/-1}

/* ---------- download panel ---------- */
.dl-panel{background:linear-gradient(180deg,var(--brand-t),#fff 70%);border:1px solid var(--brand-l);
  border-radius:18px;padding:54px 40px;text-align:center}
.dl-panel h2{font-size:clamp(1.6rem,3vw,2.1rem);margin-bottom:.7rem}
.dl-panel>p{color:var(--muted);max-width:560px;margin:0 auto 1.9rem}
.dl-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.dl-meta{margin-top:1.5rem;color:var(--muted);font-size:.9rem}
.req{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:13px;overflow:hidden;margin-top:34px}
.req div{background:#fff;padding:20px 22px}
.req b{display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--faint);font-weight:700;margin-bottom:.35rem}
.req span{color:var(--ink);font-size:.95rem;font-weight:600}

/* ---------- app tiles (shared by all three navigation ideas) ---------- */
.app{display:flex;gap:13px;align-items:flex-start;padding:10px 12px;margin:0 -12px;
  border-radius:10px;text-decoration:none;transition:background .14s}
.app:hover{background:var(--bg-2)}
.app-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;flex:none;margin-top:1px}
.app-ic svg{width:19px;height:19px}
.app-tx b{display:block;color:var(--ink);font-size:.95rem;font-weight:650;line-height:1.35}
.app-tx i{display:block;font-style:normal;color:var(--muted);font-size:.845rem;line-height:1.45;margin-top:1px}
.app-tx .kind{color:var(--faint);font-weight:500;font-size:.8rem}
.app.here{background:var(--brand-t)}
.app.here:hover{background:var(--brand-t)}
.here-tag{display:inline-block;margin-left:.45rem;background:var(--brand);color:#fff;
  font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;font-weight:700;
  padding:.1rem .42rem;border-radius:4px;vertical-align:1px}
.t-disk{background:var(--c-disk-t);color:var(--c-disk)}
.t-net{background:var(--c-net-t);color:var(--c-net)}
.t-share{background:var(--c-share-t);color:var(--c-share)}
.t-msg{background:var(--c-msg-t);color:var(--c-msg)}
.t-web{background:var(--c-web-t);color:var(--c-web)}
.cat-h{display:flex;align-items:center;gap:.5rem;font-size:.73rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:.7rem}
.cat-h .sq{width:8px;height:8px;border-radius:2px;flex:none}
.sq-disk{background:var(--c-disk)}.sq-net{background:var(--c-net)}
.sq-share{background:var(--c-share)}.sq-msg{background:var(--c-msg)}.sq-web{background:var(--c-web)}

@media (max-width:900px){
  .band .wrap{grid-template-columns:1fr}
  .band .b+.b{border-left:0;border-top:1px solid var(--line)}
  .gal{grid-template-columns:1fr}
  .req{grid-template-columns:repeat(2,1fr)}
  .dl-panel{padding:40px 22px}
}

/* ---------- brand lockup (identical everywhere; mark color = site accent) ---------- */
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.brand-mark{width:32px;height:32px;border-radius:9px;background:var(--brand);color:#fff;
  display:grid;place-items:center;flex:none}
.brand-mark svg{width:19px;height:19px}
.brand-name{font-size:1.14rem;font-weight:700;color:var(--ink);letter-spacing:-.022em}

/* ---------- hero (shared bones; each idea varies the composition) ---------- */
.hero{background:linear-gradient(180deg,#fff 0%,var(--bg-2) 100%);border-bottom:1px solid var(--line-2)}
.hero h1{font-size:clamp(2.05rem,4.9vw,3.3rem);line-height:1.1}
.lead{font-size:1.15rem;color:var(--muted)}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.meta{color:var(--faint);font-size:.88rem}


/* ==========================================================================
   IDEA 4 — THE RAIL, PLUS THE FAMILY SECTION
   Two mechanisms that answer different halves of the problem.

   At the top: a permanent hairline rail above the site header. Text only,
   one line, always visible on arrival, with the overflow behind "All tools".
   It makes the family VISIBLE at almost no visual cost, and it does not grow
   as tools are added.

   At the bottom: a proper family section before the footer — three
   recommended tools as full cards, then the remainder one line each. It makes
   the family PERSUASIVE, reaching the visitor after they have decided about
   this product rather than competing with it.

   Neither carries a count, so tools can be added or retired without a
   wording change anywhere on the page.
   ========================================================================== */
.rail{background:var(--bg-2);border-bottom:1px solid var(--line);font-size:.825rem;
  position:relative;z-index:80}
.rail .wrap{display:flex;align-items:center;gap:16px;height:39px}
.rail-brand{display:inline-flex;align-items:center;gap:9px;color:var(--muted);
  font-weight:650;text-decoration:none;white-space:nowrap}
.rail-brand:hover{color:var(--ink)}
.rail-brand .glyph{display:grid;grid-template-columns:1fr 1fr;gap:2px;flex:none}
.rail-brand .glyph i{width:5px;height:5px;border-radius:1.5px;background:var(--faint);display:block}
.rail-brand:hover .glyph i{background:var(--brand)}
.rail-sep{color:var(--line);margin-left:-6px}
.rail-note{color:var(--faint);white-space:nowrap}

.rail-links{margin-left:auto;display:flex;align-items:center;gap:1px}
.rail-links a,.rail-more{color:var(--muted);text-decoration:none;padding:.3rem .62rem;
  border-radius:7px;white-space:nowrap;position:relative;background:none;border:0;
  font:inherit;cursor:pointer;transition:.14s}
.rail-links a:hover,.rail-more:hover{color:var(--ink);background:#fff;box-shadow:var(--sh-s)}
.rail-links a.here{color:var(--ink);font-weight:650}
.rail-links a.here::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--brand);margin-right:7px;vertical-align:1.5px}
.rail-more{display:inline-flex;align-items:center;gap:6px;font-weight:650;color:var(--body)}
.rail-more::after{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-1px,-1px);transition:transform .16s}
.rail-more[aria-expanded="true"]{background:#fff;box-shadow:var(--sh-s);color:var(--ink)}
.rail-more[aria-expanded="true"]::after{transform:rotate(225deg) translate(-2px,-2px)}

/* hover explanation — the reason a text link can replace a labeled button */
.rail-links [data-tip]::after{content:attr(data-tip);position:absolute;top:calc(100% + 9px);
  right:0;background:var(--ink);color:#fff;font-size:.78rem;font-weight:500;line-height:1.5;
  padding:.55rem .72rem;border-radius:8px;width:236px;text-align:left;opacity:0;visibility:hidden;
  transform:translateY(-4px);transition:.15s;pointer-events:none;box-shadow:var(--sh-m);z-index:95;white-space:normal}
.rail-links [data-tip]:hover::after{opacity:1;visibility:visible;transform:none}

.rail-panel{position:absolute;top:calc(100% + 9px);right:24px;width:min(660px,calc(100vw - 32px));
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-l);
  padding:22px 22px 0;opacity:0;visibility:hidden;transform:translateY(-7px);
  transition:opacity .16s,transform .16s,visibility .16s;z-index:90;text-align:left}
.rail-panel.open{opacity:1;visibility:visible;transform:none}
.rail-cols{display:grid;grid-template-columns:1fr 1fr;gap:2px 28px;align-items:start}
.rail-cols section{margin-bottom:18px}
.rail-foot{margin:4px -22px 0;padding:14px 22px;border-top:1px solid var(--line-2);
  background:var(--bg-2);border-radius:0 0 14px 14px;font-size:.85rem;color:var(--muted);
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.rail-foot a{font-weight:600;text-decoration:none}

/* ---- the discovery section ---- */
.disc{background:var(--bg-2);border-top:1px solid var(--line-2);padding:84px 0 90px}
.disc-feat{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.dcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px 26px;
  display:flex;flex-direction:column;transition:border-color .18s,box-shadow .18s;text-decoration:none}
.dcard:hover{border-color:#d3dde9;box-shadow:var(--sh-m)}
.dcard .top{display:flex;align-items:center;gap:13px;margin-bottom:15px}
.dcard .app-ic{width:42px;height:42px;border-radius:11px}
.dcard .app-ic svg{width:22px;height:22px}
.dcard h3{font-size:1.14rem;margin-bottom:.1rem}
.dcard .dom{color:var(--faint);font-size:.83rem;font-weight:500}
.dcard p{color:var(--muted);font-size:.955rem;line-height:1.6;margin-bottom:16px}
.dcard .go{margin-top:auto;font-weight:650;font-size:.93rem;display:inline-flex;align-items:center;gap:7px}
.dcard .tagrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tag{font-size:.75rem;font-weight:600;color:var(--muted);background:var(--bg-2);
  border:1px solid var(--line);border-radius:20px;padding:.15rem .6rem}

.disc-note{margin-top:36px;padding-top:30px;border-top:1px solid var(--line);
  text-align:center;color:var(--muted);font-size:.95rem}
.disc-note b{color:var(--ink);font-weight:650}
@media (max-width:1040px){.disc-feat{grid-template-columns:repeat(2,1fr)}}

/* header */
.hdr{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(10px);backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;gap:24px;height:66px}
.mainnav{display:flex;gap:25px;margin-left:auto}
.mainnav a{color:var(--body);text-decoration:none;font-size:.95rem;font-weight:500;
  padding:5px 0;border-bottom:2px solid transparent;transition:.15s}
.mainnav a:hover{color:var(--ink);border-bottom-color:var(--brand-l)}
.hdr .btn-primary{margin-left:20px}
.burger{display:none;margin-left:auto;width:38px;height:36px;border:1px solid var(--line);
  background:#fff;border-radius:9px;cursor:pointer;align-items:center;justify-content:center;
  flex-direction:column;gap:4px}
.burger i{display:block;width:16px;height:1.7px;background:var(--ink);border-radius:2px}

/* hero — split composition */
.hero{padding:74px 0 76px}
.hero .wrap{display:grid;grid-template-columns:1.02fr 1fr;gap:56px;align-items:center}
.hero h1{margin:20px 0 18px}
.hero .lead{margin-bottom:28px;max-width:30rem}
.hero .meta{margin-top:18px}
.hero-facts{margin-top:28px;padding-top:22px;border-top:1px solid var(--line);
  display:grid;gap:.55rem}
.hero-facts div{display:flex;gap:10px;align-items:flex-start;font-size:.94rem;color:var(--body)}
.hero-facts svg{width:17px;height:17px;color:var(--brand);flex:none;margin-top:3px}

@media (max-width:1080px){ .rail-links a:nth-last-child(2),.rail-links a:nth-last-child(3){display:none} }
@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:40px}
  .disc-feat{grid-template-columns:1fr}
  .hero{padding:52px 0 60px}
  .rail-note,.rail-sep{display:none}
  .rail-links a{display:none}
  .rail-cols{grid-template-columns:1fr}
  .rail-panel{right:16px;left:16px;width:auto}
  .mainnav{display:none;position:absolute;top:66px;left:0;right:0;background:#fff;
    border-bottom:1px solid var(--line);box-shadow:var(--sh-m);flex-direction:column;
    gap:0;margin:0;padding:8px 24px 16px}
  .mainnav.open{display:flex}
  .mainnav a{padding:11px 0;border-bottom:1px solid var(--line-2)}
  .burger{display:flex}
  .hdr .btn-primary{display:none}
}

/* ==========================================================================
   Screenshot figures — real captures keep their own proportions, empty
   slots fall back to a labeled placeholder at a fixed aspect ratio.
   ========================================================================== */
.shotfig{margin:0}
.shot .frame.real{aspect-ratio:auto;display:block;background:#fff}
.shot .frame.real img{position:static;width:100%;height:auto;object-fit:contain;display:block}
.gal.three{grid-template-columns:repeat(3,1fr)}
.gal.tight{gap:22px}

/* a plain two-column prose block, used for "what it is for" copy */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start}
.duo h3{font-size:1.18rem;margin-bottom:.6rem}
.duo p{color:var(--muted);font-size:.98rem}
.uses{list-style:none;display:grid;gap:.85rem;margin-top:1.2rem}
.uses li{position:relative;padding-left:1.9rem;color:var(--body);font-size:.97rem}
.uses li::before{content:"";position:absolute;left:0;top:.5em;width:11px;height:6px;
  border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(-45deg)}
.uses li b{color:var(--ink);font-weight:650}

@media (max-width:1040px){.gal.three{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.gal.three{grid-template-columns:1fr}.duo{grid-template-columns:1fr;gap:32px}}

/* numbered steps */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.step .n{width:34px;height:34px;border-radius:50%;background:var(--brand-t);color:var(--brand-d);
  border:1px solid var(--brand-l);display:grid;place-items:center;font-weight:700;font-size:.95rem;
  margin-bottom:14px}
.step h3{font-size:1.05rem;margin-bottom:.4rem}
.step p{color:var(--muted);font-size:.95rem}

/* four hairline facts, normal case */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:13px;overflow:hidden}
.facts div{background:#fff;padding:22px}
.facts b{display:block;color:var(--ink);font-size:.98rem;font-weight:650;margin-bottom:.3rem}
.facts span{color:var(--muted);font-size:.9rem}

@media (max-width:900px){.steps{grid-template-columns:1fr}.facts{grid-template-columns:1fr}}

/* inline code, for filters and path patterns */
code{font-family:"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;font-size:.88em;
  background:var(--bg-3);border:1px solid var(--line);border-radius:5px;
  padding:.08em .36em;color:var(--ink)}
.hero-facts b{color:var(--ink);font-weight:650}
.dcard h3{color:var(--ink)}

/* a three-cell requirements grid, where a site has three things to state */
.req.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){.req.three{grid-template-columns:1fr}}

/* ==========================================================================
   The brand lockup uses the application's own icon, so the site and the
   program on the desktop are recognizably the same product.
   ========================================================================== */
.brand-logo{width:32px;height:32px;flex:none;display:block}
.brand:hover .brand-name{color:var(--brand-d)}

/* Two calls to action in the header: Download free, and Buy a license. */
.hdr-cta{display:flex;align-items:center;gap:10px;flex:none;margin-left:20px}
.hdr-cta .btn{white-space:nowrap;margin-left:0}
.only-mobile{display:none}

/* a little breathing room before the menu collapses */
@media (max-width:1100px){
  .mainnav{gap:18px}
  .mainnav a{font-size:.9rem}
  .hdr-cta{margin-left:14px}
}
@media (max-width:900px){
  .hdr-cta{margin-left:0;gap:8px}
  .hdr-cta .btn-buy{display:none}          /* Buy moves into the menu */
  .hdr-cta .btn-primary{display:inline-flex;padding:.5rem .85rem;font-size:.87rem}
  .only-mobile{display:block}
}

/* ---------- legal pages (privacy notice, terms of use) -------------------- */
/* One column, generous measure - these are read, not scanned. */
.legalbody{max-width:72ch}
.legalbody h3{font-size:1.06rem;font-weight:700;color:var(--ink);
  margin:1.9rem 0 .55rem;padding-top:1.3rem;border-top:1px solid var(--line)}
.legalbody h3:first-child{margin-top:.4rem;padding-top:0;border-top:0}
.legalbody p{color:var(--muted);line-height:1.72;margin:0 0 .8rem}
.legalbody p b{color:var(--ink)}
.legalbody a{color:var(--brand);text-decoration:underline;text-underline-offset:2px}
@media (max-width:640px){
  .legalbody h3{font-size:1rem;margin-top:1.5rem;padding-top:1.1rem}
  .legalbody p{font-size:.95rem}
}

/* ---- family rail: every tool on one line (owner, 2026-10-20 - same as filesender.io) ----
   The tagline moved out of the bar into the All tools panel (.rail-panel-note) to make room.
   Links are a little tighter; Header Scanner (class "web") drops off first on narrower screens -
   it stays in the panel. Undo: /data/bu/filesender/rail-rollout-20261020/. */
.rail-links a{padding:.3rem .5rem}
.rail-panel-note{margin:0 0 14px;color:var(--muted);font-size:.84rem}
@media (max-width:1100px){ .rail-links a.web{display:none} }


/* ==========================================================================
   Shared additions for the web-tool sites (TextMe.im, Protected Chat,
   Header Scanner), appended after the family base. 2026-10-20.
   ========================================================================== */

/* a side card beside a working panel */
.sidecard{background:var(--bg-2);border:1px solid var(--line);border-radius:16px;padding:24px}
.sidecard h3{font-size:1.08rem;margin-bottom:.5rem}
.sidecard>p{color:var(--muted);font-size:.95rem}
.howto{list-style:none;display:grid;gap:14px;margin-top:16px}
.howto li{display:flex;gap:12px;align-items:flex-start;font-size:.94rem;color:var(--body)}
.howto .n{width:28px;height:28px;border-radius:50%;background:var(--brand-t);color:var(--brand-d);
  border:1px solid var(--brand-l);display:grid;place-items:center;font-weight:700;font-size:.85rem;flex:none;margin-top:1px}
.howto b{display:block;color:var(--ink);font-weight:650}
.sidecard .also{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:.9rem;color:var(--muted)}

/* a working panel's status line and hint */
.hint{color:var(--muted);font-size:.88rem;margin-top:14px}

/* the anatomy of a link: what the server receives, what stays in the browser */
.linkfig{margin:0 auto;max-width:820px}
.linkfig-url{font-family:"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;background:#fff;border:1px solid var(--line);
  border-radius:12px;padding:18px 20px;font-size:clamp(.86rem,1.6vw,1.02rem);overflow-wrap:anywhere;line-height:1.7}
.lf-srv{color:var(--muted)}
.lf-frag{color:var(--brand-d);font-weight:700;background:var(--brand-t);border:1px solid var(--brand-l);border-radius:6px;padding:1px 7px}
.linkfig-legend{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);
  border-radius:12px;overflow:hidden;margin-top:12px}
.linkfig-legend div{background:#fff;padding:16px 18px}
.linkfig-legend b{display:block;color:var(--ink);font-size:.95rem;font-weight:650;margin-bottom:.2rem}
.linkfig-legend span{color:var(--muted);font-size:.9rem}
.linkfig-legend .frag{background:var(--brand-t)}
.linkfig-legend .frag b{color:var(--brand-d)}
.linkfig-cap{text-align:center;color:var(--muted);font-size:.88rem;margin-top:12px}

/* small info marker with a hover or tap explanation (kept from the chat page, restyled) */
.showTooltip{position:relative;display:inline-block;vertical-align:middle;margin:0 4px;cursor:pointer;line-height:1}
.infoClass{display:inline-block;width:16px;height:16px;vertical-align:middle;opacity:.7}
.showTooltip:hover::after,.showTooltip:focus::after,.showTooltip.tooltip-active::after{
  content:attr(data-tip);position:absolute;top:1.6em;left:0;width:280px;max-width:80vw;background:var(--ink);color:#fff;
  font-size:.8rem;font-weight:500;line-height:1.5;padding:.6rem .75rem;border-radius:8px;box-shadow:var(--sh-m);z-index:999;white-space:normal}
@media (max-width:768px){
  .infoClass{width:20px;height:20px}
  .showTooltip:hover::after,.showTooltip:focus::after,.showTooltip.tooltip-active::after{
    position:fixed;top:auto;bottom:20px;left:50%;transform:translateX(-50%);width:90vw;max-width:90vw;font-size:.9rem}
}

/* hero for a working page: the panel sits under the headline, full width */
.hero.tool .wrap{display:block}
.hero.tool{padding:56px 0 64px}
.hero.tool h1{margin:16px 0 14px}
.hero.tool .lead{max-width:44rem;margin-bottom:0}
@media (max-width:900px){
  .linkfig-legend{grid-template-columns:1fr}
  .hero.tool{padding:40px 0 48px}
}


/* ==========================================================================
   Header Scanner — the analyser panel and the reference pages.
   Ids are bound by /assets/headerscanner/analyzeHeader.js, output.js and
   fileMime.js and must keep their names. Two columns on desktop: the header
   on the left, the notable findings (flags, countries, addresses) on the right.
   ========================================================================== */
.hero.tool.hs-hero{background:linear-gradient(180deg,var(--brand-t) 0%,#fff 62%)}
.hs-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.hs-chips span{display:inline-flex;align-items:center;gap:.45rem;font-size:.8rem;font-weight:650;border-radius:999px;padding:.3rem .8rem;border:1px solid transparent}
.hs-chips .sq{width:8px;height:8px;border-radius:2px;flex:none}
.hs-chips .c1{background:var(--c-net-t);color:var(--c-net);border-color:#d7daf6}.hs-chips .c1 .sq{background:var(--c-net)}
.hs-chips .c2{background:var(--c-share-t);color:var(--c-share);border-color:#f0e0bd}.hs-chips .c2 .sq{background:var(--c-share)}
.hs-chips .c3{background:var(--c-msg-t);color:var(--c-msg);border-color:#f3cdd7}.hs-chips .c3 .sq{background:var(--c-msg)}
.hs-chips .c4{background:var(--c-disk-t);color:var(--c-disk);border-color:#c6e6e0}.hs-chips .c4 .sq{background:var(--c-disk)}

.hs-tool{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);gap:22px;align-items:start;margin-top:26px;
  background:#fff;border:1px solid var(--line);border-top:4px solid var(--brand);border-radius:16px;padding:22px 24px 24px;box-shadow:var(--sh-m)}
.hs-main{min-width:0}
.hs-tool .cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;font-size:.86rem;font-weight:650;color:var(--ink);margin-bottom:8px}
.hs-tool .cap small{font-weight:500;color:var(--muted)}
#headerID,#srcID,#destID{width:100%;min-height:230px;font-family:"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;font-size:.84rem;line-height:1.55;
  color:var(--ink);background:var(--bg-2);border:1.5px solid var(--line);border-radius:11px;padding:14px;resize:vertical;box-sizing:border-box;
  transition:border-color .15s,box-shadow .15s,background .15s}
#headerID:focus,#srcID:focus,#destID:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-t);background:#fff}
#srcID,#destID{min-height:150px}
.hs-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:14px}
.hs-actions input[type=submit],.hs-actions input[type=button],.hs-actions button{appearance:none;-webkit-appearance:none;font:inherit;font-weight:600;
  font-size:.93rem;border-radius:9px;padding:.68rem 1.1rem;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink);min-height:44px;transition:background .15s}
.hs-actions input:hover,.hs-actions button:hover{background:var(--bg-2)}
.hs-actions .primary{background:var(--brand);color:#fff;border-color:transparent;box-shadow:0 1px 2px rgba(20,28,39,.16)}
.hs-actions .primary:hover{background:var(--brand-d)}
.hs-actions .sep{flex:1}
#loadingID{visibility:hidden;display:inline-block;margin:0}
#loadingID2{width:140px;height:8px;accent-color:var(--brand);vertical-align:middle}
#headerDivID{display:none;font-family:"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;font-size:.84rem;line-height:1.65;background:#fff;
  border:1px solid var(--line);border-radius:11px;padding:14px 16px;overflow-wrap:anywhere;word-wrap:break-word;min-height:120px;width:auto}

/* the right column: findings (hidden until an analysis runs) and the how-to */
.hs-side{display:grid;gap:14px;min-width:0}
#notablesID{display:none;background:linear-gradient(180deg,var(--brand-t),#fff 85%);border:1px solid var(--brand-l);border-radius:12px;padding:16px 18px;width:auto;margin:0}
#notablesID h3{font-size:1rem;margin-bottom:10px;color:var(--brand-d)}
#notablesDetailIPs{font-size:.86rem;line-height:1.5;color:var(--body)}
#notablesDetailIPs b{color:var(--ink)}
#notablesDetailIPs .fi{border-radius:2px;box-shadow:0 0 0 1px rgba(20,28,39,.12)}
.hs-help{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.hs-help h3{font-size:.95rem;margin-bottom:6px}
.hs-help>p{color:var(--muted);font-size:.88rem}
.couponcode{cursor:pointer}   /* NOT position:relative - the analyzer places tooltips with page coordinates */
.coupontooltip,.couponTip{display:none;position:absolute;background:#fffbe8;border:1px solid #e6dca8;color:var(--ink);padding:8px 10px;border-radius:8px;
  z-index:1000;max-width:380px;white-space:pre-wrap;font-size:.85rem;line-height:1.45;box-shadow:var(--sh-m);
  font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;font-weight:400}
.couponcode:hover .coupontooltip,.tipClass:hover .couponTip{display:block}
/* highlights can sit inside one another (an address inside a highlighted line): only the innermost one explains itself */
.couponcode:has(.couponcode:hover) .coupontooltip{display:none}
.couponcode:hover:not(:has(.couponcode:hover)) .coupontooltip{display:block}
.tipClass{color:var(--brand);cursor:pointer;font-weight:600}
.hs-howto{margin-top:10px;font-size:.88rem;color:var(--muted)}
.hs-howto summary{cursor:pointer;font-weight:600;color:var(--brand-d);list-style:none;display:inline-flex;align-items:center;gap:6px}
.hs-howto summary::-webkit-details-marker{display:none}
.hs-howto summary::before{content:"";width:6px;height:6px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
.hs-howto[open] summary::before{transform:rotate(45deg)}
.hs-howto ul{list-style:none;margin:10px 0 0;display:grid;gap:6px}
.hs-howto b{color:var(--ink)}

/* colour on the fact band and the tool cards */
.hs-band .b{border-top:3px solid var(--c-net)}
.hs-band .b:nth-child(2){border-top-color:var(--c-share)}
.hs-band .b:nth-child(3){border-top-color:var(--c-msg)}
.card .ic.t-net{background:var(--c-net-t);color:var(--c-net)}
.card .ic.t-share{background:var(--c-share-t);color:var(--c-share)}
.card .ic.t-msg{background:var(--c-msg-t);color:var(--c-msg)}
.card .ic.t-disk{background:var(--c-disk-t);color:var(--c-disk)}
.card .ic.t-web{background:var(--brand-t);color:var(--brand)}
a.card{text-decoration:none}
a.card:hover h3{color:var(--brand-d)}

/* the My IP page */
.ipcard{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:13px;overflow:hidden;margin-top:28px}
.ipcard div{background:#fff;padding:22px 24px;border-top:4px solid var(--brand)}
.ipcard div+div{border-top-color:var(--c-share)}
.ipcard b{display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);font-weight:700;margin-bottom:.4rem}
.ipcard .v{font-family:"Cascadia Mono",Consolas,Menlo,monospace;font-size:1.5rem;color:var(--ink);font-weight:700;overflow-wrap:anywhere}
.ipcard span{display:block;color:var(--muted);font-size:.9rem;margin-top:.4rem}
#statusToUser{margin-top:18px;color:var(--body);font-size:.95rem}
.hs-results{margin-top:18px}
.hs-results #notablesID{max-width:620px}

/* reference pages (facts, header codes, recommended tools) */
.prose{max-width:76ch}
.prose h2{font-size:1.5rem;margin:1.8rem 0 .6rem}
.prose h2:first-child{margin-top:0}
.prose h3,.prose h4{font-size:1.08rem;margin:1.5rem 0 .5rem}
.prose p{margin:0 0 .85rem;color:var(--body)}
.prose .lead-in{display:block;color:var(--brand-d);font-weight:700;margin-top:1.4rem;font-size:1.04rem;padding-left:12px;border-left:3px solid var(--brand-l)}
.prose img{border:1px solid var(--line);border-radius:10px;margin:8px 0 14px;height:auto}
.prose figure{margin:0 0 12px}
.prose .rightPart,.prose .img-right{float:right;max-width:44%;margin:0 0 12px 22px}
.prose .rightPart img,.prose .img-right img{margin:0}
.prose .img-left{float:left;max-width:45%;margin:4px 22px 12px 0}
.prose .aside-box{background:var(--bg-2);border:1px solid var(--line);border-left:4px solid var(--brand-l);border-radius:11px;padding:14px 18px;margin:12px 0 18px;font-size:.88rem;overflow-wrap:anywhere}
.prose .aside-box h4{margin:0 0 .4rem}
.prose .aside-box p{color:var(--body)}
.prose a{text-decoration:underline;text-underline-offset:2px}
.prose ul,.prose ol{margin:0 0 .9rem 1.4rem}
.prose li{margin-bottom:.35rem}
.prose .toc{float:right;margin:0 0 14px 22px;padding:14px 18px;background:var(--brand-t);border:1px solid var(--brand-l);border-radius:11px;font-size:.9rem;min-width:200px}
.prose .toc b{display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brand-d);margin-bottom:.5rem}
.prose .toc a{display:block;padding:3px 0;text-decoration:none;color:var(--brand-d)}
.prose mark,.prose span[style*="background-color"]{border-radius:4px;padding:0 4px}
.prose .clear{clear:both}
.toollist{list-style:none;display:grid;gap:12px;margin:0}
.toollist li{padding:14px 18px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--brand-l);border-radius:11px;font-size:.96rem;color:var(--body)}
.toollist a{font-weight:650;text-decoration:none}
.toollist a:hover{text-decoration:underline}

@media (max-width:900px){
  .hs-tool{grid-template-columns:1fr;padding:18px 16px 20px;gap:16px}
  #headerID,#srcID,#destID{min-height:170px;font-size:16px}
  .hs-actions input[type=submit],.hs-actions input[type=button]{flex:1 1 44%}
  .hs-actions .primary{flex-basis:100%}
  .hs-actions .sep{display:none}
  .prose .rightPart,.prose .img-right,.prose .img-left,.prose .toc{float:none;max-width:100%;margin:0 0 14px}
  .ipcard{grid-template-columns:1fr}
  .ipcard .v{font-size:1.2rem}
}

/* ---- compact pages (owner, 2026-10-20): tool pages other than the home page, and the reference pages ---- */
.hero.tool.compact{padding:26px 0 40px;background:#fff;border-bottom:0}
.hero.tool.compact h1{font-size:clamp(1.45rem,2.6vw,1.9rem);margin:0 0 8px;line-height:1.25}
.hero.tool.compact .lead{font-size:1rem;max-width:62rem}
.hero.tool.compact .hs-tool{margin-top:18px}
.hs-tool.mime{grid-template-columns:1fr 1fr;gap:16px 20px}
.hs-tool.mime .span2{grid-column:1/-1;margin-top:0}
.hs-tool.mime #srcID,.hs-tool.mime #destID{min-height:150px}
.sec.ref-sec{padding:28px 0 56px}
.head.compact{margin:0 0 18px;max-width:none}
.head.compact h2{font-size:clamp(1.45rem,2.6vw,1.9rem);margin-bottom:.35rem}
.head.compact p{font-size:.98rem}
.ref{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:28px 40px;align-items:start}
.ref.one{grid-template-columns:minmax(0,1fr)}
.ref .prose{max-width:none}
.ref-side{position:sticky;top:84px}
.ref-side .toc{float:none;margin:0;min-width:0}
.ref .prose p{margin:0 0 .65rem}
.ref .prose h2{font-size:1.3rem;margin:1.3rem 0 .45rem}
.ref .prose h3,.ref .prose h4{font-size:1.04rem;margin:1.1rem 0 .4rem}
.ref .prose .lead-in{margin-top:1.05rem}
.ref .prose img{max-width:min(100%,640px);margin:6px 0 10px}
.ref .prose .rightPart,.ref .prose .img-right{max-width:40%;margin:0 0 8px 20px}
.ref .prose .aside-box{margin:8px 0 12px;padding:12px 16px}
.ref .prose ul,.ref .prose ol{margin-bottom:.65rem}
.ref .prose li{margin-bottom:.2rem}
.ref .toollist{gap:8px}
.ref .toollist li{padding:10px 14px}
@media (max-width:900px){
  .hs-tool.mime{grid-template-columns:1fr}
  .ref{grid-template-columns:1fr;gap:18px}
  .ref-side{position:static;order:-1}
  .hero.tool.compact{padding:20px 0 30px}
  .sec.ref-sec{padding:20px 0 40px}
}

/* ---- reference pages, denser (owner, 2026-10-20) ---- */
.ref{grid-template-columns:minmax(0,1fr)}
.toc.inline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;float:none;margin:0 0 14px;padding:8px 12px;min-width:0}
.toc.inline b{display:inline;margin:0 4px 0 0;font-size:.74rem}
.toc.inline a{display:inline-block;padding:3px 11px;background:#fff;border:1px solid var(--brand-l);border-radius:999px;font-size:.84rem;color:var(--brand-d)}
.toc.inline a:hover{background:var(--brand-t)}
.ref .prose p{margin:0 0 .55rem}
.ref .prose .lead-in{margin-top:.95rem;margin-bottom:.15rem}
.defs{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:3px 14px;margin:4px 0 .85rem;font-size:.95rem;align-items:baseline}
.def{display:contents}
.def b{color:var(--ink);font-weight:650;white-space:nowrap}
.def b span[style*="background-color"]{border-radius:4px;padding:0 5px}
.def span{color:var(--body)}
.ref .prose img{max-width:min(100%,560px)}
.ref .prose .img-right{max-width:42%;margin:2px 0 10px 22px}
.cmd{margin:.25rem 0 .55rem 1.3rem}
.cmd li{margin-bottom:.1rem}
.ref .prose .aside-box{columns:2;column-gap:28px;font-size:.84rem;line-height:1.5}
.ref .prose .aside-box h4{column-span:all;margin:0 0 .4rem}
.ref .prose .aside-box p{break-inside:avoid-column;margin-bottom:.4rem}
@media (max-width:900px){
  .ref .prose .aside-box{columns:1}
  .defs{grid-template-columns:1fr;gap:2px 0}
  .def b{white-space:normal}
  .def span{display:block;margin-bottom:6px}
  .ref .prose .img-right{max-width:100%;float:none;margin:6px 0 10px}
}

/* ---- My IP: the address on the left, the location findings beside it (owner, 2026-10-20) ---- */
.ip-grid{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.5fr);gap:18px;margin-top:18px;align-items:stretch}
.ipcard.stacked{grid-template-columns:1fr;margin-top:0}
.ip-side{background:var(--bg-2);border:1px solid var(--line);border-radius:13px;padding:18px 20px;display:flex;flex-direction:column;gap:10px}
.ip-side h3{font-size:1rem;margin:0}
.ip-side #statusToUser{margin:0;font-size:.93rem}
.ip-side #loadingID{margin:0}
.ip-side #notablesID{background:none;border:0;padding:0;max-width:none}
.ip-side #notablesID h3{color:var(--ink);margin-bottom:6px}
@media (max-width:900px){.ip-grid{grid-template-columns:1fr}}

/* ---- samples and examples as plain text actions, so they are not mistaken for the real action (owner, 2026-10-20) ---- */
.hs-actions .link-btn{appearance:none;-webkit-appearance:none;background:none;border:0;color:var(--brand-d);font:inherit;font-size:.9rem;font-weight:600;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;padding:.4rem .3rem;min-height:40px;box-shadow:none}
.hs-actions .link-btn:hover{color:var(--brand);background:none}
.hs-examples{display:inline-flex;align-items:center;gap:2px;font-size:.88rem;color:var(--muted);flex-wrap:wrap}
.hs-examples .lbl{margin-right:4px}
.hs-note{margin:10px 0 0;font-size:.86rem;color:var(--muted);line-height:1.5}
.hs-tool.mime .hs-note{grid-column:1/-1;margin-top:0}
@media (max-width:900px){.hs-actions .link-btn{flex-basis:100%;text-align:left;padding-left:0}.hs-examples{flex-basis:100%}}

/* ---- input boxes must stand out from the white card (owner, 2026-10-20): white field, clearly darker border, slight
   inset. Id-level selectors, loaded after the site rules, so they beat #headerID / #descID / #textAreaurlID above. ---- */
.hs-tool #headerID,.hs-tool #srcID,.hs-tool #destID,.hs-tool #headerDivID,.tm-compose #descID,.pc-panel #textAreaurlID{
  background:#fff;border:1.5px solid #b6c3d1;box-shadow:inset 0 1px 3px rgba(20,28,39,.08)}
.hs-tool #headerID:focus,.hs-tool #srcID:focus,.hs-tool #destID:focus,.tm-compose #descID:focus,.pc-panel #textAreaurlID:focus{
  border-color:var(--brand);box-shadow:inset 0 1px 3px rgba(20,28,39,.06),0 0 0 3px var(--brand-t);background:#fff}
.hs-tool #headerID::placeholder,.hs-tool #srcID::placeholder,.hs-tool #destID::placeholder,.tm-compose #descID::placeholder{color:#7f8c9c}

/* ---- density (owner, 2026-10-20): less white space, especially at the top of every page ---- */
.hero{padding:34px 0 44px}
.hero h1{margin:12px 0 12px}
.hero .lead{margin-bottom:18px}
.hero .meta{margin-top:12px}
.hero-facts{margin-top:18px;padding-top:16px;gap:.45rem}
.hero.tool{padding:28px 0 42px}
.hero.tool h1{margin:10px 0 10px}
.hero.fs-top{padding-top:30px}
.sec{padding:52px 0}
.head{margin-bottom:28px}
.head h2{margin-bottom:.6rem}
.disc{padding:52px 0 60px}
.disc-note{margin-top:26px;padding-top:22px}
.band .b{padding:20px 24px}
footer.site{padding:40px 0 24px}
.f-top{padding-bottom:26px}
.f-bot{padding-top:18px}
.dl-panel{padding:38px 32px}
.lic-card{padding:26px 24px}
.card{padding:22px 20px}
.facts div{padding:18px 20px}
.steps{gap:22px}
.shot-cap{margin-top:8px}
.tm-panel{margin-top:20px}
.pc-panel{margin-top:18px}
.hs-tool{margin-top:18px}
.hs-chips{margin-top:12px}
.faq summary{padding:15px 54px 15px 22px}
.faq .a{padding:0 60px 16px 22px}
@media (max-width:900px){
  .hero{padding:26px 0 34px}
  .sec{padding:40px 0}
  .disc{padding:40px 0 48px}
  .head{margin-bottom:22px}
}

/* ---- phones (2026-10-20): headline, spacing and buttons sized for 360-430px screens; tablets keep the
   900px rules above. Appended to every site in the family. ---- */
@media (max-width:480px){
  .wrap{padding:0 16px}
  .hero h1{font-size:1.8rem;line-height:1.15}
  .hero.tool h1{font-size:1.7rem}
  .lead{font-size:1.04rem}
  .sec{padding:48px 0}
  .head{margin-bottom:30px}
  .head h2{font-size:1.45rem}
  .head p{font-size:.98rem}
  .band .b{padding:18px 16px}
  .cta{gap:10px}
  .cta .btn,.dl-actions .btn{width:100%}
  .pill{font-size:.78rem;padding:.35rem .85rem}
  .meta{font-size:.84rem}
  .facts div,.req div{padding:16px 18px}
  .cards{gap:14px}
  .card{padding:20px 18px}
  .faq summary{padding:15px 44px 15px 16px;font-size:.96rem}
  .faq .a{padding:0 16px 16px}
  .dcard{padding:22px 18px}
  .lic-card{padding:24px 20px}
  .tiers th,.tiers td,.tbl th,.tbl td{padding:11px 12px;font-size:.9rem}
  .tbl td:first-child{width:auto}
  .steps{gap:18px}
  footer.site{padding:40px 0 24px}
  .f-dir{grid-template-columns:1fr 1fr;gap:18px 14px}
  .f-bot{font-size:.82rem}
  .rail .wrap{gap:10px}
  .hdr .wrap{height:60px;gap:14px}
  .brand-name{font-size:1.06rem}
}
/* touch devices: no hover tooltips on the rail (they would stick after a tap) */
@media (hover:none){
  .rail-links [data-tip]::after{display:none}
}