/* TextMe.im — textme.im
   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:#2f6f8f; --brand-d:#245672; --brand-t:#eaf2f7; --brand-l:#c6dbe7;   /* TextMe.im */

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


/* ==========================================================================
   TextMe.im — the composer panel and the two overlays textme.js drives.
   Every id below is bound by /assets/textme/textme.js and must keep its name.
   ========================================================================== */
.tm-panel{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;margin-top:30px;align-items:start}
.tm-compose{background:#fff;border:1px solid var(--line);border-radius:16px;padding:26px;box-shadow:var(--sh-m)}
.tm-compose .cap{display:block;font-size:.86rem;font-weight:650;color:var(--ink);margin-bottom:8px}
#descID{width:100%;min-height:200px;resize:vertical;font:inherit;font-size:1.02rem;line-height:1.55;color:var(--ink);
  background:var(--bg-2);border:1.5px solid var(--line);border-radius:11px;padding:14px 16px;
  transition:border-color .15s,box-shadow .15s,background .15s}
#descID:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-t);background:#fff}
#descID::placeholder{color:var(--faint)}
.tm-go{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px}
#clickURLid{appearance:none;-webkit-appearance:none;font-family:inherit;min-height:48px}
.tm-status{display:block;min-height:1.5em;margin-top:12px;font-size:.93rem;font-weight:600;color:var(--brand-d)}
.tm-status:empty{margin-top:0;min-height:0}

/* --- "Encrypting and storing" overlay (ids: alertOverlay, progressBar, step1-3) --- */
.alert-overlay,.modal-overlay{position:fixed;inset:0;background:rgba(20,28,39,.55);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .25s;padding:16px}
.alert-overlay.active,.modal-overlay.active{opacity:1;pointer-events:all}
.alert-box,#modalPart{background:#fff;border-radius:14px;padding:26px 28px;width:min(540px,100%);box-shadow:var(--sh-l);
  transform:scale(.96);transition:transform .25s;position:relative;max-height:92vh;overflow:auto}
.alert-overlay.active .alert-box,.modal-overlay.active #modalPart{transform:none}
.alert-box{text-align:center;width:min(440px,100%)}
.alert-icon{width:72px;height:72px;margin:0 auto 20px}
.lock-icon{width:100%;height:100%;background:var(--brand);border-radius:50%;display:flex;align-items:center;justify-content:center;animation:tmPulse 2s ease-in-out infinite}
.lock-icon svg{width:36px;height:36px;fill:#fff}
.alert-title{font-size:1.35rem;margin-bottom:.5rem}
.alert-message{color:var(--muted);font-size:.97rem;margin-bottom:22px}
.progress-container{height:6px;background:var(--line);border-radius:3px;overflow:hidden;margin-bottom:14px}
.progress-bar{height:100%;background:var(--brand);border-radius:3px;transition:width .3s}
.progress-steps{display:flex;justify-content:space-between;font-size:.8rem;color:var(--faint)}
.progress-steps .step{display:flex;align-items:center;gap:6px;transition:color .3s}
.progress-steps .step.active{color:var(--brand-d);font-weight:600}
.step-dot{width:8px;height:8px;border-radius:50%;background:var(--line);transition:background .3s}
.progress-steps .step.active .step-dot{background:var(--brand)}
.progress-steps .step.completed .step-dot{background:#15804c}
@keyframes tmPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){.lock-icon{animation:none}}

/* --- "Your link is ready" modal (ids: modalOverlay, modalPart, labelAliasID, textAreaurlID, ...) --- */
.close-button{position:absolute;top:14px;right:14px;width:36px;height:36px;border:0;background:none;font-size:26px;line-height:1;
  color:var(--faint);border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.close-button:hover{background:var(--bg-2);color:var(--ink)}
.success-icon{width:44px;height:44px;margin:0 auto 12px;background:#15804c;border-radius:50%;display:flex;align-items:center;justify-content:center}
.success-icon svg{width:22px;height:22px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
#labelAliasID{display:block;text-align:center;font-size:1.08rem;font-weight:650;color:var(--ink);line-height:1.35;margin-bottom:10px}
.url-container{margin:8px 0 4px}
#textAreaurlID{width:100%;border:1.5px solid var(--line);border-radius:10px;font-family:"Cascadia Mono",Consolas,Menlo,monospace;
  font-size:.82rem;color:var(--ink);background:var(--bg-2);resize:none;padding:10px 12px;overflow:hidden;box-sizing:border-box;transition:border-color .2s}
#textAreaurlID:focus{outline:none;border-color:var(--brand)}
#urlCopiedID{display:block;min-height:22px;color:#15804c;font-weight:600;font-size:.86rem;padding-left:4px}
#helpText1{background:var(--bg-2);border:1px solid var(--line-2);border-radius:9px;padding:10px 14px;font-size:.86rem;line-height:1.55;color:var(--body);margin-bottom:14px}
#helpText1 i{color:var(--ink);font-style:normal;font-weight:650}
.button-container{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center}
.button-container input,.button-container button{appearance:none;-webkit-appearance:none;font:inherit;font-weight:600;font-size:.86rem;
  border-radius:8px;padding:.5rem .95rem;cursor:pointer;border:1px solid transparent;flex:0 0 auto;min-height:36px;line-height:1.2;transition:background .15s}
#delButtonID{margin-left:0}
#copyURLid{background:var(--brand);color:#fff}
#copyURLid:hover{background:var(--brand-d)}
#previewBtnID{background:#fff;color:var(--ink);border-color:var(--line)}
#previewBtnID:hover{background:var(--bg-2)}
#delButtonID{background:#fff;color:var(--muted);border-color:var(--line)}
#delButtonID:hover{background:var(--bg-2);color:var(--ink)}
#statusTextAlias{display:none;color:var(--brand-d);font-size:.9rem;margin-top:12px;padding:12px;background:var(--brand-t);border-radius:8px}
#statusTextAlias.show{display:block}

@media (max-width:900px){
  .tm-panel{grid-template-columns:1fr;gap:18px}
  .tm-compose{padding:20px 16px}
  #descID{min-height:160px;font-size:16px}
  .alert-box,#modalPart{padding:20px 16px}
  #labelAliasID{font-size:1rem}
  .button-container input,.button-container button{flex:1 1 45%}
  #delButtonID{flex-basis:100%}
}
@media (max-width:900px){
  #clickURLid{width:100%}
  .tm-go .meta{display:none}
}

/* ---- compact intro (2026-10-21): the headline and the facts sit on the panel's two columns, so the headline lines up
   with the compose box and the facts with the side card; the empty right half of the hero is used ---- */
.hero.tool.tm-top{padding-top:22px}
.tm-intro{display:grid;grid-template-columns:1.4fr 1fr;gap:10px 24px;align-items:start;margin:0 0 14px}
.tm-intro-main{padding-left:27px}   /* the compose box's border plus padding */
.hero.tool .tm-intro h1{font-size:clamp(1.55rem,2.6vw,1.95rem);line-height:1.15;letter-spacing:-.02em;margin:0 0 10px}
.tm-intro .pill{margin:0}
.tm-facts{list-style:none;margin:0;padding:8px 0 0 25px;display:grid;gap:.45rem}   /* the side card's border plus padding */
.tm-facts li{display:flex;gap:9px;align-items:flex-start;font-size:.94rem;color:var(--body);line-height:1.45}
.tm-facts svg{width:17px;height:17px;color:var(--brand);flex:none;margin-top:3px}
.tm-top .tm-panel{margin-top:0}
@media (max-width:900px){
  .tm-intro{grid-template-columns:1fr;gap:10px;margin-bottom:12px}
  .tm-intro-main{padding-left:17px}
  .hero.tool .tm-intro h1{font-size:1.5rem;margin-bottom:8px}
  .tm-facts{padding:2px 0 0 17px;gap:.35rem}
}

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

/* ===== product cards with a picture header (owner, 2026-10-25). Art: /assets/family/art/fam-<tool>.svg ===== */
.dcard .dpic{display:flex;align-items:center;justify-content:center;height:132px;margin:-28px -26px 18px;
  border-radius:13px 13px 0 0;overflow:hidden;background:var(--dp,var(--bg-2));border-bottom:1px solid var(--line-2)}
.dcard .dpic img{width:100%;height:100%;object-fit:contain;transition:transform .35s ease}
.dcard:hover .dpic img{transform:scale(1.04)}
.dpic.t-share{--dp:linear-gradient(160deg,var(--c-share-t),#fff 150%)}
.dpic.t-msg{--dp:linear-gradient(160deg,var(--c-msg-t),#fff 150%)}
.dpic.t-net{--dp:linear-gradient(160deg,var(--c-net-t),#fff 150%)}
.dpic.t-disk{--dp:linear-gradient(160deg,var(--c-disk-t),#fff 150%)}
.dpic.t-web{--dp:linear-gradient(160deg,var(--c-web-t),#fff 150%)}
@media (max-width:640px){.dcard .dpic{margin:-22px -18px 16px;height:118px}}
@media (prefers-reduced-motion:reduce){.dcard .dpic img{transition:none}}

/* ==========================================================================
   VISUAL BANDS for the web tools (owner, 2026-10-25 afternoon): the same picture bands as filesender.io.
   Pictures: sites/<site>/assets/art/*.svg. Picture steps, one band per point, the questions beside a
   picture and a closing band in the site's colors. Only vz- and cpic classes; nothing above is changed.
   ========================================================================== */
.vz-hero{position:relative;isolation:isolate}
.vz-hero::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(640px 340px at 4% 0%,rgba(43,107,189,.13),transparent 70%),
             radial-gradient(560px 320px at 98% 6%,rgba(122,92,240,.10),transparent 70%),
             radial-gradient(760px 300px at 55% 108%,rgba(18,163,138,.08),transparent 70%)}

/* how it works: three cards with a picture on top */
.vz-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.vz-step{background:#fff;border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:var(--sh-m)}
.vz-pic{aspect-ratio:9/5;display:flex;align-items:center;justify-content:center;background:var(--t,var(--brand-t))}
.vz-pic img{width:100%;height:100%;object-fit:contain}
.vz-pic.t-amber{--t:linear-gradient(160deg,#fef6e7,#fbe7c6)}
.vz-pic.t-blue{--t:linear-gradient(160deg,#f0f6fd,#dce9f9)}
.vz-pic.t-teal{--t:linear-gradient(160deg,#eefaf6,#d6f1e8)}
.vz-step-b{padding:20px 22px 24px}
.vz-n{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  background:var(--brand-t);color:var(--brand-d);font-weight:700;font-size:.85rem;margin-bottom:10px}
.vz-step h3{font-size:1.1rem;margin-bottom:.35rem}
.vz-step p{color:var(--muted);font-size:.95rem}

/* the bands */
.vz-band{--wash:#dce8fa;position:relative;border-top:1px solid var(--line-2);
  background:radial-gradient(58% 92% at 22% 50%,var(--wash) 0%,rgba(255,255,255,0) 72%),#fff}
.vz-band.rev{background:radial-gradient(58% 92% at 78% 50%,var(--wash) 0%,rgba(255,255,255,0) 72%),#fff}
.vz-band:last-child{border-bottom:1px solid var(--line-2)}
.vz-band.w-teal{--wash:#d2f0e6}
.vz-band.w-amber{--wash:#fbe9c8}
.vz-band.w-violet{--wash:#e5ddfd}
.vz-band.w-indigo{--wash:#dfe4fb}
.vz-in{max-width:var(--wrap);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.08fr 1fr;
  align-items:center;gap:56px;min-height:480px}
.vz-band.rev .vz-in{grid-template-columns:1fr 1.08fr}
.vz-band.rev .vz-art{order:2}
.vz-art{padding:40px 0}
.vz-art img{width:100%;max-width:600px;height:auto;margin:0 auto}
.vz-txt{max-width:480px;padding:44px 0}
.vz-txt h2{font-size:clamp(1.65rem,3vw,2.3rem);line-height:1.15;margin-bottom:.9rem;text-wrap:balance}
#how .head h2,.vz-faq .head h2,.vz-cta h2{text-wrap:balance}
.vz-txt p{font-size:1.07rem;margin-bottom:.9rem}
.vz-txt p.vz-sub{font-size:.96rem;color:var(--muted)}
.vz-txt code{font-size:.95em}
.vz-hl{font-style:normal;font-weight:650;color:var(--brand-d);
  background:linear-gradient(transparent 60%,var(--brand-l) 60%,var(--brand-l) 92%,transparent 92%)}
.vz-act{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:1.4rem}
.vz-txt .vz-meta{font-size:.86rem;color:var(--muted);margin:.9rem 0 0}
.vz-txt .vz-meta + .vz-meta{margin-top:.3rem}

/* questions beside an illustration */
.vz-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:52px;align-items:center}
.vz-faq-art img{width:100%;max-width:400px;height:auto;margin:0 auto}
.vz-faq .head{margin:0 0 22px;max-width:none}
.vz-faq .faq{max-width:none}

/* the closing band */
.vz-cta{position:relative;overflow:hidden;color:#fff;text-align:center;padding:80px 0;
  background:url(art/cta-pattern.svg) center/cover no-repeat,linear-gradient(118deg,#2b6bbd 0%,#3f5fd0 50%,#6a55e6 100%)}
.vz-cta h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.4rem);margin-bottom:.6rem}
.vz-cta p{color:rgba(255,255,255,.88);font-size:1.06rem;max-width:580px;margin:0 auto 1.7rem}
.vz-cta .vz-act{justify-content:center;margin-top:0}
.btn-white{background:#fff;color:var(--brand-d);box-shadow:0 8px 22px rgba(10,20,60,.2)}
.btn-white:hover{background:#eef4fd}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.6)}
.btn-ghost:hover{background:rgba(255,255,255,.2)}

@media (max-width:1040px){.vz-in{gap:36px}}
@media (max-width:900px){
  .vz-steps{grid-template-columns:1fr;max-width:520px;margin:0 auto}
  .vz-in,.vz-band.rev .vz-in{grid-template-columns:1fr;gap:0;min-height:0;padding-bottom:52px}
  .vz-band.rev .vz-art{order:0}
  .vz-art{padding:26px 0 6px;margin:0 -14px}
  .vz-art img{max-width:540px}
  .vz-band,.vz-band.rev{background:radial-gradient(95% 44% at 50% 24%,var(--wash) 0%,rgba(255,255,255,0) 76%),#fff}
  .vz-txt{max-width:none;padding:0}
  .vz-faq{grid-template-columns:1fr;gap:20px}
  .vz-faq-art img{max-width:280px}
  .vz-cta{padding:60px 0}
}

/* additions shared with the Windows app sites */
.vz-band.w-rose{--wash:#fce3ea}
.vz-band.w-green{--wash:#d7f1e3}
.vz-band.w-cyan{--wash:#d3eef5}
.vz-band.w-sky{--wash:#d8eaf8}
.vz-pic.t-violet{--t:linear-gradient(160deg,#f5f1fe,#e6ddfc)}
.vz-txt h3{font-size:1.08rem;margin:1.3rem 0 .1rem}
.vz-txt .uses{margin-top:.7rem}
.vz-txt .meta{margin-top:.9rem}
.vz-faq{align-items:start}
.vz-faq-art{position:sticky;top:110px;padding-top:28px}
/* the closing band in this site's colors */
.vz-cta{background:url(art/cta-pattern.svg) center/cover no-repeat,linear-gradient(118deg,var(--brand) 0%,var(--brand-d) 52%,var(--vz-cta2) 100%)}
@media (max-width:900px){.vz-faq-art{position:static;padding-top:0}}
:root{--vz-cta2:#3f51b5}

/* ---- compact bands (owner, 2026-10-25 evening: less empty space between the pictures, less scrolling).
   The pictures are cropped to what they show (band-*-tight.svg) and the bands lose their minimum height.
   Only pages whose bands carry vz-tight are affected. ---- */
.vz-band.vz-tight .vz-in{min-height:0;gap:40px}
.vz-band.vz-tight .vz-art{padding:12px 0}
.vz-band.vz-tight .vz-art img{max-width:480px}
.vz-band.vz-tight .vz-txt{padding:18px 0}
.vz-band.vz-tight .vz-txt h2{margin-bottom:.7rem}
.vz-band.vz-tight .vz-act{margin-top:1.1rem}
.vz-lead.vz-tight{padding:56px 0 18px}
.vz-shotband.vz-tight .vz-art{padding:26px 0}
@media (max-width:900px){
  .vz-band.vz-tight .vz-in,.vz-band.vz-tight.rev .vz-in{padding-bottom:34px}
  .vz-band.vz-tight.vz-withq .vz-in{padding-bottom:10px}
  .vz-band.vz-tight .vz-art{padding:14px 0 0}
  .vz-lead.vz-tight{padding:40px 0 12px}
}

/* the menu marks the section being read (app.js sets aria-current; owner request, 2026-10-26). The weight stays the
   same, so the menu does not shift as the mark moves down the page; a thin stroke makes the marked item look bolder. */
.mainnav a[aria-current],.mainnav a[aria-current]:hover{color:var(--brand-d);border-bottom-color:var(--brand);
  -webkit-text-stroke:.35px currentColor}
@media (max-width:900px){
  .mainnav a[aria-current],.mainnav a[aria-current]:hover{border-bottom-color:var(--line-2);background:var(--brand-t);
    box-shadow:inset 3px 0 0 var(--brand);padding-left:12px}
}

/* the family strip at the top (2026-10-26): two of its links now move into "All tools" below 1,140 px instead of
   1,080 px (between 1,101 and about 1,124 px "All tools" was past the right edge), and all of them below 920 px
   instead of 900 px (at 901 to 903 px it was a few pixels past the edge) */
@media (max-width:1140px){ .rail-links a:nth-last-child(2),.rail-links a:nth-last-child(3){display:none} }
@media (max-width:920px){ .rail-links a{display:none} }

/* the narrowest phones (2026-10-26): the composer's column may be narrower than the send button on one line, and the
   button's text wraps, so the page no longer scrolls sideways below about 370 px */
@media (max-width:420px){
  .tm-panel{grid-template-columns:minmax(0,1fr)}
  #clickURLid{white-space:normal}
}

/* the narrowest phones (2026-10-26): below about 350 px the menu button covered the end of the site name. The header
   items sit closer together, the logo and the name are a little smaller and the Download button a little narrower */
@media (max-width:360px){
  .hdr .wrap{gap:8px}
  .brand{gap:7px}
  .brand-logo{width:28px;height:28px}
  .brand-name{font-size:.96rem}
  .hdr-cta .btn-primary{padding:.45rem .55rem;font-size:.82rem}
}