/* support.unison.au. Brand tokens from www.unison.au (via docs/mockups/support-portal-mockup.html). */
:root {
  --aqua: #008EAA; --aqua-dark: #007291; --aqua-light: #00a8c9;
  --grey: #6b7378; --dark: #333333; --line: #e2e7eb; --white: #fff;
  --bad: #c62828;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --r: 8px; --r-lg: 16px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
[hidden] { display: none !important; }
html { background: var(--white); }
body { font-family: var(--font); color: var(--dark); background: var(--white); line-height: 1.6; font-size: 16px; min-height: 100vh; display: flex; flex-direction: column; }
code { font-family: var(--mono); font-size: .82rem; }

.site-head { border-bottom: 1px solid #e6e9ec; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.logo { display: flex; align-items: center; gap: 11px; font-weight: 600; font-size: 1.05rem; }
.logo .mark { width: 30px; height: 30px; border-radius: 7px; background: var(--aqua); display: grid; place-items: center; color: #fff; font-size: .85rem; font-weight: 700; }
.site-head .hint { font-size: .82rem; color: var(--grey); overflow-wrap: anywhere; }

.body { padding: 40px 24px 48px; max-width: 640px; width: 100%; margin: 0 auto; flex: 1; }
.eyebrow { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--aqua-dark); font-weight: 600; margin-bottom: 10px; }
h1 { font-size: 1.65rem; line-height: 1.25; margin-bottom: 10px; }
.lead { color: #54606b; margin-bottom: 22px; }
.notice { font-size: .84rem; color: var(--grey); margin-top: 28px; border-top: 1px solid #eef0f2; padding-top: 16px; }
.ref { font-size: .78rem; color: var(--grey); margin-top: 18px; font-family: var(--mono); }

label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 7px; }
input[type=email], input[type=text] { width: 100%; padding: 12px 14px; font: inherit; font-size: 1rem; border: 1px solid #cfd6dc; border-radius: var(--r); background: #fff; }
input:focus { outline: 2px solid var(--aqua-light); outline-offset: 1px; border-color: var(--aqua); }
.codein { font-family: var(--mono); font-size: 2rem !important; letter-spacing: .3em; text-align: center; max-width: 340px; }
.help { font-size: .8rem; color: var(--grey); margin-top: 7px; }
.row { margin-bottom: 20px; }

.btn { display: inline-flex; align-items: center; justify-content: center; padding: 13px 26px; border: none; border-radius: var(--r); background: var(--aqua); color: #fff; font: inherit; font-weight: 600; font-size: .98rem; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--aqua-dark); }
.btn:disabled { opacity: .55; cursor: wait; }
.btn.big { width: 100%; padding: 16px; font-size: 1.05rem; }
.btn.ghost { background: transparent; color: var(--aqua-dark); border: 1px solid #cfd6dc; font-weight: 500; }
.btn.sm { padding: 6px 13px; font-size: .8rem; }
.link { background: none; border: none; color: var(--aqua-dark); font: inherit; text-decoration: underline; cursor: pointer; padding: 0; }

.alert { border-radius: var(--r); padding: 13px 16px; font-size: .9rem; margin-bottom: 20px; display: flex; gap: 11px; align-items: flex-start; }
.alert .ic { font-weight: 700; }
.alert.bad { background: #fdf3f3; border: 1px solid #f0d4d4; color: #8c2f2f; }
.alert.warn { background: #fff8ec; border: 1px solid #f0e0c0; color: #6f5210; }
.alert.info { background: #eef8fb; border: 1px solid #c9e6ee; color: #175f70; }

.plat { display: flex; align-items: center; gap: 14px; padding: 15px 17px; border: 1px solid var(--line); border-radius: var(--r-lg); background: #fbfcfd; margin-bottom: 20px; }
.plat .who { flex: 1; }
.plat .who b { display: block; font-size: .95rem; }
.plat .who small { color: var(--grey); font-size: .8rem; }
.file { display: flex; justify-content: space-between; gap: 14px; font-size: .8rem; color: var(--grey); margin: 10px 0 20px; flex-wrap: wrap; overflow-wrap: anywhere; }

.steps { counter-reset: s; margin: 24px 0 0; list-style: none; }
.steps li { counter-increment: s; position: relative; padding-left: 38px; margin-bottom: 15px; font-size: .93rem; color: #43505c; }
.steps li::before { content: counter(s); position: absolute; left: 0; top: 1px; width: 25px; height: 25px; border-radius: 50%; background: var(--aqua); color: #fff; font-size: .78rem; font-weight: 700; display: grid; place-items: center; }

.fold { border: 1px solid #e6e9ec; border-radius: var(--r); margin-top: 14px; overflow: hidden; }
.fold summary { padding: 12px 16px; font-size: .88rem; font-weight: 600; cursor: pointer; background: #fafbfc; }
.fold .in { padding: 6px 16px 16px; font-size: .87rem; color: #54606b; }
.hash { display: block; margin-top: 6px; overflow-wrap: anywhere; }
.cmd { background: #1f2933; color: #e4e7eb; border-radius: var(--r); padding: 14px 76px 14px 15px; margin-top: 10px; position: relative; }
.cmd code { color: inherit; font-size: .82rem; overflow-wrap: anywhere; display: block; line-height: 1.6; }
.cmd .copy { position: absolute; top: 9px; right: 9px; background: #3e4c59; color: #fff; border: none; border-radius: 5px; padding: 5px 11px; font: inherit; font-size: .74rem; cursor: pointer; }

.choices { border: none; margin-bottom: 6px; }
.choices label { display: flex; align-items: center; gap: 11px; font-weight: 500; font-size: .95rem; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--r); margin-bottom: 8px; cursor: pointer; }
.choices label:has(input:checked) { border-color: var(--aqua); background: #f4fbfd; }
#platform-form .btn { margin-top: 16px; }

.foot { border-top: 1px solid #e6e9ec; padding: 14px 24px; font-size: .76rem; color: var(--grey); display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; }