/* THE FRONT DOOR: the public landing page (pages/landing.html), the account pages
   (layouts/account.html: enter, the invitation, the sign-in link, passwords) and the
   legal pages (layouts/legal.html). One system with the account emails
   (templates/accounts/emails/base.html).

   Dark, restrained (owner, 2026-09-25): a near-black ground, ONE champagne-gold accent
   used sparingly (a small label, a hairline rule, the primary button), a serif display
   face over a clean sans, and a lot of space. The pages say as little as a person needs
   to act; the design carries the rest. The faint market lines behind are a canvas
   (js/front.js). These pages do not load the app's theme (volt.css): this file is all
   they need, so the front door stays light. */

/* The two faces, served from here (not Google): preloaded by includes/front-head.html so the
   page never swaps fonts late, and no visitor's address goes to a third party for them.
   Latin subsets. Both SIL Open Font License 1.1: Inter (Rasmus Andersson), Cormorant
   Garamond (Christian Thalmann). */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap;
             src: url("../fonts/cormorant-garamond-500-latin.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap;
             src: url("../fonts/inter-latin.woff2") format("woff2"); }

.fr {
  --fr-ground: #0B0F14;
  --fr-card: #121821;
  --fr-line: #232B36;
  --fr-line-strong: #333E4C;
  --fr-ivory: #F5F1EA;
  --fr-text: #C3C8D0;
  --fr-muted: #8A919C;
  --fr-faint: #6B7280;
  --fr-gold: #C9A96E;
  --fr-gold-hover: #D8BE88;
  --fr-danger: #F29B9B;
  --fr-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --fr-sans: Inter, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  min-height: 100vh;
  background: var(--fr-ground);
  background-image: radial-gradient(ellipse 80% 55% at 50% -10%, rgba(201, 169, 110, .07), transparent 70%);
  color: var(--fr-text);
  font-family: var(--fr-sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.fr *, .fr *::before, .fr *::after { box-sizing: border-box; }
.fr ::selection { background: rgba(201, 169, 110, .3); color: var(--fr-ivory); }

.fr a { color: var(--fr-ivory); text-decoration: underline; text-decoration-color: rgba(245, 241, 234, .3);
        text-underline-offset: 3px; transition: color .15s ease, text-decoration-color .15s ease; }
.fr a:hover { color: var(--fr-gold); text-decoration-color: var(--fr-gold); }
.fr :focus-visible { outline: 2px solid var(--fr-gold); outline-offset: 3px; }

/* the lines behind everything */
.fr-lines { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }

.fr-shell { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center;
            min-height: 100vh; padding: 2.5rem 1.25rem 1.75rem; }

/* the logo (includes/brand.html): the heron beside the name, 40 px, the pack's minimum */
.fr-brand { display: inline-flex; align-items: center; text-decoration: none !important; }
.fr-brand .brand-lockup { display: block; width: auto; height: 40px; }

/* the shared type */
.fr-label { margin: 0 0 1.1rem; color: var(--fr-gold); font-size: .72rem; font-weight: 600;
            letter-spacing: .3em; text-transform: uppercase; }
.fr-rule { display: block; width: 40px; height: 1px; margin: 0 0 1.5rem; background: var(--fr-gold); }
.fr-title { margin: 0 0 1.1rem; color: var(--fr-ivory); font-family: var(--fr-serif); font-weight: 500;
            font-size: 2.35rem; line-height: 1.12; letter-spacing: -.005em; text-wrap: balance; }
.fr-lead { margin: 0 0 1.75rem; color: var(--fr-text); font-size: .98rem; line-height: 1.65; }
.fr-lead.fr-flush { margin-bottom: 0; }
.fr-lead strong, .fr-text strong { color: var(--fr-ivory); font-weight: 500; overflow-wrap: anywhere; }
.fr-text { margin: 0 0 1rem; font-size: .95rem; line-height: 1.65; }
.fr-small { margin: 1.25rem 0 0; color: var(--fr-muted); font-size: .84rem; line-height: 1.6; }

/* buttons: gold for the one thing to do, a hairline for the other */
.fr-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.1rem;
          padding: .7rem 1.9rem; border: 1px solid transparent; border-radius: 2px; cursor: pointer;
          font-family: var(--fr-sans); font-size: .78rem; font-weight: 600; letter-spacing: .18em;
          text-transform: uppercase; text-decoration: none !important; line-height: 1.3; text-align: center;
          transition: background-color .15s ease, border-color .15s ease, color .15s ease; }
.fr-btn-primary { background: var(--fr-gold); border-color: var(--fr-gold); color: var(--fr-ground) !important; }
.fr-btn-primary:hover { background: var(--fr-gold-hover); border-color: var(--fr-gold-hover); }
.fr-btn-secondary { background: transparent; border-color: rgba(245, 241, 234, .3); color: var(--fr-ivory) !important; }
.fr-btn-secondary:hover { border-color: var(--fr-gold); color: var(--fr-gold) !important; }
.fr-btn-block { display: flex; width: 100%; }
.fr-btn:disabled { opacity: .7; cursor: wait; }

.fr-footer { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .4rem 1.25rem;
             margin-top: auto; padding-top: 3rem; color: var(--fr-faint); font-size: .78rem; text-align: center; }
.fr-footer a { color: var(--fr-muted); text-decoration: none; }
.fr-footer a:hover { color: var(--fr-ivory); }

/* ---- the account pages: one card ------------------------------------------------------ */

.fr-account .fr-brand { margin-bottom: 2.5rem; }
.fr-card { width: 100%; max-width: 28rem; padding: 2.75rem 2.5rem 2.25rem; border: 1px solid var(--fr-line);
           border-radius: 3px; background: rgba(18, 24, 33, .92);
           box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.fr-below { width: 100%; max-width: 28rem; margin-top: 1.5rem; color: var(--fr-muted); font-size: .9rem;
            text-align: center; }
.fr-below p { margin: 0 0 .5rem; }
.fr-below a { color: var(--fr-text); }

.fr-field { margin-bottom: 1.3rem; }
.fr-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.fr-field label { display: block; margin-bottom: .5rem; color: var(--fr-ivory); font-size: .82rem;
                  font-weight: 500; letter-spacing: .02em; }
.fr-label-row a { font-size: .8rem; color: var(--fr-muted); }
.fr .form-control { display: block; width: 100%; height: 3.1rem; padding: .6rem .95rem; border: 1px solid var(--fr-line-strong);
                    border-radius: 2px; background: #0B0F14; color: var(--fr-ivory); font-family: var(--fr-sans);
                    font-size: 1rem; line-height: 1.4; box-shadow: none; appearance: none;
                    transition: border-color .15s ease, box-shadow .15s ease; }
.fr .form-control::placeholder { color: #5B6470; }
.fr .form-control:focus { outline: 0; border-color: var(--fr-gold); box-shadow: 0 0 0 3px rgba(201, 169, 110, .16); }
.fr .form-control:-webkit-autofill { -webkit-text-fill-color: var(--fr-ivory);
                                     -webkit-box-shadow: 0 0 0 40px #0B0F14 inset; caret-color: var(--fr-ivory); }
.fr-field.has-error .form-control { border-color: var(--fr-danger); }
.fr-field.has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(242, 155, 155, .16); }
.fr-help { margin-top: .5rem; color: var(--fr-muted); font-size: .8rem; line-height: 1.5; }
.fr-error { margin-top: .5rem; color: var(--fr-danger); font-size: .85rem; line-height: 1.5; }
.fr-error a { color: var(--fr-danger) !important; text-decoration-color: rgba(242, 155, 155, .5); }

/* the invitation code: read as characters, not as a word */
.fr .form-control.auth-code { font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
                              font-size: 1.08rem; letter-spacing: .16em; text-transform: uppercase; }

/* password boxes: Show / Hide inside the box */
.fr-password { position: relative; }
.fr-password .form-control { padding-right: 4.75rem; }
.fr-reveal { position: absolute; top: 50%; right: .4rem; transform: translateY(-50%); padding: .35rem .6rem;
             border: 0; border-radius: 2px; background: transparent; color: var(--fr-muted); cursor: pointer;
             font-family: var(--fr-sans); font-size: .72rem; font-weight: 600; letter-spacing: .12em;
             text-transform: uppercase; }
.fr-reveal:hover { color: var(--fr-ivory); }

.fr-form .fr-btn-block { margin-top: .6rem; }

.fr-alert { margin: 0 0 1.5rem; padding: .85rem 1rem; border: 1px solid; border-radius: 2px; font-size: .88rem;
            line-height: 1.55; }
.fr-alert-danger { border-color: rgba(242, 155, 155, .35); background: rgba(242, 155, 155, .07); color: #F6C1C1; }
.fr-alert-warning { border-color: rgba(201, 169, 110, .4); background: rgba(201, 169, 110, .07); color: #E6D3AE; }
.fr-alert a { color: inherit !important; }
.fr-legal { margin: 1.25rem 0 0; color: var(--fr-faint); font-size: .78rem; line-height: 1.55; text-align: center; }
.fr-legal a { color: var(--fr-muted); }

/* accepting the Terms (accounts/includes/terms-boxes.html): a box, then its sentence */
.fr-checks { margin: 1.6rem 0 .4rem; }
.fr-check { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .95rem; }
.fr-check-input { flex: none; width: 1.05rem; height: 1.05rem; margin: .22rem 0 0; accent-color: var(--fr-gold);
                  cursor: pointer; }
.fr-check label { display: block; color: var(--fr-text); font-size: .88rem; line-height: 1.55; cursor: pointer; }
.fr-check .fr-error { margin-top: .25rem; }
.fr-check.has-error .fr-check-input { outline: 1px solid var(--fr-danger); outline-offset: 2px; }
.fr-note { margin: 0 0 1.4rem; color: var(--fr-muted); font-size: .82rem; line-height: 1.55; }
.fr-note a { color: var(--fr-text); }
/* "We updated our Terms": what changed */
.fr-subhead { margin: 0 0 .7rem; color: var(--fr-muted); font-size: .72rem; font-weight: 600; letter-spacing: .2em;
              text-transform: uppercase; }
.fr-changes { margin: 0 0 1.25rem; padding-left: 1.1rem; font-size: .9rem; line-height: 1.6; }
.fr-changes li { margin-bottom: .55rem; padding-left: .2rem; }
.fr-changes li::marker { color: var(--fr-gold); }
.fr-form-terms .fr-checks { margin-top: 1.4rem; padding-top: 1.4rem; border-top: 1px solid var(--fr-line); }

@media (max-width: 575.98px) {
  .fr-shell { padding: 1.75rem 1rem 1.5rem; }
  .fr-account .fr-brand { margin-bottom: 1.75rem; }
  .fr-card { padding: 2rem 1.35rem 1.6rem; }
  .fr-title { font-size: 2rem; }
}

/* ---- the landing page: the mark, one line, a label, two buttons ----------------------- */

.fr-landing .fr-shell { padding-top: 0; }
.fr-hero { display: flex; flex: 1 0 auto; flex-direction: column; align-items: center; justify-content: center;
           width: 100%; max-width: 46rem; padding: 4rem 0 2rem; text-align: center; }
/* the logo: the heron over the name (includes/brand.html, stacked) */
.fr-mark { display: inline-flex; margin-bottom: 3rem; text-decoration: none !important; }
.fr-mark .brand-lockup { display: block; width: auto; height: 112px; }
.fr-display { margin: 0 0 2rem; color: var(--fr-ivory); font-family: var(--fr-serif); font-weight: 500;
              font-size: clamp(2.5rem, 3.6vw + 1.2rem, 4.25rem); line-height: 1.08; letter-spacing: -.01em;
              text-wrap: balance; }
.fr-keep { white-space: nowrap; }  /* a narrow screen breaks after "Private", not before the last word */
.fr-hero .fr-rule { margin: 0 auto 1.4rem; }
.fr-hero .fr-label { margin: 0 0 3rem; text-indent: .3em; }
.fr-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .9rem; }
.fr-landing .fr-footer { margin-top: 0; padding-top: 2rem; }

@media (max-width: 575.98px) {
  .fr-hero { padding-top: 3rem; }
  .fr-mark { margin-bottom: 2.5rem; }
  .fr-mark .brand-lockup { height: 96px; }
  .fr-hero .fr-label { margin-bottom: 2.5rem; }
  .fr-actions { flex-direction: column; align-self: stretch; }
  .fr-actions .fr-btn { width: 100%; }
}

/* ---- the legal pages: one reading column (layouts/legal.html) ------------------------- */

.fr-doc-page .fr-brand { margin-bottom: 3rem; }
.fr-doc { width: 100%; max-width: 45rem; font-size: 1rem; line-height: 1.75; overflow-wrap: break-word; }
.fr-doc p, .fr-doc ul, .fr-doc address { margin: 0 0 1.1rem; }
.fr-doc strong { color: var(--fr-ivory); font-weight: 600; }
.fr-doc a { text-decoration-color: rgba(201, 169, 110, .55); }
.fr-doc h1 { margin: 0 0 .9rem; color: var(--fr-ivory); font-family: var(--fr-serif); font-weight: 500;
             font-size: 2.75rem; line-height: 1.1; letter-spacing: .02em; text-wrap: balance; }
.fr-doc-updated { color: var(--fr-muted); font-size: .88rem; letter-spacing: .02em; }
.fr-doc-updated::after { content: ""; display: block; width: 40px; height: 1px; margin: 1.6rem 0 2.25rem;
                         background: var(--fr-gold); }
.fr-doc h2 { margin: 3.25rem 0 1.1rem; padding-top: 2.25rem; border-top: 1px solid var(--fr-line);
             color: var(--fr-ivory); font-family: var(--fr-serif); font-weight: 500; font-size: 1.6rem;
             line-height: 1.2; letter-spacing: .01em; text-wrap: balance; scroll-margin-top: 1.5rem; }
.fr-doc-updated + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.fr-doc h3 { margin: 2.25rem 0 .7rem; color: var(--fr-ivory); font-size: 1.05rem; font-weight: 600;
             line-height: 1.4; scroll-margin-top: 1.5rem; }
.fr-doc h4 { margin: 1.75rem 0 .5rem; color: var(--fr-ivory); font-size: .95rem; font-weight: 500;
             line-height: 1.5; }
.fr-doc h4 em { font-style: normal; }
.fr-doc [id] { scroll-margin-top: 1.5rem; }
.fr-doc ul { padding-left: 1.3rem; }
.fr-doc li { margin: 0 0 .45rem; padding-left: .2rem; }
.fr-doc li::marker { color: var(--fr-faint); }
.fr-doc li ul { margin: .5rem 0 .25rem; }
.fr-doc-address { padding-left: 1rem; border-left: 1px solid var(--fr-line-strong); line-height: 1.7; }
/* a short summary in a quiet box (the Terms' key information), and a worked example */
.fr-doc-box { margin: 0 0 2rem; padding: 1.4rem 1.6rem .5rem; border: 1px solid var(--fr-line); border-radius: 3px;
              background: rgba(18, 24, 33, .7); }
.fr-doc-example { margin: 0 0 1.4rem; padding: 1rem 1.25rem .2rem; border-left: 1px solid var(--fr-gold);
                  background: rgba(201, 169, 110, .05); }

/* the contents: a quiet box, the document's own list where it has one */
.fr-doc-toc { margin: 0 0 2.5rem; padding: 1.5rem 1.75rem 1.25rem; border: 1px solid var(--fr-line);
              border-radius: 3px; background: rgba(18, 24, 33, .7); }
.fr-doc .fr-doc-toc h2, .fr-doc-toc-title { margin: 0 0 .9rem; padding: 0; border: 0; color: var(--fr-muted);
              font-family: var(--fr-sans); font-size: .72rem; font-weight: 600; letter-spacing: .24em;
              line-height: 1.4; text-transform: uppercase; }
.fr-doc-toc ul { margin: 0; padding: 0; list-style: none; }
.fr-doc-toc li { margin: 0 0 .4rem; padding: 0; font-size: .88rem; line-height: 1.5; }
.fr-doc-toc a { color: var(--fr-text); text-decoration: none; }
.fr-doc-toc a:hover { color: var(--fr-gold); }

/* the privacy policy's categories: a grid, one card per row on a phone */
.fr-doc-scroll { margin: 0 0 1.5rem; overflow-x: auto; }
.fr-doc-grid { width: 100%; border-collapse: collapse; font-size: .9rem; line-height: 1.55; }
.fr-doc-grid th, .fr-doc-grid td { padding: .75rem .9rem .75rem 0; border-bottom: 1px solid var(--fr-line);
                                   text-align: left; vertical-align: top; }
.fr-doc-grid thead th { padding-top: 0; color: var(--fr-muted); font-size: .72rem; font-weight: 600;
                        letter-spacing: .16em; text-transform: uppercase; border-bottom-color: var(--fr-line-strong); }
.fr-doc-grid tbody th { width: 34%; color: var(--fr-ivory); font-weight: 500; }
.fr-doc-grid td:last-child { width: 6rem; padding-right: 0; }

/* the cookie policy: one small card per cookie */
.fr-doc-cookie { width: 100%; margin: 0 0 1rem; border: 1px solid var(--fr-line); border-radius: 3px;
                 border-collapse: separate; border-spacing: 0; background: rgba(18, 24, 33, .6);
                 font-size: .88rem; line-height: 1.55; }
.fr-doc-cookie th, .fr-doc-cookie td { padding: .45rem .9rem; text-align: left; vertical-align: top; }
.fr-doc-cookie tr:first-child th, .fr-doc-cookie tr:first-child td { padding-top: .85rem; }
.fr-doc-cookie tr:last-child th, .fr-doc-cookie tr:last-child td { padding-bottom: .85rem; }
.fr-doc-cookie th { width: 7.5rem; color: var(--fr-muted); font-weight: 500; white-space: nowrap; }
.fr-doc-cookie tr:first-child td { color: var(--fr-ivory); font-family: SFMono-Regular, Menlo, Consolas,
                                   "Liberation Mono", monospace; font-size: .9rem; }
.fr-doc-cookie td { overflow-wrap: anywhere; }
/* the same card for a service provider (privacy policy): its name is not code */
.fr-doc-cookie.fr-doc-party tr:first-child td { font-family: inherit; font-size: inherit; font-weight: 500; }

@media (max-width: 575.98px) {
  .fr-doc-page .fr-brand { margin-bottom: 2.25rem; }
  .fr-doc { font-size: .97rem; line-height: 1.7; }
  .fr-doc h1 { font-size: 2.1rem; }
  .fr-doc h2 { margin-top: 2.5rem; padding-top: 1.75rem; font-size: 1.4rem; }
  .fr-doc-toc { padding: 1.25rem 1.1rem 1rem; }
  .fr-doc-box { padding: 1.2rem 1.1rem .3rem; }
  .fr-doc-grid thead { display: none; }
  .fr-doc-grid, .fr-doc-grid tbody, .fr-doc-grid tr, .fr-doc-grid th, .fr-doc-grid td { display: block; width: auto; }
  .fr-doc-grid tr { padding: .9rem 0; border-bottom: 1px solid var(--fr-line); }
  .fr-doc-grid tbody th, .fr-doc-grid td { padding: 0; border: 0; }
  .fr-doc-grid tbody th { width: auto; margin-bottom: .35rem; }
  .fr-doc-grid td { margin-top: .3rem; }
  .fr-doc-grid td::before { content: attr(data-label) ": "; color: var(--fr-muted); }
  .fr-doc-grid td:last-child { width: auto; }
  .fr-doc-cookie th { width: 6.25rem; padding-right: .5rem; }
}

/* on paper: black on white, the column full width, no footer or brand line */
@media print {
  @page { margin: 18mm 16mm; }
  .fr-doc-page { background: #fff; color: #000; font-size: 11pt; }
  .fr-doc-page .fr-shell { display: block; min-height: 0; padding: 0; }
  .fr-doc-page .fr-brand { margin-bottom: 1.5rem; }
  .fr-doc-page .fr-brand .brand-lockup { filter: brightness(0); }  /* the ivory logo, printed one colour */
  .fr-doc-page .fr-footer, .fr-doc .fr-label { display: none; }
  .fr-doc { max-width: none; font-size: 10.5pt; line-height: 1.5; }
  .fr-doc, .fr-doc h1, .fr-doc h2, .fr-doc h3, .fr-doc h4, .fr-doc strong, .fr-doc a, .fr-doc-updated,
  .fr-doc-toc a, .fr-doc-toc h2, .fr-doc-toc-title, .fr-doc-grid th, .fr-doc-grid td,
  .fr-doc-cookie th, .fr-doc-cookie td { color: #000 !important; }
  .fr-doc a { text-decoration: underline; text-decoration-color: #000; }
  .fr-doc a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; overflow-wrap: anywhere; }
  .fr-doc h1 { font-size: 22pt; }
  .fr-doc h2 { margin-top: 1.6rem; padding-top: 0; border: 0; font-size: 14pt; break-after: avoid; }
  .fr-doc h3, .fr-doc h4 { break-after: avoid; }
  .fr-doc-updated::after { background: #000; margin: .8rem 0 1.2rem; }
  .fr-doc-toc, .fr-doc-cookie, .fr-doc-box, .fr-doc-example { background: none; border-color: #999; }
  .fr-doc-cookie, .fr-doc-grid tr { break-inside: avoid; }
  .fr-doc-grid th, .fr-doc-grid td, .fr-doc-address { border-color: #999; }
}