/* Shared shell for the standalone policy pages: privacy, terms, refunds, pricing.
   about.html deliberately keeps its own inline <style> — it is iframed as the
   in-app About modal (about.html?embed=1), and turning its critical CSS into an
   external request would flash unstyled content inside the modal. The ~6 lines of
   :root duplication between the two is the price of that, and it is worth paying.

   Tokens and the base rules below are lifted verbatim from about.html so the two
   surfaces stay visually identical. */

:root { --ink: #d4af37; --bg: #111; --paper: #e8e2d6; --muted: #9a9a9a; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    background: var(--bg);
    color: var(--paper);
    font-family: Georgia, 'Times New Roman', serif;
    line-height: 1.65;
}
.wrap { max-width: 760px; margin: 0 auto; padding: 0 24px; }
h1, h2, h3, .brand { font-family: 'Poiret One', Georgia, serif; font-weight: 400; letter-spacing: 0.12em; }

/* Page head — the same gold lockup as about.html's hero, minus the animated
   sweep: a policy page should not shimmer. */
.page-head { text-align: center; padding: 64px 24px 40px; border-bottom: 1px solid rgba(212,175,55,0.25); }
.page-head h1.brand-lockup {
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.22em;
    font-size: clamp(30px, 6vw, 46px);
    letter-spacing: 0.12em;
    line-height: 1;
    color: #bf9b30;
    text-transform: none;
}
.page-head .brand-colon { height: 0.72em; width: auto; flex: none; }
.page-head .tagline {
    color: var(--ink); letter-spacing: 0.28em; text-transform: uppercase;
    font-size: 13px; margin-top: 16px; font-family: 'Poiret One', serif;
}
.page-head .updated { color: var(--muted); font-size: 13px; margin-top: 10px; font-style: italic; }
.page-head .back { display: inline-block; margin-top: 22px; color: var(--ink); text-decoration: none;
                   font-family: 'Poiret One', serif; letter-spacing: 0.16em;
                   text-transform: uppercase; font-size: 12px; }
.page-head .back:hover { text-decoration: underline; }

/* Legal prose. about.html has a global `* { margin:0; padding:0 }` reset and no
   list or long-form rules at all, so everything a policy needs is defined here. */
.legal { padding: 44px 0 24px; }
.legal h2 {
    color: var(--ink); font-size: 22px; text-transform: uppercase;
    margin: 46px 0 14px; padding-top: 22px;
    border-top: 1px solid rgba(212,175,55,0.18);
}
.legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 { color: var(--paper); font-size: 16px; letter-spacing: 0.14em; text-transform: uppercase; margin: 26px 0 8px; }
.legal p { color: var(--muted); font-size: 16px; }
.legal p + p { margin-top: 14px; }
.legal ul, .legal ol { color: var(--muted); font-size: 16px; margin: 12px 0 0; padding-left: 24px; }
.legal li + li { margin-top: 8px; }
.legal li > ul, .legal li > ol { margin-top: 8px; }
.legal dl { margin-top: 14px; }
.legal dt { color: var(--paper); font-family: 'Poiret One', serif; letter-spacing: 0.1em; margin-top: 16px; }
.legal dd { color: var(--muted); font-size: 16px; padding-left: 0; }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.legal strong { color: var(--paper); font-weight: normal; border-bottom: 1px solid rgba(212,175,55,0.35); }
.legal .lede { color: var(--paper); font-size: 17px; }

/* A bordered aside for the things a reader most needs to notice — what survives
   account deletion, who to email, which store refunds what. */
.legal .note {
    border: 1px solid rgba(212,175,55,0.4);
    padding: 18px 20px;
    margin-top: 22px;
}
.legal .note p { color: var(--paper); font-size: 15px; }
.legal .note p + p { margin-top: 10px; }

/* Tables — the Free vs Pro comparison, and the per-store refund split. Wrapped in
   .table-scroll so a narrow phone scrolls the table, never the page body. */
.table-scroll { overflow-x: auto; margin-top: 20px; -webkit-overflow-scrolling: touch; }
.legal table { border-collapse: collapse; width: 100%; min-width: 420px; font-size: 15px; }
.legal th, .legal td { text-align: left; padding: 12px 14px; border-bottom: 1px solid rgba(212,175,55,0.18); vertical-align: top; }
.legal th {
    color: var(--ink); font-family: 'Poiret One', serif; font-weight: 400;
    letter-spacing: 0.14em; text-transform: uppercase; font-size: 13px;
    border-bottom-color: rgba(212,175,55,0.4);
}
.legal td { color: var(--muted); }
.legal tbody th { color: var(--paper); text-transform: none; letter-spacing: 0.06em; font-size: 15px; }

/* Pricing hero */
.price-card { border: 1px solid var(--ink); padding: 34px 28px; text-align: center; margin-top: 26px; }
.price-card .amount { font-family: 'Poiret One', serif; color: var(--ink); font-size: clamp(38px, 9vw, 56px); line-height: 1; }
.price-card .terms { color: var(--muted); font-size: 14px; margin-top: 12px; }
.price-card .cta {
    display: inline-block; margin-top: 26px; padding: 13px 34px;
    border: 1px solid var(--ink); color: var(--ink); text-decoration: none;
    letter-spacing: 0.18em; text-transform: uppercase; font-size: 13px;
    font-family: 'Poiret One', serif;
}
.price-card .cta:hover { background: var(--ink); color: var(--bg); }

footer { text-align: center; padding: 44px 24px 60px; color: var(--muted); font-size: 14px; border-top: 1px solid rgba(212,175,55,0.18); }
footer a { color: var(--ink); text-decoration: none; }
footer a:hover { text-decoration: underline; }
footer .sep { opacity: 0.5; }