/* ProperHabit Web — legal & support documents
 * Owner: legal/compliance workstream. Nobody else edits this file.
 *
 * Design language matches the landing page (warm paper #F6F3EE, ink, one teal accent,
 * editorial serif display + Inter body + JetBrains Mono labels) taken from tokens.css.
 *
 * Two deliberate rules:
 *   1. Every custom property carries a hard-coded fallback, so these pages render
 *      correctly whether or not tokens.css defines the variable. tokens.css is owned
 *      by the landing redesign; these documents must never break because of it.
 *   2. These pages load NO third-party assets (no webfonts, no scripts, no images).
 *      The privacy policy states that the app and site collect nothing, and this
 *      surface is the proof. Font stacks degrade to Georgia / system-ui / monospace.
 *
 * Accessibility target: WCAG 2.1 AA — 4.5:1 text contrast, visible focus rings,
 * skip link, semantic landmarks, single h1, ~70ch measure, no motion.
 */

/* ---------------------------------------------------------------- base ---- */

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

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

body {
    margin: 0;
    background: var(--paper, var(--color-paper, #f6f3ee));
    color: var(--ink, var(--color-ink, #1c1917));
    font-family: var(--font-body, "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif);
    font-size: var(--text-base, var(--text-md, 1rem));
    line-height: 1.65;
    font-synthesis-weight: none;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* ------------------------------------------------------------ utilities ---- */

.mono {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: var(--text-xs, 0.6875rem);
    letter-spacing: 0.09em;
    text-transform: uppercase;
    font-weight: 500;
}

/* Visible focus ring on every interactive element (WCAG 2.4.7). */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--focus, var(--color-focus, #155238));
    outline-offset: 2px;
    border-radius: var(--radius-sm, 0.375rem);
}

/* Skip link: off-screen until focused, never display:none (stays in a11y tree). */
.skip-link {
    position: absolute;
    inset-inline-start: var(--space-md, 1rem);
    inset-block-start: -4rem;
    z-index: var(--z-tooltip, 200);
    padding: 0.625rem 1rem;
    background: var(--accent, var(--color-accent, #1f6f4a));
    color: var(--on-accent, var(--color-accent-ink, #fbf9f5));
    font-weight: 600;
    text-decoration: none;
    border-radius: var(--radius-md, 0.625rem);
    transition: none;
}

.skip-link:focus {
    inset-block-start: var(--space-md, 1rem);
}

/* ---------------------------------------------------------------- links ---- */

a {
    color: var(--accent-strong, var(--color-accent-deep, #155238));
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

a:hover {
    color: var(--accent-strong, var(--color-accent-press, #155238));
    text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------- header ---- */

.legal-nav {
    position: sticky;
    inset-block-start: 0;
    z-index: var(--z-nav, 100);
    background: color-mix(in oklab, var(--paper, var(--color-paper, #f6f3ee)) 92%, transparent);
    border-block-end: 1px solid var(--rule, var(--color-rule, #ddd6c8));
}

/* Fallback for browsers without color-mix(): opaque paper. */
@supports not (background: color-mix(in oklab, red 50%, blue)) {
    .legal-nav {
        background: var(--paper, var(--color-paper, #f6f3ee));
    }
}

.legal-nav__inner {
    max-width: var(--page-max, 72rem);
    margin-inline: auto;
    padding: var(--space-sm, 0.75rem) var(--gutter, var(--page-gutter, clamp(1.125rem, 4vw, 2.5rem)));
    min-height: var(--nav-h, var(--nav-height, 4rem));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md, 1rem);
    flex-wrap: wrap;
}

.legal-nav__brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs, 0.5rem);
    color: var(--ink, var(--color-ink, #1c1917));
    font-weight: 600;
    font-size: var(--text-base, 0.9375rem);
    letter-spacing: -0.01em;
    text-decoration: none;
}

.legal-nav__brand svg {
    display: block;
    flex: none;
}

.legal-nav__lang {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs, 0.25rem);
    font-size: var(--text-sm, 0.8125rem);
}

.legal-nav__lang > * {
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius-pill, 999px);
    min-height: 2.25rem;
    display: inline-flex;
    align-items: center;
}

.legal-nav__lang a {
    text-decoration: none;
    color: var(--muted, var(--color-muted, #6b6259));
}

.legal-nav__lang a:hover {
    color: var(--accent-strong, var(--color-accent-deep, #155238));
    background: var(--accent-soft, var(--color-accent-soft, rgb(31 111 74 / 0.1)));
}

.legal-nav__lang [aria-current="true"] {
    background: var(--accent-soft, var(--color-accent-soft, rgb(31 111 74 / 0.1)));
    color: var(--accent-strong, var(--color-accent-deep, #155238));
    font-weight: 600;
}

/* ----------------------------------------------------------- page shell ---- */

.legal {
    max-width: 44rem;
    margin-inline: auto;
    padding: var(--space-2xl, 3rem) var(--gutter, var(--page-gutter, clamp(1.125rem, 4vw, 2.5rem))) var(--space-3xl, 4rem);
}

/* Long-form reading measure (WCAG-friendly, ~70 characters). */
.legal p,
.legal li,
.legal dd,
.legal blockquote {
    max-width: 70ch;
}

.legal__eyebrow {
    margin: 0 0 var(--space-xs, 0.5rem);
    color: var(--accent-strong, var(--color-accent-deep, #155238));
}

.legal__title {
    margin: 0;
    font-family: var(--font-display, "Instrument Serif", Georgia, "Times New Roman", serif);
    font-size: var(--text-section, 2.375rem);
    line-height: 1.1;
    font-weight: 400;
    letter-spacing: -0.015em;
    text-wrap: balance;
}

.legal__meta {
    margin: var(--space-sm, 0.75rem) 0 0;
    color: var(--muted, var(--color-muted, #6b6259));
    font-size: var(--text-sm, 0.8125rem);
    max-width: 70ch;
}

.legal__lead {
    margin-block: var(--space-lg, 1.5rem);
    font-size: var(--text-lg, 1.125rem);
    line-height: 1.6;
    color: var(--ink-2, var(--color-ink-2, #423b34));
}

.legal h2 {
    margin: var(--space-2xl, 3rem) 0 var(--space-sm, 0.75rem);
    font-family: var(--font-display, "Instrument Serif", Georgia, "Times New Roman", serif);
    font-size: var(--text-2xl, 1.75rem);
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -0.01em;
    padding-block-start: var(--space-md, 1rem);
    border-block-start: 1px solid var(--rule, var(--color-rule, #ddd6c8));
    text-wrap: balance;
}

.legal h3 {
    margin: var(--space-xl, 2rem) 0 var(--space-xs, 0.5rem);
    font-family: var(--font-body, "Inter", ui-sans-serif, system-ui, sans-serif);
    font-size: var(--text-base, var(--text-md, 1rem));
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: -0.005em;
}

.legal h4 {
    margin: var(--space-lg, 1.5rem) 0 var(--space-2xs, 0.25rem);
    font-size: var(--text-base, 0.9375rem);
    font-weight: 650;
}

.legal p {
    margin-block: var(--space-md, 1rem);
}

.legal ul,
.legal ol {
    margin-block: var(--space-md, 1rem);
    padding-inline-start: 1.35em;
}

.legal li + li {
    margin-block-start: var(--space-xs, 0.5rem);
}

.legal strong {
    font-weight: 650;
}

.legal hr {
    margin-block: var(--space-2xl, 3rem);
    border: 0;
    border-block-start: 1px solid var(--rule, var(--color-rule, #ddd6c8));
}

/* Anchor offset so sticky header does not cover a linked heading. */
.legal :is(h2, h3)[id] {
    scroll-margin-block-start: 5.5rem;
}

/* ------------------------------------------------------- table of contents -- */

.legal__toc {
    margin-block: var(--space-xl, 2rem);
    padding: var(--space-lg, 1.5rem);
    background: var(--paper-2, var(--color-paper-2, #efebe2));
    border: 1px solid var(--rule, var(--color-rule, #ddd6c8));
    border-radius: var(--radius-lg, 1rem);
}

.legal__toc-title {
    margin: 0 0 var(--space-sm, 0.75rem);
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: var(--text-xs, 0.6875rem);
    font-weight: 500;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--muted, var(--color-muted, #6b6259));
    border: 0;
    padding: 0;
}

.legal__toc ol {
    margin: 0;
    padding-inline-start: 1.6em;
    columns: 1;
    font-size: var(--text-sm, 0.8125rem);
}

@media (min-width: 40rem) {
    .legal__toc ol {
        columns: 2;
        column-gap: var(--space-lg, 1.5rem);
    }
}

.legal__toc li {
    margin-block: var(--space-2xs, 0.25rem);
    break-inside: avoid;
}

.legal__toc a {
    display: inline-block;
    /* 24 px minimum target (WCAG 2.5.8) on a 16 px line */
    min-height: 1.5rem;
    padding-block: 0.1875rem;
    text-decoration: none;
}

.legal__toc a:hover {
    text-decoration: underline;
}

/* ---------------------------------------------------- identity list / dl --- */

.legal-id {
    margin-block: var(--space-lg, 1.5rem);
    padding: var(--space-lg, 1.5rem);
    background: var(--paper-2, var(--color-paper-2, #efebe2));
    border: 1px solid var(--rule, var(--color-rule, #ddd6c8));
    border-radius: var(--radius-lg, 1rem);
    font-size: var(--text-sm, 0.8125rem);
    line-height: 1.55;
}

.legal-id > dt {
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: var(--text-xs, 0.6875rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted, var(--color-muted, #6b6259));
    margin-block-start: var(--space-sm, 0.75rem);
}

.legal-id > dt:first-child {
    margin-block-start: 0;
}

.legal-id > dd {
    margin: 0.15rem 0 0;
    max-width: 70ch;
}

/* -------------------------------------------------------------- callout ---- */

.legal-callout {
    margin-block: var(--space-lg, 1.5rem);
    padding: var(--space-md, 1rem) var(--space-lg, 1.5rem);
    background: var(--accent-soft, var(--color-accent-soft, rgb(31 111 74 / 0.1)));
    border-inline-start: 3px solid var(--accent, var(--color-accent, #1f6f4a));
    border-radius: 0 var(--radius-md, 0.625rem) var(--radius-md, 0.625rem) 0;
}

.legal-callout > :first-child {
    margin-block-start: 0;
}

.legal-callout > :last-child {
    margin-block-end: 0;
}

/* A callout title participates in the page outline — an <h2> when the box
   introduces a real section (e.g. "Contact us" on the support page) or an <h3>
   inside one — so it must not inherit the full section-heading treatment:
   no rule line, no section-scale type. Keeps the box visually a box. */
.legal-callout h2,
.legal-callout h3 {
    margin-block: 0 var(--space-xs, 0.5rem);
    padding-block-start: 0;
    border-block-start: 0;
    font-family: var(--font-body, "Inter", ui-sans-serif, system-ui, sans-serif);
    font-size: var(--text-base, var(--text-md, 1rem));
    font-weight: 650;
    line-height: 1.35;
    letter-spacing: -0.005em;
}

/* ---------------------------------------------------------------- table ---- */

.legal-table-wrap {
    margin-block: var(--space-lg, 1.5rem);
    overflow-x: auto;
    border: 1px solid var(--rule, var(--color-rule, #ddd6c8));
    border-radius: var(--radius-lg, 1rem);
    background: var(--paper-2, var(--color-paper-2, #efebe2));
}

.legal-table {
    width: 100%;
    min-width: 32rem;
    border-collapse: collapse;
    font-size: var(--text-sm, 0.8125rem);
    line-height: 1.5;
}

.legal-table caption {
    caption-side: top;
    text-align: start;
    padding: var(--space-md, 1rem) var(--space-md, 1rem) var(--space-xs, 0.5rem);
    font-weight: 650;
    font-size: var(--text-sm, 0.8125rem);
    color: var(--ink, var(--color-ink, #1c1917));
}

.legal-table th,
.legal-table td {
    padding: 0.625rem var(--space-md, 1rem);
    text-align: start;
    vertical-align: top;
    border-block-start: 1px solid var(--rule, var(--color-rule, #ddd6c8));
}

.legal-table thead th {
    background: var(--paper-3, var(--color-paper-3, #e6e0d3));
    font-family: var(--font-mono, "JetBrains Mono", ui-monospace, monospace);
    font-size: var(--text-xs, 0.75rem);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
    /* --ink-2, not --muted: on --paper-3 the muted token clears AA by only
       0.04, so a palette tweak would silently break the price columns.
       --ink-2 keeps ~9:1 and survives the palette moving. */
    color: var(--ink-2, var(--color-ink-2, #423b34));
    white-space: nowrap;
}

.legal-table tbody th {
    font-weight: 600;
    white-space: nowrap;
}

.legal-table td .legal-table__price {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Scrollable-region focus affordance (WCAG 2.1.1 keyboard access). */
.legal-table-wrap:focus-visible {
    outline: 3px solid var(--focus, var(--color-focus, #155238));
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- footer --- */

.legal-foot {
    border-block-start: 1px solid var(--rule, var(--color-rule, #ddd6c8));
    background: var(--paper-2, var(--color-paper-2, #efebe2));
    padding: var(--space-xl, 2rem) var(--gutter, var(--page-gutter, clamp(1.125rem, 4vw, 2.5rem))) var(--space-2xl, 3rem);
}

.legal-foot__inner {
    max-width: 44rem;
    margin-inline: auto;
}

.legal-foot__brand {
    margin: 0;
    font-family: var(--font-display, "Instrument Serif", Georgia, "Times New Roman", serif);
    font-size: var(--text-lg, 1.125rem);
}

.legal-foot__entity {
    margin: var(--space-2xs, 0.25rem) 0 var(--space-lg, 1.5rem);
    font-size: var(--text-xs, 0.6875rem);
    color: var(--muted, var(--color-muted, #6b6259));
    max-width: 70ch;
}

.legal-foot__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs, 0.5rem) var(--space-md, 1rem);
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm, 0.8125rem);
}

.legal-foot__links a {
    display: inline-flex;
    align-items: center;
    min-height: 2.25rem;
}

.legal-foot__links [aria-current="page"] {
    font-weight: 650;
    color: var(--ink, var(--color-ink, #1c1917));
    text-decoration: none;
}

/* ---------------------------------------------------------------- print ---- */

@media print {
    .legal-nav,
    .legal__toc,
    .skip-link {
        display: none;
    }

    body {
        background: #ffffff;
        color: #000000;
        font-size: 11pt;
    }

    .legal {
        max-width: none;
        padding: 0;
    }

    .legal-id,
    .legal-callout,
    .legal-table-wrap {
        background: #ffffff;
        border-color: #999999;
        break-inside: avoid;
    }

    .legal h2 {
        break-after: avoid;
    }

    a[href^="http"]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        word-break: break-all;
    }
}

/* ------------------------------------------------- reduced motion (AA) ---- */
/* No decorative motion is used; this neutralises anything inherited. */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}