/* 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:#0e7490; --brand-d:#0b5a70; --brand-t:#e7f4f8; --brand-l:#c2e2ee;   /* Claim Disk */

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