/* Shared stylesheet for the static policy pages: terms, privacy, refunds and
   data deletion.
 *
 * These four are plain HTML files (they must be reachable with no JavaScript
 * and no session — a platform reviewer opens them cold), so they cannot import
 * PublicShell.jsx. They used to carry a DARK theme of their own while the rest
 * of social.ssstrading.site is light, which read as four pages borrowed from
 * somewhere else. This file is the one place that pairing is defined; the four
 * pages link it and add nothing but their own content.
 *
 * The palette is taken from the React shell, not re-chosen:
 *   TEAL             #0d9488   PublicShell.jsx
 *   page background  linear-gradient(180deg,#f0fdfa 0%,#ffffff 55%)  PublicShell
 *   heading text     #111827   card border  #e6f5f2   card fill  #fcfefe
 *   body text        #5b6472   muted        #6b7280
 * Change one of these and change PublicShell.jsx in the same pass, or the
 * policy pages drift away from the product again.
 *
 * ⚠ nginx serves this file `immutable` for a year, so the four pages link it as
 * `/policy.css?v=<date>` — bump that query in all four whenever this file changes,
 * or returning visitors keep the old rules against the new markup.
 *
 * ⚠ REVIEW-CRITICAL, DO NOT REMOVE (the reasons are in PublicShell.jsx and in
 * the 2026-08-07 TikTok rejection): both brand marks in the header of every
 * page, the 76px marks at the top of the body, and the policy links in the
 * nav and the footer.
 */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", Roboto, sans-serif;
  background: linear-gradient(180deg, #f0fdfa 0%, #ffffff 55%);
  background-attachment: fixed;
  color: #5b6472;
  line-height: 1.7;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

a { color: #0d9488; text-decoration: none; transition: color .15s; }
a:hover { color: #0f766e; text-decoration: underline; }

/* ---- header ------------------------------------------------------------ */
/* Mirrors PublicHeader: translucent white, blurred, teal hairline. */
.top {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255,255,255,0.72); backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(13,148,136,0.12);
}
.top-inner {
  max-width: none; margin: 0; padding: 14px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 11px; }
/* Both marks: the SSS Trading company icon (identical to the favicon and to
   the icon uploaded to the TikTok/Meta portals — reviewers compare the three)
   next to the SSS Social product logo. Mirrors BrandLockup in PublicShell.jsx. */
.brand-marks { display: flex; align-items: center; gap: 8px; }
.mark-divider { width: 1px; height: 21px; background: rgba(13,148,136,0.28); display: block; }
.brand-mark { width: 34px; height: 34px; border-radius: 9px; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font-weight: 800; color: #0d9488; font-size: 18px; letter-spacing: -0.01em; }
.brand-parent { font-size: 11px; color: #6b7280; }

/* ONE style for the seven options that appear in BOTH the header and the
   footer — Features / Pricing / Support and Terms / Refunds / Privacy / Data
   Deletion. These are the values of NAV_LINK in PublicShell.jsx; the header,
   the footer columns and the footer's bottom row all wear them, and so does
   the React half of the site. Change one, change the other. */
.top-nav { display: flex; flex-wrap: wrap; gap: 16px; font-size: 14px; align-items: center; }
.top-nav a { color: #4b5563; }
.top-nav a:hover { color: #0d9488; text-decoration: none; }
.top-nav a.active { color: #0d9488; font-weight: 600; }
.top-nav a.signin { color: #0d9488; font-weight: 500; }
/* The one call to action, matching the "Get started" button in the app shell. */
.top-nav a.cta {
  background: #0d9488; color: #fff; padding: 8px 16px; border-radius: 8px;
  font-weight: 500; white-space: nowrap;
}
.top-nav a.cta:hover { color: #fff; opacity: .92; }
/* The eight options sit in .nav-links; on desktop the wrapper vanishes from
   layout so they share the row with Sign in / Get started. Below 768 they move
   behind the Menu toggle (see the @media block) — the PublicHeader phone menu,
   built with a checkbox because these pages run without JavaScript. */
.nav-links { display: contents; }
.nav-toggle, .nav-burger { display: none; }

/* ---- hero -------------------------------------------------------------- */
/* TikTok's review requires the portal icon to be visible BOTH on the browser
   tab and at the top of the page body — keep the header mark AND these. */
.page-icons { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.page-icons .mark-divider { height: 42px; background: rgba(13,148,136,0.3); }
.page-icon {
  width: 76px; height: 76px; border-radius: 18px; display: block;
  margin-bottom: 22px; box-shadow: 0 6px 20px rgba(13,148,136,0.18);
}

/* ⚠ ONE LEFT EDGE ACROSS THE SITE. /features lays its content out in a
   1080px container with 40px padding, so its text starts 190px in at desktop
   width. The policy pages used to centre a narrower 880/780 column, which put
   their kicker at 224px and their prose at 274px — three different left edges
   on one site, and the single loudest reason these pages read as borrowed from
   somewhere else. The OUTER container now matches the app; the measure stays
   narrow for long legal prose by capping the children instead. */
.hero { padding: 56px 40px 26px; max-width: 1080px; margin: 0 auto; }
.kicker {
  display: inline-block; font-size: 13px; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase;
  color: #0d9488; margin-bottom: 14px;
}
h1 {
  font-size: 44px; font-weight: 800; letter-spacing: -0.03em;
  margin: 0 0 16px; color: #111827; line-height: 1.15;
}
.meta { color: #9ca3af; font-size: 13px; margin: 0; }

/* ---- body -------------------------------------------------------------- */
.content { max-width: 1080px; margin: 0 auto; padding: 28px 40px 80px; }
/* The readable measure. A legal page is prose, so it keeps a narrower column
   than the feature cards — it just starts at the same place they do. */
.content > * { max-width: 820px; }
.lead {
  font-size: 17px; color: #4b5563; margin: 0 0 40px; line-height: 1.7;
  padding-bottom: 24px; border-bottom: 1px solid #e6f5f2;
}
h2 {
  font-size: 21px; font-weight: 800; color: #111827;
  margin: 44px 0 12px; letter-spacing: -0.02em;
  display: flex; align-items: baseline; gap: 12px;
}
.num { color: #0d9488; font-size: 13px; font-weight: 700; }
p { margin: 0 0 14px; color: #5b6472; }
ul, ol { margin: 0 0 14px; padding-left: 22px; color: #5b6472; }
li { margin-bottom: 7px; }
strong { color: #111827; font-weight: 600; }

.card {
  background: #fcfefe; border: 1px solid #e6f5f2; border-radius: 14px;
  padding: 20px 22px; margin: 18px 0; color: #5b6472;
}
.info-card {
  margin: 24px 0; padding: 18px 22px;
  background: #f0fdfa; border: 1px solid #ccfbf1; border-left: 3px solid #0d9488;
  border-radius: 10px; color: #37504c;
}

table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 14px; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #eef2f1; vertical-align: top; }
th { color: #111827; font-weight: 700; font-size: 13px; }
td { color: #5b6472; }

/* ---- the data-deletion form ------------------------------------------- */
.form-card {
  background: #fff; border: 1px solid #e6f5f2; border-radius: 16px;
  padding: 28px; margin: 28px 0;
  box-shadow: 0 1px 4px rgba(13,148,136,0.05);
}
.field { margin-bottom: 18px; }
.field label {
  display: block; font-size: 13.5px; font-weight: 600; color: #111827; margin-bottom: 7px;
}
.field .hint { color: #9ca3af; font-weight: 400; font-size: 12px; margin-left: 6px; }
.field input, .field textarea {
  width: 100%; padding: 11px 13px; font-size: 14.5px; font-family: inherit;
  color: #111827; background: #fff;
  border: 1px solid #d9e7e4; border-radius: 10px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.field input:focus, .field textarea:focus {
  border-color: #0d9488; box-shadow: 0 0 0 3px rgba(13,148,136,0.12);
}
.field textarea { min-height: 110px; resize: vertical; }
.actions { display: flex; gap: 12px; align-items: center; margin-top: 8px; }

button.primary {
  background: #0d9488; color: #fff; font-weight: 700; font-size: 14px;
  padding: 12px 24px; border: none; border-radius: 10px;
  cursor: pointer; transition: opacity .15s, transform .1s;
  font-family: inherit;
}
button.primary:hover { opacity: .92; }
button.primary:active { transform: translateY(1px); }
button.primary:disabled { opacity: .5; cursor: not-allowed; }

.err {
  color: #b91c1c; font-size: 13px; padding: 10px 14px;
  background: #fef2f2; border: 1px solid #fecaca;
  border-radius: 8px; margin-top: 12px;
}

.success {
  display: none; padding: 28px;
  background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 16px;
  margin: 32px 0;
}
.success.show { display: block; }
.success h3 {
  font-size: 22px; color: #111827; margin: 0 0 10px;
  display: flex; align-items: center; gap: 12px;
}
.check {
  width: 32px; height: 32px; border-radius: 50%;
  background: #16a34a; color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 18px;
}
.success p { color: #4b5563; }

/* ---- footer ------------------------------------------------------------ */
/* Mirrors PublicFooter in PublicShell.jsx — same four columns, same links,
   same company block. These pages used to end in a thin row of links, which is
   exactly where a payment processor's reviewer looks for the operating company
   and its policies, and it was the second loudest reason they read as a
   different site. */
.site-footer {
  border-top: 1px solid rgba(13,148,136,0.15); background: #fff;
  padding: 44px 40px;
}
.footer-cols {
  /* ⚠ 1000, NOT 1080 — see the note in PublicShell.jsx. The footer's 40px sits
     on .site-footer, so its inner block must be 1080-80 to start on the same
     left edge as the page content above it. */
  max-width: 1000px; margin: 0 auto;
  display: grid; gap: 28px; grid-template-columns: 1.6fr 1fr 1fr 1fr;
}
.footer-brand { margin-bottom: 10px; }
.footer-brand .brand-mark { width: 30px; height: 30px; }
.footer-brand .brand-name { font-size: 16px; }
.footer-blurb { color: #6b7280; font-size: 14px; line-height: 1.6; margin: 0; max-width: 320px; }
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-head {
  font-size: 12px; font-weight: 700; color: #111827;
  text-transform: uppercase; letter-spacing: 0.6px; line-height: 1.5;
}
.footer-col a, .footer-col span { color: #4b5563; font-size: 14px; line-height: 1.5; }
.footer-col a:hover { color: #0d9488; }
.footer-col .footer-address { color: #6b7280; font-size: 13px; line-height: 1.5; }
.footer-bottom {
  max-width: 1000px; margin: 28px auto 0; padding-top: 18px;
  border-top: 1px solid #f0f0f2; color: #6b7280; font-size: 14px; line-height: 1.5;
  display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between;
}
.footer-bottom a { color: #4b5563; margin-right: 16px; }
.footer-bottom a:hover { color: #0d9488; }

/* 🔴 768px IS THE ONLY BREAKPOINT, BECAUSE THE APP HAS ONLY ONE.
   `useIsMobile()` in src/lib/useMediaQuery.js is `(max-width: 768px)`, and every
   React page switches its header padding, its section padding, its heading size
   and its footer columns on that one query. These pages had two of their own —
   900 for the footer and 640 for everything else — so between 769 and 900 the
   policy footer stood in ONE stacked column while the React footer beside it was
   still four across (761px tall against 319px), and between 641 and 768 the
   policy header kept its desktop padding while the app's went to mobile. Both
   were invisible at 1280, which is the only width the tests had been measuring.
   Change this number only when useMediaQuery.js changes; the width sweep in
   e2e/local-social-pricing-page-test.cjs fails if the two disagree. */
@media (max-width: 768px) {
  h1 { font-size: 32px; }
  .hero { padding: 44px 18px 24px; }
  .content { padding: 24px 18px 60px; }
  .top-inner { padding: 12px 16px; }
  /* Nine items do not fit a phone header, so below 768 the eight options move
     behind a Menu toggle, as in PublicHeader (CEO 2026-10-04: "why no menu on
     mobile?"). A checkbox, not a script: these pages work with JS off. */
  .top-nav { gap: 10px; margin-left: auto; }
  .top { position: sticky; }
  .nav-links { display: none; }
  .nav-toggle {
    display: block; position: absolute; width: 1px; height: 1px;
    opacity: 0; margin: 0; pointer-events: none;
  }
  .nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex-shrink: 0; cursor: pointer;
    background: #fff; color: #0d9488; border: 1px solid rgba(13,148,136,0.35);
    border-radius: 8px; font-size: 20px; line-height: 1;
  }
  .nav-burger::before { content: "\2630"; }
  .nav-toggle:checked ~ .nav-burger { background: #f0fdfa; }
  .nav-toggle:checked ~ .nav-burger::before { content: "\2715"; }
  .nav-toggle:focus-visible ~ .nav-burger { outline: 2px solid #0d9488; outline-offset: 2px; }
  .nav-toggle:checked ~ .nav-links {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid rgba(13,148,136,0.18);
    box-shadow: 0 10px 24px rgba(17,24,39,0.08); padding: 6px 0;
  }
  .nav-toggle:checked ~ .nav-links a { display: block; padding: 12px 20px; font-size: 15px; }
  .nav-toggle:checked ~ .nav-links a.active { background: #f0fdfa; }
  .form-card { padding: 22px; }
  .page-icon { width: 60px; height: 60px; }
  .footer-cols { grid-template-columns: 1fr; }
  .site-footer { padding: 30px 18px; }
}