/* Protected Chat — protected.chat
   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:#047857; --brand-d:#065f46; --brand-t:#e8f6f1; --brand-l:#b7e3d2;   /* Protected Chat */

  /* 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}
}


/* ==========================================================================
   Protected Chat — the start panel driven by /assets/protectedchat/pageofchat.js.
   Ids below are bound by that script and must keep their names.
   ========================================================================== */
.hero.pc-top .wrap{grid-template-columns:1.15fr 1fr;align-items:start}
.pc-panel{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px 26px;box-shadow:var(--sh-m);margin-top:26px}
.pc-step{display:flex;gap:14px;align-items:flex-start;margin-top:22px}
.pc-step:first-child{margin-top:0}
.pc-step .n{width:30px;height:30px;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:.9rem;flex:none;margin-top:1px}
.pc-step b{display:block;color:var(--ink);font-size:1.02rem;font-weight:650}
.pc-step p{color:var(--muted);font-size:.93rem;margin-top:3px}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:12px 0 0 44px}
#createNewLinkBtnID,#getNewLinkBtnID,#clickURLid,#copyURLid,#shareURLid{appearance:none;-webkit-appearance:none;font:inherit;font-weight:600;
  font-size:.95rem;border-radius:9px;padding:.7rem 1.2rem;cursor:pointer;border:1px solid transparent;min-height:46px;
  display:inline-flex;align-items:center;gap:.5rem;transition:background .15s,border-color .15s;-webkit-tap-highlight-color:transparent}
#createNewLinkBtnID,#clickURLid{background:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(20,28,39,.16)}
#createNewLinkBtnID:hover,#clickURLid:hover{background:var(--brand-d)}
#createNewLinkBtnID:disabled,#clickURLid:disabled{background:var(--bg-3);color:var(--faint);border-color:var(--line);box-shadow:none;cursor:not-allowed}
#getNewLinkBtnID,#copyURLid,#shareURLid{background:#fff;color:var(--ink);border-color:var(--line)}
#getNewLinkBtnID:hover,#copyURLid:hover,#shareURLid:hover{background:var(--bg-2);border-color:#cdd8e4}
#shareURLid svg{width:16px;height:16px}
#urlID{margin:14px 0 0 44px}
#instrHint{font-size:.93rem;color:var(--body);margin-bottom:6px}
#textAreaurlID{width:100%;min-height:74px;font-family:"Cascadia Mono",Consolas,Menlo,monospace;font-size:.86rem;color:var(--ink);
  background:var(--bg-2);border:1.5px solid var(--line);border-radius:10px;padding:12px;resize:none;margin:0 0 10px;box-sizing:border-box;
  transition:border-color .15s,box-shadow .15s,background .15s}
#textAreaurlID.copied-highlight{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-t);background:#fff3a8;color:#000}
#textAreaurlID::selection{background:var(--brand);color:#fff}
#urlCopiedID{color:#15804c;font-weight:600;font-size:.9rem}
#statusTextId{margin:14px 0 0 44px;padding:12px 16px;background:var(--brand-t);border:1px solid var(--brand-l);border-radius:10px;font-size:.92rem;color:var(--body)}
#statusTextId i{font-style:normal}
#statusTextId p{margin-top:6px}
#errMM{color:var(--c-msg);font-weight:600;margin-top:6px}
.pc-panel .hint{margin-left:44px}
#introTextID:empty{display:none}
@media (max-width:900px){
  .hero.pc-top .wrap{grid-template-columns:1fr}
  .pc-panel{padding:20px 16px}
  .btn-row,#urlID,#statusTextId,.pc-panel .hint{margin-left:0}
  #createNewLinkBtnID,#clickURLid{width:100%;justify-content:center}
}
.steps.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:900px){
  .steps.three{grid-template-columns:1fr}
  #textAreaurlID{font-size:16px}
  #copyURLid,#shareURLid{flex:1 1 40%;justify-content:center}
}

/* ---- 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}
}