/* Look and feel taken from www.recheck.au (colour tokens copied from its stylesheet). */
:root {
  --recheck-black: #1e0404;
  --recheck-red: #c23c3c;
  --recheck-red-light: #e62e2e;
  --recheck-red-contrast-text: #fcf5e8;
  --recheck-offwhite: #fefdf8;
  --recheck-inactive: #d9d9d9;
  --recheck-pastel-gold: #fd9;
  --recheck-reuse-bg: #2aac94;
  --recheck-repair-bg: #e5c592;
  --recheck-rent-bg: #fe9611;
  --recheck-repurpose-bg: #f45f57;
  --recheck-recycle-bg: #16b7de;
  --grey: #616161;
  --line: #e0e0e0;
  --card-shadow: 0 2px 12px rgba(30, 4, 4, .08);
  --radius: 16px;
  font-family: "Montserrat", system-ui, sans-serif;
  color: var(--recheck-black);
}
* { box-sizing: border-box; }
body { margin: 0; background: #fff; font-size: 16px; line-height: 1.5; }
a { color: var(--recheck-red); }
h1, h2, legend { font-weight: 800; letter-spacing: -.01em; }

/* Header + rainbow stripes */
.site-header { position: sticky; top: 0; z-index: 10; background: #fff; }
.site-header__inner { padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand img { display: block; height: 42px; width: auto; }
.site-nav { display: flex; gap: 24px; flex-wrap: wrap; }
.site-nav a { color: var(--recheck-black); text-decoration: none; font-weight: 500; }
.site-nav a:hover { color: var(--recheck-red); }
/* Same artwork and placement as recheck.au: the header stripes start 124px in
   with an angled end and run off the right edge; the footer stripes mirror that. */
.stripes { height: 20px; margin-left: 124px; background: url("stripes.svg") no-repeat left top / 4048px 20px; }
.stripes--footer { margin: 0 124px 0 0; background-position: right top; }

/* Page */
.page { max-width: 880px; margin: 0 auto; padding: 48px 24px 64px; }
.intro { margin-bottom: 32px; }
.intro h1 { font-size: clamp(34px, 6vw, 52px); line-height: 1.1; margin: 0 0 16px; }
.lede { font-size: 17px; max-width: 680px; margin: 0 0 14px; }
.lede:last-child { margin-bottom: 0; }

.card { background: #fff; border-radius: var(--radius); box-shadow: var(--card-shadow); border: 1px solid #f0ece4; padding: 28px 32px; margin-bottom: 24px; }
.card h2 { font-size: 24px; margin: 0 0 20px; }
.card--start { border-top: 4px solid var(--recheck-red); }
.section-hint { margin-top: -12px; margin-bottom: 16px; }

/* Fields */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 24px; }
.field { margin-bottom: 20px; position: relative; }
label, .label { display: block; font-weight: 600; font-size: 15px; margin: 0 0 6px; }
.req { color: var(--recheck-red); }
input, textarea, select {
  width: 100%; font: inherit; font-size: 15px; color: var(--recheck-black);
  border: 1px solid #bdbdbd; border-radius: 10px; padding: 10px 14px; background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
textarea { resize: vertical; min-height: 44px; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--recheck-red); box-shadow: 0 0 0 3px rgba(194, 60, 60, .15); }
.hint { color: var(--grey); font-size: 13px; margin: 6px 0 0; }
.hint.quota { color: var(--recheck-black); font-weight: 600; }
.counter { font-weight: 600; }
.counter.over { color: var(--recheck-red); }
.input-row { display: flex; gap: 12px; }
.input-row input { flex: 1; }
.prefixed { display: flex; align-items: stretch; border: 1px solid #bdbdbd; border-radius: 10px; overflow: hidden; }
.prefixed span { background: #f5f5f5; color: var(--grey); padding: 10px 4px 10px 12px; font-size: 14px; display: flex; align-items: center; white-space: nowrap; }
.prefixed input { border: 0; border-radius: 0; padding-left: 2px; }
.prefixed:focus-within { border-color: var(--recheck-red); box-shadow: 0 0 0 3px rgba(194, 60, 60, .15); }
.prefixed input:focus { box-shadow: none; }

/* Fields the draft left blank */
.field.is-blank > input, .field.is-blank > textarea, .field.is-blank > select, .field.is-blank .prefixed { background: #fffdf6; border-style: dashed; }
.blank-note { font-size: 13px; color: var(--grey); margin: 6px 0 0; font-style: italic; }

/* Checks from the draft */
.check-note { display: flex; gap: 10px; align-items: flex-start; background: #fff7e0; border: 1px solid var(--recheck-pastel-gold); border-left: 4px solid var(--recheck-rent-bg); border-radius: 8px; padding: 8px 12px; margin-top: 8px; font-size: 14px; }
.check-note p { margin: 0; flex: 1; }
.check-note.done { opacity: .5; }
.check-note.done p { text-decoration: line-through; }
.check-chip { display: inline-block; background: #fff7e0; border: 1px solid var(--recheck-pastel-gold); border-radius: 999px; padding: 0 8px; font-size: 13px; font-weight: 600; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: inherit; font-weight: 700; font-size: 15px; border-radius: 999px; padding: 11px 24px; cursor: pointer; text-decoration: none; border: 2px solid var(--recheck-red); white-space: nowrap; }
.btn--primary { background: var(--recheck-red); color: var(--recheck-red-contrast-text); }
.btn--primary:hover { background: var(--recheck-red-light); border-color: var(--recheck-red-light); }
.btn--outline { background: #fff; color: var(--recheck-red); }
.btn--lg { padding: 14px 32px; font-size: 16px; }
.btn:disabled { opacity: .55; cursor: progress; }
.link { all: unset; color: var(--recheck-red); text-decoration: underline; cursor: pointer; font-size: 14px; }

/* AI or DIY choice */
.mode { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; }
.mode__option { position: relative; margin: 0; cursor: pointer; }
.mode__option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mode__card { display: block; height: 100%; border: 2px solid #bdbdbd; border-radius: 14px; padding: 14px 18px; background: #fff; transition: border-color .15s, background .15s; }
.mode__title { display: block; font-weight: 800; font-size: 18px; margin-bottom: 4px; }
.mode__text { display: block; font-weight: 400; font-size: 14px; color: var(--grey); }
.mode__option input:checked + .mode__card { border-color: var(--recheck-red); background: #fdf5f3; box-shadow: inset 0 0 0 1px var(--recheck-red); }
.mode__option input:focus-visible + .mode__card { box-shadow: 0 0 0 3px rgba(194, 60, 60, .3); }
.mode__option input:disabled + .mode__card { opacity: .55; cursor: not-allowed; }
.diy-note { font-size: 15px; margin: 0; }
.send-note { background: var(--recheck-offwhite); border-left: 4px solid var(--recheck-reuse-bg); }
.send-note p { margin: 0 0 8px; font-size: 16px; }
.send-note p:last-child { margin-bottom: 0; }

/* Chips */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.chip span { display: inline-block; border: 1px solid #bdbdbd; border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 500; background: #fff; transition: all .15s; }
.chip input:checked + span { background: var(--recheck-black); color: #fff; border-color: var(--recheck-black); }
.chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(194, 60, 60, .3); }
.chips--small .chip span { font-size: 13px; padding: 4px 12px; }
.chips--re .chip span { border-left: 6px solid var(--re); font-weight: 600; }
.chips--re .chip input:checked + span { background: var(--re); border-color: var(--re); color: var(--recheck-black); }

/* RE tabs, like the tabs on a taker's REcheck profile */
.re-tabs { display: flex; flex-wrap: wrap; border-bottom: 2px solid var(--recheck-black); margin: 8px 0 24px; }
.re-tab { all: unset; cursor: pointer; flex: 1; min-width: 110px; text-align: center; padding: 12px 8px; font-weight: 700; text-transform: uppercase; font-size: 15px; letter-spacing: .02em; border-bottom: 6px solid transparent; margin-bottom: -2px; }
.re-tab[aria-selected="true"] { border-bottom-color: var(--re); }
.re-tab:focus-visible { outline: 2px solid var(--recheck-red); }
.re-tab .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--re); margin-right: 6px; }
.re-tab .badge { display: inline-block; background: var(--recheck-rent-bg); color: #fff; border-radius: 999px; font-size: 11px; padding: 0 6px; margin-left: 6px; vertical-align: 2px; }
.re-panel { border-left: 4px solid var(--re); padding-left: 20px; }
.same-as { border: 1px dashed #bdbdbd; border-radius: 12px; padding: 12px 16px 14px; margin: 0 0 20px; }
.same-as legend { font-weight: 700; font-size: 15px; padding: 0 6px; }
.same-as .hint { margin: 0 0 10px; }
.same-note { background: var(--recheck-offwhite); border: 1px solid #f0ece4; border-radius: 10px; padding: 12px 16px; font-size: 15px; margin: 0 0 8px; }
.re-tab .same-tag { font-size: 11px; font-weight: 600; text-transform: none; color: var(--grey); margin-left: 6px; }
.yesno { display: flex; gap: 8px; margin-bottom: 8px; }

/* Methods */
.sub { border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px 4px; margin: 20px 0 0; }
.sub legend { font-size: 18px; padding: 0 6px; }
.sub__off { display: none; margin: 0 0 12px; }
.sub.is-off { opacity: .6; }
.sub.is-off .sub__off { display: block; }
.hours { display: grid; gap: 8px; }
.hours label { display: grid; grid-template-columns: 56px 1fr; align-items: center; gap: 12px; font-weight: 600; margin: 0; }

/* Logo */
.logo-inputs { flex: 1; min-width: 0; }
.file-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.btn--file { position: relative; padding: 8px 18px; font-size: 14px; }
.btn--file input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.btn--file:focus-within { box-shadow: 0 0 0 3px rgba(194, 60, 60, .3); }
.file-name { font-size: 14px; font-weight: 600; word-break: break-all; }
.sublabel { font-weight: 500; font-size: 14px; color: var(--grey); }
.logo-row { display: flex; gap: 16px; align-items: center; }
.logo-row input { flex: 1; }
.logo-preview { width: 250px; height: 80px; flex: none; border: 1px dashed #bdbdbd; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: #fafafa; overflow: hidden; }
.logo-preview img { max-width: 250px; max-height: 80px; }
.logo-preview span { color: var(--grey); font-size: 13px; }

/* Progress */
.progress { background: var(--recheck-offwhite); border: 1px solid #f0ece4; border-radius: 12px; padding: 16px 20px; margin-top: 8px; }
.progress__head { display: flex; align-items: center; gap: 10px; }
.progress__log { margin: 12px 0 0; padding-left: 20px; font-size: 14px; color: var(--grey); max-height: 220px; overflow-y: auto; word-break: break-word; }
.progress__log li:last-child { color: var(--recheck-black); font-weight: 500; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--recheck-inactive); border-top-color: var(--recheck-red); animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress.is-done .spinner { animation: none; border-color: var(--recheck-reuse-bg); }

.banner { border-radius: 12px; padding: 14px 18px; margin-top: 16px; font-size: 15px; }
.banner--ok { background: #eaf7f3; border: 1px solid var(--recheck-reuse-bg); }
.banner--info { background: #f3fbf9; border: 1px solid var(--recheck-reuse-bg); margin: 4px 0 8px; }
.banner--error { background: #fdecec; border: 1px solid var(--recheck-red); color: #7a1c1c; }

.check { display: flex; gap: 10px; align-items: flex-start; font-weight: 500; font-size: 15px; margin-top: 8px; }
.check input { width: 18px; height: 18px; margin-top: 3px; flex: none; accent-color: var(--recheck-red); }

.notes summary { cursor: pointer; font-weight: 700; }
.notes ul { font-size: 14px; word-break: break-all; }
.submit-row { display: flex; align-items: center; gap: 16px; margin-top: 8px; }
.thanks { text-align: center; border-top: 4px solid var(--recheck-reuse-bg); }

/* Footer */
.site-footer { border-top: 2px solid var(--recheck-red); margin-top: 48px; padding: 32px 0 40px; }
.site-footer .stripes { margin-bottom: 24px; }
.site-footer__inner { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
.site-footer__inner img { display: block; height: 64px; width: auto; margin-bottom: 20px; }
.ack { font-size: 13px; text-align: center; max-width: 760px; margin: 0 auto; }

@media (max-width: 640px) {
  .site-nav { display: none; }
  .stripes { margin-left: 90px; }
  .stripes--footer { margin: 0 90px 0 0; }
  .page { padding: 32px 16px 48px; }
  .card { padding: 22px 18px; }
  .input-row, .logo-row { flex-direction: column; align-items: stretch; }
  .mode { grid-template-columns: 1fr; }
  .logo-preview { width: 100%; }
  .re-tab { min-width: 33%; font-size: 13px; }
  .submit-row { flex-direction: column; align-items: stretch; }
}