/* Styling for the legal documents — LAS-01 Terms, LAS-02 Refunds, LAS-03 Privacy.
 *
 * Deliberately plain. These are read by a bank's compliance officer deciding
 * whether to approve a merchant account, and by someone who has just been
 * charged money and wants to know where they stand. Both are served better by
 * legibility and a clear clause hierarchy than by design. The palette is the
 * site's so the documents do not look like they came from somewhere else.
 */

@import url('https://fonts.googleapis.com/css2?family=Urbanist:wght@400;600;700&display=swap');

:root {
    --ink: #14150F;
    --soft: #5E5F55;
    --shell: #F2F0EA;
    --card: #FBFAF6;
    --hair: #E0DACA;
    --lime: #B8E020;
    --flag: #FFF4CC;
    --flag-ink: #6B5510;
}

* { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--shell);
    color: var(--ink);
    font-family: 'Urbanist', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 16px;
    line-height: 1.72;
    /* Long documents are read, not skimmed; a settled measure matters more here
       than filling the window. */
    -webkit-font-smoothing: antialiased;
}

.doc { max-width: 780px; margin: 0 auto; padding: 40px 24px 88px; }

/* ── masthead ─────────────────────────────────────────────────────────────── */
.masthead {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; padding-bottom: 22px; margin-bottom: 34px;
    border-bottom: 1px solid var(--hair);
}
.masthead img { height: 30px; display: block; }
.masthead a { text-decoration: none; }
.masthead a:last-child {
    color: var(--soft); font-size: 11px; font-weight: 700;
    letter-spacing: .11em; text-transform: uppercase;
}
.masthead a:last-child:hover { color: var(--ink); }

/* ── title block ──────────────────────────────────────────────────────────── */
.docref {
    font-size: 10px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--soft);
}
h1 { font-size: 34px; font-weight: 600; line-height: 1.18; margin: 12px 0 14px; }
.parties { font-size: 15.5px; color: #33342C; margin: 0 0 24px; max-width: 62ch; }

/* The identification table is the first thing a compliance officer checks. */
.docdata { width: 100%; border-collapse: collapse; margin: 0 0 8px; }
.docdata th {
    text-align: left; vertical-align: top; white-space: nowrap;
    padding: 9px 16px 9px 0; width: 1%;
    font-size: 10px; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--soft);
    border-bottom: 1px solid var(--hair);
}
.docdata td {
    padding: 9px 0; font-size: 14px; color: #33342C;
    border-bottom: 1px solid var(--hair);
}
.docdata a { color: var(--ink); }

/* ── body ─────────────────────────────────────────────────────────────────── */
main { margin-top: 34px; }

section {
    background: var(--card);
    border: 1px solid var(--hair);
    border-radius: 20px;
    padding: 26px 28px 28px;
    margin-bottom: 16px;
}

h2 {
    font-size: 20px; font-weight: 600; line-height: 1.3;
    margin: 0 0 14px; padding-bottom: 12px;
    border-bottom: 1px solid var(--hair);
}
h3 { font-size: 14.5px; font-weight: 700; margin: 22px 0 6px; }

p { margin: 0 0 12px; font-size: 14.5px; color: #33342C; }
p:last-child { margin-bottom: 0; }

/* Numbered clauses. The number is part of the text rather than a list marker so
   that a clause can be quoted by its number and found again. */
p.c { margin: 0 0 11px; }

ul, ol { margin: 10px 0 12px; padding-left: 22px; }
li { font-size: 14.5px; color: #33342C; margin-bottom: 7px; }
li:last-child { margin-bottom: 0; }

/* Lettered sub-clauses: (a), (b), (c) … */
ol.abc { list-style: lower-alpha; }

/* Definitions. A grid keeps the term and its meaning aligned down the page. */
dl.defs { margin: 14px 0 0; }
dl.defs > div {
    display: grid; grid-template-columns: 168px 1fr; gap: 0 20px;
    padding: 10px 0; border-top: 1px solid var(--hair);
}
dl.defs > div:last-child { border-bottom: 1px solid var(--hair); }
dt { font-weight: 700; font-size: 14px; }
dd { margin: 0; font-size: 14.5px; color: #33342C; }

b, strong { color: var(--ink); font-weight: 700; }
em { font-style: italic; }

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

/* ── unfilled fields ──────────────────────────────────────────────────────── */
/* Anything still in square brackets is a value nobody has supplied yet. It is
   marked so a draft is never mistaken for an executed document — a registration
   number left as a placeholder on a live page is worse than an empty one. */
.br {
    background: var(--flag); color: var(--flag-ink);
    border-radius: 4px; padding: 1px 6px;
    font-weight: 700; font-size: .95em; white-space: nowrap;
}

/* ── footer ───────────────────────────────────────────────────────────────── */
.foot {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
    margin-top: 30px; padding-top: 20px;
    border-top: 1px solid var(--hair);
    font-size: 12.5px; color: var(--soft);
}
.foot a { color: var(--soft); text-decoration: none; font-weight: 600; }
.foot a:hover { color: var(--ink); }
.foot .rule { flex: 1 1 auto; }

/* ── narrow screens ───────────────────────────────────────────────────────── */
@media (max-width: 620px) {
    .doc { padding: 26px 16px 60px; }
    h1 { font-size: 26px; }
    section { padding: 20px 18px 22px; border-radius: 16px; }
    .docdata th { white-space: normal; padding-right: 12px; }
    dl.defs > div { grid-template-columns: 1fr; gap: 2px; }
    dt { margin-top: 4px; }
    .foot .rule { display: none; }
}

/* ── print ────────────────────────────────────────────────────────────────── */
/* These get printed and filed. Backgrounds waste ink and the masthead link is
   meaningless on paper. */
@media print {
    body { background: #fff; font-size: 11pt; }
    .doc { max-width: none; padding: 0; }
    .masthead a:last-child { display: none; }
    section { border: none; border-radius: 0; padding: 0; margin-bottom: 18pt;
              background: none; break-inside: avoid; }
    h2 { break-after: avoid; }
    .br { background: none; border: 1px solid #999; color: #000; }
}