/* QnC Systems — www.qncsystems.com
   ------------------------------------------------------------------
   Navy, cream, brass. Wide.

   The page is built to read as an established firm's site, so it uses
   its full width and carries weight through solid colour fields rather
   than through decoration: a solid navy masthead and hero at the top, a
   navy close at the bottom, white bordered panels on a cream ground in
   between. Content spans the container — there is no narrow column down
   the middle and no empty margin column.

   Serif headings over sans body. No gradients, no shadows, no rounded
   corners, no icons. Brass appears only as a short rule above a heading
   and on small labels. */

:root {
  --navy:        #12314f;
  --navy-deep:   #0c2035;
  --navy-line:   #2a4e70;
  --on-navy:     #eceff3;
  --on-navy-2:   #a8bccf;

  --cream:       #f7f5f1;
  --panel:       #ffffff;
  --ink:         #1a1d21;
  --ink-2:       #4d5259;
  --ink-3:       #676d74;
  --rule:        #dcd7cd;
  --rule-2:      #c6c0b4;

  --brass:       #7d6228;   /* text-safe on cream */
  --brass-line:  #a8873f;   /* decorative rules only */
  --brass-navy:  #c9a961;   /* on navy */

  --container: 78rem;
  --pad: 2.5rem;

  --serif: "Source Serif 4", Charter, "Iowan Old Style", Georgia, "Times New Roman", serif;
  --sans:  "Public Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --navy:      #10222f;
    --navy-deep: #0b1720;
    --navy-line: #26414f;
    --on-navy:   #e4e8ec;
    --on-navy-2: #97a9b7;

    --cream:     #15171b;
    --panel:     #1c1f24;
    --ink:       #e9e6e0;
    --ink-2:     #b2b7bd;
    --ink-3:     #8b9198;
    --rule:      #2d3138;
    --rule-2:    #3c424a;

    --brass:      #cbab68;
    --brass-line: #9c7f42;
    --brass-navy: #cbab68;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
main { flex: 1 0 auto; }

/* balance keeps compounds like "long-term care" off a line break in the
   display sizes; browsers without it just wrap normally. */
h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; line-height: 1.15; margin: 0 0 .5em; letter-spacing: -0.008em; text-wrap: balance; }
h1 { font-size: clamp(2.2rem, 3.6vw, 3.2rem); line-height: 1.08; letter-spacing: -0.018em; }
h2 { font-size: clamp(1.7rem, 2.6vw, 2.35rem); letter-spacing: -0.014em; }
h3 { font-size: 1.16rem; }
h4 { font-size: 1rem; }
p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }
:focus-visible { outline: 2px solid var(--brass-line); outline-offset: 3px; }

.skip {
  position: absolute; left: -9999px; z-index: 30;
  background: var(--navy-deep); color: #fff;
  font-size: .85rem; padding: .6rem 1rem;
}
.skip:focus { left: 0; top: 0; }

.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--pad); }
@media (max-width: 48rem) { :root { --pad: 1.25rem; } }

/* Kicker + the brass rule that opens a section heading. */
.kicker {
  font-size: .73rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase;
  color: var(--brass); margin: 0 0 1rem;
}
.kicker--navy { color: var(--brass-navy); }

/* CSP has no unsafe-inline, so hold-together spans need a class. */
.nowrap { white-space: nowrap; }

.ruled::before {
  content: ""; display: block;
  width: 2.75rem; height: 2px; margin-bottom: 1.5rem;
  background: var(--brass-line);
}

/* ── Masthead ────────────────────────────────────────────────────── */

.masthead { background: var(--navy); color: var(--on-navy); }
.masthead-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 2rem; min-height: 4.5rem;
}

.wordmark { display: inline-flex; align-items: baseline; gap: .45rem; text-decoration: none; color: inherit; }
.wm-a { font-family: var(--serif); font-weight: 600; font-size: 1.3rem; letter-spacing: -0.01em; }
.wm-b { font-size: .73rem; font-weight: 500; letter-spacing: .17em; text-transform: uppercase; color: var(--on-navy-2); }

.nav { display: flex; align-items: center; gap: 2rem; font-size: .88rem; }
.nav a { color: var(--on-navy-2); text-decoration: none; padding: .3rem 0; }
.nav a:hover { color: #fff; box-shadow: inset 0 -2px 0 var(--brass-navy); }
.nav .nav-cta {
  color: var(--navy); background: var(--brass-navy);
  padding: .5rem 1.05rem; font-weight: 600; font-size: .84rem; letter-spacing: .01em;
}
.nav .nav-cta:hover { background: #fff; color: var(--navy); box-shadow: none; }
@media (max-width: 60rem) { .nav a:not(.nav-cta) { display: none; } }
@media (max-width: 26rem) { .wm-b { display: none; } }

/* ── Hero ────────────────────────────────────────────────────────── */

.hero { background: var(--navy); color: var(--on-navy); padding: 5rem 0 5.5rem; border-top: 1px solid var(--navy-line); }
.hero-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: 3rem 5rem; align-items: start; }
@media (max-width: 62rem) { .hero-grid { grid-template-columns: 1fr; gap: 3.2rem; } .hero { padding: 3.4rem 0 3.8rem; } }

.hero h1 { color: #fff; max-width: 20ch; }
.hero-lede { font-size: 1.2rem; line-height: 1.55; color: var(--on-navy); max-width: 34rem; margin-top: 1.5rem; }
.hero-lede strong { color: #fff; font-weight: 600; }

.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2.4rem; }

/* The index in the hero's right column: the whole product, named, before
   the reader scrolls. */
.hero-index { border-top: 1px solid var(--navy-line); }
.hero-index h2 {
  font-family: var(--sans); font-size: .73rem; font-weight: 600;
  letter-spacing: .15em; text-transform: uppercase; color: var(--brass-navy);
  margin: 1.1rem 0 .9rem;
}
.hero-index ol { list-style: none; margin: 0; padding: 0; counter-reset: mod; }
.hero-index li {
  counter-increment: mod;
  display: flex; align-items: baseline; gap: 1rem;
  padding: .68rem 0; border-bottom: 1px solid var(--navy-line);
  font-size: .96rem;
}
.hero-index li::before {
  content: counter(mod, decimal-leading-zero);
  font-size: .74rem; font-weight: 600; color: var(--on-navy-2);
  font-variant-numeric: tabular-nums; flex: none; min-width: 1.4rem;
}
.hero-index b { font-weight: 500; color: #fff; }
.hero-index span { margin-left: auto; font-size: .78rem; color: var(--on-navy-2); text-align: right; }

/* ── Buttons ─────────────────────────────────────────────────────── */

.btn {
  display: inline-block; border: 1px solid transparent;
  font-family: var(--sans); font-size: .92rem; font-weight: 600; letter-spacing: .01em;
  padding: .85rem 1.7rem; text-decoration: none;
}
.btn-brass { background: var(--brass-navy); color: var(--navy); }
.btn-brass:hover { background: #fff; color: var(--navy); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-deep); }
.btn-outline { border-color: var(--navy-line); color: var(--on-navy); background: transparent; }
.btn-outline:hover { border-color: var(--brass-navy); color: #fff; }

.textlink {
  font-size: .92rem; color: var(--on-navy); text-decoration: none;
  box-shadow: inset 0 -1px 0 var(--brass-navy); padding-bottom: 2px;
}
.textlink:hover { color: #fff; box-shadow: inset 0 -2px 0 var(--brass-navy); }
.textlink--ink { color: var(--ink); box-shadow: inset 0 -1px 0 var(--brass-line); }
.textlink--ink:hover { color: var(--ink); box-shadow: inset 0 -2px 0 var(--brass-line); }

/* ── Sections ────────────────────────────────────────────────────── */

.section { padding: 5.2rem 0; border-top: 1px solid var(--rule); }
.section:first-child { border-top: 0; }
@media (max-width: 48rem) { .section { padding: 3.4rem 0; } }

/* Two real columns: the heading column carries a lede, so neither side is
   an empty margin. */
.split { display: grid; grid-template-columns: 23rem minmax(0, 1fr); gap: 2.5rem 5rem; align-items: start; }
@media (max-width: 66rem) { .split { grid-template-columns: 1fr; gap: 2rem; } }
.split-head h2 { margin-bottom: .7rem; }
.split-head p { color: var(--ink-2); font-size: 1.02rem; }
.split-body p { color: var(--ink-2); }
.split-body > p { max-width: 42rem; }

.section-head { max-width: 46rem; margin-bottom: 3rem; }
.section-head p { color: var(--ink-2); font-size: 1.08rem; margin-top: .8rem; }

/* ── Module panels ───────────────────────────────────────────────── */

.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
@media (max-width: 66rem) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 44rem) { .grid-3 { grid-template-columns: minmax(0, 1fr); } }

.panel {
  background: var(--panel); border: 1px solid var(--rule);
  padding: 1.7rem 1.6rem 1.75rem;
  display: flex; flex-direction: column;
}
.panel-n {
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; color: var(--brass);
  font-variant-numeric: tabular-nums; margin: 0 0 .85rem;
}
.panel h3 { margin: 0 0 .55rem; }
.panel-cite {
  font-size: .74rem; color: var(--ink-3); margin: 0 0 1rem;
  padding-bottom: .9rem; border-bottom: 1px solid var(--rule);
}
.panel p:last-child { color: var(--ink-2); font-size: .95rem; margin: 0; }

.footnote { margin-top: 2rem; font-size: .9rem; color: var(--ink-3); max-width: 48rem; }
.footnote strong { color: var(--ink-2); font-weight: 600; }

/* ── Definition rows (data, security, terms) ─────────────────────── */

.defs { display: grid; gap: 0; }
.defs > div { padding: 1.25rem 0; border-top: 1px solid var(--rule); }
.defs > div:first-child { border-top: 0; padding-top: 0; }
.defs h3 { font-family: var(--sans); font-size: .95rem; font-weight: 600; letter-spacing: .005em; margin: 0 0 .35rem; }
.defs p { color: var(--ink-2); font-size: .97rem; margin: 0; max-width: 44rem; }

.controls { list-style: none; margin: 0; padding: 0; background: var(--panel); border: 1px solid var(--rule); }
.controls li {
  padding: .82rem 1.4rem; border-top: 1px solid var(--rule);
  font-size: .95rem; color: var(--ink-2);
}
.controls li:first-child { border-top: 0; }

/* Three-up terms strip. */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
@media (max-width: 60rem) { .trio { grid-template-columns: minmax(0, 1fr); gap: 1.8rem; } }
.trio > div { border-top: 2px solid var(--ink); padding-top: 1.1rem; }
.trio h3 { font-size: 1.05rem; margin: 0 0 .4rem; }
.trio p { color: var(--ink-2); font-size: .95rem; margin: 0; }

/* ── Closing band ────────────────────────────────────────────────── */

.band { background: var(--navy); color: var(--on-navy); padding: 4.6rem 0; }
.band-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.5rem 5rem; align-items: center; }
@media (max-width: 62rem) { .band-grid { grid-template-columns: 1fr; } .band { padding: 3.4rem 0; } }
.band h2 { color: #fff; margin-bottom: .8rem; max-width: 16ch; }
.band p { color: var(--on-navy); max-width: 36rem; }
.band-actions { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; }

/* ── Colophon ────────────────────────────────────────────────────── */

.colophon { background: var(--navy-deep); color: var(--on-navy-2); padding: 2.8rem 0; font-size: .9rem; }
.colophon a { color: var(--on-navy); text-decoration: none; box-shadow: inset 0 -1px 0 var(--navy-line); }
.colophon a:hover { color: #fff; box-shadow: inset 0 -1px 0 var(--brass-navy); }
.colophon-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem 3rem; align-items: flex-start; }
.colophon .wm-a { color: #fff; }
.colophon p { margin: 0; }
.colophon-legal {
  width: 100%; margin-top: 1.8rem; padding-top: 1.2rem;
  border-top: 1px solid var(--navy-line);
  font-size: .78rem; line-height: 1.7; max-width: 58rem;
}

/* ── Notice page ─────────────────────────────────────────────────── */

.notice { padding: 6rem 0 7rem; }
.notice p { color: var(--ink-2); max-width: 34rem; margin-bottom: 2rem; }

@media print {
  .masthead, .nav, .btn, .skip { display: none; }
  body { background: #fff; color: #000; font-size: 10.5pt; }
  .hero, .band { background: #fff; color: #000; }
  .hero h1, .band h2 { color: #000; }
}