/* Betterway survey stylesheet (scoped to .bw-survey) */

.bw-survey {position:relative;min-height:100vh;display:flex;flex-direction:column}


:root{
  --paper:#F5F1E8;
  --paper-soft:#EFEADC;
  --ink:#161915;
  --ink-soft:#2A2D28;
  --muted:#6E6B60;
  --muted-soft:#8E8A7E;
  --line:#DDD5C4;
  --line-soft:#E8E1D0;
  --green:#2F4A34;
  --green-hover:#1E3524;
  --green-tint:#DDE4DC;
  --amber:#B37A2B;
  --focus:#B37A2B;
  --maxw:660px;
  --display:'Fraunces',Georgia,serif;
  --body:'Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
/* scroll-behavior handled by theme */
.bw-survey {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* subtle paper texture — very quiet */
.bw-survey::before {
  content:"";
  position:absolute;inset:0;
  background-image:radial-gradient(circle at 20% 30%,rgba(179,122,43,.025) 0,transparent 40%),radial-gradient(circle at 80% 70%,rgba(47,74,52,.02) 0,transparent 40%);
  pointer-events:none;z-index:0;
}

a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}

/* ── header ─────────────────────────────────────────────── */
.bw-brand-row {
  position:relative;z-index:2;
  padding:26px 24px 0;
  display:flex;justify-content:space-between;align-items:center;
  max-width:var(--maxw);margin:0 auto;width:100%;
}
.bw-survey .brand {
  font-family:var(--display);
  font-weight:500;
  font-size:1.05rem;
  letter-spacing:-.01em;
  text-decoration:none;
  color:var(--ink);
  display:inline-flex;align-items:baseline;gap:6px;
}
.bw-brand-row .brand em {font-style:italic;font-weight:400;color:var(--muted);font-size:.82rem;letter-spacing:0}
/* Brand mark beside the wordmark (the survey had no visual identity at all) */
.bw-brand-row .brand {display:inline-flex;align-items:center;gap:9px}
.bw-brand-row .brand-mark {width:26px;height:26px;border-radius:6px;flex:none;display:block}
@media (max-width:520px){ .bw-brand-row .brand-mark{width:22px;height:22px} }
.bw-survey .meta-step {
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.06em;
  color:var(--muted);
  opacity:0;
  transition:opacity .3s ease;
}
.bw-survey .meta-step.visible {opacity:1}

/* progress: a pencil-line across the top of the page */
.bw-survey .progress-track {
  position:relative;z-index:2;
  max-width:var(--maxw);margin:22px auto 0;width:100%;
  padding:0 24px;
  height:2px;
  opacity:0;
  transition:opacity .3s ease;
}
.bw-survey .progress-track.visible {opacity:1}
.bw-survey .progress-track::before {
  content:"";position:absolute;left:24px;right:24px;top:0;height:2px;
  background:var(--line);
}
.bw-survey .progress-fill {
  position:absolute;left:24px;top:0;height:2px;width:0;
  background:var(--green);
  transition:width .5s cubic-bezier(.4,0,.2,1);
}

/* ── stage ──────────────────────────────────────────────── */
.bw-stage {
  position:relative;z-index:1;
  flex:1;
  display:flex;flex-direction:column;
  padding:80px 24px 40px;
  max-width:var(--maxw);
  margin:0 auto;
  width:100%;
}
.bw-survey .screen {display:none;animation:reveal .5s cubic-bezier(.2,.6,.2,1) both}
.bw-survey .screen.active {display:block}

@keyframes reveal{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  .bw-survey .screen {animation:none}
  .bw-survey .progress-fill {transition:none}
}

/* ── typography scale ──────────────────────────────────── */
.bw-survey .eyebrow {
  font-family:var(--mono);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:22px;
}

h1.headline,h2.question{
  font-family:var(--display);
  font-weight:500;
  color:var(--ink);
  letter-spacing:-.015em;
  margin:0 0 20px;
  font-variation-settings:"opsz" 96;
}
h1.headline{
  font-size:clamp(2rem,4.2vw,2.9rem);
  line-height:1.08;
  max-width:22ch;
}
h2.question{
  font-size:clamp(1.5rem,3vw,2rem);
  line-height:1.18;
  max-width:26ch;
}
h1.headline .underline,h2.question .underline{
  position:relative;
  white-space:nowrap;
}
h1.headline .underline::after,h2.question .underline::after{
  content:"";
  position:absolute;
  left:-2px;right:-4px;bottom:-.02em;
  height:.32em;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 12' preserveAspectRatio='none'><path d='M2 8 C 40 3, 80 10, 120 5 C 160 2, 190 8, 198 6' stroke='%23B37A2B' stroke-width='2.2' fill='none' stroke-linecap='round' opacity='.75'/></svg>") no-repeat;
  background-size:100% 100%;
  z-index:-1;
}

p.sub{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:1.15rem;
  line-height:1.5;
  color:var(--muted);
  margin:0 0 26px;
  max-width:38ch;
  font-variation-settings:"opsz" 24;
}
p..bw-survey{
  font-size:1rem;
  line-height:1.65;
  color:var(--ink-soft);
  margin:0 0 22px;
  max-width:42ch;
}
p.meta{
  font-family:var(--mono);
  font-size:.78rem;
  color:var(--muted);
  margin:0 0 40px;
  max-width:52ch;
  line-height:1.6;
}
p.microcopy{
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:.98rem;
  color:var(--muted);
  margin:14px 0 0;
  max-width:44ch;
  line-height:1.5;
}

/* ── form primitives ───────────────────────────────────── */
fieldset{border:0;padding:0;margin:0 0 12px}
legend{padding:0;margin:0}

.bw-survey .opts {
  list-style:none;
  padding:0;margin:6px 0 0;
  display:flex;flex-direction:column;
  gap:2px;
}
.bw-survey .opts li {margin:0}

.bw-survey .opt {
  display:flex;align-items:flex-start;gap:14px;
  padding:14px 4px 14px 4px;
  border-radius:6px;
  cursor:pointer;
  border-bottom:1px solid var(--line-soft);
  transition:background .12s ease;
}
.bw-survey .opt:hover {background:rgba(47,74,52,.04)}
.bw-survey .opt input {position:absolute;opacity:0;pointer-events:none}
.bw-survey .opt .mark-radio, .bw-survey .opt .mark-check {
  flex:0 0 auto;
  width:22px;height:22px;
  margin-top:2px;
  border:1.5px solid var(--muted-soft);
  border-radius:50%;
  display:grid;place-items:center;
  transition:border-color .15s ease,background .15s ease;
}
.bw-survey .opt .mark-check {border-radius:4px}
.bw-survey .opt .mark-radio::after {
  content:"";width:10px;height:10px;border-radius:50%;
  background:var(--green);
  transform:scale(0);
  transition:transform .18s cubic-bezier(.3,.7,.2,1.4);
}
.bw-survey .opt .mark-check::after {
  content:"";width:14px;height:14px;
  background:no-repeat center/contain url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F4A34' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12 l6 6 l14-14'/></svg>");
  transform:scale(0) rotate(-8deg);
  transition:transform .2s cubic-bezier(.3,.7,.2,1.4);
}
.bw-survey .opt input:checked ~ .mark-radio,
.bw-survey .opt input:checked ~ .mark-check {border-color:var(--green)}
.bw-survey .opt input:checked ~ .mark-radio::after {transform:scale(1)}
.bw-survey .opt input:checked ~ .mark-check::after {transform:scale(1) rotate(0)}
.bw-survey .opt input:focus-visible ~ .mark-radio,
.bw-survey .opt input:focus-visible ~ .mark-check {
  outline:2px solid var(--focus);
  outline-offset:3px;
}
.bw-survey .opt .label {
  flex:1;font-size:1.02rem;line-height:1.5;padding-top:2px;color:var(--ink-soft);
}
.bw-survey .opt .label .example {
  display:block;
  font-family:var(--display);font-style:italic;font-weight:400;
  color:var(--muted);font-size:.9rem;margin-top:2px;
}

/* text inputs are underlines, not boxes */
.bw-survey .input-line {
  width:100%;
  border:0;
  border-bottom:1.5px solid var(--line);
  background:transparent;
  padding:10px 2px 10px;
  font-size:1rem;
  line-height:1.5;
  color:var(--ink);
  transition:border-color .15s ease;
  resize:none;
  font-family:var(--body);
}
.bw-survey .input-line:focus {outline:0;border-bottom-color:var(--green)}
.bw-survey .input-line::placeholder {color:var(--muted-soft);font-style:italic;font-family:var(--display);font-weight:400}
textarea.input-line{min-height:64px;line-height:1.6}

.bw-survey .roman-field {
  display:flex;gap:16px;align-items:flex-start;
  padding:6px 0 0;
  margin:0 0 26px;
}
.bw-survey .roman-field .roman {
  flex:0 0 auto;
  font-family:var(--display);
  font-weight:500;font-style:italic;
  font-size:1.35rem;
  color:var(--green);
  min-width:34px;
  padding-top:8px;
  letter-spacing:0;
}
.bw-survey .roman-field textarea {margin:0}

.bw-survey .other-slot {
  overflow:hidden;
  max-height:0;
  transition:max-height .3s ease;
}
.bw-survey .other-slot.open {max-height:120px}
.bw-survey .other-slot .input-line {margin-top:8px}

/* ── controls ──────────────────────────────────────────── */
.bw-survey .controls {
  margin-top:44px;
  display:flex;justify-content:space-between;align-items:center;
  gap:20px;
}
.bw-survey .btn {
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;
  font-family:var(--body);
  font-weight:600;
  font-size:.96rem;
  letter-spacing:-.005em;
  border-radius:2px;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:background .15s ease,transform .1s ease,border-color .15s ease;
  text-decoration:none;
}
.bw-survey .btn:focus-visible {outline:2px solid var(--focus);outline-offset:3px}
.bw-survey .btn-primary {background:var(--green);color:var(--paper)}
.bw-survey .btn-primary:hover {background:var(--green-hover)}
.bw-survey .btn-primary:active {transform:translateY(1px)}
.bw-survey .btn-quiet {color:var(--muted);padding:14px 8px}
.bw-survey .btn-quiet:hover {color:var(--ink)}
.bw-survey .btn-quiet svg {width:14px;height:14px}
.bw-survey .btn .arrow {
  transition:transform .15s ease;
}
.bw-survey .btn-primary:hover .arrow {transform:translateX(2px)}

/* single-column tighter list for cost/stopped */
.bw-survey .check-grid {
  display:grid;grid-template-columns:1fr 1fr;gap:0 24px;
  margin-top:6px;
}
.bw-survey .check-grid .opt {border-bottom:0;padding:12px 4px}
@media(max-width:520px){
  .bw-survey .check-grid {grid-template-columns:1fr}
  .bw-survey .check-grid .opt {border-bottom:1px solid var(--line-soft)}
}

/* the "why we ask" callout below Q1 */
.bw-survey .why-ask {
  font-family:var(--display);
  font-style:italic;
  font-weight:400;
  font-size:.96rem;
  color:var(--muted);
  margin:22px 0 0;
  padding:14px 18px 14px 22px;
  border-left:2px solid var(--amber);
  max-width:44ch;
  background:rgba(179,122,43,.05);
}

/* thank-you PS box */
.bw-survey .ps {
  margin-top:36px;
  padding:22px 26px;
  border-top:1px solid var(--line);
  font-family:var(--display);
  font-style:italic;
  color:var(--muted);
  font-size:.98rem;
  line-height:1.6;
}
.bw-survey .ps b {font-style:normal;font-family:var(--body);font-weight:600;color:var(--ink)}

/* the reset link at very bottom of thank you */
.bw-survey .reset-link {
  display:inline-block;margin-top:22px;
  font-family:var(--mono);font-size:.75rem;
  color:var(--muted);text-decoration:underline;
  text-underline-offset:3px;
}

/* footer */
.bw-foot-tiny {
  position:relative;z-index:1;
  text-align:center;
  padding:20px 24px 30px;
  font-family:var(--mono);
  font-size:.7rem;
  letter-spacing:.06em;
  color:var(--muted-soft);
}

/* small "save" indicator */
.bw-survey .save-hint {
  position:fixed;bottom:16px;right:16px;
  font-family:var(--mono);font-size:.68rem;
  color:var(--muted);
  background:var(--paper-soft);
  border:1px solid var(--line);
  padding:6px 10px;border-radius:2px;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
  z-index:5;
}
.bw-survey .save-hint.show {opacity:1}

/* subtle divider ornament used once on intro */
.bw-survey .ornament {
  display:block;width:36px;height:1px;background:var(--ink);
  margin:0 0 30px;opacity:.5;
}

/* small type for identification block */
.bw-survey .id-row {
  display:grid;grid-template-columns:1fr;gap:24px;
  margin-top:14px;
}
.bw-survey .id-row label {
  display:block;
  font-family:var(--body);font-weight:500;font-size:.82rem;
  color:var(--muted);letter-spacing:.02em;
  margin-bottom:4px;
}

/* privacy note at the end */
.bw-survey .privacy {
  font-family:var(--body);font-size:.85rem;color:var(--muted);
  margin-top:28px;line-height:1.55;max-width:44ch;
}

/* progressive-detail expander on Q2 */
.bw-survey .roman-field .field-body {flex:1;min-width:0}
.bw-survey .roman-field input.input-line {margin:0}
.bw-survey .detail-toggle {
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:.92rem;color:var(--muted);
  background:none;border:0;cursor:pointer;padding:8px 0 4px;
  margin-top:2px;
  transition:color .15s ease;
}
.bw-survey .detail-toggle:hover {color:var(--green)}
.bw-survey .detail-toggle .toggle-glyph {
  display:inline-grid;place-items:center;
  width:16px;height:16px;
  color:var(--amber);font-style:normal;font-weight:600;
  font-family:var(--body);font-size:.95rem;line-height:1;
  border:1.5px solid var(--amber);border-radius:50%;
}
.bw-survey .detail-toggle[data-open="true"] .toggle-glyph {color:var(--muted);border-color:var(--muted)}
.bw-survey .detail-slot {
  max-height:0;overflow:hidden;
  transition:max-height .35s ease;
}
.bw-survey .detail-slot.open {max-height:240px}
.bw-survey .detail-slot textarea.input-line {
  margin-top:8px;
  background:rgba(179,122,43,.04);
  padding:12px 14px;
  border:0;border-left:2px solid var(--amber);
  border-radius:0 3px 3px 0;
  min-height:80px;
  line-height:1.55;
}
.bw-survey .detail-slot textarea.input-line:focus {
  background:rgba(179,122,43,.07);
  border-left-color:var(--green);
}

/* labeled reveal for Q1 "something else" */
.bw-survey .other-slot .other-label {
  display:block;
  font-family:var(--display);font-style:italic;font-weight:400;
  font-size:.92rem;color:var(--muted);
  margin:12px 0 -4px;
}

/* select dropdown styled as an underlined field */
select.input-line{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236E6B60' stroke-width='1.5' stroke-linecap='round'><path d='M1 1l5 5 5-5'/></svg>");
  background-repeat:no-repeat;
  background-position:right 6px center;
  background-size:12px;
  padding-right:26px;
  cursor:pointer;
  color:var(--ink);
}
select.input-line:invalid,select.input-line option[value=""]{color:var(--muted-soft)}
select.input-line option{color:var(--ink);background:var(--paper)}

/* contact split — consent checkbox under each field */
.bw-survey .contact-field {margin-top:4px}
.bw-survey .consent-check {
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--body);font-size:.82rem;color:var(--muted);
  margin-top:8px;cursor:pointer;user-select:none;
}
.bw-survey .consent-check input[type=checkbox] {
  appearance:none;-webkit-appearance:none;
  width:16px;height:16px;margin:0;
  border:1.5px solid var(--muted-soft);border-radius:3px;
  background:var(--paper);
  position:relative;cursor:pointer;
  transition:background .15s ease,border-color .15s ease;
}
.bw-survey .consent-check input[type=checkbox]:checked {
  background:var(--green);border-color:var(--green);
}
.bw-survey .consent-check input[type=checkbox]:checked::after {
  content:"";position:absolute;left:4px;top:1px;
  width:5px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
.bw-survey .consent-check input[type=checkbox]:focus-visible {
  outline:2px solid var(--focus);outline-offset:2px;
}



.bw-survey .sr-only {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}