/* ==========================================================================
   Peso — website design system

   Every token below is lifted from the Flutter app so the site and the app
   read as one product:

     --peso-bg      #D6D4CE   AppTheme.backgroundColor
     --peso-blue    #125670   AppTheme.primaryBlue
     Baloo 2                  GoogleFonts.baloo2, used on every screen
     radius 10px              the button/card radius used throughout
     black buttons            ElevatedButton(backgroundColor: Colors.black)
     translucent cards        Colors.black.withValues(alpha: 0.04–0.06)

   Layout is mobile-first: Peso's users are on phones, so the small-screen
   rules are the default and wider screens are the enhancement.
   ========================================================================== */

:root {
  --peso-bg: #d6d4ce;
  --peso-blue: #125670;
  --ink: #000;
  --ink-soft: rgba(0, 0, 0, 0.87);
  --ink-muted: rgba(0, 0, 0, 0.62);

  /* Card treatment, matching NotificationCenterPage's banner. */
  --surface: rgba(0, 0, 0, 0.045);
  --surface-strong: rgba(0, 0, 0, 0.06);
  --hairline: rgba(0, 0, 0, 0.11);

  --radius: 10px;
  --maxw: 760px;
  --maxw-wide: 1080px;
  /* The landing design's frame. Only index.html uses it: on a page of legal
     prose a 1440px header floats a long way clear of a 760px column of text. */
  --maxw-frame: 1440px;

  --step: 1rem;
}

/* --------------------------------------------------------------------------
   Reset
   -------------------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--peso-bg);
  color: var(--ink-soft);
  font-family: "Baloo 2", "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  /* Nothing on this site may scroll sideways, at any width. */
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--peso-blue);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

a:hover {
  color: var(--ink);
}

/* Keyboard focus must stay visible — these are legal pages people need to
   be able to navigate without a mouse. */
a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--peso-blue);
  outline-offset: 3px;
  border-radius: 4px;
}

h1,
h2,
h3 {
  color: var(--ink);
  line-height: 1.25;
  margin: 0 0 0.5em;
  font-weight: 700;
}

h1 {
  font-size: 1.9rem;
}
h2 {
  font-size: 1.35rem;
  margin-top: 2rem;
}
h3 {
  font-size: 1.08rem;
  margin-top: 1.5rem;
}

p,
ul,
ol {
  margin: 0 0 1rem;
}

ul,
ol {
  padding-left: 1.25rem;
}

li {
  margin-bottom: 0.4rem;
}

strong {
  color: var(--ink);
  font-weight: 700;
}

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: 20px;
}

.wrap--wide {
  max-width: var(--maxw-wide);
}

.wrap--frame {
  max-width: var(--maxw-frame);
}

/* 64px matches the gutter measured off the design frame. Below that width the
   20px phone gutter is right, so this only applies once there is room. */
@media (min-width: 900px) {
  .wrap--frame {
    padding-inline: 64px;
  }
}

.skip-link {
  position: absolute;
  left: -9999px;
}

.skip-link:focus {
  left: 20px;
  top: 12px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   Header

   One row: the wordmark on the left, five destinations on the right. Same
   markup on every page — the home page is a different design, not a different
   site, and a nav that changes shape between pages reads as two sites.
   -------------------------------------------------------------------------- */

.site-header {
  border-bottom: 1px solid var(--hairline);
  background: var(--peso-bg);
  position: sticky;
  top: 0;
  z-index: 20;
}

/* The home page sits on an unbroken field of #d6d4ce, so the rule under the
   header would cut the hero in half. Interior pages keep it: there the header
   separates navigation from a wall of legal text. */
.site-header--flush {
  border-bottom: 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-block: 14px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 700;
  font-size: 1.75rem;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.brand img {
  height: 32px;
  width: auto;
}

/* The final letter carries the accent, as drawn. Decorative only — the word
   still reads "Peso" to a screen reader because it is one text node. */
.brand .o {
  color: var(--peso-blue);
}

/* Five destinations. On phones this becomes a horizontally scrollable strip
   rather than a hamburger: they are the whole point of the site, and store
   reviewers must be able to reach the legal pages without hunting. The strip
   scrolls, the page never does. */
.nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav-links::-webkit-scrollbar {
  display: none;
}

.nav-links li {
  margin: 0;
}

.nav-links a {
  display: block;
  white-space: nowrap;
  padding: 7px 12px;
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 1.26rem;
  font-weight: 600;
}

.nav-links a:hover {
  background: var(--surface);
  color: var(--ink);
}

.nav-links a[aria-current="page"] {
  color: var(--ink);
  background: var(--surface);
}

/* Below the desktop layout the wordmark and five labels cannot share a row
   without the last two falling off the edge. The nav drops to its own
   full-width line and scrolls there instead — all five stay reachable, which
   matters because two of them are the legal pages store reviewers open. */
@media (max-width: 479px) {
  .nav-links {
    gap: 2px;
  }

  /* Tight enough that all five labels fit a 360px screen without scrolling.
     Two of them are the legal pages a store reviewer opens on a phone, so
     "it scrolls" is not good enough — there is no affordance saying so. */
  .nav-links a {
    padding: 6px 4px;
    font-size: 0.9rem;
  }
}

@media (max-width: 899px) {
  .header-inner {
    flex-wrap: wrap;
    row-gap: 6px;
    padding-block: 12px;
  }

  .header-inner nav {
    width: 100%;
    /* Bleed the scroll strip into the page gutter so the row it scrolls
       through is the full width of the screen, not the width of the text. */
    margin-inline: -20px;
    padding-inline: 20px;
  }
}

@media (min-width: 900px) {
  .header-inner {
    padding-block: 21px;
  }

  .nav-links {
    gap: 36px;
  }

  .nav-links a {
    padding: 6px 0;
    border-radius: 4px;
    background: none;
  }

  .nav-links a:hover {
    background: none;
    color: var(--peso-blue);
  }

  /* No pill at this width — the mock underlines the current page instead, so
     the row of labels keeps its even rhythm. */
  .nav-links a[aria-current="page"] {
    background: none;
    box-shadow: inset 0 -2px 0 var(--ink);
  }
}

/* --------------------------------------------------------------------------
   Page furniture
   -------------------------------------------------------------------------- */

main {
  padding-block: 36px 56px;
}

.page-title {
  margin-bottom: 4px;
}

.page-meta {
  color: var(--ink-muted);
  font-size: 0.9rem;
  margin-bottom: 28px;
}

/* Long-form legal copy. */
.prose h2 {
  border-top: 1px solid var(--hairline);
  padding-top: 1.6rem;
}

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

.prose a {
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   Cards, callouts, buttons
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 16px;
}

.card h3 {
  margin-top: 0;
}

.card > :last-child {
  margin-bottom: 0;
}

.callout {
  background: var(--surface-strong);
  border: 1px solid var(--hairline);
  border-left: 4px solid var(--peso-blue);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin: 20px 0;
}

.callout > :last-child {
  margin-bottom: 0;
}

.btn {
  display: inline-block;
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: var(--radius);
  padding: 14px 24px;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}

.btn:hover {
  background: #222;
  color: #fff;
}

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
}

.btn--ghost:hover {
  background: var(--surface-strong);
  color: var(--ink);
}

.btn--block {
  display: block;
  width: 100%;
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 24px 0;
}

/* ==========================================================================
   Home page — the landing design
   ==========================================================================

   A single centred column of copy, with three decorations arranged around it:
   the phone on the left, the card stack on the right, and the social rail on
   the right edge. All three are decorative. They are absolutely positioned at
   desktop widths and fall back into the flow below 1180px, where there is no
   longer room to place anything beside a 640px column of text.

   Measurements come from the design frame (1756px of artboard mapping to a
   1440px viewport, a 0.82 scale), which is why the numbers below are not
   round.
   -------------------------------------------------------------------------- */

main.landing {
  padding-block: 0;
}

.hero {
  position: relative;
  padding-block: 40px 56px;
  display: flex;
  justify-content: center;
}

/* The faint rings behind the headline. Purely atmospheric — they carry no
   meaning, so they are hidden from assistive technology and dropped entirely
   on small screens where they would crowd the text. */
.hero-rings {
  position: absolute;
  top: 90px;
  left: 50%;
  translate: -50% 0;
  pointer-events: none;
  display: none;
}

.hero-rings span {
  position: absolute;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  border: 1px solid rgba(0, 0, 0, 0.045);
  border-radius: 50%;
}

.hero-rings span:nth-child(1) {
  width: 250px;
  height: 250px;
}
.hero-rings span:nth-child(2) {
  width: 425px;
  height: 425px;
}
.hero-rings span:nth-child(3) {
  width: 600px;
  height: 600px;
}

.hero-copy {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 660px;
  text-align: center;
}

.hero-copy h1 {
  font-size: clamp(2.1rem, 5.5vw, 3.55rem);
  font-weight: 700;
  /* The design sets the two lines 89px apart at the full 56.8px size. Most of
     that air comes from the line height, so the block below needs no margin. */
  line-height: 1.57;
  letter-spacing: -0.015em;
  margin: 0 0 4px;
}

.hero-copy .lede {
  font-size: clamp(1rem, 1.6vw, 1.44rem);
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 auto 54px;
  /* Wide enough to hold the design's two-line break, narrow enough that it
     never runs the full 660px and turns into a slab. */
  max-width: 640px;
}

.download-label {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 22px;
}

/* --- Store badges ---------------------------------------------------------
   Both are the official artwork, unmodified apart from cropping the
   transparent margin off the Play badge so the two buttons share a baseline.
   Sizing by height keeps each one's own aspect ratio; stretching either to
   match the other breaks both companies' brand rules. */

.store-badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 23px;
  margin-bottom: 31px;
}

.store-badges img {
  height: 52px;
  width: auto;
}

.store-badge {
  display: inline-block;
  border-radius: 8px;
}

/* The App Store badge has no listing to point at yet, so it is a <span>, not
   a link. A badge that looks live and goes nowhere is worse than one that
   simply waits. */
.store-badge[aria-disabled="true"] {
  cursor: default;
}

.soon-label {
  font-size: 1rem;
  color: var(--ink-muted);
  margin: 0 0 20px;
}

.soon-pills {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.soon-pills li {
  margin: 0;
  padding: 5px 20px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.055);
  color: var(--ink-soft);
  font-size: 0.98rem;
  font-weight: 600;
}

/* --- Decorations ---------------------------------------------------------- */

.hero-phone,
.hero-cards,
.social-rail {
  display: none;
}

.hero-phone {
  width: 313px;
  height: auto;
}

.hero-cards {
  width: 363px;
  height: auto;
}

.social-rail {
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 39px;
}

.social-rail li {
  margin: 0;
}

.social-rail a {
  display: block;
  color: var(--ink-soft);
  opacity: 0.75;
}

.social-rail a:hover {
  opacity: 1;
  color: var(--ink);
}

.social-rail svg {
  display: block;
  width: 26px;
  height: 26px;
}

/* --- Desktop placement ---------------------------------------------------- */

@media (min-width: 1180px) {
  .hero {
    padding-block: 145px 41px;
  }

  .hero-rings {
    display: block;
    width: 0;
    height: 0;
    top: 223px;
  }

  .hero-phone,
  .hero-cards {
    display: block;
    position: absolute;
  }

  /* Insets measured off the design frame, scaled 0.82 from artboard to CSS.
     They are offsets from the hero's padding box, which is the full 1440px
     frame — not from the 64px content gutter. */
  .hero-phone {
    left: 92px;
    top: 205px;
  }

  .hero-cards {
    right: 85px;
    top: 31px;
  }

  .social-rail {
    display: flex;
    flex-direction: column;
    position: absolute;
    right: 64px;
    top: 492px;
  }
}

/* Between 1180 and 1320 the phone and the copy would collide, so the phone
   shrinks rather than overlapping the headline. */
@media (min-width: 1180px) and (max-width: 1319px) {
  .hero-phone {
    left: 20px;
    scale: 0.86;
    transform-origin: top left;
  }

  .hero-cards {
    right: 34px;
    scale: 0.86;
    transform-origin: top right;
  }
}

/* Below the desktop layout the decorations rejoin the flow: the phone under
   the copy where it still earns its space, the social links as a row. The card
   stack is dropped — it is the same artwork as the card already visible on the
   phone. */
@media (max-width: 1179px) {
  .hero {
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }

  .hero-phone {
    display: block;
    order: 2;
  }

  .social-rail {
    display: flex;
    order: 3;
    flex-direction: row;
    justify-content: center;
    gap: 32px;
  }
}

/* --------------------------------------------------------------------------
   Value bar — the strip beneath the hero
   -------------------------------------------------------------------------- */

.value-bar {
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

/* The strip's rules run edge to edge, but the four items sit in a ~840px band
   in the middle of it — measured off the design, where the dividers fall at a
   quarter of that band, not a quarter of the page. */
.value-bar ul {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  list-style: none;
  margin-inline: auto;
  margin-block: 0;
  padding: 0;
  max-width: 860px;
}

.value-bar li {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 12px 12px;
  font-size: 1.02rem;
  color: var(--ink-soft);
  border-left: 1px solid rgba(0, 0, 0, 0.04);
}

.value-bar li:first-child {
  border-left: 0;
}

.value-bar li:nth-child(3) {
  border-left: 0;
}

.value-bar svg {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

@media (min-width: 760px) {
  .value-bar ul {
    grid-template-columns: repeat(4, 1fr);
  }

  .value-bar li:nth-child(3) {
    border-left: 1px solid rgba(0, 0, 0, 0.04);
  }
}

/* --------------------------------------------------------------------------
   Shared blocks still used by the interior pages
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  margin: 24px 0;
}

@media (min-width: 720px) {
  .grid--2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.ticks {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ticks li {
  padding-left: 26px;
  position: relative;
}

.ticks li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--peso-blue);
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   FAQ

   Built on <details>/<summary> so every question is readable, expandable and
   printable with JavaScript switched off. main.js only adds the
   one-open-at-a-time behaviour on top.
   -------------------------------------------------------------------------- */

.faq {
  border-top: 1px solid var(--hairline);
  margin-top: 8px;
}

.faq details {
  border-bottom: 1px solid var(--hairline);
}

.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 40px 18px 0;
  position: relative;
  font-weight: 700;
  color: var(--ink);
  font-size: 1.05rem;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--ink-muted);
  line-height: 1;
}

.faq details[open] summary::after {
  content: "−";
}

.faq .answer {
  padding: 0 0 18px;
  color: var(--ink-soft);
}

.faq .answer > :last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact-list {
  list-style: none;
  padding: 0;
}

.contact-list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--hairline);
}

.contact-list .label {
  display: block;
  font-size: 0.85rem;
  color: var(--ink-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.contact-list .value {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   Tables (data disclosure in the privacy policy)
   -------------------------------------------------------------------------- */

.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  margin-bottom: 20px;
}

table {
  border-collapse: collapse;
  width: 100%;
  min-width: 520px;
  font-size: 0.95rem;
}

th,
td {
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

th {
  background: var(--surface-strong);
  color: var(--ink);
  font-weight: 700;
}

tr:last-child td {
  border-bottom: 0;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--hairline);
  padding-block: 28px 40px;
  font-size: 0.92rem;
  color: var(--ink-muted);
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
}

.footer-links a {
  color: var(--ink-soft);
  text-decoration: none;
  font-weight: 600;
}

.footer-links a:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Print — reviewers and lawyers do print these
   -------------------------------------------------------------------------- */

@media print {
  .site-header,
  .site-footer,
  .btn-row {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
  }

  .faq details {
    /* Force every answer visible on paper. */
    display: block;
  }

  .faq .answer {
    display: block !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}