/* Shared editorial layer. Keep the existing account components and their states. */
:root {
  --ground:#0c1012;
  --ground-deep:#080b0d;
  --surface:#141a1e;
  --surface-2:#1b2328;
  --ink:#f0eadb;
  --ink-soft:#c7c8bf;
  --ink-mute:#a0aaa9;
  --line:#2a3438;
  --line-strong:#435052;
  --line-gold:#605338;
  --gold:#d4b25e;
  --gold-bright:#e6cb89;
  --gold-deep:#a68b4a;
  --green:#83c5ad;
  --ember:#f1a07d;
  --max:1280px;
  --display:Marcellus,Georgia,serif;
  --ui:system-ui,-apple-system,"Segoe UI",sans-serif
}

html {
  scroll-padding-top:110px
}

body {
  padding:0;
  line-height:1.65
}

h1,h2,h3,h4 {
  font-weight:400
}

img {
  display:block
}

button,input,select {
  font:inherit
}

main {
  min-width:0
}

::selection {
  background:var(--gold);
  color:var(--ground)
}

.wrap {
  width:min(var(--max),calc(100% - 2 * clamp(20px,4vw,64px)))
}

:focus-visible {
  outline:2px solid var(--gold-bright);
  outline-offset:5px
}

.skip-link {
  position:fixed;
  top:12px;
  left:20px;
  transform:translateY(-160%);
  z-index:100;
  padding:12px 20px;
  background:var(--gold);
  color:var(--gold-ink);
  font-family:var(--ui)
}

.skip-link:focus {
  transform:none
}

.eyebrow {
  display:block;
  font-family:var(--ui);
  font-size:.75rem;
  font-weight:600;
  letter-spacing:.18em
}

.btn {
  min-height:48px;
  padding:12px 22px;
  font-family:var(--ui);
  font-size:.875rem;
  line-height:1.45;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  background:#141a1ee6;
  box-shadow:none;
  transition:background .18s,border-color .18s,color .18s;
  text-align:center;
  border-radius:4px
}

.btn:hover {
  transform:none;
  background:var(--surface-2)
}

.btn.gold {
  background:var(--gold);
  border-color:var(--gold);
  box-shadow:none
}

.btn.gold:hover {
  background:var(--gold-bright);
  filter:none
}

.btn.ghost {
  border-color:transparent
}

.btn.ghost:hover {
  background:var(--surface-2)
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:44px;
  font-family:var(--ui);
  font-size:.875rem;
  color:var(--gold)
}

.text-link:hover {
  text-decoration:underline;
  text-underline-offset:5px
}

.top {
  background:#0c1012f5;
  border-bottom-color:var(--line)
}

.top .bar {
  min-height:80px;
  gap:24px;
  padding-block:16px;
  align-items:center;
  flex-wrap:nowrap
}

.brand {
  flex-shrink:0
}

.brand img {
  width:44px;
  height:44px;
  object-fit:contain
}

.brand .name {
  font-family:var(--display);
  font-size:1.5rem;
  font-weight:400;
  letter-spacing:.16em
}

.brand small {
  font-family:var(--ui);
  font-size:.625rem;
  letter-spacing:.14em;
  margin-top:7px
}

.top nav {
  font-family:var(--ui);
  font-size:.875rem;
  letter-spacing:0;
  text-transform:none;
  gap:24px;
  flex-wrap:nowrap
}

.top nav a {
  padding:12px 0
}

.top nav a[aria-current]::after {
  height:1px;
  box-shadow:none;
  bottom:3px
}

.top .actions {
  gap:8px;
  margin-inline-start:auto;
  flex-shrink:0;
  justify-content:flex-end
}

.hero-test-note { max-width: 580px; margin: 20px 0 0; color: var(--ink-soft); font-size: .9375rem; line-height: 1.65; }
.hero-test-note a, .start-help a { color: var(--gold); text-decoration: underline; text-underline-offset: 4px; }
.start-help { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 24px; font-family: var(--ui); font-size: .875rem; line-height: 1.6; }

.top .actions .btn {
  min-height:44px;
  padding:10px 18px
}

.lang {
  font-family:var(--ui);
  font-size:.75rem;
  border:0
}

.menu-toggle {
  display:none;
  width:44px;
  height:44px;
  flex-shrink:0;
  align-items:center;
  justify-content:center
}

.hub-page { padding-bottom:64px }
#painel .panelgrid { grid-template-columns:minmax(0,1fr); max-width:900px; margin-inline:auto }
.account-nav { display:flex; flex-wrap:wrap; gap:8px; max-width:900px; margin:0 auto 24px; font-family:var(--ui) }
.account-nav button { min-height:44px; padding:12px 16px; border:1px solid var(--line); border-radius:3px; background:#131b1f; color:var(--ink-soft); font:inherit; cursor:pointer }
.account-nav button[aria-pressed="true"] { color:var(--gold); border-color:var(--gold-deep); background:#292416 }
@media(max-width:640px) { .account-nav { display:grid; grid-template-columns:1fr 1fr } .account-nav button { padding:12px 8px; font-size:.8125rem } }
.account-operation { border-top:1px solid var(--line); padding-top:12px }
.account-operation summary { cursor:pointer; min-height:44px; padding:10px 0; color:var(--gold); font-family:var(--ui) }
.account-operation form,#form-email { display:grid; gap:16px; margin-top:16px }
.account-operation p,#form-email p { color:var(--ink-soft); line-height:1.6 }
.hub-index { display:flex; flex-wrap:wrap; gap:12px; margin:0 0 36px; font-family:var(--ui) }
.hub-index a { padding:12px 18px; border:1px solid var(--line); border-radius:3px; color:var(--gold) }
.hub-index a:hover { background:var(--surface) }
.hub-section { margin-top:64px; scroll-margin-top:110px }
.hub-section>h2 { margin:12px 0 28px; font-size:clamp(1.8rem,3vw,2.5rem) }
.hub-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px }
.hub-grid-two { grid-template-columns:repeat(2,minmax(0,1fr)) }
.hub-card { padding:28px; border:1px solid var(--line); border-top:2px solid var(--gold-deep); border-radius:3px; background:#131b1f; min-width:0; overflow-wrap:anywhere }
.hub-card h2,.hub-card h3 { font-family:var(--display); font-weight:400; line-height:1.3; margin:0 0 16px; font-size:1.5rem }
.hub-card .eyebrow+h2,.hub-card .eyebrow+h3 { margin-top:16px }
.hub-card p { color:var(--ink-soft); line-height:1.7; margin:0 0 20px }
.hub-card .btn { margin-top:8px }
.hub-action { display:block; color:var(--ink) }
.hub-action:hover { border-color:var(--gold) }
.hub-facts { margin:0 0 20px; font-family:var(--ui); font-size:.875rem }
.hub-facts div { display:flex; justify-content:space-between; gap:16px; padding:10px 0; border-bottom:1px solid var(--line) }
.hub-facts dd { margin:0; text-align:right }
.hub-faq { max-width:900px }
.hub-faq summary { min-height:48px; padding-block:14px }
.hub-faq a { color:var(--gold); text-decoration:underline }
.hub-contact { display:grid; grid-template-columns:1fr 1fr; gap:40px; padding:32px; background:#131b1f; border:1px solid var(--line); overflow-wrap:anywhere }
.hub-contact h2 { margin:12px 0 20px }
.hub-contact p,.hub-contact li { color:var(--ink-soft); line-height:1.7 }
.hub-contact ul { padding-left:20px }
@media(max-width:960px) {
  .hub-grid { grid-template-columns:1fr 1fr }
  .hub-contact { grid-template-columns:1fr; gap:24px }
}
@media(max-width:640px) {
  .hub-grid { grid-template-columns:1fr }
  .hub-section { margin-top:40px }
  .hub-card,.hub-contact { padding:22px }
  .hub-index { display:grid; grid-template-columns:1fr; gap:8px }
}

.menu-icon {
  position:relative;
  display:block;
  width:20px;
  height:16px
}

.menu-icon span {
  position:absolute;
  left:0;
  width:20px;
  height:2px;
  border-radius:2px;
  background:currentColor
}

.menu-icon span:nth-child(1) { top:0 }
.menu-icon span:nth-child(2) { top:7px }
.menu-icon span:nth-child(3) { top:14px }
.menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(1) { top:7px; transform:rotate(45deg) }
.menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(2) { opacity:0 }
.menu-toggle[aria-expanded="true"] .menu-icon span:nth-child(3) { top:7px; transform:rotate(-45deg) }

.top .bar .menu-toggle {
  padding:0
}

.hero {
  isolation:isolate;
  border-bottom-color:var(--line);
  background:var(--ground-deep);
  min-height:0
}

.hero-art {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:60% 54%;
  z-index:-2
}

.hero::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(90deg,#080b0df2 0%,#080b0ddb 32%,#080b0d45 72%,#080b0d36),linear-gradient(0deg,#0c1012 0%,transparent 42%)
}

.hero::after {
  display:none
}

.hero-grid {
  grid-template-columns:minmax(0,1fr) 380px;
  gap:48px;
  align-items:center;
  min-height:660px;
  padding:76px 0 58px
}

.hero-copy {
  gap:22px;
  max-width:670px
}

.hero-copy>.eyebrow {
  display:flex;
  align-items:center;
  gap:14px
}

.hero-copy>.eyebrow::before {
  content:"";
  height:1px;
  width:32px;
  background:var(--gold)
}

.wordmark {
  font-family:var(--display);
  font-size:clamp(3.6rem,7.5vw,7rem);
  font-weight:400;
  letter-spacing:.09em;
  line-height:1;
  color:var(--ink);
  text-shadow:none
}

.wordmark small {
  font-family:var(--ui);
  font-size:.75rem;
  letter-spacing:.3em;
  color:var(--gold-bright);
  margin-top:18px;
  line-height:1.6;
  font-weight:400;
  text-shadow:none
}

.hero h2 {
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(1.7rem,2.8vw,2.6rem);
  line-height:1.18;
  max-width:22ch;
  text-shadow:none;
  letter-spacing:0;
  color:var(--ink)
}

.hero p.lead {
  max-width:48ch;
  color:#d2d5cb;
  font-size:1.125rem;
  text-shadow:none
}

.hero .cta {
  margin-top:0
}

.hero-caption {
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--ui);
  font-size:.8125rem;
  color:var(--ink-soft)
}

.hero-caption span+span::before {
  content:"/";
  margin-right:12px;
  color:var(--gold-deep)
}

.status {
  align-self:start;
  margin-top:44px;
  background:#0e1519ed;
  border:1px solid #5b513b;
  border-top:2px solid var(--gold);
  padding:24px;
  gap:14px;
  box-shadow:none
}

.status .rows div {
  padding-block:8px
}

@media(min-width:961px) {
  .status {
    grid-template-columns:1fr auto
  }
  .status .head,.status .rows,.status .note {
    grid-column:1 / -1
  }
  .status .status-refresh {
    grid-column:2;
    grid-row:2;
    text-align:right;
    min-height:44px
  }
}

.status .head {
  border:0;
  padding:0
}

.status .head .t {
  font-family:var(--display);
  font-size:1.25rem;
  font-weight:400;
  letter-spacing:0
}

.online {
  font-family:var(--ui);
  font-size:.75rem;
  letter-spacing:0;
  color:var(--ink-mute)
}

.online::before {
  width:6px;
  height:6px;
  box-shadow:none;
  background:currentColor
}

.online.live::before {
  box-shadow:none
}

.world-population {
  display:flex;
  align-items:center;
  gap:10px
}

.world-population strong {
  font-family:var(--ui);
  font-weight:600;
  font-size:1rem;
  line-height:1.5
}

.world-population span {
  font-family:var(--ui);
  font-size:1rem;
  color:var(--ink-mute)
}

.rows div,.kv div {
  gap:16px;
  padding:10px 0;
  border-color:var(--line);
  font-family:var(--ui);
  font-size:.875rem
}

.rows span:first-child,.kv span:first-child {
  font-family:var(--ui);
  font-size:.875rem;
  letter-spacing:0;
  text-transform:none
}

.rows span:last-child,.kv span:last-child {
  font-family:var(--ui);
  font-weight:400;
  min-width:0;
  overflow-wrap:anywhere
}

.status .note {
  font-family:var(--ui);
  font-size:.75rem;
  line-height:1.5;
  font-style:normal
}

.status-refresh {
  border:0;
  padding:4px 0;
  min-height:32px;
  background:transparent;
  color:var(--gold);
  cursor:pointer;
  text-align:left;
  font-family:var(--ui);
  font-size:.8125rem
}

.section {
  padding-top:80px
}

.section-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:28px
}

.section-heading .eyebrow {
  margin-bottom:12px
}

.section-heading h2 {
  font-family:var(--display);
  font-size:clamp(1.8rem,3vw,2.5rem)
}

.section-heading>p {
  color:var(--ink-mute);
  max-width:34ch;
  font-size:1rem
}

.cards {
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px
}

.card {
  display:flex;
  flex-direction:column;
  min-width:0;
  min-height:0;
  border-color:var(--line);
  background:var(--surface)
}

.card img {
  position:static;
  width:100%;
  height:auto;
  aspect-ratio:1.4;
  object-fit:cover;
  border-bottom:1px solid var(--line);
  transition:none
}

.card:hover img {
  transform:none
}

.card::after {
  display:none
}

.card .body {
  position:static;
  display:grid;
  gap:12px;
  padding:22px
}

.card h3 {
  font-family:var(--display);
  font-size:1.375rem;
  letter-spacing:0;
  text-transform:none;
  font-weight:400;
  line-height:1.25;
  color:var(--ink)
}

.card p {
  font-size:1rem;
  color:var(--ink-soft)
}

.card .number {
  font-family:var(--ui);
  font-size:.75rem;
  color:var(--gold);
  letter-spacing:.12em
}

.card .more {
  font-family:var(--ui);
  font-size:.875rem;
  text-transform:none;
  letter-spacing:0
}

a.card:hover {
  border-color:var(--gold-deep)
}

.cols {
  grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);
  gap:40px;
  margin-top:72px;
  align-items:start
}

.panel {
  min-width:0;
  border-color:var(--line);
  background:var(--surface);
  padding:28px;
  gap:20px
}

.panel .head {
  gap:16px;
  padding-bottom:16px;
  border-color:var(--line)
}

.panel h3 {
  font-family:var(--display);
  font-size:1.5rem;
  font-weight:400;
  letter-spacing:0;
  color:var(--ink)
}

.panel .link {
  font-family:var(--ui);
  font-size:.75rem;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink-mute)
}

.news-panel {
  border:0;
  padding:0;
  background:transparent
}

.news article {
  grid-template-columns:120px minmax(0,1fr);
  gap:24px;
  padding:22px 0;
  border-color:var(--line)
}

.news article:first-child {
  padding-top:0
}

.news article img {
  width:120px;
  height:100px;
  border:0
}

.news small {
  font-family:var(--ui);
  font-size:.75rem;
  letter-spacing:0;
  color:var(--gold);
  margin-bottom:8px
}

.news h4 {
  font-family:var(--display);
  font-size:1.3rem;
  font-weight:400;
  margin-bottom:8px
}

.news p {
  font-size:1rem
}

.news-archive {
  margin-top:16px
}

.news-archive summary {
  color:var(--gold);
  font-family:var(--ui);
  font-size:.875rem;
  cursor:pointer;
  padding-block:12px
}

.news-archive .news {
  margin-top:20px
}

.steps {
  gap:26px
}

.steps li {
  gap:16px
}

.steps li::before {
  font-family:var(--display);
  font-size:1.5rem;
  line-height:1.3
}

.steps b {
  margin-bottom:6px
}

.steps p {
  font-size:1rem
}

.steps p b {
  display:inline
}

.steps a,.faq a {
  text-decoration:underline;
  text-underline-offset:3px
}

.start-section {
  margin-top:64px;
  padding:36px;
  border:1px solid var(--line);
  border-top-color:var(--gold-deep);
  background:var(--surface);
  border-radius:4px
}

.start-section .steps {
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:36px
}

.journey {
  gap:24px
}

.journey .dl {
  min-height:240px;
  border:0;
  text-align:left;
  justify-content:start;
  background:linear-gradient(0deg,#080b0df5,#080b0d22),url("img/home-journey.jpg") center/cover
}

.journey .dl .inside {
  padding:28px;
  gap:14px;
  justify-items:start
}

.journey .dl h4 {
  font-family:var(--display);
  font-size:1.5rem
}

.journey .dl p {
  font-size:1rem
}

.journey .two {
  grid-template-columns:1fr;
  gap:8px
}

.journey .mini {
  padding:16px 0;
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  text-align:left;
  gap:8px
}

.journey .mini h4 {
  font-family:var(--display);
  font-size:1.125rem;
  color:var(--ink)
}

.journey .mini:hover h4 {
  color:var(--gold)
}

.journey .mini p {
  font-size:1rem
}

.demo {
  font-family:var(--ui);
  font-size:.8125rem;
  letter-spacing:0;
  line-height:1.6
}

.band {
  margin-top:72px;
  padding-block:32px;
  gap:28px
}

.vow,.vow+.vow {
  padding:0;
  border:0
}

.vow .k {
  font-family:var(--display);
  font-size:1.25rem;
  font-weight:400;
  letter-spacing:0;
  text-transform:none
}

.vow .v {
  font-size:1rem;
  margin-top:10px
}

.duo {
  gap:40px;
  margin-top:72px
}

.duo .panel {
  padding:36px
}

.duo .panel h3 {
  font-size:clamp(1.8rem,2.6vw,2.4rem)
}

.duo p,.rules li {
  font-size:1rem
}

.rules {
  gap:12px
}

.rules li::before {
  content:"+";
  width:auto;
  height:auto;
  border:0;
  transform:none;
  margin:0;
  color:var(--green);
  font-family:var(--ui)
}

.rules.never li::before {
  content:"−";
  background:none;
  color:var(--ember)
}

.rules-label {
  font-family:var(--ui);
  font-size:.8125rem;
  color:var(--ink-mute)
}

.callout {
  margin-top:72px;
  border-color:var(--line-gold);
  background:linear-gradient(90deg,#0c1012ed,#0c1012b3),url("img/home-journey.jpg") center/cover;
  padding:clamp(32px,6vw,72px);
  gap:20px;
  text-align:left;
  justify-items:start
}

.callout h2 {
  font-family:var(--display);
  font-size:clamp(2rem,4vw,3.3rem);
  max-width:23ch;
  text-shadow:none;
  letter-spacing:0;
  color:var(--ink)
}

.callout p {
  max-width:55ch;
  font-size:1.125rem;
  text-shadow:none;
  color:var(--ink-soft)
}

.page-head {
  padding:56px 0 12px;
  gap:16px
}

.page-head h1 {
  font-family:var(--display);
  font-size:clamp(2.2rem,4.5vw,3.5rem);
  letter-spacing:0;
  color:var(--ink)
}

.page-head .lead {
  font-size:1.125rem;
  max-width:60ch
}

.page {
  grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);
  gap:48px;
  margin-top:28px
}

.acct {
  min-width:0;
  border-color:var(--line);
  background:var(--surface);
  padding:32px;
  gap:20px;
  box-shadow:none
}

.acct .t {
  margin:0;
  font-family:var(--display);
  font-size:1.5rem;
  letter-spacing:0;
  color:var(--ink)
}

.acct h3,.acct h4 {
  font-family:var(--ui);
  font-size:.875rem;
  letter-spacing:0;
  text-transform:none;
  font-weight:600;
  border-top:1px solid var(--line);
  padding-top:20px;
  margin-top:4px
}

.field {
  gap:8px;
  min-width:0;
  align-content:start
}

.field label {
  font-family:var(--ui);
  font-size:.875rem;
  font-weight:500;
  letter-spacing:0;
  text-transform:none;
  color:var(--ink)
}

.field input,.field select {
  font-family:var(--ui);
  font-size:1rem;
  min-height:48px;
  height:52px;
  padding:12px 14px;
  min-width:0;
  background:var(--ground)
}

.field small,.pw-hint {
  font-family:var(--ui);
  font-size:.8125rem;
  line-height:1.55
}

.row2,.row3 {
  gap:16px;
  align-items:start
}

.check {
  font-family:var(--ui);
  font-size:.875rem;
  gap:12px
}

.check input {
  width:18px;
  height:18px;
  flex:0 0 18px;
  accent-color:var(--gold)
}

.check a,.acct a.inline {
  text-decoration:underline;
  text-underline-offset:3px
}

.msg {
  font-family:var(--ui);
  font-size:.875rem;
  padding:14px 16px;
  background:var(--ground);
  overflow-wrap:anywhere
}

.msg.ok {
  border:1px solid var(--line);
  border-left:3px solid var(--green)
}

.msg.err {
  border:1px solid var(--line);
  border-left:3px solid var(--ember)
}

.faq {
  margin-top:24px
}

.faq details {
  padding:18px 0
}

.faq summary {
  font-size:1.125rem
}

.faq p {
  margin-top:12px;
  font-size:1rem
}

.subnav {
  gap:8px;
  margin-top:12px;
  padding-bottom:16px;
  border-bottom:1px solid var(--line)
}

.subnav a {
  font-family:var(--ui);
  font-size:.875rem;
  letter-spacing:0;
  text-transform:none;
  padding:12px 18px;
  border-color:transparent
}

.subnav a:hover {
  background:var(--surface)
}

.subnav a[aria-current] {
  border-color:var(--line-gold)
}

.password-wrap {
  display:flex;
  align-items:stretch;
  border:1px solid var(--line-strong);
  background:var(--ground);
  border-radius:4px
}

.password-wrap input {
  border:0;
  background:transparent;
  height:50px;
  min-height:0
}

.password-wrap { height:52px }

.account-page .page-head { padding-top:36px; gap:12px }
.account-page .page-head h1 { font-size:clamp(2rem,4vw,3rem); margin:0 }
.account-page .page-head .lead { max-width:62ch; font-size:1.0625rem }
.account-page:has(#entrar:not([hidden]) #form-login:not([hidden])) .page-head {
  max-width:520px;
  margin-inline:auto;
  text-align:center;
  justify-items:center
}
.account-page .subnav { margin-top:12px }
.account-page #criar { grid-template-columns:minmax(0,1.55fr) minmax(260px,.75fr); gap:40px }
.account-page #form-signup { gap:18px }
.account-page #form-signup>h3:first-of-type { border-top:0; padding-top:0 }
.legal-document a { text-decoration:underline; text-underline-offset:3px }
.account-page #criar .side { padding:28px; background:var(--surface); border:1px solid var(--line); border-radius:4px; gap:20px }
.account-page #criar .side .steps { gap:24px }
@media(max-width:960px) { .account-page #criar { grid-template-columns:1fr; gap:28px } }
@media(max-width:640px) {
  .account-page .page-head { padding-top:24px }
  .account-page #criar .side { padding:24px }
}

.password-toggle {
  flex:0 0 auto;
  padding:8px 12px;
  border:0;
  background:transparent;
  color:var(--gold);
  font-family:var(--ui);
  font-size:.8125rem;
  cursor:pointer
}

.panelgrid {
  grid-template-columns:repeat(auto-fit,minmax(min(100%,350px),1fr));
  gap:24px
}

.side {
  gap:28px;
  padding-block:20px
}

.side .t {
  font-family:var(--display);
  font-size:1.75rem;
  letter-spacing:0
}

.side p.lead {
  font-size:1.125rem
}

.status-line {
  font-size:1rem;
  overflow-wrap:anywhere
}

#form-login,#form-recover {
  margin-inline:auto
}

.login-links { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-family:var(--ui); font-size:.875rem; margin-top:-8px }
.login-links a { display:inline-flex; align-items:center; min-height:44px; color:var(--gold) }
.login-links a:hover { text-decoration:underline; text-underline-offset:3px }

.codes span {
  overflow-wrap:anywhere
}

#qr {
  max-width:100%
}

.dlcard {
  border-top:2px solid var(--gold)
}

.dlcard .hash {
  font-size:.8125rem
}

.dlcard .hash b {
  display:block;
  margin-bottom:8px
}

.dlcard .alt {
  font-family:var(--ui);
  font-size:.875rem;
  text-align:center
}

.dlcard .alt a {
  text-decoration:underline
}

.dlcard .state {
  border:0;
  border-top:1px solid var(--line);
  padding:16px 0 0;
  font-family:var(--ui);
  font-size:.875rem
}

.download-details {
  border-top:1px solid var(--line);
  padding-top:16px
}

.download-details summary {
  cursor:pointer;
  color:var(--gold);
  font-family:var(--ui);
  font-size:.875rem;
  padding-block:6px
}

.download-details .hash {
  display:block;
  margin-top:16px
}

.grid2 {
  gap:32px;
  margin-top:48px
}

.grid2 .panel p {
  font-size:1rem
}

.download-page {
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)
}

.download-guide {
  padding:24px 0
}

.download-guide h2 {
  font-family:var(--display);
  font-size:1.75rem;
  margin-bottom:28px
}

.legal-document {
  max-width:78ch;
  margin:56px auto 0
}

.legal-document h1 {
  font-family:var(--display);
  font-size:clamp(2rem,4vw,3rem);
  margin-block:16px 24px
}

.legal-document h2 {
  font-family:var(--display);
  font-size:1.5rem;
  margin-block:36px 16px
}

.legal-document p,.legal-document li {
  color:var(--ink-soft);
  font-size:1rem;
  line-height:1.8
}

.legal-document li+li {
  margin-top:10px
}

.legal-document .meta {
  font-family:var(--ui);
  font-size:.8125rem;
  color:var(--ink-mute)
}

.legal-document .note {
  border-left:2px solid var(--gold);
  background:var(--surface);
  padding:20px;
  margin-top:24px;
  color:var(--ink-soft)
}

.legal-document table {
  border-collapse:collapse;
  width:100%
}

.legal-document th,.legal-document td {
  border:1px solid var(--line);
  padding:14px;
  text-align:left;
  vertical-align:top;
  font-size:.875rem;
  color:var(--ink-soft)
}

.legal-document th {
  color:var(--ink);
  background:var(--surface);
  font-family:var(--ui);
  font-weight:500
}

.table-scroll {
  overflow-x:auto;
  margin-block:24px
}

footer {
  margin-top:80px;
  border-top-color:var(--line);
  padding-block:40px 28px;
  gap:28px
}

footer .foot {
  grid-template-columns:240px 1fr 180px;
  gap:36px;
  align-items:start
}

footer nav {
  justify-content:start;
  gap:12px 24px;
  font-family:var(--ui);
  font-size:.875rem;
  letter-spacing:0;
  text-transform:none
}

footer .motto {
  font-family:var(--display);
  font-size:1.125rem;
  letter-spacing:0;
  text-transform:none
}

footer .motto b {
  font-weight:400;
  color:var(--gold)
}

footer .legal {
  border-top:1px solid var(--line);
  padding-top:24px;
  text-align:left;
  font-family:var(--ui);
  font-size:.75rem;
  color:var(--ink-mute)
}

@media(max-width:1160px) {
  .top .bar {
    gap:16px;
    min-height:76px;
    padding-block:12px;
    flex-wrap:wrap
  }
  .top nav {
    order:3;
    width:100%;
    gap:8px 24px;
    flex-wrap:wrap;
    border-top:1px solid var(--line);
    padding-top:12px
  }
  .menu-toggle {
    display:inline-flex;
    order:2;
    min-height:44px;
    padding:10px 14px
  }
  .top[data-enhanced] nav:not([data-open]) {
    display:none
  }
  .brand small {
    display:none
  }
  .hero-grid {
    gap:40px;
    grid-template-columns:minmax(0,1fr) 340px
  }
  .cards {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
}

@media(max-width:960px) {
  .top .bar {
    min-height:76px
  }
  .menu-toggle {
    display:inline-flex;
    order:2;
    min-height:44px;
    padding:10px 14px
  }
  .top .actions {
    margin-left:auto
  }
  .top nav {
    order:3;
    width:100%;
    gap:8px 24px;
    border-top:1px solid var(--line);
    padding-top:12px
  }
  .top[data-enhanced] nav:not([data-open]) {
    display:none
  }
  .hero-grid {
    grid-template-columns:minmax(0,1fr) 280px;
    gap:28px;
    padding-block:60px 40px;
    min-height:0
  }
  .hero-copy {
    max-width:620px
  }
  .status {
    max-width:100%;
    grid-template-columns:1fr;
    padding:20px
  }
  .status .rows {
    grid-column:auto;
    grid-row:auto
  }
  .status .note {
    grid-column:1/-1
  }
  .cols {
    grid-template-columns:1fr;
    gap:36px
  }
  .journey {
    grid-template-columns:1fr 1fr;
    align-items:center
  }
  .journey>.head {
    grid-column:1/-1
  }
  .page {
    gap:28px;
    grid-template-columns:1fr
  }
  .start-section .steps {
    grid-template-columns:1fr;
    gap:28px
  }
  .band {
    grid-template-columns:1fr 1fr
  }
  .duo {
    gap:24px
  }
  footer .foot {
    grid-template-columns:1fr 1fr;
    text-align:left
  }
  footer .brand {
    justify-content:start
  }
  footer .motto {
    display:none
  }
}

@media(max-width:760px) {
  .status {
    margin-top:0
  }
  .hero-grid {
    grid-template-columns:1fr;
    gap:32px;
    padding-block:40px 32px
  }
  .hero-copy {
    max-width:none
  }
  .hero-caption {
    flex-wrap:wrap
  }
  .top nav {
    max-height:calc(100dvh - 88px);
    overflow-y:auto;
    overscroll-behavior:contain
  }
  .status-refresh {
    min-height:44px
  }
}

@media(max-width:640px) {
  html {
    scroll-padding-top:90px
  }
  .top {
    position:sticky
  }
  .top .bar {
    gap:8px;
    min-height:68px;
    padding-block:10px
  }
  .brand {
    gap:8px
  }
  .brand img {
    width:32px;
    height:32px
  }
  .brand .name {
    font-size:1.125rem;
    letter-spacing:.1em
  }
  .top .actions>.btn:not(.gold),.lang {
    display:none
  }
  .top .actions .btn {
    padding-inline:12px;
    font-size:.8125rem
  }
  .menu-toggle {
    padding-inline:10px;
    font-size:.8125rem
  }
  .top nav {
    display:grid;
    grid-template-columns:1fr 1fr
  }
  .hero::before {
    background:linear-gradient(90deg,#080b0def,#080b0d80),linear-gradient(0deg,#0c1012,transparent)
  }
  .hero-art {
    object-position:64% center
  }
  .wordmark {
    font-size:clamp(2.8rem,12vw,4.6rem)
  }
  .wordmark small {
    font-size:.625rem;
    letter-spacing:.22em
  }
  .hero h2 {
    font-size:2rem
  }
  .hero p.lead {
    font-size:1rem
  }
  .hero .cta {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px
  }
  .hero .cta .btn {
    min-width:0;
    padding-inline:12px
  }
  .hero-caption {
    flex-wrap:wrap;
    font-size:.75rem
  }
  .status {
    grid-template-columns:1fr 1fr;
    padding:20px;
    gap:12px 16px
  }
  .status .head,.status .rows,.status .note {
    grid-column:1 / -1
  }
  .status-refresh {
    text-align:right;
    grid-column:2;
    grid-row:2
  }
  .status .rows {
    grid-column:1 / -1;
    grid-row:auto
  }
  .section {
    padding-top:48px
  }
  .section-heading {
    display:grid;
    gap:16px
  }
  .cards {
    grid-template-columns:1fr;
    gap:24px
  }
  .card img {
    aspect-ratio:1.9
  }
  .cols,.duo,.band,.callout {
    margin-top:48px
  }
  .start-section {
    margin-top:48px;
    padding:24px
  }
  .news article {
    display:block
  }
  .news article img {
    width:76px;
    height:76px;
    float:right;
    margin:0 0 12px 16px
  }
  .news article::after {
    content:"";
    display:block;
    clear:both
  }
  .news h4 {
    font-size:1.25rem
  }
  .panel,.acct,.duo .panel {
    padding:24px
  }
  .news-panel {
    padding:0
  }
  .journey,.duo,.band,.grid2 {
    grid-template-columns:1fr
  }
  .vow+.vow {
    padding-top:24px;
    border-top:1px solid var(--line)
  }
  .callout {
    padding:32px 24px
  }
  .callout .cta {
    display:grid
  }
  .row2,.row3 {
    grid-template-columns:1fr
  }
  .page-head {
    padding-top:36px
  }
  .subnav {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px
  }
  .subnav a {
    padding:12px;
    text-align:center;
    border-color:var(--line)
  }
  .actions-row {
    flex-direction:column
  }
  .panel .head {
    flex-wrap:wrap
  }
  .field label,.field small,.check,.msg,.side,.acct,.panel {
    overflow-wrap:anywhere
  }
  .password-toggle {
    min-width:68px;
    min-height:48px
  }
  .faq summary,details.opt summary {
    min-height:44px;
    padding-block:8px
  }
  .legal-document {
    max-width:100%;
    min-width:0
  }
  .legal-document table {
    min-width:560px
  }
  .legal-document {
    margin-top:36px
  }
  footer {
    margin-top:56px
  }
  footer .foot {
    grid-template-columns:1fr;
    gap:28px
  }
  footer nav {
    gap:16px 24px
  }
}

@media(max-width:360px) {
  .top .brand .name {
    font-size:1rem
  }
  .top .brand img {
    width:28px;
    height:28px
  }
  .top .actions .btn {
    padding-inline:9px
  }
  .panel,.acct,.duo .panel,.start-section {
    padding:18px
  }
  .codes {
    grid-template-columns:1fr
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important
  }
}

/* Mobile navigation drawer and compact account actions. */
.drawer-head,.menu-backdrop,.drawer-open,.drawer-list { display:none }
.drawer-group,.drawer-row { display:contents }
@media(max-width:1160px) {
  .top { backdrop-filter:none }
  .top[data-enhanced] .bar { flex-wrap:nowrap }
  .top .bar .menu-toggle { order:-1 }
  .menu-is-open { overflow:hidden }
  .menu-backdrop:not([hidden]) { display:block; position:fixed; inset:0; z-index:51; background:#0009 }
  .top[data-enhanced] nav[data-open] {
    display:flex; position:fixed; inset:0 auto 0 0; z-index:52;
    width:min(320px,calc(100vw - 48px)); height:100dvh; max-height:none; overflow-y:auto;
    flex-direction:column; flex-wrap:nowrap; align-items:stretch; justify-content:flex-start;
    gap:4px; padding:24px; border:0; border-right:1px solid var(--line);
    background:var(--surface); box-shadow:16px 0 48px #0005;
  }
  .drawer-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:24px; color:var(--gold) }
  .drawer-close { font-size:1.5rem; width:44px; padding:0 }
  .top nav a { padding:14px 12px; border-radius:4px; min-height:48px }
  .drawer-group { display:flex; flex-direction:column }
  .drawer-row { display:flex; align-items:center; gap:4px }
  .drawer-row > a { flex:1; min-width:0 }
  .drawer-open { display:block; flex:none; width:44px; min-height:48px; padding:0; border:0; border-radius:4px; background:transparent; color:var(--ink-mute); cursor:pointer }
  .drawer-open::before { content:""; display:block; width:8px; height:8px; margin:0 auto; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:translateY(-2px) rotate(45deg); transition:transform .18s ease }
  .drawer-open[aria-expanded="true"] { color:var(--gold) }
  .drawer-open[aria-expanded="true"]::before { transform:translateY(2px) rotate(-135deg) }
  .drawer-list { display:flex; flex-direction:column; margin:2px 0 6px 12px; padding-left:12px; border-left:1px solid var(--line) }
  .drawer-list a { min-height:44px; padding:11px 12px; font-size:.9rem; color:var(--ink-mute) }
  .drawer-list a[aria-current] { color:var(--gold); background:var(--surface-2) }
  .drawer-list[hidden] { display:none }
  @media(prefers-reduced-motion:reduce) { .drawer-open::before { transition:none } }
  .top nav a[aria-current] { background:var(--surface-2) }
  .top nav a[aria-current]::after { display:none }
}
@media(max-width:640px) {
  .top .bar { gap:6px; padding-inline:0 }
  .top .actions { gap:4px }
  .top .actions>.btn:not(.gold) { display:inline-flex }
  .top .actions .btn { padding-inline:8px; font-size:.75rem; white-space:nowrap }
  .top .brand { gap:4px }
  .top .brand img { width:24px; height:28px }
  .top .brand .name { font-size:1rem; letter-spacing:.04em }
}
@media(max-width:360px) {
  .top .brand img { display:none }
  .top .brand .name { font-size:.875rem }
}

.hero-rule { display:block; width:48px; height:1px; margin-bottom:0; background:var(--gold); }

/* Section navigation: the same strip under the page head of News, RavoraWiki, Community and Support. */
.portal-nav { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 32px; font-family:var(--ui); }
.portal-nav a { padding:10px 16px; border:1px solid var(--line); border-radius:3px; color:var(--ink-soft); }
.portal-nav a[aria-current],.portal-nav a:hover { border-color:var(--gold-deep); color:var(--gold); background:var(--surface-2); }
/* On the legal pages the strip opens the page and shares the text column. */
main > .portal-nav:first-child { max-width:78ch; margin:56px auto 0; }
.portal-nav + .legal-document { margin-top:32px; }
@media(max-width:640px) {
  .portal-nav { gap:6px; }
  .portal-nav a { padding:10px 12px; font-size:.85rem; }
}

/* Buying Ravora Coins: the packs, then the Pix code of the open order. */
.coins-packs { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; margin:12px 0 18px }
.coins-packs .btn { display:grid; gap:2px; min-height:64px; padding:12px 10px; text-align:center }
.coins-packs .btn strong { font:400 1.1rem var(--display) }
.coins-packs .btn small { font:.75rem var(--ui); opacity:.85 }
.coins-buy { display:grid; gap:12px; padding:16px; border:1px solid var(--line-gold); border-radius:4px; background:var(--surface-2); margin-bottom:18px }
.coins-qr:empty { display:none }
.coins-qr img { display:block; margin:0 auto; width:220px; height:220px; border-radius:4px; background:#fff; padding:8px; image-rendering:pixelated }
.coins-buy .field input { font-family:"DM Mono",Consolas,monospace; font-size:.8rem }

/* Discord: the home box, the drawer row and the page. The mark stays white on blurple, as its brand rules ask. */
.discord-box { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:14px; padding:14px 16px; border:1px solid rgba(88,101,242,.45); border-radius:4px; background:linear-gradient(180deg,rgba(88,101,242,.14),rgba(88,101,242,.05)) }
.discord-badge { display:grid; place-items:center; width:46px; height:46px; flex:none; border-radius:50%; color:#fff; background:#5865F2; box-shadow:0 0 0 5px rgba(88,101,242,.18) }
.discord-badge svg { width:26px; height:26px }
.discord-text { flex:1 1 180px; min-width:0 }
.discord-text h4,.discord-text h2 { margin:0 0 2px; font-size:1.05rem }
.discord-text p { margin:0; color:var(--ink-soft); font-size:.92rem }
.btn.discord-btn { color:#fff; border-color:#5865F2; background:#5865F2 }
.btn.discord-btn:hover { border-color:#7983f5; filter:brightness(1.08) }
.discord-box-wide { padding:20px 22px }
.discord-page .note { margin-top:16px }
.drawer-discord { display:none }
@media (max-width:1160px) {
  .drawer-discord { display:flex; align-items:center; gap:10px; min-height:48px; margin-top:10px; padding:11px 14px; border-radius:4px; color:#fff; background:#5865F2; font-family:"DM Mono",Consolas,monospace; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase }
  .drawer-discord svg { width:20px; height:20px; flex:none }
}