:root {
  --brand-green: #21e576;
  --brand-black: #080808;
}

header {
  background: var(--brand-black);
  border-bottom-color: #303030;
}

header b {
  color: var(--brand-green);
}

/* The custom label is the visible file picker; keep the native input accessible without showing it twice. */
#files {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.file-label:has(+ #files:focus-visible) {
  outline: 3px solid #f73d99;
  outline-offset: 5px;
}

footer {
  background: var(--brand-black);
}

.support {
  margin: 0 auto 28px;
  max-width: 430px;
  padding: 28px;
  border: 1px solid #353535;
  border-radius: 18px;
  background: #111;
}

.support p {
  margin: 0 0 18px;
  color: #fff;
  font-size: 18px;
  font-weight: 800;
}

.support-link {
  display: inline-block;
  padding: 14px 18px;
  border: 2px solid var(--brand-green);
  border-radius: 999px;
  background: var(--brand-green);
  color: #080808;
  font-size: 15px;
  font-weight: 900;
  text-decoration: none;
}

.support-link[aria-disabled="true"] {
  cursor: not-allowed;
  filter: grayscale(.65);
  opacity: .55;
}

.support small {
  display: block;
  margin-top: 12px;
  color: #aaa;
  line-height: 1.45;
}

.guide-link { display:block; margin:18px 0 24px; color:inherit; font-weight:700; }
.data-guide { grid-column:1/-1; padding-top:32px; border-top:1px solid #ffffff66; scroll-margin-top:24px; }
.data-guide>p { max-width:760px; line-height:1.6; }
.guide-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px; padding:0; list-style:none; counter-reset:steps; }
.guide-steps>li { counter-increment:steps; background:var(--cream); color:var(--ink); padding:26px; border:2px solid var(--ink); }
.guide-steps>li::before { content:'0' counter(steps); font:bold 24px monospace; color:var(--blue); }
.guide-steps h3 { font-size:23px; margin:14px 0; letter-spacing:-.03em; }
.guide-steps p,.data-guide li { line-height:1.6; }
.data-guide code { overflow-wrap:anywhere; }
.data-guide a { color:inherit; text-underline-offset:4px; }
.guide-button { display:inline-block; padding:12px 16px; background:var(--lime); border:2px solid var(--ink); font-weight:800; }
.data-guide details { max-width:900px; }
.data-guide details li { margin:12px 0; }
@media(max-width:760px){.guide-steps{grid-template-columns:1fr}.guide-steps>li{padding:22px}}

.independence{font-size:15px!important;line-height:1.5!important}.legal-links{display:flex;gap:22px;align-items:center;justify-content:center;flex-wrap:wrap;margin-top:22px}.legal-links a{color:inherit}.policy-page{max-width:850px;margin:auto;padding:48px 24px;line-height:1.7}.policy-page h1{font-size:clamp(38px,7vw,64px)}.policy-page h2{font-size:26px;margin-top:36px}.policy-page a{color:#d7ff20}.draft-notice{border:1px solid #ffb4d2;padding:16px;color:#ffb4d2}

.policy-page section{scroll-margin-top:24px}.policy-page p,.policy-page li{overflow-wrap:anywhere}.policy-toc{background:#ffffff0a;border:1px solid #ffffff44;padding:20px 24px;margin:28px 0}.policy-toc li{margin:6px 0}.policy-table{overflow-x:auto;margin:24px 0}.policy-table table{border-collapse:collapse;width:100%;min-width:540px}.policy-table th,.policy-table td{text-align:left;vertical-align:top;border:1px solid #ffffff44;padding:12px;font-size:15px}.policy-table th{background:#ffffff12}.policy-cards{display:grid;gap:14px}.policy-cards a{display:block;padding:20px;border:1px solid #ffffff44;text-decoration:none}.policy-cards a:hover{background:#ffffff10}.policy-cards strong,.policy-cards span{display:block}.policy-cards span{color:#eee;margin-top:6px;font-size:16px}.policy-page .legal-links{justify-content:flex-start;font-size:14px}.support .hint a{color:#d7ff20}

/* Mobile usability fixes from the 24 Sep 2026 device test (iPhone SE/15, Pixel 7, Galaxy S9+). */
/* 1-2, 6. Keep the next step on screen: sticky action bars on scope, recap and share views. */
.sticky-actions{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:24px -30px 0;padding:12px 30px calc(12px + env(safe-area-inset-bottom));background:var(--purple);border-top:1px solid #ffffff26}
.sticky-actions .primary,.sticky-actions .secondary{margin:0}
.recap-bottom{position:sticky;bottom:0;z-index:5;background:var(--purple);border-top:1px solid #ffffff26;padding:12px 5vw calc(12px + env(safe-area-inset-bottom))}
.chapter{min-height:0}
/* 4. Tap targets of at least 44px. */
header a#home{display:inline-flex;align-items:center;min-height:44px}
header span{font-size:12px}
.legal-links{gap:4px 18px}
.legal-links a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
.policy-toc ol{padding-left:22px}
.policy-toc li{margin:0}
.policy-toc li a{display:inline-flex;align-items:center;min-height:44px}
.support .hint a,.data-guide>p.hint>a{display:inline-flex;align-items:center;min-height:44px}
.guide-link{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:2px solid var(--ink);text-decoration:none;margin:12px 0 20px}
.check{min-height:44px}
.check input{width:24px;height:24px}
/* 5. No text below 12px. */
footer{font-size:13px}
.support small{font-size:13px}
.mini-label{font-size:12px}
@media(max-width:760px){
  /* 3. Shorter landing page so the upload panel appears sooner. */
  .landing{padding:28px 20px 48px;gap:28px}
  .intro h1{font-size:clamp(48px,14vw,72px);margin:14px 0}
  .intro>p:not(.eyebrow){font-size:17px}
  .mini-label{font-size:12px;margin-top:20px}
  .upload-panel{padding:22px}
  .upload-panel h2{margin:16px 0}
  .sticky-actions{margin:20px -24px 0;padding-left:24px;padding-right:24px}
  .sticky-actions .primary,.sticky-actions .secondary{flex:1 1 auto;text-align:center}
  .recap-bottom{padding-left:16px;padding-right:16px}
  .chapter{padding:32px 20px}
}

/* 3b. On phones, put both first actions right under the headline. */
.hero-ctas{display:none}
@media(max-width:760px){
  .hero-ctas{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin:22px 0 6px}
  .hero-guide{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border:2px solid #fff;color:#fff;font-weight:800;text-decoration:none}
}