/* MAIA SYSTEMS PTY LTD: document pages (signing, agreement, privacy).
   Same obsidian ground, type and accent as site.css, set for long reading.
   Style only. Never edit the words of these pages from here. */

@font-face {
  font-family: "Archivo";
  src: url("/all-trades/fonts/archivo-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: dark;
  --bg: #0A0D12;
  --surface: #10151C;
  --surface-2: #161C25;
  --ink: #F2F7F9;
  --body: #D5DEE5;
  --ink-soft: #AEBBC5;
  --accent: #22B8C4;
  --accent-ink: #04121A;
  --accent-hover: #5CCED6;
  --accent-press: #1C9DA7;
  --line: rgba(255, 255, 255, .12);
  --line-strong: rgba(255, 255, 255, .26);
  --amber: #FFB84D;
  --amber-line: rgba(255, 184, 77, .55);
  --error: #FF8A80;
  --gutter: clamp(1rem, 4vw, 2rem);
  --ease: cubic-bezier(.23, 1, .32, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; background: var(--bg); scrollbar-color: #2A323D var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font: 400 1.0625rem/1.62 "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 3px; }

.wrap { max-width: 54rem; margin: 0 auto; padding: clamp(1.25rem, 4vw, 2.75rem) var(--gutter) clamp(3.5rem, 8vw, 6rem); }

/* ------------------------------------------------ type */
h1, h2, h3 { color: var(--ink); text-wrap: balance; }
h1 { margin: 0 0 .6rem; font-size: clamp(2rem, 6vw, 3.25rem); font-weight: 800; font-stretch: 108%; line-height: 1.04; letter-spacing: -.025em; }
h2 {
  margin: clamp(2.75rem, 6vw, 4rem) 0 1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line-strong);
  font-size: clamp(1.35rem, 3vw, 1.75rem); font-weight: 750; font-stretch: 104%; line-height: 1.15; letter-spacing: -.015em;
  scroll-margin-top: 5rem;
}
h3 { margin: 1.75rem 0 .5rem; font-size: 1.125rem; font-weight: 700; line-height: 1.25; }
p { margin: .75rem 0; }
ul, ol { margin: .5rem 0 1rem; padding-left: 1.4rem; }
li { margin: .35rem 0; }
li::marker { color: var(--ink-soft); }
b, strong { color: var(--ink); font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }
.note { color: var(--ink-soft); font-style: italic; font-size: .94em; }
.meta { color: var(--ink-soft); font-size: .94rem; line-height: 1.5; }
.meta b { color: var(--ink); }

/* ------------------------------------------------ links */
a { color: var(--accent); text-decoration: underline; text-decoration-color: rgba(34, 184, 196, .5); text-decoration-thickness: 1px; text-underline-offset: .22em; transition: text-decoration-color 160ms var(--ease), color 160ms var(--ease); }
@media (hover: hover) and (pointer: fine) { a:hover { color: var(--accent-hover); text-decoration-color: currentColor; } }
nav.noprint a, footer a { display: inline-block; padding: .55rem .1rem; }

/* ------------------------------------------------ panels and notices */
.panel, .box, nav.toc { margin: 1.25rem 0; padding: 1.1rem 1.25rem; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; }
.panel > :first-child, .box > :first-child { margin-top: 0; }
.panel > :last-child, .box > :last-child { margin-bottom: 0; }
.notice { background: #15120C; border-color: var(--amber-line); }
.box.cyan { background: var(--surface); border-color: var(--accent); }
blockquote { margin: 1rem 0; padding: .85rem 1.1rem; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; }
.ph { padding: 0 .3em; color: var(--amber); background: rgba(255, 184, 77, .1); border-radius: 4px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88em; }
code { padding: 1px 6px; color: var(--ink); background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; font-size: .9em; overflow-wrap: anywhere; }

/* ------------------------------------------------ tables */
table { width: 100%; border-collapse: collapse; font-size: .96rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
th, td { padding: .7rem .8rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: var(--surface-2); color: var(--ink); font-weight: 700; }
.tw { margin: 1rem 0; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 10px; }
.tw td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }
.tw.sched td:first-child, .sched td:first-child { white-space: normal; }

/* ------------------------------------------------ agreement bar */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: center; gap: .6rem;
  margin: calc(clamp(1.25rem, 4vw, 2.75rem) * -1) calc(var(--gutter) * -1) 1.25rem;
  padding: .8rem var(--gutter);
  background: rgba(10, 13, 18, .92);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.sigline { height: 2.2rem; margin: .6rem 0 .2rem; border-bottom: 1px solid var(--ink-soft); }

/* ------------------------------------------------ privacy header */
.brand { display: flex; align-items: center; gap: .6rem; color: var(--ink); font-weight: 700; font-stretch: 88%; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; }
.brand .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); }
body > header { border-bottom: 1px solid var(--line); }
body > header .wrap { padding-bottom: clamp(1.5rem, 4vw, 2.5rem); }
body > header h1 { margin-top: 1.1rem; }
body > main.wrap { padding-top: clamp(1.25rem, 3vw, 2rem); }
body > main.wrap table { display: block; overflow-x: auto; }
body > main.wrap th { color: var(--ink); }
nav.toc ol { margin: 0; padding-left: 1.4rem; columns: 2; column-gap: 2rem; }
nav.toc li { margin: .2rem 0; break-inside: avoid; }
nav.toc a { display: inline-block; padding: .2rem 0; }
body > footer { margin-top: 2rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .94rem; }
body > footer .wrap { padding-top: 1.5rem; padding-bottom: 2.5rem; }

/* ------------------------------------------------ buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: .7rem 1.5rem;
  background: var(--accent); color: var(--accent-ink);
  border: 1px solid var(--accent); border-radius: 999px;
  font-weight: 700; font-stretch: 104%; font-size: 1rem; line-height: 1.15; white-space: normal;
  cursor: pointer;
  transition: transform 140ms var(--ease), background-color 180ms var(--ease), border-color 180ms var(--ease);
}
.btn:active { transform: scale(.98); background: var(--accent-press); border-color: var(--accent-press); }
.btn:disabled { cursor: not-allowed; background: var(--surface-2); border-color: var(--line-strong); color: var(--ink-soft); transform: none; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); transform: translateY(-1px); }
}
button:not(.btn) {
  min-height: 44px; padding: .45rem 1.1rem;
  background: transparent; color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 999px;
  font: inherit; font-weight: 600;
  cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
button:not(.btn):active { background: var(--surface-2); }
@media (hover: hover) and (pointer: fine) { button:not(.btn):hover { border-color: var(--accent); } }

/* ------------------------------------------------ signing form */
.terms {
  height: 48vh; overflow: auto; overscroll-behavior: contain;
  padding: .5rem 1.1rem 1.1rem;
  border: 1px solid var(--line-strong); border-radius: 12px;
  scrollbar-color: #39434F var(--bg);
}
fieldset { min-width: 0; margin: 1.75rem 0; padding: 1.25rem; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; }
legend { padding: 0 .5rem; color: var(--ink); font-size: 1.125rem; font-weight: 750; font-stretch: 104%; }
label { display: block; margin: .9rem 0; color: var(--ink); font-size: .96rem; font-weight: 600; line-height: 1.4; }
input:not([type=checkbox]), select {
  display: block; width: 100%; min-height: 48px; margin-top: .35rem; padding: .65rem .8rem;
  background: var(--bg); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 8px;
  font: inherit; font-size: 1rem; font-weight: 400;
  transition: border-color 160ms var(--ease);
}
input:not([type=checkbox]):focus-visible, select:focus-visible { border-color: var(--accent); outline-offset: 1px; border-radius: 8px; }
input:user-invalid, select:user-invalid { border-color: var(--error); }
input:disabled, select:disabled { opacity: .6; cursor: not-allowed; }
@media (hover: hover) and (pointer: fine) { input:not([type=checkbox]):hover:not(:disabled), select:hover:not(:disabled) { border-color: rgba(255, 255, 255, .5); } }
input[type=checkbox] { width: 1.3rem; height: 1.3rem; margin: 0 .5rem 0 0; vertical-align: -.25rem; accent-color: var(--accent); }
fieldset label:has(input[type=checkbox]) { font-weight: 400; color: var(--body); padding: .3rem 0; }
canvas { display: block; width: 100%; max-width: 440px; height: 140px; margin: .75rem 0; background: #fff; border-radius: 8px; touch-action: none; }
form > .btn { width: 100%; }
#result:not(:empty) { margin-top: 1rem; padding: .85rem 1.1rem; color: var(--ink); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 10px; }
.wrap > footer { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .94rem; }

@media (max-width: 640px) {
  .tw td:first-child { white-space: normal; width: 36%; }
  th, td { padding: .6rem; }
  nav.toc ol { columns: 1; }
  fieldset { padding: 1rem; }
  .terms { padding: .25rem .85rem .85rem; }
}
@media (min-width: 640px) { form > .btn { width: auto; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

@media print {
  body { background: #fff !important; color: #000 !important; font-size: 11pt; }
  .topbar, .btn, .noprint { display: none !important; }
  .wrap { max-width: 100%; padding: 0; }
  h1, h2, h3, b, strong, .tw td:first-child, th, .meta, .note, label, legend { color: #000 !important; }
  h2 { border-top-color: #999; page-break-after: avoid; }
  .panel, .box, nav.toc, fieldset, .terms { background: #fff !important; border-color: #999; }
  .terms { height: auto; overflow: visible; }
  th { background: #eee !important; }
  th, td { border-color: #999; }
  blockquote { background: #f3f3f3; border-color: #999; }
  .ph { color: #000; background: #eee; }
  table, blockquote, .panel { page-break-inside: avoid; }
  a { color: #000; text-decoration: none; }
}