/* File Sender — filesender.io
   The shared family stylesheet, with this site's accent, followed by the
   styles for the sending panel. One file, no build step. */

/* Claim Disk — claimdisk.com
   The shared design system for every site in the family. Only the four
   --brand values on the :root block below differ between sites.
   Built from IDEAS/idea-4-rail-plus-family-section.html. */

/* ==========================================================================
   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:#2b6bbd; --brand-d:#21559a; --brand-t:#eaf1fb; --brand-l:#cbdcf3;   /* File Sender */

  /* 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: long-form prose, set for reading rather than scanning.
   ========================================================================== */
.legal{max-width:760px;margin:0 auto}
.legal h1{font-size:clamp(1.7rem,3.2vw,2.2rem);margin-bottom:.5rem}
.legal .legal-sub{color:var(--muted);font-size:.95rem;margin-bottom:.25rem}
.legal .legal-sub+.legal-sub{margin-bottom:1.8rem}
.legal h2{font-size:1.16rem;margin:2.4rem 0 .8rem;padding-top:1.4rem;
  border-top:1px solid var(--line)}
.legal p{margin-bottom:1rem;font-size:1rem;line-height:1.75;color:var(--body)}
.legal ul{margin:0 0 1.2rem 0;padding-left:1.4rem}
.legal li{margin-bottom:.55rem;line-height:1.7;color:var(--body)}
.legal .legal-caps{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:0 9px 9px 0;padding:14px 18px;font-size:.93rem;line-height:1.65;color:var(--ink)}

/* the acceptance line above the download button */
.dl-accept{margin-top:1.3rem;font-size:.92rem;color:var(--muted)}
.dl-accept a{font-weight:600}

/* ==========================================================================
   filesender.io — the sending panel.
   The headline, the drop area and the download choice share one screen.
   ========================================================================== */
.fs-top{padding:34px 0 56px}
/* the shared stylesheet makes .hero .wrap a two-column grid for the split hero
   used on the other sites; this page is a single column, so undo it here */
.fs-top .wrap{display:block;max-width:1140px}
.fs-top h1{font-size:clamp(1.7rem,3.3vw,2.25rem);margin:0 0 10px;letter-spacing:-.022em}
.fs-top .lead{font-size:1.05rem;max-width:660px;margin:0 0 24px}

.fs-panel{display:grid;grid-template-columns:1.45fr .95fr;gap:22px;align-items:stretch}
.sendbox{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;
  box-shadow:var(--sh-m)}

/* #holder is the drag-and-drop target the page script binds to. It is a table
   in the original markup and stays one here; only its presentation changes. */
#holder{display:block;width:100%;border-collapse:collapse;border:2px dashed #c5d3df;
  border-radius:11px;background:var(--bg-2);transition:border-color .16s,background .16s}
#holder:hover,#holder.hover{border-color:var(--brand);background:var(--brand-t)}
#holder tbody,#holder tr{display:block}
#holder td{display:block;padding:0}
/* These three MUST stay scoped under #holder with the td. The reset above is
   (1,0,1); a bare .dz-main is (0,1,0) and a bare #descDropID is (1,0,0), so
   both lose to it no matter where they appear in the file - which is why the
   drop box sat flush against its own border. */
/* The icon and the heading share the first line; Browse files, the file name
   and the encryption note wrap to a full-width second line, so they start at
   the box's left edge under the icon rather than indented past it. */
.dz-row{display:flex;gap:0 18px;align-items:flex-start;flex-wrap:wrap}
.dz-head{flex:1 1 auto;min-width:0}
.dz-actions{flex:1 1 100%;margin-top:12px}
.dz-row .di{width:38px;height:38px;color:var(--brand);flex:none;margin-top:2px}
.dz-row .di svg{width:38px;height:38px}
.dz-row b{display:block;color:var(--ink);font-size:1.08rem;margin-bottom:.35rem}
.dz-row .sub{display:block;color:var(--muted);font-size:.9rem;margin-top:.5rem}
/* "Choose a file to transfer" is a <label> for the hidden file input. It was a
   white outlined pill that read as a tag rather than a control; now an actual
   button - filled, lifted, with hover and pressed states - so it is obviously
   clickable. Kept a step smaller than the upload button, which stays the main
   action once a file is in. */
.browse{display:inline-flex;align-items:center;gap:.45rem;background:#6a7f9c;
  color:#fff;border:1px solid #6a7f9c;border-radius:9px;padding:.6rem 1.15rem;
  font-size:.95rem;font-weight:650;cursor:pointer;line-height:1.2;
  box-shadow:0 1px 2px rgba(20,28,39,.14);
  transition:background .15s,transform .12s,box-shadow .15s}
.browse::before{content:"";width:16px;height:16px;flex:none;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7.5A1.5 1.5 0 0 1 4.5 6H9l2 2h8.5A1.5 1.5 0 0 1 21 9.5v8A1.5 1.5 0 0 1 19.5 19h-15A1.5 1.5 0 0 1 3 17.5z'/%3E%3C/svg%3E")}
.browse:hover{background:#56698a;border-color:#56698a;transform:translateY(-1px);
  box-shadow:0 2px 5px rgba(20,28,39,.18)}
.browse:active{transform:translateY(0);box-shadow:0 1px 2px rgba(20,28,39,.18)}
@media (hover:none) and (pointer:coarse){.browse{min-height:44px;padding:.7rem 1.25rem}}
#fileID{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
#fileNameLabel{display:inline-block;margin-left:.6rem;color:var(--ink);font-size:.9rem;
  font-weight:600;vertical-align:middle;word-break:break-all}
#holder td#descDropID{display:flex;align-items:center;gap:12px;padding:2px 16px 10px}
#holder td#descDropID::before,#holder td#descDropID::after{content:"";flex:1;
  height:1px;background:var(--line)}
#descDropID{color:var(--faint);font-size:.82rem;line-height:1.5;white-space:nowrap}
#holder td#fileList{padding:0 16px 12px;text-align:left}

/* The "or" divider is right for the empty state, but page.js retitles that same
   cell to "Dropped File for Transfer:" once a file is chosen - and a caption
   about the file you just picked should read as a plain left-aligned label, not
   sit centred between hairlines. #thisAddedFileID is appended at exactly that
   moment, so it is the state to key on. */
@supports selector(:has(*)){
  #holder:has(#thisAddedFileID) td#descDropID{display:block;text-align:left}
  #holder:has(#thisAddedFileID) td#descDropID::before,
  #holder:has(#thisAddedFileID) td#descDropID::after{display:none}
}
#fileList ul{list-style:none;margin:0;padding:0}
#fileList li{color:var(--body);font-size:.9rem;padding:.15rem 0}

.fld{margin-top:14px}
.fld label.cap{display:block;font-size:.85rem;font-weight:600;color:var(--body);margin-bottom:.35rem}
.fld .cnt{float:right;font-weight:400;color:var(--faint);font-size:.8rem}
.fld textarea,.fld input[type="text"]{width:100%;border:1px solid var(--line);border-radius:9px;
  padding:.7rem .85rem;font:inherit;font-size:.94rem;color:var(--ink);background:#fff;
  box-sizing:border-box;resize:vertical}
.fld textarea::placeholder,.fld input::placeholder{color:var(--faint)}
.fld textarea:focus,.fld input:focus{outline:none;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-t)}

.sendbox .go{display:flex;gap:12px;margin-top:16px;align-items:center;flex-wrap:wrap}
.sendbox .hint{color:var(--muted);font-size:.855rem;margin-top:12px}
.sendbox .hint b{color:var(--ink);font-weight:650}

/* progress, status and the resulting link — all driven by the page script */
/* ---------- the upload, which is the moment that matters ------------------ */
/* This block sits FIRST in the send panel, not after the buttons, so the instant
   a transfer starts it is at the top of the panel instead of below the fold.
   It stays display:none until page.js reveals it. */
#uploadResultSection{margin:0 0 18px;padding:16px 18px 18px;
  background:linear-gradient(180deg,var(--brand-t),#fff 70%);
  border:1px solid var(--brand-l);border-radius:14px;
  box-shadow:0 2px 10px rgba(20,28,39,.07)}

#progressbar{position:relative;height:34px;margin-top:26px;border-radius:999px;
  background:var(--bg-3);border:1px solid var(--line);overflow:hidden;
  box-shadow:inset 0 1px 3px rgba(16,24,40,.09)}

/* The percentage reads ABOVE the bar. Inside it, it would sit on the light
   track at 0% and on the dark fill at 90%, and no single colour works for both. */
/* Inside the bar, centred. It has to read on the pale empty track AND on the
   blue fill, so it is dark ink with a white halo rather than one flat colour. */
.progress-label{position:absolute;top:0;right:0;bottom:0;left:0;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.02rem;letter-spacing:.01em;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;z-index:55;
  text-shadow:0 1px 0 rgba(255,255,255,.85),0 0 4px rgba(255,255,255,.9)}

/* jQuery UI paints the fill; id + class beats the stock jquery-ui.css rule.
   The fill is deliberately SQUARE-ended. The track is the rounded shape and it
   clips (overflow:hidden), so the left end is rounded for free and the right end
   rounds off only when it reaches 100%. A pill radius on the fill itself is what
   made the growing tip look irregular: below about 34px wide the radius is
   clamped, so the cap changes shape as it grows, and near 100% a round cap never
   quite meets the track's own round end and leaves a sliver. */
#progressbar .ui-progressbar-value{position:relative;height:100%;margin:0;border:0;
  border-radius:0;background:linear-gradient(90deg,var(--brand),var(--brand-d));
  box-shadow:inset -2px 0 0 rgba(255,255,255,.38);
  transition:width .18s linear}
/* A fixed vertical gloss. It does not rescale as the fill grows, unlike a
   percentage-sized sweep, so the leading edge stays steady. */
#progressbar .ui-progressbar-value::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%)}

/* page.js starts the widget with value:false - indeterminate - while the browser
   encrypts. jQuery UI renders that as a FULL-WIDTH fill, which reads as
   "finished"; then the first real value arrives and the bar appears to run
   backwards from 100% to almost nothing. So this state is drawn as a narrow
   shuttle travelling along the track instead. A moving chunk is never read as a
   percentage, so there is no figure for it to run backwards from.
   Width is 30% of the track, so translating by 233% of its own width carries its
   right edge from 30% to 100%; `alternate` sends it back again. */
/* Full width while the browser encrypts, as asked. Deliberately SLATE, not the
   brand blue: a full bar in the finished colour would read as "done". Slate says
   "working, nothing to measure yet", and the switch to the blue fill then reads
   as real progress beginning rather than the bar losing ground.
   transition:none here, plus the snap in send.js, so the handover is instant. */
/* jQuery UI appends its OWN div inside the fill while indeterminate and paints
   it with a base64 barber-pole GIF from jquery-ui.css. It sat on top of
   everything set here, which is why changing these colours appeared to do
   nothing at all. Switch it off and paint the phase ourselves. */
#progressbar .ui-progressbar-overlay{display:none!important}

#progressbar.ui-progressbar-indeterminate{background:var(--bg-3);border-color:var(--line)}
#progressbar.ui-progressbar-indeterminate .ui-progressbar-value{width:100%!important;
  border-radius:0;box-shadow:none;transition:none;
  background:linear-gradient(90deg,#475569 0%,#64748b 45%,#7c8aa0 50%,#64748b 55%,#475569 100%);
  background-size:260% 100%;
  animation:fsWork 2.6s ease-in-out infinite}
#progressbar.ui-progressbar-indeterminate .ui-progressbar-value::after{display:none}
@keyframes fsWork{from{background-position:130% 0}to{background-position:-130% 0}}

/* A full bar reading "0.0%" contradicts itself, so the label says what is
   actually happening until there is a figure worth showing. */
#progressbar.ui-progressbar-indeterminate .progress-label{font-size:0}
#progressbar.ui-progressbar-indeterminate .progress-label::after{content:""}

@media (prefers-reduced-motion:reduce){
  #progressbar.ui-progressbar-indeterminate .ui-progressbar-value{animation:none}
}
#statusContainer{margin-top:10px}
/* pre-line so the \n in the status strings renders as a real break. Using a
   literal newline rather than <br> keeps the text settable with textContent,
   which is what setStatus() compares against to avoid clobbering page.js's
   own error and success messages. */
#statusTextId{color:var(--muted);font-size:.9rem;white-space:pre-line}
#urlID{margin-top:14px}
/* the link box and its controls are styled further down, in one place */
#userInfoSpan,#cancelUploadBtn{margin-left:.6rem;font-size:.9rem;color:var(--muted)}

/* the page script writes .prominent-button controls; give them the site's buttons */
/* #copyURLid and #clickURLid are <input type="submit">; #newUploadID is a
   <button>. inline-flex centres a button's child nodes, but an input's value is
   not a child node, so the two derive different heights from identical padding -
   which is exactly why the rows did not line up. A shared min-height and a
   stripped native appearance make them measure the same. */
.prominent-button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:inherit;font-weight:600;font-size:.97rem;line-height:1.2;border-radius:9px;
  padding:.72rem 1.35rem;border:1px solid transparent;cursor:pointer;
  min-height:46px;box-sizing:border-box;text-align:center;
  -webkit-appearance:none;appearance:none;
  background:var(--brand);color:#fff;box-shadow:0 1px 2px rgba(20,28,39,.16)}
.prominent-button:hover{background:var(--brand-d)}
#btnClear,#copyURLid,#clickURLid{background:#fff;color:var(--ink);border-color:var(--line);
  box-shadow:none}
#btnClear:hover,#copyURLid:hover,#clickURLid:hover{background:var(--bg-2);border-color:#cdd8e4}

/* the choice, beside the drop area and beside the upload button */
.sidecard{background:linear-gradient(180deg,var(--brand-t),#fff 62%);border:1px solid var(--brand-l);
  border-radius:14px;padding:22px;display:flex;flex-direction:column;height:100%}
.sidecard .or{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--brand-d);margin-bottom:.6rem}
.sidecard h3{font-size:1.06rem;line-height:1.3;margin-bottom:.55rem}
.sidecard>p{color:var(--body);font-size:.92rem;margin-bottom:.85rem}
.sidecard ul{list-style:none;display:grid;gap:.85rem;margin:0 0 1.3rem}
.sidecard li{position:relative;padding-left:1.55rem}
.sidecard li::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:5px;
  border-left:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(-45deg)}
.sidecard li b{display:block;color:var(--ink);font-weight:650;font-size:.93rem;line-height:1.4}
.sidecard li span{display:block;color:var(--muted);font-size:.855rem;line-height:1.5;margin-top:.12rem}
.sidecard .btn{margin-top:auto;width:100%}

/* the phone pickers from the original page */
.mobile-picker-container{display:none;gap:8px;margin-top:12px;flex-wrap:wrap}
.mobile-file-input{display:none}
.mobile-picker-btn{display:inline-flex;align-items:center;gap:7px;background:#fff;
  border:1px solid var(--line);border-radius:8px;padding:.5rem .85rem;font:inherit;
  font-size:.88rem;font-weight:600;color:var(--ink);cursor:pointer}
.mobile-selected-file{display:none;margin-top:10px;font-size:.9rem;color:var(--ink)}
.mobile-selected-file .file-size{color:var(--muted);margin-left:.4rem}
.toast-container{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:200}

.fs-legal{max-width:760px}

@media (max-width:980px){.fs-panel{grid-template-columns:1fr}}
@media (max-width:760px){
  .mobile-picker-container{display:flex}
  .dz-row{flex-direction:column;gap:12px}
}

/* phone picker button internals, from the original markup */
.picker-icon{font-size:1rem;line-height:1}
.picker-text{white-space:nowrap}
.file-icon{margin-right:.35rem}
.file-name{font-weight:600;word-break:break-all}

/* ---------- screenshots carried over from the old send-by-app page ---------- */
/* Two of these are animations, so they are capped in width and lazy-loaded;
   on a phone they stack and never exceed the viewport. */
.fs-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:26px;margin-top:34px;align-items:start}
.fs-shot{margin:0}
.fs-shot-frame{background:#fff;border:1px solid var(--line);border-radius:13px;
  padding:14px;box-shadow:var(--sh-s,0 1px 2px rgba(16,24,40,.06));
  display:flex;align-items:center;justify-content:center;overflow:hidden}
.fs-shot-frame img{display:block;width:100%;height:auto;max-width:100%;
  border-radius:8px}
.fs-shot figcaption{font-size:.86rem;color:var(--muted);text-align:center;
  margin-top:11px;line-height:1.5}
@media (max-width:640px){
  .fs-shots{grid-template-columns:1fr;gap:20px;margin-top:26px}
  .fs-shot-frame{padding:10px}
  .fs-shot figcaption{font-size:.83rem}
}

/* ---------- touch devices: drag-and-drop is not available ------------------ */
/* Below 760px the page script already swaps in the gallery/camera/files
   pickers. Three things still needed fixing for a phone:
     1. the drop area invited a gesture that does not exist there
     2. the picker buttons were ~30px tall, under the 44-48px that Apple and
        Android both recommend for a touch target
     3. the three buttons wrapped awkwardly at narrow widths            */
@media (max-width:760px){
  /* the area becomes a label for the pickers, not a drop target */
  #holder{cursor:default}
  #holder .dz-row b{font-size:0}
  #holder .dz-row b::after{content:"Choose a file to send";font-size:1.02rem;font-weight:700}
  #holder .browse{display:none}          /* the Browse Files picker replaces it */

  .mobile-picker-container{flex-direction:column;gap:10px;width:100%;margin-top:14px}
  .mobile-picker-btn{width:100%;min-height:48px;justify-content:center;
    font-size:.97rem;padding:.8rem 1rem;border-radius:10px}
  .mobile-picker-btn:active{background:var(--brand-t);border-color:var(--brand)}
  .picker-icon{font-size:1.15rem}

  /* every primary control comfortably tappable */
  .sendbox .btn,.sendbox button,.sidecard .btn{min-height:48px}
  #descID{font-size:16px}                /* 16px stops iOS zooming on focus */
  #notificationEmail{font-size:16px;min-height:44px}
}
/* nothing may push the page sideways on a narrow screen */
@media (max-width:640px){
  html,body{overflow-x:hidden}
  #holder,.sendbox,.sidecard,.fs-shot-frame{max-width:100%}
  .fs-shot-frame img{height:auto}
}

/* ---------- any touch device, whatever its width ------------------------- */
/* Width alone is the wrong test: an iPad in portrait is 768px, just above the
   760px breakpoint, so it would have been given a drag-and-drop area it cannot
   use. Coarse pointer + no hover is the actual question - does this person have
   a finger rather than a mouse. */
@media (hover:none) and (pointer:coarse){
  .mobile-picker-container{display:flex;flex-direction:column;gap:10px;width:100%;margin-top:14px}
  .mobile-picker-btn{width:100%;min-height:48px;justify-content:center;
    font-size:.97rem;padding:.8rem 1rem;border-radius:10px}
  .mobile-picker-btn:active{background:var(--brand-t);border-color:var(--brand)}
  #holder{cursor:default}
  #holder .dz-row b{font-size:0}
  #holder .dz-row b::after{content:"Choose a file to send";font-size:1.02rem;font-weight:700}
  #holder .browse{display:none}
  .sendbox .btn,.sendbox button,.sidecard .btn{min-height:48px}
  #descID,#notificationEmail{font-size:16px}   /* 16px stops iOS zooming on focus */
}
/* a tablet in landscape has room for two columns, so only the controls change */
@media (hover:none) and (pointer:coarse) and (min-width:900px){
  .mobile-picker-container{flex-direction:row;flex-wrap:wrap}
  .mobile-picker-btn{width:auto;flex:1 1 30%}
}

/* ---------- the finished link, after a successful upload ------------------ */
/* page.js writes the URL into a <textarea> and sizes it with
   height = scrollHeight, so it has to stay a form field (funcCopyURLid reads
   .val()). What made it look like a scrolled box: no overflow:hidden - and
   scrollHeight excludes the border, so the content sat 2px short and a
   scrollbar appeared - plus a proportional font for what is a URL.
   Presentation only; no markup, ids or scripts are touched. */
#textAreaurlID{width:100%;border:1px solid var(--brand-l);border-radius:9px;
  padding:.7rem .85rem;background:var(--brand-t);color:var(--ink);
  box-sizing:border-box;resize:none;overflow:hidden;           /* no scrollbar */
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.85rem;line-height:1.55;word-break:break-all;display:block}
#textAreaurlID:focus{outline:2px solid var(--brand);outline-offset:1px}

#urlButtonsContainer{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
#copyURLid{background:var(--brand);border-color:var(--brand);color:#fff}
#copyURLid:hover{background:var(--brand-d);border-color:var(--brand-d)}
/* the secondary action, but not colourless - tinted rather than plain white */
#clickURLid{background:var(--brand-t);border-color:var(--brand-l);color:var(--brand-d)}
#clickURLid:hover{background:var(--brand-l);border-color:var(--brand);color:var(--brand-d)}
#urlCopiedID{display:block;margin-top:10px;color:#166534;font-size:.88rem;font-weight:650}
#newUploadContainer{margin-top:16px}

/* The card chrome must appear only once the link is really there.
   #uploadResultSection is revealed when the upload STARTS (page.js:146), so
   keying off that would draw an empty box for the whole transfer. page.js sets
   an inline height on the textarea at the moment it fills it in, and at no
   other time - that is the honest signal. Browsers without :has() simply get
   the plain (already tidy) field. */
@supports selector(:has(*)){
  #urlID:has(#textAreaurlID[style*="height"]){
    margin-top:16px;background:#fff;border:1px solid var(--line);
    border-radius:12px;padding:16px 16px 14px}
  #urlID:has(#textAreaurlID[style*="height"])::before{
    content:"Your download link";display:block;font-weight:700;
    color:var(--ink);font-size:.95rem;margin-bottom:.5rem}
  /* keep Send another file on the same left edge as Copy the link */
  #uploadResultSection:has(#textAreaurlID[style*="height"]) #newUploadContainer{padding-left:16px}
}

@media (max-width:640px){
  #textAreaurlID{font-size:.8rem}
  #urlButtonsContainer{flex-direction:column}
  #urlButtonsContainer .prominent-button,#newUploadID{width:100%;min-height:48px}
  @supports selector(:has(*)){
    #urlID:has(#textAreaurlID[style*="height"]){padding:14px 13px 12px;border-radius:10px}
    #uploadResultSection:has(#textAreaurlID[style*="height"]) #newUploadContainer{padding-left:13px}
  }
}

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

/* ---------- dragging a file over the page --------------------------------- */
/* page.js adds .dropHighlight to #holder on dragover but the class was never
   styled, so dragging looked like nothing was happening. It also only clears it
   on mouseleave, and the window-level dragover/drop listeners it registers are
   null - so a file dropped anywhere else made the browser navigate away to it.
   The script in the template fixes the clearing and the stray drop; this is the
   look. */
#holder.dropHighlight{border-color:var(--brand);border-style:solid;
  background:var(--brand-t);
  box-shadow:0 0 0 4px var(--brand-l),0 12px 30px rgba(20,28,39,.14)}
#holder.dropHighlight .di{transform:scale(1.06)}
#holder .di{transition:transform .16s ease}

/* the whole page dims so the target is unmistakable, wherever the pointer is */
/* pointer-events:none matters: the veil is decoration only, so a drop still
   reaches whatever is underneath. #holder therefore keeps handling its own
   drops through page.js, and only drops outside it need forwarding. */
.fs-dragveil{position:fixed;inset:0;z-index:400;display:none;pointer-events:none;
  align-items:center;justify-content:center;padding:16px;
  background:rgba(12,34,48,.62);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
html.fs-drag .fs-dragveil{display:flex}
.fs-dragcard{width:100%;max-width:min(1180px,92vw);text-align:center;color:#fff;
  padding:74px 56px;border-radius:20px;
  border:3px dashed rgba(255,255,255,.7);background:rgba(255,255,255,.08);
  animation:fsVeilIn .16s ease-out}
@keyframes fsVeilIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
.fs-dragcard svg{width:104px;height:104px;stroke:#fff;fill:none;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;animation:fsBob 1.4s ease-in-out infinite}
@keyframes fsBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.fs-dragcard h3{margin:1rem 0 .6rem;font-size:2.9rem;font-weight:800;color:#fff;letter-spacing:-.01em}
.fs-dragcard p{margin:0;font-size:1.25rem;line-height:1.55;color:rgba(255,255,255,.9)}
.fs-dragstat{display:inline-block;margin-top:24px;padding:.6rem 1.35rem;border-radius:999px;
  background:rgba(255,255,255,.18);font-weight:700;font-size:1.1rem;color:#fff}
.fs-dragstat.warn{background:#b45309}

@media (max-width:640px){
  .fs-dragcard{padding:38px 22px;border-radius:16px}
  .fs-dragcard h3{font-size:1.9rem}
  .fs-dragcard p{font-size:1.02rem}
  .fs-dragcard svg{width:72px;height:72px}
}
@media (prefers-reduced-motion:reduce){
  .fs-dragcard,.fs-dragcard svg{animation:none}
  #holder .di{transition:none}
}

/* ---------- after a successful transfer ----------------------------------- */
/* page.js hides only its own buttons on success, leaving the drop box, the
   Browse control, the message field and the hint still inviting a file that has
   already been sent. send.js adds .fs-done to the panel; this clears them. */
/* Under way: the drop box, the Browse control, the message field and the side
   card all offer choices that no longer apply. The button row stays - it still
   carries Cancel upload. */
#outerDiv.fs-busy #holder,
#outerDiv.fs-busy .fld,
#outerDiv.fs-busy .hint,
#outerDiv.fs-busy #rightPane{display:none}
/* Finished: the button row goes too. */
#outerDiv.fs-done .go{display:none}
/* with the side card gone the send box has the panel to itself */
#outerDiv.fs-busy .sendbox{max-width:100%;flex:1 1 100%}

/* ---------- Cancel upload ------------------------------------------------- */
/* It is a <span>, and it looked like inert grey text next to the status line -
   so even once wired it would not read as something you can press. send.js adds
   .fs-cancel and the role/tabindex that make it a real control. */
#cancelUploadBtn.fs-cancel{display:inline-flex;align-items:center;gap:.4rem;
  margin-left:.75rem;padding:.4rem .8rem;border:1px solid var(--line);border-radius:8px;
  background:#fff;color:var(--muted);font-size:.88rem;font-weight:650;cursor:pointer;
  text-decoration:none;transition:background .15s,border-color .15s,color .15s}
#cancelUploadBtn.fs-cancel:hover{background:var(--bg-2);border-color:#cdd8e4;color:var(--ink)}
#cancelUploadBtn.fs-cancel:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (hover:none) and (pointer:coarse){
  #cancelUploadBtn.fs-cancel{min-height:44px;padding:.55rem 1rem;font-size:.95rem}
}

/* ---------- the Cancel row, while a transfer runs ------------------------- */
/* #userInfoSpan is empty but still takes a flex slot plus a margin, and both it
   and the button carry their own margin-left, so Cancel ended up ~34px in from
   the edge while the progress bar above it starts at the result card's 18px.
   Drop the empty item and the margins, and indent the row to match the bar, so
   the two line up. */
#outerDiv.fs-busy .sendbox .go{padding-left:18px;margin-top:12px}
#outerDiv.fs-busy #userInfoSpan{display:none}
#outerDiv.fs-busy #cancelUploadBtn.fs-cancel{margin-left:0}
@media (max-width:640px){
  #outerDiv.fs-busy .sendbox .go{padding-left:13px}
}

/* ---------- the "no file selected" prompt --------------------------------- */
/* Replaces a browser alert(), so it has to earn the interruption: colour, an
   icon, and the suggestion as a button rather than a bare link. */
.fs-notice{display:flex;align-items:flex-start;gap:13px;margin:16px 0 0;
  padding:15px 16px;border-radius:12px;border:1px solid;
  box-shadow:0 2px 10px rgba(20,28,39,.07);animation:fsNoticeIn .18s ease-out}
@keyframes fsNoticeIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.fs-notice-ic{flex:none;display:flex;width:24px;height:24px;margin-top:1px}
.fs-notice-ic svg{width:24px;height:24px}
.fs-notice-body{flex:1;min-width:0;font-size:.94rem;line-height:1.55}
.fs-notice-body b{display:block;font-weight:750;margin-bottom:.2rem}
.fs-notice-x{flex:none;background:none;border:0;cursor:pointer;font-size:1.3rem;
  line-height:1;padding:0 2px;opacity:.55;color:inherit}
.fs-notice-x:hover{opacity:1}

/* the file prompt: inviting rather than scolding - it is a signpost, not an error */
.fs-notice-pick{background:linear-gradient(180deg,var(--brand-t),#fff 78%);
  border-color:var(--brand-l);color:var(--ink)}
.fs-notice-pick .fs-notice-ic{color:var(--brand)}
.fs-notice-pick .fs-notice-body span{color:var(--muted)}
.fs-notice-cta{display:inline-block;margin:0 .15rem;padding:.16rem .6rem;border-radius:7px;
  background:var(--brand);color:#fff;font-weight:650;text-decoration:none;
  white-space:nowrap;transition:background .15s}
.fs-notice-cta:hover{background:var(--brand-d);color:#fff}
.fs-notice-cta:focus-visible{outline:2px solid var(--brand-d);outline-offset:2px}

/* the message-length prompt: a genuine correction, so amber */
.fs-notice-warn{background:#fffbeb;border-color:#fde68a;color:#7c4a03}
.fs-notice-warn .fs-notice-ic{color:#b45309}
.fs-notice-warn .fs-notice-body span{color:#92600a}

@media (max-width:640px){
  .fs-notice{padding:13px 13px;gap:11px}
  .fs-notice-body{font-size:.9rem}
  .fs-notice-cta{display:inline-block;margin-top:.3rem}
}
@media (prefers-reduced-motion:reduce){.fs-notice{animation:none}}

/* ---------- the file name, once ------------------------------------------- */
/* page.js writes the chosen file name into TWO places on both the drop and the
   Browse path: #fileNameLabel inline beside the Browse control, and a <li>
   appended into #fileList beneath #descDropID - which it simultaneously
   retitles to "Dropped File for Transfer:". Showing both reads as a stutter.
   The #fileList one is kept, because the caption above it is what page.js
   rewrites; hiding that one instead would leave the caption with nothing under
   it. This is presentation only - #fileNameLabel still exists and page.js
   still writes to it, so nothing in the engine changes. */
#fileNameLabel{display:none}

/* ---------- the finished bar ---------------------------------------------- */
/* Driven by a class send.js sets when the fill reaches 100%, NOT by jQuery UI's
   own .ui-progressbar-complete - that depends on the widget's internals lining
   up exactly and it was not showing. We already detect that moment to snap the
   transition, so setting a class there costs nothing and is certain.
   The wording sits INSIDE the bar, centred on the green, at a size that can
   actually be read - the percentage above the bar is replaced, not duplicated. */
#progressbar.fs-complete{border-color:#a7d8b4}
#progressbar.fs-complete .ui-progressbar-value{
  background:linear-gradient(90deg,#15803d,#0f6a32);box-shadow:none}
#progressbar.fs-complete .ui-progressbar-value::after{display:none}
#progressbar.fs-complete .progress-label{
  top:0;right:0;bottom:0;left:0;display:flex;align-items:center;
  justify-content:center;text-align:center;
  font-size:1.05rem;font-weight:700;color:#fff;letter-spacing:.01em;
  text-shadow:0 1px 2px rgba(16,24,40,.35)}

/* ---------- the drop area is the point of the page ------------------------ */
/* It was a modest strip under the heading. Given a minimum height it reads as a
   target rather than a form field, which is what a drag-and-drop area needs to
   look like before anyone will drop on it. The touch heading is bumped to match
   its pointer-device counterpart. */
@media (hover:none) and (pointer:coarse){
  #holder .dz-row b::after{font-size:1.02rem}
}
@media (max-width:640px){
}

/* ---------- drop area: the last of the sizing ----------------------------- */
/* Taller, and the send box now takes ~70% of the panel rather than ~60%, so the
   target grows in both directions rather than just downwards. */
#holder td.dz-main{padding:14px 16px 12px}

/* page.js builds the file-name <li> with an INLINE style="margin-left: 10px",
   which no selector can beat without !important. That 10px was the entire
   misalignment between the caption above and the file name below - both cells
   already share a 16px inset. */
#holder td#fileList li{margin-left:0!important}

@media (max-width:640px){
}

/* ---------- cancelling ---------------------------------------------------- */
/* window.stop() aborts the in-flight requests, which page.js reads as a network
   failure and answers with "Resume upload". That is wrong after a deliberate
   cancel, and it flashed on screen for the moment before the reload. !important
   because page.js reveals it with jQuery .show(), which writes an inline style. */
#outerDiv.fs-cancelling #resumeButtonID{display:none!important}