/* Legal, trust and pricing pages, plus the acceptance panel and the three
 * in-product notices (spec v2 §12).
 *
 * Separate from site.css because these pages are the only consumers and the
 * marketing stylesheet should not grow a section it never uses. Colours come
 * from the variables site.css already defines, so a palette change reaches
 * here without a second edit.
 */

/* Auto margins so the column centres wherever .lg lands. It is normally
 * paired with .container, which centres already, but on the Havast page
 * it sat on a full-bleed <section> and the whole price table hugged the
 * left edge. Self-sufficient here means that cannot happen again. */
.lg { max-width: 820px; margin-left: auto; margin-right: auto; }
.lg h1 { font-size: 27px; margin: 26px 0 8px; }
.lg h2 { font-size: 18px; margin: 32px 0 8px; color: var(--navy);
         border-top: 1px solid var(--line); padding-top: 18px; }
.lg h2, .lg h3 { scroll-margin-top: 88px; }
.lg h3 { font-size: 15px; margin: 20px 0 6px; color: var(--navy); }
.lg p, .lg li { font-size: 14.5px; line-height: 1.65; }
.lg .lead { font-size: 15.5px; color: #34474f; }
.lg ul, .lg ol { padding-left: 22px; }
.lg li { margin-bottom: 6px; }

.lg-meta { font-size: 12.5px; color: var(--muted); margin: 2px 0 20px; }
.lg-super { color: #9a5b00; }
.lg-loading { color: var(--muted); }
.lg-err { color: #9b2226; font-size: 13px; }
.lg-archive { font-size: 13px; color: var(--muted); margin-top: 34px;
              border-top: 1px solid var(--line); padding-top: 14px; }
.lg-archive a { margin-right: 4px; }

/* A document body arrives as server-rendered HTML, so it is styled by element
 * rather than by class — the renderer emits no classes and should not have to. */
.lg-doc h1 { font-size: 22px; }
.lg-doc h2 { font-size: 17px; }
.lg-doc h3 { font-size: 14.5px; }
.lg-doc blockquote { margin: 16px 0; padding: 12px 16px; border-left: 3px solid var(--teal);
                     background: rgba(31,138,138,.05); border-radius: 0 8px 8px 0; }
.lg-doc blockquote p { margin: 0; font-size: 14px; }
.lg-doc code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
               font-size: 13px; background: #f2f5f5; border: 1px solid var(--line);
               border-radius: 4px; padding: 1px 5px; }
.lg-doc pre { background: #f7f9f9; border: 1px solid var(--line); border-radius: 8px;
              padding: 13px 15px; overflow-x: auto; font-size: 13px; }
.lg-doc pre code { background: none; border: 0; padding: 0; }
.lg-doc table, .lg-table { border-collapse: collapse; width: 100%; font-size: 13.5px;
                           margin: 12px 0; }
.lg-doc th, .lg-table th { text-align: left; font-size: 11px; text-transform: uppercase;
                           letter-spacing: .03em; color: var(--muted);
                           border-bottom: 1px solid var(--line); padding: 8px 9px;
                           vertical-align: top; white-space: nowrap; }
.lg-doc td, .lg-table td { border-bottom: 1px solid var(--line); padding: 9px 9px;
                           vertical-align: top; }
.lg-sub th { white-space: normal; }
.lg-none { border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px;
           background: #fbfcfc; }

.lg-draft { border: 1px solid #e0c9a0; background: #fdf7ec; border-radius: 10px;
            padding: 12px 16px; margin: 22px 0 4px; font-size: 13.5px; color: #6b4f1f; }

.lg-footer-links { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; }

/* ---- pricing ---------------------------------------------------------- */
.lg-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 14px; margin: 22px 0 10px; }
.lg-plan { border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px;
           background: #fff; }
.lg-plan h3 { margin: 0 0 6px; font-size: 15px; color: var(--navy); }
.lg-price { display: block; font-size: 23px; color: var(--navy); font-weight: 600; }
.lg-per { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
.lg-plan ul { margin: 12px 0 0; padding-left: 18px; }
.lg-plan li { font-size: 13px; margin-bottom: 4px; }

/* ---- acceptance panel -------------------------------------------------- */
/* Not a modal, deliberately: §12.2 says read and export are never blocked by a
 * pending acceptance, and a panel the user cannot dismiss would contradict that
 * whatever the server does. */
.lg-accept { border: 1px solid #d7c08f; background: #fdf8ee; border-radius: 12px;
             padding: 14px 18px; margin: 0 0 18px; font-size: 14px; }
.lg-accept p { margin: 6px 0; }
.lg-accept label { display: inline-flex; gap: 8px; align-items: baseline; cursor: pointer; }

/* ---- in-product notices (§12.4) ---------------------------------------- */
/* Deliberately quiet. A notice styled like an error is read as an error and
 * then dismissed as noise; these have to survive being seen many times. */
.ee-notice { border-left: 3px solid var(--teal); background: rgba(31,138,138,.05);
             padding: 9px 13px; border-radius: 0 8px 8px 0; margin: 10px 0;
             font-size: 12.5px; line-height: 1.55; color: #34474f; }
.ee-notice strong { color: var(--navy); }
.ee-notice a { color: var(--teal); }
.ee-notice-cost { border-left-color: #b08a3e; background: rgba(176,138,62,.07); }
.ee-notice-cost .ee-units { font-weight: 600; color: var(--navy); }

/* Per-plan enquiry button on the public Havast page. Pushed to the bottom
 * of the card so the buttons line up across plans of different heights. */
.lg-plan { display: flex; flex-direction: column; }
.lg-plan ul { flex: 1; }
.lg-plan-cta { align-self: flex-start; margin-top: 12px; }