/* ============================================================
   FRND — policy pages + the Trust & Safety V2 sections
   Figma: GUIDELINES / PRIVACY POLICY / TERMS OF USE / PAYMENT
   POLICY  ·  V1  (page 912:2), and SAFETY · V2 (1260:2).

   Everything leans on frnd.css: the --s design-pixel, the
   palette, .sticker, .eyebrow, .chip. Nothing here redefines a
   token.

   Two rules run through the whole file:
     · a PROHIBITION never looks like a feature — the ban list
       is a pink-soft card with a pink ✕ on every line
     · a TABLE stops being a table below 1040 and becomes one
       labelled card per row; a two-column legal table at 390px
       is unreadable
   ============================================================ */

/* ============================================================
   A · POLICY PAGE SHELL
   ============================================================ */

/* ── hero ─────────────────────────────────────────────────── */
.phero{
  position:relative; z-index:2; overflow:hidden;
  background:var(--pink); color:#fff;
  padding:calc(232 * var(--s)) calc(150 * var(--s)) calc(72 * var(--s));
}
.phero__glow{
  position:absolute; left:calc(780 * var(--s)); top:calc(-220 * var(--s));
  width:calc(1000 * var(--s)); height:calc(1000 * var(--s)); border-radius:50%;
  background:#FF5E9A; opacity:.5; filter:blur(calc(160 * var(--s)));
  pointer-events:none;
}
/* lift the copy above the glow — but NOT the glow itself: this rule has
   the same specificity as .phero__glow and comes after it, so an
   unscoped `> *` turns the 1000px blob back into a flow element and
   pushes the whole hero down by its height. */
.phero > *:not(.phero__glow){ position:relative; z-index:2; }
.phero__h1{
  margin:calc(22 * var(--s)) 0 0;
  font-family:var(--display); font-weight:900;
  font-size:calc(112 * var(--s)); line-height:.92; letter-spacing:-.04em;
  color:#fff;
}
.phero__h1 .line{ display:block; }
.pstamp{
  display:inline-flex; align-items:center; margin:calc(36 * var(--s)) 0 0;
  padding:calc(10 * var(--s)) calc(18 * var(--s));
  border-radius:999px; background:var(--yellow); color:var(--ink);
  box-shadow:inset 0 0 0 calc(2.5 * var(--s)) var(--ink);
  font-family:var(--mono); font-weight:500;
  font-size:max(10px, calc(12 * var(--s)));
  letter-spacing:.14em; text-transform:uppercase;
}
.phero__lead{
  margin:calc(26 * var(--s)) 0 0; max-width:calc(720 * var(--s));
  font-weight:500; font-size:max(15px, calc(21 * var(--s))); line-height:1.52;
  color:var(--ink);
}

/* ── on this page ─────────────────────────────────────────── */
.pidx{ position:relative; z-index:2; background:var(--page); padding:calc(110 * var(--s)) calc(150 * var(--s)); }
.pidx__h{
  margin:calc(26 * var(--s)) 0 calc(48 * var(--s));
  font-family:var(--display); font-weight:900;
  font-size:calc(64 * var(--s)); line-height:.98; letter-spacing:-.03em; color:var(--ink);
}
.pidx__list{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:0 calc(40 * var(--s));
}
.pidx__list--2{ grid-template-columns:repeat(2, 1fr); }
.pidx__list li{ break-inside:avoid; }
.pidx__list a{
  display:grid; grid-template-columns:calc(34 * var(--s)) 1fr; align-items:start;
  gap:0; padding:calc(14 * var(--s)) 0;
  border-bottom:calc(1.5 * var(--s)) solid rgba(23,17,15,.1);
  font-weight:600; font-size:max(13px, calc(16 * var(--s))); line-height:1.3;
  color:var(--ink);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.pidx__list a::before{
  content:attr(data-n);
  font-family:var(--mono); font-weight:500;
  font-size:max(10px, calc(12 * var(--s))); letter-spacing:.1em;
  color:var(--pink);
  padding-top:calc(3 * var(--s));
}
.pidx__list a:hover, .pidx__list a.is-here{ color:var(--pink); border-color:var(--pink); }

/* ── body ─────────────────────────────────────────────────── */
.pbody{ position:relative; z-index:2; background:var(--page); padding:calc(10 * var(--s)) 0 calc(40 * var(--s)); }
.psec{
  display:grid;
  grid-template-columns:calc(140 * var(--s)) calc(860 * var(--s));
  padding:0 calc(150 * var(--s));
  margin:0 0 calc(44 * var(--s));
}
.psec + .psec{ padding-top:calc(44 * var(--s)); border-top:calc(1.5 * var(--s)) solid rgba(23,17,15,.12); }
.psec__n{
  margin:0;
  font-family:var(--display); font-weight:900;
  font-size:calc(46 * var(--s)); line-height:1; letter-spacing:-.02em;
  color:var(--pink);
}
.psec__c > *:first-child{ margin-top:0; }
.psec__c h2{
  margin:0 0 calc(26 * var(--s));
  font-family:var(--display); font-weight:900;
  font-size:calc(40 * var(--s)); line-height:1.06; letter-spacing:-.03em;
  color:var(--ink);
  scroll-margin-top:calc(140 * var(--s));
}
.psec__c h3{
  margin:calc(34 * var(--s)) 0 calc(14 * var(--s));
  font-family:var(--display); font-weight:800;
  font-size:calc(24 * var(--s)); line-height:1.2; letter-spacing:-.02em;
  color:var(--pink-deep);
}
.psec__c p{
  margin:0 0 calc(20 * var(--s));
  font-weight:500; font-size:max(14.5px, calc(18 * var(--s))); line-height:1.66;
  color:rgba(23,17,15,.74);
}
.psec__c p.lead{ font-weight:700; color:var(--ink); margin-bottom:calc(16 * var(--s)); }
.psec__c a{ color:var(--pink-deep); text-decoration:underline; text-underline-offset:.18em; }
.psec__c a:hover{ color:var(--pink); }

/* bulleted list — the pink dot is the page's one list marker */
.plist{ list-style:none; margin:0 0 calc(28 * var(--s)); padding:0; }
.plist li{
  position:relative; padding:0 0 calc(14 * var(--s)) calc(30 * var(--s));
  font-weight:500; font-size:max(14px, calc(17.5 * var(--s))); line-height:1.6;
  color:rgba(23,17,15,.74);
}
.plist li::before{
  content:''; position:absolute; left:calc(4 * var(--s)); top:calc(10 * var(--s));
  width:calc(8 * var(--s)); height:calc(8 * var(--s)); border-radius:999px;
  background:var(--pink);
}

/* NOT ALLOWED — a prohibition must never read like a feature */
.pban{
  margin:0 0 calc(28 * var(--s));
  padding:calc(30 * var(--s)) calc(32 * var(--s)) calc(12 * var(--s));
  border-radius:calc(26 * var(--s));
  background:var(--pink-soft);
  box-shadow:inset 0 0 0 calc(2 * var(--s)) var(--ink);
}
.pban ul{ list-style:none; margin:0; padding:0; }
.pban li{
  position:relative; padding:0 0 calc(18 * var(--s)) calc(40 * var(--s));
  font-weight:600; font-size:max(14px, calc(17 * var(--s))); line-height:1.56;
  color:var(--ink);
}
.pban li::before{
  content:''; position:absolute; left:0; top:calc(2 * var(--s));
  width:calc(24 * var(--s)); height:calc(24 * var(--s)); border-radius:999px;
  background:var(--pink);
}
.pban li::after{
  content:'✕'; position:absolute; left:0; top:calc(2 * var(--s));
  width:calc(24 * var(--s)); height:calc(24 * var(--s));
  display:grid; place-items:center;
  font-family:var(--display); font-weight:900;
  font-size:calc(12 * var(--s)); color:#fff;
}

/* the ink callout — an address, a deadline, a warning */
.pnote{
  margin:0 0 calc(28 * var(--s));
  padding:calc(30 * var(--s)) calc(32 * var(--s));
  border-radius:calc(26 * var(--s));
  background:var(--ink); color:#fff;
}
/* ⚠ `p.pnote__k`, not `.pnote__k`. The label IS a <p>, so `.pnote p` (0,1,1)
   and `.psec__c p` (0,2,0) both out-specify a bare class — the label
   silently rendered at body size with body tracking. */
.pnote p.pnote__k{
  margin:0 0 calc(10 * var(--s));
  font-family:var(--mono); font-weight:500;
  font-size:max(10px, calc(11 * var(--s))); line-height:1.5;
  letter-spacing:.14em; text-transform:uppercase; color:var(--pink);
}
.pnote p{ margin:0; font-weight:600; font-size:max(14.5px, calc(19 * var(--s))); line-height:1.58; color:#fff; }
.pnote a{
  display:inline-block; margin-top:calc(16 * var(--s));
  font-family:var(--mono); font-weight:500;
  font-size:max(12px, calc(15 * var(--s)));
  color:var(--yellow) !important; text-decoration:underline; text-underline-offset:.2em;
  overflow-wrap:anywhere;
}
.pnote a:hover{ color:#fff !important; }

/* ── tables ───────────────────────────────────────────────── */
.ptable{
  margin:0 0 calc(32 * var(--s));
  width:calc(1140 * var(--s)); max-width:none;
  /* the table earns the full measure, so it breaks out of the
     860 reading column it sits inside */
  margin-left:calc(-140 * var(--s));
  border-radius:calc(30 * var(--s));
  background:var(--ink);
  overflow:hidden;
}
.ptable table{ width:100%; border-collapse:collapse; }
.ptable th{
  padding:calc(21 * var(--s)) calc(28 * var(--s));
  background:var(--pink); color:#fff; text-align:left;
  font-family:var(--mono); font-weight:500;
  font-size:max(10px, calc(11.5 * var(--s)));
  letter-spacing:.14em; text-transform:uppercase;
}
.ptable td{
  padding:calc(26 * var(--s)) calc(28 * var(--s));
  vertical-align:top;
  font-weight:500; font-size:max(13px, calc(15 * var(--s))); line-height:1.66;
  color:rgba(255,255,255,.72);
  border-bottom:calc(1 * var(--s)) solid rgba(255,255,255,.12);
}
.ptable tbody tr:nth-child(even) td{ background:#231B19; }
.ptable tbody tr:last-child td{ border-bottom:0; }
.ptable td:first-child{ font-weight:600; color:#fff; width:calc(420 * var(--s)); }
.ptable--3 td:first-child{ width:calc(200 * var(--s)); }
.ptable td ul{ list-style:none; margin:0; padding:0; }
.ptable td li{ position:relative; padding:0 0 calc(9 * var(--s)) calc(18 * var(--s)); }
.ptable td li:last-child{ padding-bottom:0; }
.ptable td li::before{
  content:''; position:absolute; left:0; top:calc(9 * var(--s));
  width:calc(6 * var(--s)); height:calc(6 * var(--s)); border-radius:999px; background:var(--pink);
}
.ptable td br + span, .ptable .nowrap{ white-space:nowrap; }
.ptable__cap{ display:none; }

/* the law chapter runs full width — its heading lines up with
   the table, not with the reading column */
.psec--wide{ grid-template-columns:1fr; }
.psec--wide .psec__n{ margin-bottom:calc(18 * var(--s)); }
.psec--wide .psec__c{ max-width:calc(860 * var(--s)); }
.psec--wide .ptable{ margin-left:0; }
.psec--wide .psec__c h2{ font-size:calc(64 * var(--s)); line-height:.98; }
.psec--wide .ptable, .psec--wide .pfoot{ max-width:none; }
.psec--wide .pfoot{
  margin:calc(44 * var(--s)) 0 0; max-width:calc(860 * var(--s));
  font-weight:500; font-size:max(13px, calc(17 * var(--s))); line-height:1.6;
  color:rgba(23,17,15,.55);
}
.psec--ink{ background:var(--ink); color:#fff; margin:0; padding:calc(96 * var(--s)) calc(150 * var(--s)) calc(110 * var(--s)); }
.psec--ink .psec__c h2{ color:#fff; }
.psec--ink .psec__c p{ color:rgba(255,255,255,.7); }
.psec--ink .pfoot{ color:rgba(255,255,255,.5); }
.psec--ink + .psec{ border-top:0; }

/* ============================================================
   B · TRUST & SAFETY — V2
   ============================================================ */

/* the hero loses its second heading line and gains a real
   sub-line, so the shield needs less room above it */
.shero--v2 .shero__h1{ font-size:calc(150 * var(--s)); }
.shero--v2 .shero__sub{
  margin:calc(24 * var(--s)) 0 0; max-width:calc(560 * var(--s));
  font-family:var(--display); font-weight:800;
  font-size:calc(34 * var(--s)); line-height:1.16; letter-spacing:-.02em;
  color:var(--ink);
}

/* the intro line that opens the feature grid */
.sfeat--v2{ text-align:left; }
.sfeat__intro{
  margin:calc(18 * var(--s)) 0 calc(56 * var(--s));
  max-width:calc(900 * var(--s));
  font-weight:500; font-size:max(15px, calc(22 * var(--s))); line-height:1.5;
  color:rgba(23,17,15,.74);
}
.sfeat--v2 .sfeat__grid{ align-items:start; }

/* the three-line clamp + read more. The clamp is the whole
   answer to copy that runs 90 to 900 characters: every card is
   the same height at rest, and opening one grows its grid row
   and pushes the row below it down. */
.scard__d{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;
  overflow:hidden;
  max-height:calc(3 * 1.55em);
  transition:max-height .42s var(--ease);
}
.scard.is-open .scard__d{ -webkit-line-clamp:99; max-height:60em; }

/* [hidden] is only display:none in the UA sheet — ANY author display
   rule beats it, and this one is inline-flex. Without the override the
   button shows on every card, including the four whose copy is not cut
   off at all. */
.rmore[hidden]{ display:none !important; }
.rmore{
  align-self:flex-start;
  display:inline-flex; align-items:center; gap:calc(10 * var(--s));
  margin:calc(18 * var(--s)) calc(12 * var(--s)) 0;
  padding:calc(8 * var(--s)) calc(15 * var(--s));
  border:0; border-radius:999px; cursor:pointer;
  background:var(--ink); color:#fff;
  font-family:var(--mono); font-weight:500;
  font-size:max(10px, calc(11 * var(--s)));
  letter-spacing:.12em; text-transform:uppercase;
  transition:transform .25s var(--ease), background-color .25s var(--ease);
}
.rmore:hover{ transform:translateY(calc(-2 * var(--s))); background:var(--pink); }
.rmore__i{ transition:transform .3s var(--bounce); }
.scard.is-open .rmore__i, .smech.is-open .rmore__i{ transform:rotate(180deg); }
.rmore:focus-visible{ outline:calc(3 * var(--s)) solid var(--pink); outline-offset:calc(3 * var(--s)); }

/* the two wide cards. Safety Centre is not one feature but
   four mechanisms, and Team of Moderators is a single sentence
   with a crowd behind it — neither belongs in the 556 column. */
.scard--wide{ grid-column:1 / -1; }

.scentre__banner{ position:relative; overflow:hidden; border-radius:calc(24 * var(--s)); aspect-ratio:1100/300; }
.scentre__banner::after{ content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 calc(2.5 * var(--s)) var(--ink); pointer-events:none; }
.scentre__banner img{ width:100%; height:100%; object-fit:cover; display:block; }
.scentre__sub{
  margin:calc(10 * var(--s)) calc(12 * var(--s)) 0;
  font-weight:600; font-size:max(14px, calc(17 * var(--s))); color:var(--pink-deep);
}
.scentre__grid{
  display:grid; grid-template-columns:1fr 1fr; gap:calc(24 * var(--s));
  margin:calc(28 * var(--s)) calc(12 * var(--s)) 0;
  align-items:start;
}
.smech{
  display:flex; flex-direction:column;
  padding:calc(20 * var(--s)) calc(20 * var(--s)) calc(22 * var(--s));
  border-radius:calc(24 * var(--s)); background:#fff;
}
.smech__n{
  display:grid; place-items:center; flex:none;
  width:calc(28 * var(--s)); height:calc(28 * var(--s)); border-radius:999px;
  background:var(--pink); color:#fff;
  font-family:var(--display); font-weight:900; font-size:calc(14 * var(--s));
}
.smech__d{
  margin:calc(14 * var(--s)) 0 0;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:4;
  overflow:hidden; max-height:calc(4 * 1.5em);
  transition:max-height .42s var(--ease);
  font-weight:500; font-size:max(13.5px, calc(15.5 * var(--s))); line-height:1.5;
  color:rgba(23,17,15,.76);
}
.smech.is-open .smech__d{ -webkit-line-clamp:99; max-height:60em; }
.smech .rmore{ margin:calc(14 * var(--s)) 0 0; }

.smods{ display:grid; grid-template-columns:calc(516 * var(--s)) 1fr; gap:calc(44 * var(--s)); align-items:center; }
.smods__plate{ position:relative; overflow:hidden; border-radius:calc(24 * var(--s)); aspect-ratio:516/380; }
.smods__plate::after{ content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 calc(2.5 * var(--s)) var(--ink); pointer-events:none; }
.smods__plate img{ width:100%; height:100%; object-fit:cover; display:block; }
.smods__c{ display:flex; flex-direction:column; align-items:flex-start; padding-right:calc(24 * var(--s)); }
.smods__c .scard__n, .smods__c .scard__t, .smods__c .scard__d{ margin-left:0; margin-right:0; }

/* ── 03 / COMMUNITY GUIDELINES (ink) ──────────────────────── */
.sgl{ background:var(--ink); color:#fff; padding:calc(96 * var(--s)) calc(150 * var(--s)) calc(104 * var(--s)); }
.sgl__h, .str__h, .scg__h, .sfq__h, .sres__h{
  margin:calc(22 * var(--s)) 0 0;
  font-family:var(--display); font-weight:900;
  font-size:calc(76 * var(--s)); line-height:.94; letter-spacing:-.03em;
}
.sgl__h{ color:#fff; }
.sgl__sub{ margin:calc(30 * var(--s)) 0 calc(26 * var(--s)); font-family:var(--display); font-weight:800; font-size:max(16px, calc(26 * var(--s))); letter-spacing:-.02em; color:var(--cyan); }
.sgl__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:calc(32 * var(--s)); }
.sok{
  --ledge-color:var(--pink);
  padding:calc(28 * var(--s));
  border-radius:calc(32 * var(--s)); color:var(--ink);
  min-height:calc(210 * var(--s));
}
.sok__tick{
  display:grid; place-items:center;
  width:calc(36 * var(--s)); height:calc(36 * var(--s)); border-radius:999px;
  background:#fff; box-shadow:inset 0 0 0 calc(2 * var(--s)) var(--ink);
  font-family:var(--display); font-weight:900; font-size:calc(17 * var(--s));
}
.sok__t{ margin:calc(20 * var(--s)) 0 0; font-family:var(--display); font-weight:800; font-size:max(16px, calc(25 * var(--s))); line-height:1.12; letter-spacing:-.025em; }
.sban{
  display:flex; align-items:flex-start; gap:calc(16 * var(--s));
  margin:calc(36 * var(--s)) 0 calc(32 * var(--s));
  padding:calc(24 * var(--s)) calc(30 * var(--s));
  border-radius:calc(26 * var(--s)); background:#2A211E;
  box-shadow:inset 0 0 0 calc(2.5 * var(--s)) var(--pink);
}
.sban__x{ flex:none; font-family:var(--display); font-weight:900; font-size:calc(22 * var(--s)); color:var(--pink); line-height:1.4; }
.sban p{ margin:0; max-width:calc(900 * var(--s)); font-weight:600; font-size:max(14px, calc(18 * var(--s))); line-height:1.5; }

/* ── 04 / TRANSPARENCY REPORTS (cream) ────────────────────── */
.str{ background:var(--page); padding:calc(96 * var(--s)) calc(150 * var(--s)) calc(110 * var(--s)); }
.str__h{ color:var(--ink); }
.str__lead{ margin:calc(30 * var(--s)) 0 calc(48 * var(--s)); max-width:calc(820 * var(--s)); font-weight:500; font-size:max(15px, calc(21 * var(--s))); line-height:1.52; color:rgba(23,17,15,.74); }
.str__stats{ display:grid; grid-template-columns:1fr 1fr; gap:calc(32 * var(--s)); }
.sstat{ padding:calc(36 * var(--s)); border-radius:calc(36 * var(--s)); color:var(--ink); }
.sstat__k{ margin:0; font-family:var(--mono); font-weight:500; font-size:max(10px, calc(12 * var(--s))); letter-spacing:.14em; text-transform:uppercase; }
.sstat__v{ margin:calc(10 * var(--s)) 0 0; font-family:var(--display); font-weight:900; font-size:calc(92 * var(--s)); line-height:.94; letter-spacing:-.04em; }
.sstat__l{ margin:calc(6 * var(--s)) 0 0; font-family:var(--display); font-weight:800; font-size:max(14px, calc(19 * var(--s))); letter-spacing:-.02em; color:var(--pink-deep); }
.sstat__b{ margin:calc(16 * var(--s)) 0 0; font-weight:500; font-size:max(13.5px, calc(16 * var(--s))); line-height:1.5; }
.str__dl{ margin:calc(56 * var(--s)) 0 calc(20 * var(--s)); font-family:var(--display); font-weight:900; font-size:calc(34 * var(--s)); letter-spacing:-.03em; color:var(--ink); }

.ryrs{ display:flex; flex-direction:column; gap:calc(18 * var(--s)); }
.ryr{ border-radius:calc(24 * var(--s)); background:#EFE6E0; box-shadow:inset 0 0 0 calc(2.5 * var(--s)) var(--ink); overflow:hidden; }
.ryr[open]{ background:transparent; box-shadow:none; }
.ryr__s{
  display:flex; align-items:center; gap:calc(14 * var(--s)); cursor:pointer; list-style:none;
  padding:calc(24 * var(--s)) calc(28 * var(--s));
}
.ryr__s::-webkit-details-marker{ display:none; }
.ryr[open] .ryr__s{ padding:0 0 calc(18 * var(--s)); cursor:default; }
.ryr__y{ display:inline-flex; align-items:center; padding:calc(8 * var(--s)) calc(16 * var(--s)); border-radius:999px; background:var(--pink); color:#fff; font-family:var(--mono); font-weight:500; font-size:max(10px, calc(12 * var(--s))); letter-spacing:.14em; text-transform:uppercase; }
.ryr:not([open]) .ryr__y{ background:var(--ink); }
.ryr__n{ font-weight:500; font-size:max(12px, calc(15 * var(--s))); color:rgba(23,17,15,.5); }
.ryr__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:calc(24 * var(--s)); }
.rrep{
  --ledge:5;
  display:flex; align-items:center; gap:calc(14 * var(--s));
  padding:calc(16 * var(--s)) calc(16 * var(--s)) calc(16 * var(--s)) calc(24 * var(--s));
  border-radius:calc(24 * var(--s)); background:#fff; color:var(--ink);
  text-decoration:none !important;
}
.rrep__m{ display:block; font-family:var(--display); font-weight:800; font-size:max(15px, calc(21 * var(--s))); letter-spacing:-.02em; }
.rrep__k{ display:block; margin-top:calc(4 * var(--s)); font-family:var(--mono); font-weight:500; font-size:max(9px, calc(10.5 * var(--s))); letter-spacing:.12em; text-transform:uppercase; color:var(--pink-deep); }
.rrep__a{ margin-left:auto; flex:none; display:grid; place-items:center; width:calc(36 * var(--s)); height:calc(36 * var(--s)); border-radius:999px; background:var(--pink); color:#fff; box-shadow:inset 0 0 0 calc(2 * var(--s)) var(--ink); font-family:var(--display); font-weight:900; font-size:calc(17 * var(--s)); transition:transform .3s var(--bounce); }
.rrep:hover .rrep__a{ transform:translate(calc(2 * var(--s)), calc(-2 * var(--s))); }

/* ── 05 / COMPLIANCE & GOVERNANCE (pink soft) ─────────────── */
.scg{ background:var(--pink-soft); padding:calc(96 * var(--s)) calc(150 * var(--s)) calc(110 * var(--s)); }
.scg__h{ color:var(--ink); }
.scg__lead{ margin:calc(30 * var(--s)) 0 calc(48 * var(--s)); max-width:calc(760 * var(--s)); font-weight:500; font-size:max(15px, calc(21 * var(--s))); line-height:1.5; color:rgba(23,17,15,.74); }
.scg__grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:calc(32 * var(--s)); }
.soff{ padding:calc(28 * var(--s)); border-radius:calc(32 * var(--s)); color:var(--ink); }
.soff__r{ display:inline-flex; align-items:center; padding:calc(7 * var(--s)) calc(14 * var(--s)); border-radius:999px; background:var(--ink); color:#fff; font-family:var(--mono); font-weight:500; font-size:max(9px, calc(10.5 * var(--s))); letter-spacing:.12em; text-transform:uppercase; }
.soff__n{ margin:calc(16 * var(--s)) 0 0; font-family:var(--display); font-weight:900; font-size:max(20px, calc(30 * var(--s))); line-height:1.06; letter-spacing:-.03em; }
.soff__e{ display:inline-block; margin:calc(10 * var(--s)) 0 0; font-family:var(--mono); font-weight:500; font-size:max(11px, calc(12.5 * var(--s))); color:var(--pink-deep); text-decoration:underline; text-underline-offset:.2em; overflow-wrap:anywhere; }
.soff__e:hover{ color:var(--ink); }
.soff hr{ margin:calc(18 * var(--s)) 0; border:0; height:calc(2 * var(--s)); background:rgba(23,17,15,.14); }
.soff__t{ margin:0; font-weight:600; font-size:max(12.5px, calc(14.5 * var(--s))); }
.soff__d{ margin:calc(8 * var(--s)) 0 0; font-weight:500; font-size:max(12.5px, calc(14.5 * var(--s))); line-height:1.5; color:rgba(23,17,15,.7); }

/* ── 06 / FAQ (ink) ───────────────────────────────────────── */
.sfq{ background:var(--ink); color:#fff; padding:calc(96 * var(--s)) calc(150 * var(--s)) calc(110 * var(--s)); }
.sfq__h{ color:#fff; margin-bottom:calc(52 * var(--s)); }

/* ── 07 / EXTERNAL SAFETY RESOURCES (cream) ───────────────── */
.sres{ background:var(--page); padding:calc(96 * var(--s)) calc(150 * var(--s)) calc(110 * var(--s)); }
.sres__h{ color:var(--ink); }
.sres__lead{ margin:calc(30 * var(--s)) 0 calc(44 * var(--s)); max-width:calc(760 * var(--s)); font-weight:500; font-size:max(15px, calc(21 * var(--s))); line-height:1.5; color:rgba(23,17,15,.74); }
.sres__grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:calc(26 * var(--s)); }
.srs{
  display:flex; flex-direction:column; align-items:flex-start;
  padding:calc(24 * var(--s)); border-radius:calc(32 * var(--s)); color:var(--ink);
  text-decoration:none !important;
}
.srs__k{ display:inline-flex; align-items:center; padding:calc(7 * var(--s)) calc(14 * var(--s)); border-radius:999px; background:var(--ink); color:#fff; font-family:var(--mono); font-weight:500; font-size:max(9px, calc(10 * var(--s))); letter-spacing:.12em; text-transform:uppercase; }
.srs__t{ margin:calc(18 * var(--s)) 0 0; font-family:var(--display); font-weight:900; font-size:max(17px, calc(23 * var(--s))); line-height:1.1; letter-spacing:-.025em; }
.srs__d{ margin:calc(10 * var(--s)) 0 calc(20 * var(--s)); font-weight:500; font-size:max(12.5px, calc(14.5 * var(--s))); line-height:1.48; color:rgba(23,17,15,.7); }
.srs__a{ margin-top:auto; display:inline-flex; align-items:center; gap:calc(8 * var(--s)); padding:calc(10 * var(--s)) calc(20 * var(--s)); border-radius:999px; background:var(--ink); color:#fff; font-family:var(--display); font-weight:800; font-size:max(13px, calc(15 * var(--s))); letter-spacing:-.01em; transition:transform .25s var(--ease); }
.srs:hover .srs__a{ transform:translateY(calc(-2 * var(--s))); }
.sres__note{ margin:calc(36 * var(--s)) 0 0; max-width:calc(820 * var(--s)); font-weight:500; font-size:max(12.5px, calc(14.5 * var(--s))); line-height:1.5; color:rgba(23,17,15,.5); }

/* ============================================================
   C · MOBILE  (≤1040 — --s is floored, so px from here)
   ============================================================ */
@media (max-width:1040px){
  /* policy shell */
  .phero{ padding:120px 22px 48px; }
  .phero__glow{ left:-60px; top:180px; width:420px; height:420px; filter:blur(100px); }
  .phero__h1{ font-size:clamp(42px, 13.5vw, 58px); margin-top:14px; }
  .pstamp{ margin-top:22px; padding:9px 15px; font-size:10px; }
  .phero__lead{ margin-top:20px; font-size:16px; }
  .pidx{ padding:56px 22px 48px; }
  .pidx__h{ font-size:38px; margin:18px 0 26px; }
  .pidx__list, .pidx__list--2{ grid-template-columns:1fr; gap:0; }
  .pidx__list a{ grid-template-columns:30px 1fr; padding:11px 0; font-size:15px; }
  .pbody{ padding:0 0 24px; }
  .psec{ grid-template-columns:1fr; padding:0 22px; margin-bottom:30px; }
  .psec + .psec{ padding-top:30px; }
  .psec__n{ font-size:28px; margin-bottom:12px; }
  .psec__c h2{ font-size:27px; margin-bottom:18px; scroll-margin-top:92px; }
  .psec__c h3{ font-size:19px; margin:26px 0 10px; }
  .psec__c p{ font-size:15.5px; line-height:1.68; margin-bottom:16px; }
  .plist li{ padding:0 0 12px 24px; font-size:15px; }
  .plist li::before{ left:2px; top:9px; width:7px; height:7px; }
  .pban{ padding:22px 20px 6px; border-radius:22px; box-shadow:inset 0 0 0 2px var(--ink); }
  .pban li{ padding:0 0 15px 32px; font-size:14.5px; }
  .pban li::before, .pban li::after{ width:20px; height:20px; }
  .pban li::after{ font-size:10px; }
  .pnote{ padding:22px 20px; border-radius:22px; }
  .pnote p{ font-size:16px; }
  .pnote p.pnote__k{ font-size:10px; }
  /* 🔴 TAP TARGET. A one-line mono email is a 16px-tall hit area — the
     smallest thing on the page and the one people actually need to press.
     The padding grows it to 40px; the negative bottom margin keeps the
     callout exactly the height it was. */
  .pnote a{ font-size:12.5px; margin-top:0; padding:12px 0; margin-bottom:-12px; }

  /* same reason: the read-more pill is 27px. Its SIZE is the design, so the
     hit area is extended past it instead of fattening the pill. */
  .rmore{ position:relative; }
  .rmore::after{ content:''; position:absolute; left:-6px; right:-6px; top:50%;
    transform:translateY(-50%); height:44px; }
  .psec--wide{ padding:0 22px; }
  .psec--wide .psec__c h2{ font-size:34px; }
  .psec--ink{ padding:56px 22px 64px; }
  .psec--wide .pfoot{ margin-top:28px; font-size:14px; }

  /* TABLES BECOME CARDS. A two-column legal table at 390px is
     unreadable; each row becomes its own card and each cell is
     introduced by the column it came from. */
  .ptable{ width:auto; margin-left:0; background:transparent; border-radius:0; }
  .ptable table, .ptable tbody, .ptable tr, .ptable td{ display:block; width:auto; }
  .ptable thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .ptable tr{ margin:0 0 16px; padding:20px; border-radius:22px; background:#231B19; }
  .ptable td{ padding:0; border:0; font-size:14.5px; }
  .ptable tbody tr:nth-child(even) td{ background:transparent; }
  .ptable td + td{ margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.14); }
  .ptable td::before{
    content:attr(data-h); display:block; margin-bottom:8px;
    font-family:var(--mono); font-weight:500; font-size:9.5px;
    letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.45);
  }
  .ptable td:first-child::before{ color:var(--pink); }
  .ptable td:first-child{ width:auto; }
  .ptable td li{ padding:0 0 8px 16px; }
  .ptable td li::before{ top:8px; width:6px; height:6px; }

  /* safety V2 */
  .shero--v2 .shero__h1{ font-size:clamp(56px, 19vw, 80px); }
  .shero--v2 .shero__sub{ margin-top:14px; font-size:24px; max-width:none; }
  .sfeat__intro{ margin:10px 0 28px; font-size:16px; max-width:none; }
  .scard__d{ max-height:calc(3 * 1.55em); }
  .rmore{ margin:14px 8px 0; padding:7px 13px; font-size:10px; }
  .scentre__banner{ border-radius:18px; aspect-ratio:16/9; }
  .scentre__sub{ margin:8px 8px 0; font-size:14px; }
  .scentre__grid{ grid-template-columns:1fr; gap:14px; margin:18px 8px 0; }
  .smech{ padding:16px; border-radius:18px; }
  .smech__n{ width:26px; height:26px; font-size:13px; }
  /* at 266px the two SHORT mechanisms clamp for no reason — at
     this width four lines is simply not enough, so give them five */
  .smech__d{ -webkit-line-clamp:5; max-height:calc(5 * 1.5em); font-size:14.5px; }
  .smods{ grid-template-columns:1fr; gap:0; }
  .smods__plate{ aspect-ratio:4/3; border-radius:18px; }
  .smods__c{ padding-right:0; }

  .sgl, .str, .scg, .sfq, .sres{ padding:56px 22px 64px; }
  .sgl__h, .str__h, .scg__h, .sfq__h, .sres__h{ font-size:clamp(34px, 11.5vw, 46px); margin-top:16px; }
  .sgl__sub{ margin:22px 0 18px; font-size:20px; }
  .sgl__grid, .scg__grid, .str__stats{ grid-template-columns:1fr; gap:16px; }
  .sok{ min-height:0; padding:22px; border-radius:26px; display:flex; gap:14px; align-items:flex-start; }
  .sok__tick{ width:30px; height:30px; font-size:14px; flex:none; }
  .sok__t{ margin:2px 0 0; font-size:19px; }
  .sban{ margin:24px 0 22px; padding:20px; border-radius:22px; }
  .sban__x{ font-size:18px; }
  .sban p{ font-size:15px; }
  .str__lead, .scg__lead, .sres__lead{ margin:20px 0 26px; font-size:16px; max-width:none; }
  .sstat{ padding:24px; border-radius:28px; }
  .sstat__v{ font-size:68px; }
  .sstat__l{ font-size:16px; }
  .sstat__b{ font-size:14.5px; }
  .str__dl{ margin:36px 0 16px; font-size:26px; }
  .ryr__s{ padding:20px; }
  .ryr[open] .ryr__s{ padding:0 0 14px; }
  .ryr__grid{ grid-template-columns:1fr; gap:14px; }
  .rrep{ padding:14px 14px 14px 20px; border-radius:20px; }
  .rrep__a{ width:34px; height:34px; font-size:16px; }
  .soff{ padding:24px; border-radius:26px; }
  .sfq__h{ margin-bottom:26px; }
  .sres__grid{ grid-template-columns:1fr; gap:14px; }
  .srs{ padding:22px; border-radius:26px; }
  .srs__t{ font-size:21px; margin-top:14px; }
  .srs__d{ margin:8px 0 16px; }
  .sres__note{ margin-top:24px; font-size:13px; }
}

@media (max-width:520px){
  .phero__h1{ font-size:clamp(38px, 13vw, 50px); }
}