/* One visual language for public pages, customer/admin sign-in and registration.
   Direction five palette, intentionally square components; existing content and flow stay intact. */
:root {
  --paper: #f8f3ed;
  --paper-2: #f7eee9;
  --paper-3: #efe2db;
  --card: #fffefd;
  --ink: #1c1a17;
  --ink-2: #5b4f4c;
  --ink-3: #8d7775;
  --crimson: #a5212f;
  --crimson-2: #7c1822;
  --crimson-3: #5e131b;
  --crimson-wash: #f7e9e6;
  --rule: #eaded7;
  --rule-2: #e7d9d2;
  --serif: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --mono: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --sans: Inter, "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
  --wrap: 1160px;
  --soft-shadow: 0 14px 34px rgba(97, 52, 48, .07);
}
*, *::before, *::after { border-radius: 0 !important; }
body { background: radial-gradient(circle at 78% 6%, #f9eae5 0, transparent 32%), linear-gradient(130deg, #f9f5ef, #faf7f2 68%); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.6; }
button, input, select, textarea { font-family: var(--sans); }
button, a { transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--crimson); outline-offset: 2px; }

/* Public header and navigation */
.mast { border-bottom: 1px solid var(--rule-2); background: rgba(255, 253, 250, .89); backdrop-filter: blur(14px); }
.mast-util { padding-block: 10px; border-color: var(--rule); font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.mast-brand { padding-block: 22px; }
.mast-wordmark { font-family: var(--sans); font-weight: 770; letter-spacing: -.05em; }
.mast-tag { font-size: 14px; font-style: normal; line-height: 1.5; }
.mast-sections { border-top: 1px solid var(--rule); }
.mast-sections a { padding: 13px 14px; font-size: 10.5px; font-weight: 760; letter-spacing: .09em; }
.mast-sections a[aria-current="page"] { background: var(--crimson-wash); border-bottom-color: var(--crimson); }

/* Reusable type, controls, and surface rules */
.eyebrow, .sect-kicker, .sect-kicker, .rail-cap, .lead-no, .col-no, .toc-cap, .ord-key { font-weight: 780; letter-spacing: .11em; }
.sect { padding-block: clamp(44px, 6vw, 72px); }
.sect-title { font-family: var(--sans); font-weight: 750; letter-spacing: -.035em; }
.sect-rule { border-top-color: #c88d94; border-top-width: 2px; }
.sect-rule + .sect-rule { border-top-color: var(--rule-2); }
.btn-solid, .btn-outline, .button, .button-primary, .button.primary, .btn-paper, .upload-button { font-family: var(--sans); font-size: 11px; font-weight: 760; letter-spacing: .08em; border-width: 1px; padding: 12px 19px; }
.btn-solid, .button-primary, .button.primary { color: white; background: var(--crimson); border-color: var(--crimson); }
.btn-solid:hover, .button-primary:hover, .button.primary:hover { color: white; background: var(--crimson-2); border-color: var(--crimson-2); }
.btn-outline, .button { border-color: var(--rule-2); background: var(--card); color: var(--ink-2); }
.btn-outline:hover, .button:hover { color: var(--crimson); border-color: #d8abb0; background: var(--crimson-wash); }
.button.primary:hover { color: white; }

/* Front page — retain original two-column story and all sections */
.lead-grid { gap: clamp(20px, 3vw, 36px); }
.lead-story { padding: clamp(26px, 4vw, 48px); border: 1px solid var(--rule-2); border-top: 2px solid #c88d94; background: var(--card); box-shadow: var(--soft-shadow); }
.lead-hl { font-family: var(--sans); font-size: clamp(38px, 5.1vw, 70px); font-weight: 760; letter-spacing: -.055em; line-height: 1.03; }
.lead-hl em { font-style: normal; }
.lead-deck { font-size: 17px; }
.lead-byline { font-size: 10px; font-weight: 690; letter-spacing: .08em; }
.rail { padding-left: 0; border-left: 0; }
.rail-block { padding: 18px 20px; border: 1px solid var(--rule-2); border-top: 2px solid #c88d94; background: var(--card); box-shadow: var(--soft-shadow); }
.rail-block + .rail-block { margin-top: 16px; }
.rail-block h3 { font-family: var(--sans); font-weight: 730; letter-spacing: -.02em; }
.ledger-tbl tr.total td { border-top-color: #d8abb0; border-bottom: 0; background: var(--crimson-wash); }
.stats-band { border: 1px solid var(--rule-2); border-top: 2px solid #c88d94; background: var(--card); box-shadow: var(--soft-shadow); }
.stat { border-color: var(--rule); }
.stat-num { font-family: var(--sans); letter-spacing: -.055em; }
.cols3 { gap: 16px; }
.col-story, .col-story:first-child, .col-story:last-child { padding: 22px; border: 1px solid var(--rule-2); border-top: 2px solid #c88d94; background: var(--card); box-shadow: var(--soft-shadow); }
.col-story h3 { font-family: var(--sans); font-weight: 730; letter-spacing: -.025em; }
.col-story p { font-size: 14.5px; }
.feature-quote { padding: clamp(24px, 3vw, 38px); border: 1px solid var(--rule-2); background: var(--card); box-shadow: var(--soft-shadow); }
.fq-text { font-family: var(--sans); font-style: normal; font-weight: 650; letter-spacing: -.025em; }
.cta-band { background: var(--crimson); color: white; }
.cta-band .btn-ghost-light { color: white; border-color: #e8b8bd; background: transparent; }
.cta-band .btn-paper { color: var(--crimson); background: #fff8f4; border-color: #fff8f4; }
.ledgerfoot { border-top: 2px solid #c88d94; background: #f5eae4; }
.foot-col .rail-cap { border-color: #d8abb0; }

/* Secondary public pages retain their article/rail/table positions. */
.art-toc, .tele, .bulletin, .edit-wrap, .letter-wrap, .ord-wrap { min-width: 0; }
.art-toc { padding: 16px; border: 1px solid var(--rule-2); background: var(--card); box-shadow: var(--soft-shadow); }
.art-body { padding: clamp(22px, 3vw, 34px); border: 1px solid var(--rule-2); border-top: 2px solid #c88d94; background: var(--card); box-shadow: var(--soft-shadow); }
.art-body .art-sec, .tele, .bull-head, .edit-open, .letter-wrap, .ord-wrap { border-color: var(--rule-2); }
.art-body .art-sec { border-top: 2px solid #c88d94; }
.art-body h2, .flow-ol h3, .clause h2, .ord-body h3 { font-family: var(--sans); font-weight: 730; letter-spacing: -.025em; }
.cmp-table, .fee-table { border-color: var(--rule-2); background: var(--card); }
.cmp-table th, .fee-table th { border-color: #d8abb0; }
.tele { border-top: 2px solid #c88d94; box-shadow: var(--soft-shadow); }
.tele-head, .tele-line { border-color: var(--rule-2); }
.fx-strip { border-color: #d8abb0; background: var(--card); }
.bull-head { border: 0; outline: 0; background: var(--crimson); box-shadow: var(--soft-shadow); }
.clause { border-color: var(--rule-2); }
.ord-row:first-of-type { border-top-color: #c88d94; border-top-width: 2px; }
.edit-open { padding: 28px 32px; border: 1px solid var(--rule-2); border-top: 2px solid #c88d94; background: var(--card); box-shadow: var(--soft-shadow); }
.edit-open blockquote { font-style: normal; font-weight: 690; letter-spacing: -.03em; }
.tl-row:first-child, .board-row:first-child { border-top: 2px solid #c88d94; }
.tl-row, .board-row { border-color: var(--rule-2); }
.letterhead { border: 1px solid var(--rule-2); border-top: 2px solid #c88d94; background: var(--card); box-shadow: var(--soft-shadow); }
.lh-rows { padding: 15px 18px; border-block: 1px solid var(--rule-2); background: #fff8f5; }
.lh-row b { font-weight: 740; letter-spacing: .08em; }
.lt-field label { font-size: 10.5px; font-weight: 750; letter-spacing: .09em; }
.lt-field input, .lt-field select, .lt-field textarea { padding: 11px 12px; border: 1px solid var(--rule-2); background: #fffaf8; font-size: 15px; }
.lt-field input:focus, .lt-field select:focus, .lt-field textarea:focus { border-color: var(--crimson); box-shadow: 0 0 0 2px rgba(165,33,47,.08); }
.offices { gap: 14px; border-top: 0; }
.office, .office:first-child { padding: 18px; border: 1px solid var(--rule-2); border-top: 2px solid #c88d94; background: var(--card); box-shadow: var(--soft-shadow); }
.ord-row { padding: 18px; background: var(--card); border-right: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); border-left: 1px solid var(--rule-2); }
.office, .registration-card { background: var(--card); border-color: var(--rule-2); box-shadow: var(--soft-shadow); }

/* Customer and admin sign-in */
.auth-page, .auth-page.auth-letter { background: radial-gradient(circle at 74% 12%, #f7e5e1, transparent 36%), linear-gradient(135deg, #f9f4ee, #f8ede8); }
.auth-panel { min-width: 0; }
.admin-auth-brand { display: inline-flex; align-items: center; gap: 12px; width: fit-content; color: var(--ink); text-decoration: none; font-size: 22px; font-weight: 770; letter-spacing: -.045em; }
.admin-auth-brand img { width: 46px; height: 46px; }
.auth-card { border: 1px solid var(--rule-2); border-top: 2px solid #c88d94; background: var(--card); box-shadow: 0 24px 58px rgba(97, 52, 48, .10); }
.auth-card h1 { font-family: var(--sans); font-weight: 750; letter-spacing: -.035em; }
.auth-card > p { font-size: 14px; }
.auth-side { background: linear-gradient(145deg, #a5212f, #7c1822); color: white; }
.auth-side .eyebrow { color: #ffe1e2 !important; }
.auth-side h2 { font-family: var(--sans); font-weight: 730; letter-spacing: -.04em; }
.auth-side p { color: #ffeaeb; }
.letter-login { max-width: 560px; }
.letter-login-rule { border-bottom: 1px solid #d8abb0; font-size: 10px; font-weight: 750; letter-spacing: .1em; }
.letter-login .auth-card { margin-top: 18px; }
.letter-login-foot { font-size: 10px; letter-spacing: .04em; }
.field label, .rg-field label { font-size: 10.5px; font-weight: 750; letter-spacing: .09em; }
.field input, .field select, .rg-field input, .rg-field select, .rg-field textarea { padding: 11px 12px; border: 1px solid var(--rule-2); background: #fffaf8; font-size: 15px; }
.field input:focus, .field select:focus, .rg-field input:focus, .rg-field select:focus, .rg-field textarea:focus { border: 1px solid var(--crimson); outline: 0; box-shadow: 0 0 0 2px rgba(165,33,47,.08); }
.auth-links { font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.auth-form { gap: 16px; }
.auth-form .form-message:empty { display: none; }

/* Registration — original five steps and every form field are preserved. */
.reg-shell { background: radial-gradient(circle at 75% 10%, #f8eae5, transparent 32%), #f9f5ef; }
.reg-top { border-bottom-color: var(--rule-2); background: rgba(255, 253, 250, .9); }
.reg-progress { background: #f6ebe6; }
.reg-step-node { border-color: var(--rule-2); }
.reg-step-node.active .reg-step-btn { background: var(--crimson-wash); }
.reg-step-node.complete .reg-step-btn { border-top-color: #d8abb0; }
.reg-step-sub, .rg-field small, .rg-note, .rv-row dt { font-style: normal; }
.reg-intro h2 { font-family: var(--sans); font-weight: 750; letter-spacing: -.035em; }
.rg-card { border: 1px solid var(--rule-2); border-top: 2px solid #c88d94; background: var(--card); box-shadow: var(--soft-shadow); }
.rg-head h1, .rg-subhead h3 { font-family: var(--sans); font-weight: 740; letter-spacing: -.025em; }
.rg-radio { background: #fffaf8; }
.rg-radio:has(input:checked) { background: var(--crimson-wash); }
.reg-upload { border-color: var(--rule-2); background: #fffaf8; }
.reg-upload.has-file { border-color: #d8abb0; background: var(--crimson-wash); }
.rg-review { border-color: #c88d94; }
.pending-steps > div { border-color: #c88d94; }

@media (max-width: 760px) {
  .lead-story { padding: 24px; }
  .cols3 { grid-template-columns: 1fr; }
  .stat { padding-inline: 14px; }
  .auth-panel { padding: 24px; }
  .letter-login .auth-card { padding: 26px; }
}
@media (max-width: 600px) {
  .reg-top-in { flex-wrap: wrap; gap: 8px; }
  .reg-top-in > div { width: 100%; justify-content: space-between; }
  .reg-save { max-width: calc(100% - 110px); }
}