/*
   MarketMate site styles.

   Every value here traces to the design law in the Android repo's CLAUDE.md, so the
   website reads as the same product as the app rather than as a generic legal page
   bolted onto the domain. The palette, the logo container gradient, the logo shadow
   and the corner glow are the app's own, quoted rather than reinvented.

   Two rules that are not negotiable:

   1. LIGHT ONLY. The app is light only by decision (MarketMateTheme darkTheme = false),
      so the site does not offer a dark variant. A prefers-color-scheme block here would
      put the site and the app in two different skins for one brand.
   2. NO JAVASCRIPT AND NO REMOTE ASSET. Fonts are self-hosted and every colour is
      literal. The Content-Security-Policy in _headers blocks scripts and third-party
      connections outright, which is what keeps the Privacy Statement's "no cookies and
      no web analytics" sentence true by construction rather than by good intentions.
*/

/* ---------- Fonts. Self-hosted, so no CDN sees a visitor's address. ---------- */

@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "DM Sans";
  src: url("fonts/DMSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Tokens, quoted from the app's core palette ---------- */

:root {
  --grey-900: #0D0D12;
  --grey-800: #1A1B25;
  --grey-700: #272835;
  --grey-500: #666D80;
  --grey-400: #818898;
  --grey-50:  #ECEFF3;
  --grey-25:  #F8FAFB;

  --primary-200: #32429A;   /* legal links, the app uses this exact value for them */
  --action:      #3E469C;   /* the flat action indigo, owner decision 2026-08-05 */
  --glow:        rgba(42, 118, 232, 0.13);
  --logo-shadow: rgba(50, 66, 154, 0.30);

  --measure: 46rem;         /* reading measure for the long documents */
  --font: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Reset, kept to what this site actually uses ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #FFFFFF;
  color: var(--grey-800);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Anchors the corner glow below to the DOCUMENT, not the viewport. */
  position: relative;
}

/*
   The auth screens' corner glow: a 296dp circle at (-6.44, 11) from the top left,
   #2A76E8 at 13 percent under a heavy blur. Scaled up for a desktop viewport, same
   hue and same intent. It is decoration only and is hidden from assistive tech.

   POSITION IS ABSOLUTE, NOT FIXED, AND THAT IS THE WHOLE POINT.

   It shipped as `fixed` on 2026-08-05 and was wrong. A fixed element is positioned
   against the viewport, so the glow detached from the top of the page and followed the
   reader all the way down, hanging over the text like a smudge on the screen. On the
   landing page nothing gives it away, because that page is one viewport tall and never
   scrolls. On the Terms it tracks the reader through 23 sections.

   In the app this is a BACKGROUND on the auth screens, sitting at the top-left corner of
   the screen. `absolute` reproduces that: it is painted once at the top of the document
   and scrolls away with everything else, which is what a background does.
*/
body::before {
  content: "";
  position: absolute;
  top: -180px;
  left: -180px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0%, rgba(42, 118, 232, 0) 68%);
  pointer-events: none;
  z-index: 0;
}

main,
header,
footer { position: relative; z-index: 1; }

/* ---------- The brand mark, WITHHELD until the app is live ----------

   Owner decision 2026-08-05: the logo does not appear on the public web until launch,
   and the SVG is not served from this origin at all. Removing it from the markup alone
   would not have been enough, because a file sitting at /assets/logo.svg stays fetchable
   by anyone who guesses the path.

   These rules are KEPT, unused, deliberately. They are the app's real logo geometry and
   its exact two-layer navy shadow, so putting the mark back at launch is restoring an
   <img> on the landing page and one in the document header rather than re-deriving a
   design. This mirrors how the retired auth gradient is kept in the Android theme file.

   TO RESTORE AT LAUNCH:
     1. Put logo.svg back in public/assets/.
     2. Uncomment the two rules below.
     3. Landing page: <img class="brandmark" src="/assets/logo.svg" width="68"
        height="68" alt="MarketMate"> above the h1.
     4. Document header, in build.py's template AND in delete-account/index.html:
        wrap the name link around <img class="brandmark brandmark--small" ...>.
     5. Restore the icon and apple-touch-icon links in every <head>, including
        build.py's template.
     6. Rebuild, because two of the four pages are generated.

.brandmark {
  display: block;
  width: 68px;
  height: 68px;
  border-radius: 16px;
  box-shadow:
    0 4px 6px -4px var(--logo-shadow),
    0 10px 15px -3px var(--logo-shadow);
}

.brandmark--small {
  width: 40px;
  height: 40px;
  border-radius: 9.4px;
  box-shadow:
    0 2px 4px -2px var(--logo-shadow),
    0 6px 9px -2px var(--logo-shadow);
}

   ---------- end withheld block ---------- */

/* ---------- Landing page ---------- */

.landing {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px 40px;
  gap: 0;
}

.landing__inner {
  width: 100%;
  max-width: 34rem;
}

.landing__name {
  font-size: clamp(1.85rem, 1.4rem + 2vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--grey-900);
  margin: 0 0 10px;
}

.landing__status {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--action);
  background: rgba(62, 70, 156, 0.07);
  border: 1px solid rgba(62, 70, 156, 0.15);
  border-radius: 999px;
  padding: 6px 14px;
  margin: 0 0 26px;
}

.landing__lede {
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--grey-500);
  margin: 0 auto 30px;
  max-width: 30rem;
}

.landing__notice {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--grey-400);
  background: var(--grey-25);
  border: 1px solid var(--grey-50);
  border-radius: 14px;
  padding: 16px 20px;
  margin: 0 auto 32px;
  max-width: 32rem;
  text-align: left;
}

.landing__notice strong {
  color: var(--grey-700);
  font-weight: 500;
}

/*
   Every rule below exists because the Content-Security-Policy in _headers sets
   style-src to 'self' with no 'unsafe-inline'. That blocks inline style attributes
   as well as inline <style> blocks, so a one-off tweak written as style="..." on an
   element silently does nothing in a real browser while looking correct in an editor.
   Anything that needs styling gets a class here.
*/

.landing__contact {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--grey-500);
  margin: 0 auto;
  max-width: 30rem;
}

.sitefoot__block { margin: 24px 0 0; }

/* ---------- Links ---------- */

a {
  color: var(--primary-200);
  text-decoration: none;
  border-bottom: 1px solid rgba(50, 66, 154, 0.28);
  /* The app's accessibility floor is 44dp of pad on a text link. Web pointers are
     finer than a fingertip, so this pads toward that without breaking the text flow. */
  padding-bottom: 1px;
}

a:hover,
a:focus-visible { border-bottom-color: var(--primary-200); }

a:focus-visible {
  outline: 2px solid var(--action);
  outline-offset: 3px;
  border-radius: 2px;
}

.linkrow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 22px;
  font-size: 0.95rem;
  font-weight: 500;
  margin: 0 0 34px;
  padding: 0;
  list-style: none;
}

.linkrow li { display: inline-flex; min-height: 24px; align-items: center; }

/* ---------- Footer, shared by every page ---------- */

.sitefoot {
  border-top: 1px solid var(--grey-50);
  padding: 28px 24px 40px;
  text-align: center;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--grey-400);
}

.sitefoot__org {
  color: var(--grey-500);
  font-weight: 500;
}

.landing .sitefoot {
  border-top: none;
  padding-bottom: 0;
}

/* ---------- Long-form documents (privacy, terms, deletion) ---------- */

.dochead {
  border-bottom: 1px solid var(--grey-50);
  padding: 22px 24px;
}

.dochead__inner {
  max-width: var(--measure);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
}

/*
   With the mark withheld, the name IS the header and it is also the link home, so it
   carries its own colour rather than inheriting the link indigo. The 44px min-height is
   the app's own accessibility floor for a text link.
*/
.dochead__name {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--grey-900);
}

.dochead a { border-bottom: none; color: var(--grey-900); }

.dochead a:hover,
.dochead a:focus-visible { color: var(--primary-200); }

.doc {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 44px 24px 64px;
}

.doc h1 {
  font-size: clamp(1.7rem, 1.35rem + 1.5vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--grey-900);
  margin: 0 0 10px;
}

.doc__updated {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--grey-400);
  margin: 0 0 40px;
}

.doc h2 {
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--grey-900);
  margin: 52px 0 16px;
  padding-top: 20px;
  border-top: 1px solid var(--grey-50);
}

.doc h2:first-of-type { border-top: none; padding-top: 0; }

.doc h3 {
  font-size: 1.06rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--grey-800);
  margin: 34px 0 12px;
}

.doc p { margin: 0 0 18px; }

.doc strong { font-weight: 700; color: var(--grey-900); }

.doc ul { margin: 0 0 20px; padding-left: 1.35rem; }

.doc li { margin: 0 0 10px; }

.doc li::marker { color: var(--grey-400); }

/*
   Tables carry the vendor list and the retention periods, which are the parts a
   reviewer actually reads. They scroll inside their own box so a narrow phone never
   scrolls the whole page sideways.
*/
.doc__tablewrap {
  overflow-x: auto;
  margin: 0 0 24px;
  border: 1px solid var(--grey-50);
  border-radius: 12px;
  -webkit-overflow-scrolling: touch;
}

.doc table {
  border-collapse: collapse;
  width: 100%;
  min-width: 30rem;
  font-size: 0.92rem;
}

.doc th,
.doc td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--grey-50);
  vertical-align: top;
}

.doc thead th {
  background: var(--grey-25);
  font-weight: 700;
  color: var(--grey-800);
  white-space: nowrap;
}

.doc tbody tr:last-child td { border-bottom: none; }

/*
   The uppercase disclaimer blocks in the Terms. They are shouted because the law
   in several jurisdictions wants them conspicuous, so they keep their capitals and
   get a calmer size and a wider line height rather than being softened.
*/
.doc__legalese {
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--grey-700);
  letter-spacing: 0.005em;
}

/* Print, because a legal page is a document somebody will save as PDF. */
@media print {
  body::before { display: none; }
  body { font-size: 11pt; line-height: 1.5; }
  .dochead, .sitefoot { border-color: #DDD; }
  .doc { max-width: none; padding: 0; }
  .doc h2 { break-after: avoid; }
  a { color: inherit; border-bottom: none; }
}

@media (max-width: 30rem) {
  .doc { padding: 32px 20px 48px; }
  .landing { padding: 40px 20px 32px; }
  .doc h2 { margin-top: 40px; }
}

/* The app's pulse stops for a device set to remove animation. Same courtesy here. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}