/* ==========================================================================
   PICSIFT — PRODUCT ADDITIONS
   Loaded AFTER /assets/site.css, which is a byte-identical copy of the Syrinx
   Ventures stylesheet. site.css is the shared design and is never forked: read
   its PAGE SKELETON and MODULES comments first — everything here is an
   ADDITION for things a product site needs and a company front page does not
   (a product nameplate with a full-colour app icon, long-form legal prose, a
   FAQ, a data table).

   RULES THIS FILE OBEYS, inherited from site.css and not renegotiated:
     · Tokens only. No literal colours. In particular the brand amber #DC7607
       is 2.96:1 on the light stock and NEVER sets text there; var(--accent)
       already resolves to #9A4D00 in light and #DC7607 in dark.
     · The four rule weights are the whole vocabulary: --r-heavy 4px opens a
       section, --r-mid 2px separates peers, --r-hair 1px binds, --r-lede 2px
       amber is RESERVED for the lede and for product actions. Nothing here
       introduces a fifth weight or spends amber anywhere else.
     · Display face (Libre Baskerville) 400/700 only — it ships no 500/600 and
       font-synthesis-weight is off site-wide.
     · The display face's 700 is spent on exactly three things per page: the
       masthead nameplate, the product name in a section head, and the name
       again on black. Prose heads below are 400.
   ========================================================================== */

/* --------------------------------------------------------------------------
   THE APP-ICON MARK
   site.css's .mark is a MASK painted with background-color:var(--ink) — it
   turns sv-mark.png into an ink silhouette, which is right for a monochrome
   company mark and wrong for a full-colour app icon. So this is a real <img>,
   not a variant of .mark, and it diverges from .mark on exactly two counts:
   it is square (the icon is 1:1, the SV mark is 1024/766) and it is never
   recoloured on hover.
   Cap-height logic is the same em trick .mark uses: it sits on the text
   baseline inside .nameplate-name, so one font-size clamp drives both. The
   icon's art is inset inside its own bounding box, so it is set slightly
   taller than .mark's 0.77em cap height to read as the same optical size.
   -------------------------------------------------------------------------- */
.mark-app{
  display:inline-block;
  vertical-align:baseline;
  height:0.96em;
  width:0.96em;
  margin-inline-end:.24em;
  margin-bottom:-.09em;   /* sits the icon's optical foot on the baseline */
}
.band .mark-app{margin-bottom:-.06em;}

/* The nameplate target-size fix that lived here is now in site.css,
   which both sites share — it was never PicSift-specific. */

/* The colophon's quiet route to the publisher. It takes footer.colophon a
   from site.css UNCHANGED — same 700, same band ink, same amber underline —
   because that is the band's one link treatment and site.css's rule holds:
   accent is never the sole carrier of link-ness, so a link keeps its
   underline and its weight step. It is quiet by being the only link in the
   colophon, not by being disguised as text.
   All this adds is the Syrinx mark, riding at cap height on site.css's .mark
   and painted in the band's ink so it belongs to the words beside it. */
footer.colophon .pub .mark{
  background-color:var(--band-ink);
  height:0.9em;
}
footer.colophon .pub:hover .mark{background-color:var(--band-accent);}

/* --------------------------------------------------------------------------
   PROSE — long-form legal and support text.
   site.css styles a front page: headline, deck, columns, captions, chips. It
   has no generic h2/h3/p/ul/table because the company site never sets a
   thousand words of policy. This is that, and only that.
   The heading ladder is the site's: h1 is the page subject in the .lede, h2
   opens a clause (--r-mid, "peer from peer" — the clauses of a policy are
   exactly a peer set), h3 is a sub-head bound by a hair rule.
   -------------------------------------------------------------------------- */
.prose{
  padding-top:clamp(var(--d),3.4vw,var(--e));
  max-width:66ch;   /* 66ch of Alegreya Sans ≈ 92 characters — legal text runs
                       long and wants a wider measure than .measure's 55ch */
}
.prose > *:first-child{margin-top:0;}
.prose h2{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.15rem,1.02rem + .55vw,1.5rem);
  line-height:1.15;
  letter-spacing:-.014em;
  text-transform:uppercase;
  margin:clamp(var(--d),3.4vw,var(--e)) 0 var(--b);
  padding-top:var(--c);
  border-top:var(--r-mid) solid var(--ink);
}
.prose h3{
  font-family:var(--display);
  font-weight:400;
  font-size:.85rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-2);
  margin:var(--c) 0 .4rem;
  padding-bottom:.32rem;
  border-bottom:var(--r-hair) solid var(--rule);
}
.prose p{margin:0 0 var(--c);}
.prose ul,
.prose ol{margin:0 0 var(--c);padding-left:1.35rem;}
.prose li{margin-bottom:.35rem;}
.prose li::marker{color:var(--ink-2);}
.prose strong{font-weight:700;}
.prose a{
  color:var(--accent);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:.18em;
}
.prose a:hover{color:var(--ink);}
/* Warranty and liability clauses. The source sets them in sentence case with
   <strong>; they are not shouted, they are given the mat as a change of
   stock so they read as a block that has been set apart. Wording is the
   owner's and is reproduced verbatim. */
.prose .legal-caps{
  background:var(--plate);
  padding:var(--c) clamp(.9rem,2vw,1.3rem);
  border-top:var(--r-hair) solid var(--rule);
}

/* --------------------------------------------------------------------------
   TABLE — the network-connections table in the privacy policy.
   It has three columns and cannot compress below its content, so it gets its
   own scroll container. site.css sets body{overflow-x:hidden}, which would
   otherwise CLIP the overflow silently — hiding the failure rather than
   fixing it. The wrapper is the fix; the hidden body is not.
   -------------------------------------------------------------------------- */
.table-wrap{
  overflow-x:auto;
  margin:0 0 var(--c);
  border-top:var(--r-hair) solid var(--rule);
}
.prose table{
  border-collapse:collapse;
  width:100%;
  min-width:34rem;
  font-size:.96rem;
}
.prose th,
.prose td{
  text-align:left;
  vertical-align:top;
  padding:.6rem .9rem .6rem 0;
  border-bottom:var(--r-hair) solid var(--rule);
}
.prose thead th{
  font-family:var(--text);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-size:.82rem;
  border-bottom:var(--r-mid) solid var(--ink);
}
.prose td{color:var(--ink-2);}
.prose td:first-child{color:var(--ink);}

/* --------------------------------------------------------------------------
   FAQ — question and answer rows on the support page. Rows are peers in a
   list, so they are bound by hair rules, the binding weight. The question is
   the display face at 400 (the page's three 700s are already spent).
   -------------------------------------------------------------------------- */
.faq{
  list-style:none;
  margin:var(--c) 0 0;
  padding:0;
  max-width:66ch;
}
.faq > li{
  border-top:var(--r-hair) solid var(--rule);
  padding-block:var(--c);
}
.faq > li:first-child{border-top:var(--r-mid) solid var(--ink);}
.faq h3{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.02rem,.95rem + .3vw,1.18rem);
  line-height:1.3;
  letter-spacing:-.008em;
  margin:0 0 .5rem;
}
.faq p{margin:0 0 .6rem;}
.faq p:last-child{margin-bottom:0;}
.faq a{
  color:var(--accent);
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:.18em;
}
.faq a:hover{color:var(--ink);}