/* ---------------------------------------------------------------------------
   Haulwise — shared stylesheet for naska-it.com/haulwise/ (overview, privacy,
   terms). Built from the app's own tokens (temu-plus repo:
   mobile/app/src/main/assets/ui/haulwise.css), light and dark, so the pages
   look like the product rather than like this site — the same reason the
   Roundtable page is self-contained.

   System fonts only: these pages make no request to any other host (no Google
   Fonts), which matters on a privacy page that says the app talks to nobody.
--------------------------------------------------------------------------- */

:root {
  --primary: #006B5E;
  --primary-container: #A2F2DF;
  --on-primary-container: #005146;
  --secondary-container: #CDE8E1;
  --on-secondary-container: #334B46;
  --surface: #F4FBF8;
  --surface-low: #EEF5F2;
  --surface-lowest: #FFFFFF;
  --on-surface: #161D1B;
  --on-surface-variant: #3F4946;
  --outline-variant: #BFC9C5;
  --brand-a: #0F8F7B;
  --brand-b: #094A43;
  --mint: #7FE3C9;

  --col: 44rem;
  --font: system-ui, -apple-system, Roboto, "Segoe UI", sans-serif;
  --mono: ui-monospace, "Roboto Mono", Menlo, monospace;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #82D6C5;
    --primary-container: #005146;
    --on-primary-container: #A2F2DF;
    --secondary-container: #334B46;
    --on-secondary-container: #CDE8E1;
    --surface: #0E1513;
    --surface-low: #161D1B;
    --surface-lowest: #09100E;
    --on-surface: #DDE4E0;
    --on-surface-variant: #BFC9C5;
    --outline-variant: #3F4946;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--surface);
  color: var(--on-surface-variant);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.wrap { width: 100%; max-width: var(--col); margin-inline: auto; padding-inline: 16px; }
@media (min-width: 40rem) { .wrap { padding-inline: 24px; } }

/* Top bar: mark + name, then where you are. */
.top { display: flex; align-items: center; gap: 12px; padding-block: 20px 0; }
.top a.home { display: inline-flex; align-items: center; gap: 10px; color: var(--on-surface); text-decoration: none; font-weight: 600; font-size: 1.125rem; letter-spacing: -.2px; }
.top img { width: 32px; height: 32px; border-radius: 9px; display: block; }
.top .where { color: var(--on-surface-variant); font-size: .875rem; }
.top .where::before { content: "/"; margin-right: 12px; color: var(--outline-variant); }

main { padding-block: 40px 56px; }
h1, h2, h3 { color: var(--on-surface); margin: 0; text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 5vw, 2.4rem); line-height: 1.15; font-weight: 600; letter-spacing: -.02em; }
h2 { font-size: 1.25rem; line-height: 1.35; font-weight: 600; margin-top: 2.5rem; }
h3 { font-size: 1rem; line-height: 1.45; font-weight: 600; margin-top: 1.5rem; }
p, ul, dl { margin: .85rem 0 0; }
ul { padding-left: 1.2rem; }
li { margin-top: .4rem; }
a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: 3px; }
strong, b { color: var(--on-surface); font-weight: 600; }
code { font-family: var(--mono); font-size: .875em; background: var(--surface-low); border-radius: 6px; padding: .1em .35em; overflow-wrap: anywhere; }
.lead { font-size: 1.0625rem; margin-top: 1rem; }
.accent { color: var(--primary); }

/* The one claim worth setting apart, because it is the whole policy. */
.slab { margin-top: 1.75rem; padding: 18px 20px; border-radius: 16px; background: var(--secondary-container); color: var(--on-secondary-container); }
.slab p:first-child { margin-top: 0; }
.slab strong { color: inherit; }

dl { max-width: 100%; }
dt { color: var(--on-surface); font-weight: 600; margin-top: 1.1rem; }
dd { margin: .25rem 0 0; }

/* Verbatim legal block (the in-app "Accuracy & scope of information" text). */
.verbatim { margin-top: 1rem; padding: 4px 20px 18px; border-left: 3px solid var(--primary); background: var(--surface-low); border-radius: 0 12px 12px 0; }

.note { font-size: .875rem; }

/* Overview hero */
.hero { margin-top: 8px; padding: 28px 24px; border-radius: 24px; background: linear-gradient(160deg, var(--brand-a) 0%, var(--brand-b) 100%); color: #FFFFFF; }
.hero img { width: 64px; height: 64px; border-radius: 18px; display: block; }
.hero h1 { color: #FFFFFF; margin-top: 20px; }
.hero p { color: #D8F5EC; font-size: 1.0625rem; max-width: 34ch; }
.hero .tag { display: inline-block; margin-top: 18px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); color: #FFFFFF; font-size: .875rem; font-weight: 600; }
.feats { list-style: none; padding: 0; margin-top: 1.5rem; display: grid; gap: 12px; }
.feats li { margin: 0; padding: 16px 18px; border-radius: 16px; background: var(--surface-low); }
.feats b { display: block; }

footer { border-top: 1px solid var(--outline-variant); padding-block: 28px 40px; font-size: .875rem; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 10px; }
footer a { color: var(--on-surface-variant); }
footer .disclaimer { margin-top: 14px; font-size: .8125rem; }