/* Matches the approved type, colours and card geometry in the app's brand.css. */
:root {
  color-scheme: dark;
  --brand-font: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --ad-paper: #000000;
  --ad-ink: #f5f5f5;
  --ad-secondary: #a6a6a6;
  --ad-line: #303030;
  --ad-card: #1c1c1c;
  --ad-card-header: #252525;
  --ad-card-edge: #3a3a3a;
  --ad-card-chip: #343434;
  font-family: var(--brand-font);
  font-size: 16px;
}
* { box-sizing: border-box; }
html { scroll-padding-top: 1.5rem; }
body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  padding-inline: env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
  background: var(--ad-paper);
  color: var(--ad-ink);
  font-family: var(--brand-font);
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
}
p, h1, h2, dl, dd { margin: 0; }
a { color: inherit; text-underline-offset: .25em; }
a { -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 2px solid var(--ad-ink); outline-offset: 3px; border-radius: 2px; }
.wrap { width: min(100% - 2rem, 60rem); margin-inline: auto; }
.home-page > .wrap { width: min(100% - 3rem, 60rem); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 1rem; top: -6rem; padding: 1rem; background: var(--ad-paper); z-index: 2; }
.skip-link:focus { top: 1rem; }
.site-header {
  min-height: calc(88px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.brand { display: inline-flex; align-items: center; text-decoration: none; padding-block: 12px; }
.brand picture, .brand img { display: block; }
.brand img { width: 128px; max-width: 100%; height: auto; }
.avatar picture, .avatar img { display: block; width: 44px; height: 44px; border-radius: inherit; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center; gap: 4rem; padding-block: 3rem 2.5rem; }
.introduction { max-width: 24rem; }
h1 { font-size: 2.75rem; line-height: 1.1; font-weight: 650; letter-spacing: -1.6px; text-wrap: balance; }
.intro { max-width: 26ch; margin-top: 1.25rem; font-size: 1.125rem; line-height: 1.6; }
.intro-detail { max-width: 31ch; margin-top: 1rem; color: var(--ad-secondary); font-size: 1rem; }
/* Restore the original responsive card proportions, retaining native app details. */
.question-card { min-width: 0; width: 100%; max-width: 420px; border: 1px solid var(--ad-card-edge); border-radius: 24px; background: var(--ad-card); overflow: hidden; }
.question-author { display: flex; align-items: center; gap: 11px; min-height: 70px; padding: 12px 18px; border-bottom: 1px solid var(--ad-card-edge); background: var(--ad-card-header); }
.avatar { display: grid; place-items: center; flex: 0 0 44px; height: 44px; border-radius: 9px; background: #191919; font-size: 25px; font-weight: 600; line-height: 1; overflow:hidden; }
.author-name { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.author-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: -.2px; }
.author-name > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ad-secondary); font-size: 13px; line-height: 1.4; }
.card-actions { display: flex; flex: none; gap: 11px; margin-left: auto; color: var(--ad-secondary); }
.card-actions > span { display:grid; place-items:center; width:44px; height:48px; }
.card-actions svg { width: 20px; height: 20px; }
.card-actions > span:first-child svg { width:22px; height:22px; }
.question-body { padding: 13px 18px 18px; }
.question-stage { padding-bottom: 32px; }
.category-row { min-height:44px; display:flex; align-items:center; }
.category { display: block; width: fit-content; max-width: 100%; padding: 5px 10px; border-radius: 10px; background: var(--ad-card-chip); font-size: 13px; font-weight: 500; line-height: 18.2px; }
.question-stage h2, .question-stage h4 { margin: 0; padding-top:20px; font-size: 1.75rem; font-weight: 600; letter-spacing: -.8px; line-height: 1.2; overflow-wrap: anywhere; }
.vote-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.vote-choices > span { display: grid; place-items: center; min-height: 86px; padding: 8px; border: 1.25px solid var(--ad-ink); border-radius: 18px; font-size: 18px; font-weight: 600; line-height: 1.2; }
.availability { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .5rem .75rem; padding-bottom: 3rem; color: var(--ad-secondary); font-size: .8125rem; }
.availability > span:first-child { padding: 5px 9px; border-radius: 7px; background: var(--ad-card-header); color: var(--ad-ink); font-weight: 500; }
.footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 2rem; margin-top: auto; padding-block: 1rem max(1.25rem, env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--ad-line); color: var(--ad-secondary); font-size: .75rem; line-height: 1.6; }
.footer nav { display: flex; flex-wrap: wrap; gap: 0 1.5rem; }
.footer a { display: inline-flex; min-height: 44px; align-items: center; text-decoration: none; }
.footer a[aria-current="page"] { color: var(--ad-ink); }
.legal { max-width: 38rem; padding-block: 1.5rem 4rem; }
.back-link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; margin-bottom: 1rem; color: var(--ad-secondary); font-size: .875rem; text-decoration: none; }
.back-link svg { width: 16px; height: 16px; }
.legal h1 { font-size: 2rem; line-height: 1.2; letter-spacing: -.8px; }
.legal .lead { margin-top: 1rem; color: var(--ad-secondary); }
.legal .updated { margin-top: .75rem; color: var(--ad-secondary); font-size: .8125rem; }
.legal section { margin-top: 2rem; }
.legal h2 { margin-bottom: .5rem; font-size: 1.0625rem; font-weight: 600; letter-spacing: -.2px; line-height: 1.4; }
.legal section p + p { margin-top: 1rem; }
.company-details { margin-top: 1.5rem; }
.company-details > div { padding-block: 1rem; border-bottom: 1px solid var(--ad-line); }
.company-details dt { margin-bottom: .25rem; color: var(--ad-secondary); font-size: .8125rem; }
address { font-style: normal; }
@media (hover: hover) {
  .footer a:hover, .back-link:hover { color: var(--ad-ink); text-decoration: underline; }
}

@media (max-width: 760px) {
  .site-header { min-height: calc(72px + env(safe-area-inset-top, 0px)); }
  .hero { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 2rem; padding-block: 1.5rem 1.75rem; }
  .introduction { width: 100%; max-width: none; text-align: left; }
  h1 { font-size: 2.125rem; letter-spacing: -1.1px; }
  .intro, .intro-detail { margin-inline: 0; }
  .intro { margin-top: 1rem; font-size: 1rem; max-width: 28ch; }
  .intro-detail { max-width: 30ch; font-size: .9375rem; margin-top: .75rem; }
  .availability { padding-bottom: 2rem; }
  .footer { flex-direction: column; justify-content: center; text-align: center; padding-top: 1.25rem; }
  .footer nav { justify-content: center; }
  .legal { padding-top: 1rem; }
}
@media (max-width: 359px) {
  .home-page > .wrap { width: calc(100% - 2rem); }
  .footer nav { gap: 0 1rem; }
}
/* Keep the existing legal/contact page behaviour unchanged. */
@media (min-width: 761px) and (max-width: 900px) {
  body:not(.home-page) .site-header { min-height: calc(72px + env(safe-area-inset-top, 0px)); }
  body:not(.home-page) .footer { flex-direction: column; justify-content: center; text-align: center; padding-top: 1.25rem; }
  body:not(.home-page) .footer nav { justify-content: center; }
  body:not(.home-page) .legal { padding-top: 1rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero { animation: settle-in 380ms ease-out both; }
  @keyframes settle-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
}

.legal-clauses { margin-top: 1.5rem; font-size: 1rem; line-height: 1.65; overflow-wrap: anywhere; }
.legal-clauses p + p { margin-top: 1.25rem; }
.review-note,.contact-intro {margin-top:1rem;font-size:.875rem;color:var(--ad-secondary);}
.contact-section {margin-top:2rem;border-top:1px solid var(--ad-line);padding-top:1rem;}
.contact-section summary {cursor:pointer;text-decoration:underline;text-underline-offset:.25em;width:fit-content;padding-block:.75rem;}
.contact-section form {position:relative;display:grid;gap:1rem;margin-top:1rem;}
.contact-page-form {margin-top:0;border-top:0;padding-top:0;}
.contact-page-form form {margin-top:0;}
.contact-section label {display:grid;gap:.35rem;font-size:1rem;}
.contact-section [hidden] {display:none;}
.contact-section input,.contact-section select,.contact-section textarea {box-sizing:border-box;width:100%;min-width:0;border:1px solid var(--ad-line);background:#191919;color:var(--ad-ink);border-radius:12px;padding:12px;font:inherit;font-size:1rem;}
.contact-section textarea {resize:vertical;min-height:140px;}
.optional,.form-note {color:var(--ad-secondary);font-size:.875rem;line-height:1.6;}
.form-note {margin-top:1rem;}
.contact-section .check-label {display:flex;align-items:flex-start;gap:.65rem;}
.check-label input {width:20px;height:20px;flex-shrink:0;margin-top:4px;}
.form-honeypot {position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}
button {width:fit-content;min-height:44px;border:1px solid var(--ad-card-edge);border-radius:12px;background:var(--ad-ink);color:#101010;padding:10px 18px;font:inherit;font-weight:600;cursor:pointer;}
button:disabled {opacity:.6;cursor:default;}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,summary:focus-visible {outline:2px solid var(--ad-ink);outline-offset:3px;}
[role="status"] {overflow-wrap:anywhere;}
.inbox-message {border-top:1px solid var(--ad-line);padding-top:1.5rem;margin-top:1.5rem;overflow-wrap:anywhere;}
.inbox-message p {margin-top:.75rem;}
.inbox-actions {display:flex;flex-wrap:wrap;gap:12px;margin-top:20px;}
.inbox-delete {background:#242424;color:#f5f5f5;border-color:#666;}
.inbox-guide {margin:24px 0;padding:20px;border:1px solid var(--ad-line);border-radius:16px;}
.inbox-guide summary {cursor:pointer;font-weight:600;}
.inbox-guide li {margin-top:12px;}
#inbox-confirm {box-sizing:border-box;max-width:540px;width:calc(100% - 32px);border:1px solid #666;border-radius:20px;background:#252525;color:#f5f5f5;padding:28px;}
#inbox-confirm::backdrop {background:rgba(0,0,0,.75);}
#inbox-confirm h2 {font-size:1.4rem;margin:0 0 16px;}
#inbox-confirm p {line-height:1.6;overflow-wrap:anywhere;}
.inbox-confirm-check {display:flex;align-items:flex-start;gap:12px;margin-top:24px;line-height:1.5;}
.inbox-confirm-check input {flex:none;width:20px;height:20px;margin-top:2px;accent-color:white;}
#confirm-error {color:#ffb4aa;}
.message-body {white-space:pre-wrap;}
@media print {.site-header,.footer,.contact-section,.back-link{display:none}body{background:white;color:black}.wrap{width:100%}.legal{max-width:none}.legal a,.legal .updated,.review-note{color:black}}

/* Voted state: exact NativeQuestionCard type sizes and palette. */
.card-actions > span:last-child { color: var(--ad-ink); }
.question-card-results .vote-choices > span { display: flex; flex-direction: column; justify-content: center; align-items: center; }
.question-card-results .vote-label { font-size: 13px; font-weight: 500; line-height: normal; }
.question-card-results .vote-percentage { margin-top: 5px; font-size: 28px; line-height: 32px; letter-spacing: -.8px; font-weight: 600; }
.question-card-results .vote-selected { background: #e9e9e9; color: #101010; }