/* Pre-Con Assist - the Field Tag look shared by every page except the checker (which carries its own copy of these tokens). */
:root {
  --bg: #f2f0ea; --panel: #ffffff; --ink: #1a1b1e; --ink2: #5b5d63; --rule: #d6d3cb; --wash: #f4f2ec; --frame: #1a1b1e;
  --accent: #1a1b1e; --accent-ink: #ffffff; --gold: #c99a2e; --gold-wash: #f3e6c0; --gold-ink: #6b4e0c;
  --ok: #2e6b45; --ok-bg: #e1efe5; --ne: #a8322a; --ne-bg: #f6d9d5; --nd: #5f6266; --nd-bg: #e9e7e1; --logo-filter: none;
  --f-display: "Red Hat Display", "Helvetica Neue", Arial, sans-serif;
  --f-body: "Red Hat Text", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  --f-mono: "Red Hat Mono", ui-monospace, Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #141517; --panel: #1d1f22; --ink: #ecebe7; --ink2: #a3a5ab; --rule: #34373c; --wash: #25272b; --frame: #c9c8c3;
  --accent: #ecebe7; --accent-ink: #141517; --gold: #d9b45a; --gold-wash: #3a3020; --gold-ink: #ecd394;
  --ok: #7fcf9a; --ok-bg: #1d3326; --ne: #f08a82; --ne-bg: #3f1e1c; --nd: #a3a5ab; --nd-bg: #2a2c30; --logo-filter: invert(1); color-scheme: dark } }
:root[data-theme="dark"] {
  --bg: #141517; --panel: #1d1f22; --ink: #ecebe7; --ink2: #a3a5ab; --rule: #34373c; --wash: #25272b; --frame: #c9c8c3;
  --accent: #ecebe7; --accent-ink: #141517; --gold: #d9b45a; --gold-wash: #3a3020; --gold-ink: #ecd394;
  --ok: #7fcf9a; --ok-bg: #1d3326; --ne: #f08a82; --ne-bg: #3f1e1c; --nd: #a3a5ab; --nd-bg: #2a2c30; --logo-filter: invert(1); color-scheme: dark }
* { box-sizing: border-box }
html, body { margin: 0 }
body { background: var(--bg); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.45; min-height: 100vh; display: flex; flex-direction: column }
a { color: var(--ink) } a:hover { color: var(--gold-ink) }
[hidden] { display: none !important }
.wrap { width: 100%; max-width: 1360px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)) }

/* top bar */
.appbar { background: var(--panel); border-bottom: 1px solid var(--frame) }
.appbar .wrap { display: flex; align-items: center; gap: 10px 22px; flex-wrap: wrap; padding-block: 12px }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink) }
.brand img { height: 30px; width: auto; filter: var(--logo-filter) }
.brand span { font-family: var(--f-display); font-weight: 800; font-size: 1.2rem; border-left: 1px solid var(--frame); padding-left: 14px; letter-spacing: -.01em }
.nav { display: flex; gap: 4px; flex-wrap: wrap }
.nav a { font-size: .9rem; padding: 7px 15px; border-radius: 18px; text-decoration: none }
.nav a[aria-current="page"] { background: var(--accent); color: var(--accent-ink); font-weight: 700 }
.who { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap }
.who .n { display: flex; flex-direction: column; line-height: 1.2; font-size: .86rem } .who .n b { font-size: .9rem }
.who .n span { color: var(--ink2) }
.iconbtn { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--frame); background: var(--panel); color: var(--ink); display: inline-flex; align-items: center; justify-content: center; cursor: pointer }

main { flex: 1; padding-block: 26px 30px }
h1 { font-family: var(--f-display); font-weight: 800; font-size: 2rem; letter-spacing: -.015em; line-height: 1.1; margin: 0; text-wrap: balance }
h2 { font-family: var(--f-display); font-weight: 800; font-size: 1.15rem; margin: 0 0 10px }
.lede { color: var(--ink2); margin: 4px 0 0; max-width: 70ch }
.hint { font-size: .82rem; color: var(--ink2); margin: 0 }
.mono { font-family: var(--f-mono) }
.k { font-family: var(--f-mono); font-size: .68rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2) }

/* the tag: two clipped corners, 1px outline following the cut */
.tag { --cut: 14px; border: 1px solid var(--frame);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% calc(100% - var(--cut)), calc(100% - var(--cut)) 100%, 0 100%, 0 var(--cut));
  background:
    linear-gradient(135deg, transparent 8.9px, var(--frame) 8.9px, var(--frame) 9.9px, transparent 9.9px) top left / 15px 15px no-repeat border-box,
    linear-gradient(-45deg, transparent 8.9px, var(--frame) 8.9px, var(--frame) 9.9px, transparent 9.9px) bottom right / 15px 15px no-repeat border-box,
    var(--panel) }
.card { padding: 18px 20px 20px 22px; min-width: 0 }
.gold { background-color: var(--gold-wash) }

/* controls */
label.f { display: flex; flex-direction: column; gap: 5px; font-size: .84rem; font-weight: 700; min-width: 0 }
input, select, textarea { font: inherit; font-size: .95rem; font-weight: 400; color: var(--ink); background: var(--panel); border: 1px solid var(--rule); border-radius: 10px; padding: 10px 12px; width: 100%; min-width: 0 }
input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent) }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; font-weight: 400 }
.btn { font: inherit; font-size: .9rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 8px 18px; border-radius: 20px; border: 1px solid var(--frame); background: var(--panel); color: var(--ink); cursor: pointer; text-decoration: none; white-space: nowrap }
.btn:hover { background: var(--wash); color: var(--ink) }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); font-weight: 700 }
.btn.primary:hover { filter: brightness(1.15); color: var(--accent-ink) }
.btn.dashed { border-style: dashed; border-color: var(--gold); background: var(--gold-wash) }
.btn.danger { color: var(--ne); border-color: var(--ne) }
.btn.small { min-height: 32px; padding: 4px 12px; font-size: .82rem }
.btn:disabled { opacity: .45; cursor: default }
.row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.row3 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px }
@media (max-width: 640px) { .row, .row3 { grid-template-columns: minmax(0, 1fr) } }
.stack { display: flex; flex-direction: column; gap: 14px }
.tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.msg { margin: 0; font-size: .88rem; min-height: 1.2em } .msg.bad { color: var(--ne) } .msg.ok { color: var(--ok) }
.linkbox { font-family: var(--f-mono); font-size: .8rem; word-break: break-all; background: var(--wash); border: 1px dashed var(--gold); border-radius: 10px; padding: 8px 10px }

/* pills */
.pill { display: inline-block; font-size: .76rem; font-weight: 700; padding: 2px 10px; border-radius: 10px; white-space: nowrap }
.pill.ok { color: var(--ok); background: var(--ok-bg) } .pill.okf { color: var(--panel); background: var(--ok) }
.pill.ne { color: var(--ne); background: var(--ne-bg) } .pill.neo { color: var(--ne); border: 1px solid var(--ne) }
.pill.nd { color: var(--nd); background: var(--nd-bg) } .pill.au { color: var(--gold-ink); background: var(--gold-wash); border: 1px solid var(--gold) }

/* login */
.auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 470px); gap: 56px; align-items: start; padding-block: 40px }
.auth > form { position: sticky; top: 24px }
.auth h1 { font-size: clamp(2rem, 4vw, 3.1rem); max-width: 16ch }
.auth .pitch { display: flex; flex-direction: column; gap: 22px }
.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 720px }
.points div { border-top: 1px solid var(--frame); padding-top: 10px; display: flex; flex-direction: column; gap: 4px; font-size: .9rem }
.points .k { color: var(--gold-ink) }
.authcard { --cut: 18px; padding: 30px 34px 32px }
/* the plan */
.plan { --cut: 14px; padding: 16px 20px 14px }
.plan .plan-top { display: flex; flex-direction: column; gap: 4px }
.plan h2 { margin: 0; font-size: 1.5rem }
.plan .price { font-family: var(--f-display); font-weight: 700; font-size: 1.05rem }
.plan .incl { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: .92rem }
.plan .incl li { padding-left: 22px; position: relative }
.plan .incl li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 10px; height: 6px; border-left: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg) }
.plan > .hint { grid-column: 1 / -1; margin: 4px 0 0; font-size: .8rem }
/* plan cards and the plan picker */
.plans { display: flex; flex-direction: column; gap: 10px; max-width: 760px }
.pcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px }
.pcard { --cut: 12px; padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); cursor: pointer }
.pcard h3 { margin: 2px 0 0; font-family: var(--f-display); font-size: 1.4rem }
.pcard .price { font-family: var(--f-display); font-weight: 700 }
.pcard > span, .pcard > h3 { display: block; text-align: left }
.pcard .pwho { font-size: .88rem; color: var(--ink2) }
.pcard .pick { margin-top: 8px; font-size: .85rem; font-weight: 700; color: var(--ink2) }
.pcard.on { background: var(--gold-wash); --frame: var(--gold) } .pcard.on .pick { color: var(--gold-ink) }
.pcard:hover:not(.on) { background: var(--wash) }
.pcard:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px }
.plan { display: flex; flex-direction: column; gap: 10px }
.seg { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--frame); border-radius: 22px; padding: 0; margin: 0; overflow: hidden }
.seg label { position: relative; cursor: pointer }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer }
.seg span { display: block; text-align: center; padding: 9px 12px; font-weight: 700; font-size: .92rem }
.seg input:checked + span { background: var(--accent); color: var(--accent-ink) }
.seg input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: -3px }
/* the snapshot */
.snap { margin: 0; max-width: 760px; display: flex; flex-direction: column; gap: 8px }
.snapframe { --cut: 14px; padding: 6px; overflow: hidden }
.snap img { display: block; width: 100%; height: auto; border-radius: 4px }
.snap figcaption { font-size: .82rem; color: var(--ink2) }
.snap-d { display: none !important }
:root[data-theme="dark"] .snap-l { display: none !important } :root[data-theme="dark"] .snap-d { display: block !important }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .snap-l { display: none !important } :root:not([data-theme="light"]) .snap-d { display: block !important } }
@media (max-width: 520px) { .pcards { grid-template-columns: minmax(0, 1fr) } }
@media (max-width: 900px) { .auth > form { position: static } .auth .snap { display: none } .auth { grid-template-columns: minmax(0, 1fr); gap: 28px } .points { grid-template-columns: minmax(0, 1fr) } }

/* dashboard */
.head { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 18px }
.totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--frame); border-bottom: 1px solid var(--frame); margin-bottom: 18px }
.totals > div { padding: 10px 14px; display: flex; flex-direction: column } .totals > div:first-child { padding-left: 0 }
.totals > div + div { border-left: 1px solid var(--rule) }
.totals .v { font-family: var(--f-display); font-weight: 800; font-size: 1.6rem; line-height: 1.15 }
@media (max-width: 640px) { .totals { grid-template-columns: repeat(2, minmax(0, 1fr)) } .totals > div:nth-child(3) { border-left: 0; padding-left: 0 } .totals > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule) } }
.dash { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start }
@media (max-width: 1050px) { .dash { grid-template-columns: minmax(0, 1fr) } }
.plist { display: flex; flex-direction: column }
.prow { display: grid; grid-template-columns: minmax(0, 2fr) 56px 76px minmax(0, 1.9fr) 110px minmax(0, 1.4fr) auto; gap: 12px; padding: 14px 18px 14px 22px; align-items: center; border-bottom: 1px solid var(--rule) }
.prow:last-child { border-bottom: 0 }
.sm-only { display: none }
.prow.headrow { padding-block: 11px 9px; border-bottom: 1px solid var(--frame) }
.prow .nm { display: flex; flex-direction: column; min-width: 0 } .prow .nm a { font-weight: 700; font-size: 1rem; text-decoration: none } .prow .nm a:hover { text-decoration: underline }
.prow .nm span, .prow .st span { font-size: .78rem; color: var(--ink2) }
.prow .st { display: flex; flex-direction: column; gap: 3px; align-items: flex-start }
@media (max-width: 1050px) {
  .prow.headrow { display: none }
  .sm-only { display: inline }
  .prow { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px }
  .prow > :nth-child(2), .prow > :nth-child(3) { font-size: .8rem; color: var(--ink2) }
  .prow > :nth-child(4) { grid-column: 1 / -1; font-size: .88rem }
  .prow > :nth-child(5), .prow > :nth-child(6), .prow > :nth-child(7) { grid-column: 1 / -1 }
}
.side { display: flex; flex-direction: column; gap: 16px }
.banner { padding: 12px 16px; border-radius: 12px; background: var(--gold-wash); border: 1px solid var(--gold); margin-bottom: 18px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap }
.banner.bad { background: var(--ne-bg); border-color: var(--ne) }
.empty { padding: 28px 22px; text-align: left }

/* tables (account, review, admin) */
.tbl { overflow-x: auto }
table { border-collapse: collapse; width: 100%; font-size: .9rem }
th { text-align: left; font-family: var(--f-mono); font-weight: 600; font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ink2); border-bottom: 1px solid var(--frame); padding: 8px 10px; white-space: nowrap }
td { border-bottom: 1px solid var(--rule); padding: 10px; vertical-align: middle }
tr:last-child td { border-bottom: 0 }
.cols { display: grid; grid-template-columns: 400px minmax(0, 1fr); gap: 22px; align-items: start }
@media (max-width: 980px) { .cols { grid-template-columns: minmax(0, 1fr) } }

/* footer */
.disc { border-top: 1px solid var(--frame); padding-block: 12px 18px; display: grid; grid-template-columns: 250px minmax(0, 1fr) auto; gap: 8px 18px; font-size: .78rem; color: var(--ink2) }
.disc b { font-family: var(--f-mono); font-weight: 600; color: var(--ink); letter-spacing: .04em }
.disc p { margin: 0; max-width: 110ch; line-height: 1.5 }
@media (max-width: 880px) { .disc { grid-template-columns: minmax(0, 1fr) } }
.terms { max-width: 80ch } .terms h2 { margin-top: 22px }

/* checker page: the bar above it */
.projbar .wrap { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; padding-block: 10px }
.projbar { background: var(--wash); border-bottom: 1px solid var(--rule) }
.projbar .t { font-family: var(--f-display); font-weight: 800; font-size: 1.05rem }
.projbar .tools { margin-left: auto }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important } }