/* ─────────────────────────────────────────────────────────────
   WooSee Vending — customer-facing UI
   Shared design system for picker + refund/suggest/help forms
   ───────────────────────────────────────────────────────────── */

:root{
  --cream:#F4ECDD;
  --cream-deep:#EADFC8;
  --paper:#FBF6EB;
  --paper-2:#FFFFFF;
  --ink:#1A2A2F;
  --ink-soft:#3A4F56;
  --muted:#7A8B8F;
  --muted-2:#9BA9AD;
  --teal:#0F4C5C;
  --teal-deep:#0A3641;
  --teal-soft:#DDEDF0;
  --coral:#E6573A;
  --coral-deep:#C8462C;
  --coral-soft:#FCE4DC;
  --sun:#FFD66B;
  --sun-deep:#F2C24A;
  --sun-soft:#FFF1C9;
  --line:rgba(26,42,47,0.12);
  --line-strong:rgba(26,42,47,0.22);
  --shadow-1:0 1px 0 rgba(255,255,255,0.6) inset, 0 -2px 0 rgba(26,42,47,0.05) inset, 0 8px 22px -8px rgba(26,42,47,0.18);
  --shadow-2:0 1px 0 rgba(255,255,255,0.5) inset, 0 -3px 0 rgba(0,0,0,0.12) inset, 0 14px 30px -10px rgba(26,42,47,0.30);
  --shadow-3:0 1px 0 rgba(255,255,255,0.35) inset, 0 -3px 0 rgba(0,0,0,0.15) inset, 0 18px 36px -12px rgba(26,42,47,0.35);
  --ease:cubic-bezier(.2,.9,.25,1);
}

/* ─── Reset & base ───────────────────────── */

*{box-sizing:border-box;margin:0;padding:0}
button{font:inherit;color:inherit}

html,body{
  background:var(--cream);
  color:var(--ink);
  font-family:'Outfit', system-ui, sans-serif;
  font-feature-settings:"ss01","cv11";
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

body{
  min-height:100dvh;
  background:
    radial-gradient(1200px 600px at 50% -10%, #FFF8E8 0%, transparent 60%),
    radial-gradient(900px 600px at 110% 110%, #F8E5D8 0%, transparent 55%),
    var(--cream);
  position:relative;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:radial-gradient(rgba(26,42,47,0.10) 1px, transparent 1.2px);
  background-size:18px 18px;
  opacity:0.32;
  mask-image:radial-gradient(ellipse at 50% 25%, #000 30%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 25%, #000 30%, transparent 75%);
  z-index:0;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.16  0 0 0 0 0.18  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/></svg>");
  opacity:0.10;
  mix-blend-mode:multiply;
  z-index:0;
}

/* ─── Shell ──────────────────────────────── */

.shell{
  max-width:480px;
  margin:0 auto;
  padding:18px 22px 40px;
  position:relative;
  z-index:1;
}

/* ─── Top bar ────────────────────────────── */

.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:28px;
}

.brand{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:'Unbounded', sans-serif;
  font-weight:800;
  font-size:14px;
  letter-spacing:-0.01em;
  color:var(--ink);
  text-decoration:none;
}

.brand-mark{
  width:30px;
  height:30px;
  border-radius:9px;
  background:linear-gradient(160deg, var(--teal) 0%, var(--teal-deep) 100%);
  display:grid;
  place-items:center;
  color:var(--sun);
  font-family:'Unbounded', sans-serif;
  font-weight:800;
  font-size:13px;
  box-shadow:0 1px 0 rgba(255,255,255,0.25) inset, 0 6px 14px -4px rgba(15,76,92,0.45);
  letter-spacing:-0.05em;
}

.brand-text{display:flex;flex-direction:column;line-height:1}
.brand-text small{
  font-family:'Outfit', sans-serif;
  font-weight:500;
  font-size:9px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:3px;
}

.lang{
  display:flex;
  align-items:center;
  background:var(--paper);
  padding:3px;
  border-radius:999px;
  border:1px solid var(--line);
  font-family:'Outfit', sans-serif;
  font-weight:600;
  font-size:11px;
}
.lang button{
  appearance:none;
  border:0;
  background:transparent;
  padding:6px 10px;
  border-radius:999px;
  color:var(--ink-soft);
  cursor:pointer;
  letter-spacing:0.02em;
}
.lang button.is-active{background:var(--ink);color:var(--sun)}

/* ─── Back link (form pages) ─────────────── */

.back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:transparent;
  border:0;
  text-decoration:none;
  color:var(--ink-soft);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  padding:8px 12px 8px 0;
  margin:-8px 0 12px -4px;
  letter-spacing:-0.005em;
}
.back:hover{color:var(--ink)}
.back svg{flex-shrink:0}

/* ─── Asset tag (full — picker page) ────── */

.tag{
  background:linear-gradient(180deg, #122E36 0%, #0A1F25 100%);
  color:#E8F2F4;
  border-radius:24px;
  padding:24px 24px 22px;
  position:relative;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 -3px 0 rgba(0,0,0,0.4) inset,
    0 22px 50px -18px rgba(10,31,37,0.55),
    0 4px 0 #06181D;
  overflow:hidden;
  animation:tagIn 700ms var(--ease) both;
}

@keyframes tagIn{
  from{opacity:0;transform:translateY(-12px) scale(0.985)}
  to{opacity:1;transform:none}
}

.tag::before, .tag::after{
  content:"";
  position:absolute;
  width:8px;height:8px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #2C4953 0%, #06141A 80%);
  box-shadow:0 1px 0 rgba(255,255,255,0.06);
  top:14px;
}
.tag::before{left:14px}
.tag::after{right:14px}

.tag-rivets-bottom{
  position:absolute;
  bottom:14px;
  left:14px;
  right:14px;
  display:flex;
  justify-content:space-between;
  pointer-events:none;
}
.tag-rivets-bottom span{
  width:8px;height:8px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #2C4953 0%, #06141A 80%);
  box-shadow:0 1px 0 rgba(255,255,255,0.06);
}

.tag-row-1{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-family:'JetBrains Mono', monospace;
  font-size:10px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:#7FA0A8;
  margin-bottom:18px;
}

.live{display:inline-flex;align-items:center;gap:7px;color:#9DDFA1}
.live .dot{
  width:7px;height:7px;border-radius:50%;
  background:#3DCB55;
  box-shadow:0 0 0 0 rgba(61,203,85,0.6);
  animation:pulse 1.8s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(61,203,85,0.55)}
  70%{box-shadow:0 0 0 9px rgba(61,203,85,0)}
  100%{box-shadow:0 0 0 0 rgba(61,203,85,0)}
}

.tag-id{
  font-family:'JetBrains Mono', monospace;
  font-weight:800;
  font-size:74px;
  line-height:0.95;
  letter-spacing:0.04em;
  color:var(--sun);
  text-shadow:0 1px 0 rgba(0,0,0,0.4), 0 0 28px rgba(255,214,107,0.35);
  display:flex;
  align-items:baseline;
  gap:8px;
}
.tag-id .hash{font-size:34px;color:#5C7A82;font-weight:500}

.tag-meta{
  margin-top:10px;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}
.tag-meta .where{
  font-family:'Outfit', sans-serif;
  font-weight:500;
  font-size:14px;
  color:#C9DDE2;
  line-height:1.35;
}
.tag-meta .where strong{
  font-weight:700;
  color:#FFFFFF;
}
.tag-meta .barcode{
  font-family:'JetBrains Mono', monospace;
  font-size:9px;
  letter-spacing:0.22em;
  color:#5C7A82;
  text-align:right;
}

/* ─── Compact context strip (form pages) ─── */

.context{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 14px 12px 12px;
  border-radius:16px;
  background:linear-gradient(180deg, #122E36 0%, #0A1F25 100%);
  color:#E8F2F4;
  box-shadow:0 1px 0 rgba(255,255,255,0.05) inset, 0 -2px 0 rgba(0,0,0,0.3) inset, 0 12px 28px -14px rgba(10,31,37,0.4);
  margin-bottom:24px;
  animation:up 600ms var(--ease) both;
}

.context-id{
  display:inline-flex;
  align-items:center;
  gap:4px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.10);
  padding:8px 12px;
  border-radius:10px;
  font-family:'JetBrains Mono', monospace;
  font-weight:800;
  font-size:18px;
  color:var(--sun);
  letter-spacing:0.04em;
  flex-shrink:0;
  text-shadow:0 0 14px rgba(255,214,107,0.35);
}
.context-id .hash{color:#5C7A82;font-size:13px;font-weight:500;margin-right:1px}

.context-where{
  flex:1;
  min-width:0;
  font-size:13px;
  line-height:1.3;
}
.context-where strong{
  display:block;
  font-weight:700;
  font-size:13.5px;
  color:#FFFFFF;
  letter-spacing:-0.005em;
}
.context-where span{color:#9FB6BC;font-size:11.5px}

.context-live{
  width:8px;height:8px;border-radius:50%;
  background:#3DCB55;
  box-shadow:0 0 0 0 rgba(61,203,85,0.6);
  animation:pulse 1.8s ease-out infinite;
  flex-shrink:0;
}

/* ─── Page heading ───────────────────────── */

.q{
  margin:32px 4px 16px;
  font-family:'Unbounded', sans-serif;
  font-weight:700;
  font-size:24px;
  letter-spacing:-0.02em;
  color:var(--ink);
  line-height:1.15;
  animation:up 700ms 120ms var(--ease) both;
}
.q em{
  font-style:normal;
  background:linear-gradient(180deg, transparent 60%, var(--sun) 60% 92%, transparent 92%);
  padding:0 4px;
}

.page-h{
  font-family:'Unbounded', sans-serif;
  font-weight:700;
  font-size:30px;
  letter-spacing:-0.025em;
  color:var(--ink);
  line-height:1.05;
  margin-bottom:8px;
  animation:up 600ms 60ms var(--ease) both;
}
.page-h em{
  font-style:normal;
  color:var(--ink);
  text-decoration:underline;
  text-decoration-color:var(--accent);
  text-decoration-thickness:6px;
  text-underline-offset:7px;
  text-decoration-skip-ink:none;
}
.page-h.refund em{--accent:var(--coral)}
.page-h.suggest em{--accent:var(--sun-deep)}
.page-h.help em{--accent:var(--teal)}

.page-sub{
  font-family:'Outfit', sans-serif;
  font-weight:400;
  font-size:15px;
  color:var(--muted);
  line-height:1.45;
  margin-bottom:28px;
  animation:up 600ms 140ms var(--ease) both;
}

/* ─── Picker action buttons ──────────────── */

.actions{display:flex;flex-direction:column;gap:14px}

.act{
  appearance:none;
  border:0;
  text-align:left;
  display:grid;
  grid-template-columns:56px 1fr 22px;
  align-items:center;
  gap:18px;
  padding:20px;
  border-radius:22px;
  cursor:pointer;
  text-decoration:none;
  position:relative;
  isolation:isolate;
  transition:transform 160ms ease, box-shadow 160ms ease;
  animation:up 700ms var(--ease) both;
}
.act:active{transform:translateY(2px)}

.act-icon{
  width:56px;height:56px;
  border-radius:16px;
  display:grid;place-items:center;
  flex-shrink:0;
}
.act-body h3{
  font-family:'Unbounded', sans-serif;
  font-weight:700;
  font-size:18px;
  letter-spacing:-0.01em;
  margin-bottom:3px;
  line-height:1.15;
}
.act-body p{font-weight:400;font-size:13.5px;line-height:1.4;opacity:0.78}
.act-arrow{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;opacity:0.55}

.act--refund{
  background:linear-gradient(180deg, #ED6E54 0%, var(--coral) 55%, var(--coral-deep) 100%);
  color:#FFF8F2;
  box-shadow:var(--shadow-3);
  animation-delay:200ms;
}
.act--refund .act-icon{background:rgba(255,255,255,0.16);box-shadow:0 1px 0 rgba(255,255,255,0.25) inset}
.act--refund .act-icon svg{color:#FFE9DD}
.act--refund .act-body p{color:#FFE6D9;opacity:0.95}
.act--refund .act-arrow{background:rgba(255,255,255,0.18);color:#fff;opacity:1}

.act--suggest{
  background:linear-gradient(180deg, #FFE49A 0%, var(--sun) 55%, var(--sun-deep) 100%);
  color:var(--ink);
  box-shadow:var(--shadow-2);
  animation-delay:280ms;
}
.act--suggest .act-icon{background:rgba(26,42,47,0.10)}
.act--suggest .act-icon svg{color:var(--ink)}
.act--suggest .act-arrow{background:rgba(26,42,47,0.10);color:var(--ink)}

.act--help{
  background:var(--paper);
  color:var(--ink);
  box-shadow:var(--shadow-1);
  border:1px solid var(--line);
  animation-delay:360ms;
}
.act--help .act-icon{background:linear-gradient(160deg, #DDEDF0 0%, #C7DFE4 100%)}
.act--help .act-icon svg{color:var(--teal)}
.act--help .act-arrow{background:rgba(15,76,92,0.10);color:var(--teal)}

/* ─── Form fields ────────────────────────── */

.form{
  display:flex;
  flex-direction:column;
  gap:24px;
  animation:up 600ms 220ms var(--ease) both;
}

.field{display:flex;flex-direction:column;gap:9px}

.label{
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
  font-size:10.5px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--ink-soft);
}
.label .opt{
  font-weight:500;
  color:var(--muted);
  margin-left:6px;
  letter-spacing:0.10em;
}

.hint{
  font-size:12.5px;
  color:var(--muted);
  line-height:1.4;
  margin-top:-3px;
}

.input,
.textarea{
  appearance:none;
  border:1px solid var(--line);
  background:var(--paper-2);
  border-radius:14px;
  padding:15px 16px;
  font-family:'Outfit', sans-serif;
  font-size:16px;
  font-weight:500;
  color:var(--ink);
  width:100%;
  transition:border-color 140ms ease, box-shadow 140ms ease, background 140ms ease;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 2px rgba(26,42,47,0.04);
}
.input::placeholder, .textarea::placeholder{color:var(--muted-2);font-weight:400}
.input:focus, .textarea:focus{
  outline:none;
  border-color:var(--ink-soft);
  background:#FFFFFF;
  box-shadow:0 0 0 4px rgba(26,42,47,0.08), 0 1px 2px rgba(26,42,47,0.04);
}

.textarea{min-height:110px;resize:vertical;line-height:1.45}

/* prefix-input: e.g. £ amount */
.prefix-input{
  position:relative;
  display:flex;
  align-items:center;
}
.prefix-input .prefix{
  position:absolute;
  left:16px;
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
  font-size:18px;
  color:var(--ink-soft);
  pointer-events:none;
}
.prefix-input .input{padding-left:34px}

/* Two-up grid */
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* Radio cards (stacked) */
.radio-group{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.radio-card{
  display:flex;
  align-items:center;
  gap:14px;
  padding:14px 16px;
  border:1px solid var(--line);
  background:var(--paper-2);
  border-radius:14px;
  cursor:pointer;
  transition:border-color 140ms ease, background 140ms ease, transform 100ms ease;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 2px rgba(26,42,47,0.03);
}
.radio-card input{position:absolute;opacity:0;pointer-events:none}
.radio-card .indicator{
  width:20px;height:20px;border-radius:50%;
  border:2px solid var(--line-strong);
  background:var(--paper-2);
  flex-shrink:0;
  position:relative;
  transition:border-color 140ms ease;
}
.radio-card .indicator::after{
  content:"";
  position:absolute;
  inset:3px;
  border-radius:50%;
  background:var(--ink);
  transform:scale(0);
  transition:transform 160ms var(--ease);
}
.radio-card .label-text{
  flex:1;
  font-size:15px;
  font-weight:500;
  color:var(--ink);
  line-height:1.3;
}
.radio-card .label-text small{
  display:block;
  font-size:12px;
  color:var(--muted);
  font-weight:400;
  margin-top:2px;
}
.radio-card:hover{border-color:var(--line-strong)}
.radio-card.is-selected{
  background:var(--cream);
  border-color:var(--ink);
  box-shadow:0 1px 0 rgba(255,255,255,0.7) inset, 0 4px 14px -6px rgba(26,42,47,0.18);
}
.radio-card.is-selected .indicator{border-color:var(--ink)}
.radio-card.is-selected .indicator::after{transform:scale(1)}

/* Refund accent variant */
.radio-group--refund .radio-card.is-selected{
  background:var(--coral-soft);
  border-color:var(--coral);
}
.radio-group--refund .radio-card.is-selected .indicator{border-color:var(--coral)}
.radio-group--refund .radio-card.is-selected .indicator::after{background:var(--coral)}

/* Pill toggle group (segmented) */
.pill-toggle{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:6px;
  background:var(--paper-2);
  padding:4px;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 1px 0 rgba(255,255,255,0.6) inset;
}
.pill-toggle label{position:relative;display:flex}
.pill-toggle input{position:absolute;opacity:0;pointer-events:none}
.pill-toggle .pill{
  width:100%;
  text-align:center;
  padding:11px 6px;
  border-radius:10px;
  font-size:13px;
  font-weight:600;
  color:var(--ink-soft);
  cursor:pointer;
  transition:background 140ms ease, color 140ms ease;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
}
.pill-toggle label:hover .pill{background:rgba(26,42,47,0.04)}
.pill-toggle input:checked + .pill{background:var(--ink);color:var(--sun)}

/* Photo upload */
.photo{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 16px;
  border:1.5px dashed var(--line-strong);
  background:transparent;
  border-radius:14px;
  cursor:pointer;
  font-size:14px;
  font-weight:500;
  color:var(--ink-soft);
  transition:border-color 140ms ease, background 140ms ease;
}
.photo input{position:absolute;opacity:0;pointer-events:none}
.photo:hover{border-color:var(--ink);background:var(--paper)}
.photo .photo-icon{
  width:36px;height:36px;border-radius:10px;
  background:var(--cream);
  display:grid;place-items:center;
  color:var(--ink-soft);
  flex-shrink:0;
}
.photo .photo-text{display:flex;flex-direction:column;line-height:1.3}
.photo .photo-text small{font-size:11.5px;color:var(--muted);font-weight:400;margin-top:1px}

/* Notify-me checkbox */
.check{
  display:flex;
  align-items:flex-start;
  gap:12px;
  padding:14px 16px;
  border:1px solid var(--line);
  background:var(--paper-2);
  border-radius:14px;
  cursor:pointer;
  transition:border-color 140ms ease, background 140ms ease;
}
.check input{position:absolute;opacity:0;pointer-events:none}
.check .check-box{
  width:20px;height:20px;border-radius:6px;
  border:2px solid var(--line-strong);
  background:var(--paper-2);
  flex-shrink:0;
  position:relative;
  margin-top:1px;
  transition:border-color 140ms ease, background 140ms ease;
}
.check .check-box::after{
  content:"";
  position:absolute;
  left:4px;top:0px;
  width:6px;height:11px;
  border-right:2.5px solid var(--paper-2);
  border-bottom:2.5px solid var(--paper-2);
  transform:rotate(45deg) scale(0);
  transition:transform 160ms var(--ease);
}
.check .check-text{flex:1;font-size:14.5px;line-height:1.4;color:var(--ink)}
.check .check-text small{display:block;font-size:12.5px;color:var(--muted);margin-top:2px}
.check.is-checked{background:var(--cream);border-color:var(--ink)}
.check.is-checked .check-box{background:var(--ink);border-color:var(--ink)}
.check.is-checked .check-box::after{transform:rotate(45deg) scale(1)}

/* ─── Submit button ──────────────────────── */

.submit{
  appearance:none;
  border:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  padding:18px 20px;
  border-radius:18px;
  font-family:'Unbounded', sans-serif;
  font-weight:700;
  font-size:16px;
  letter-spacing:-0.01em;
  cursor:pointer;
  transition:transform 160ms ease, box-shadow 160ms ease;
  box-shadow:var(--shadow-3);
}
.submit:active{transform:translateY(2px)}
.submit svg{flex-shrink:0}

.submit--refund{background:linear-gradient(180deg, #ED6E54 0%, var(--coral) 55%, var(--coral-deep) 100%);color:#FFF8F2}
.submit--suggest{background:linear-gradient(180deg, #FFE49A 0%, var(--sun) 55%, var(--sun-deep) 100%);color:var(--ink)}
.submit--help{background:linear-gradient(180deg, #1F6677 0%, var(--teal) 55%, var(--teal-deep) 100%);color:var(--sun)}

/* ─── Or talk to a human ─────────────────── */

.or{
  margin:30px 0 14px;
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--muted);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  font-weight:600;
  animation:up 700ms 460ms var(--ease) both;
}
.or::before, .or::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg, transparent, var(--line) 30%, var(--line) 70%, transparent);
}

.whatsapp{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 20px;
  border-radius:18px;
  background:#FFFFFF;
  color:var(--ink);
  text-decoration:none;
  font-family:'Outfit', sans-serif;
  font-weight:600;
  font-size:15px;
  border:1px solid var(--line);
  box-shadow:var(--shadow-1);
  animation:up 700ms 540ms var(--ease) both;
}
.whatsapp svg{flex-shrink:0}
.whatsapp .num{
  font-family:'JetBrains Mono', monospace;
  font-weight:500;
  color:var(--muted);
  font-size:13px;
  margin-left:6px;
}

/* ─── FAQ ────────────────────────────────── */

.faq{
  margin-top:36px;
  display:flex;
  flex-direction:column;
  gap:8px;
  animation:up 600ms 320ms var(--ease) both;
}

.faq-h{
  font-family:'Unbounded', sans-serif;
  font-weight:700;
  font-size:14px;
  letter-spacing:-0.005em;
  color:var(--ink);
  margin-bottom:8px;
  display:flex;
  align-items:center;
  gap:9px;
}
.faq-h::before{
  content:"";
  width:24px;height:2px;
  background:var(--ink);
  border-radius:1px;
}

details.faq-item{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:0;
  overflow:hidden;
  transition:border-color 140ms ease, box-shadow 140ms ease;
}
details.faq-item[open]{
  border-color:var(--line-strong);
  box-shadow:0 6px 20px -10px rgba(26,42,47,0.15);
}
details.faq-item summary{
  list-style:none;
  cursor:pointer;
  padding:16px 18px;
  font-size:14.5px;
  font-weight:600;
  color:var(--ink);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  user-select:none;
}
details.faq-item summary::-webkit-details-marker{display:none}
.faq-icon{
  width:22px;height:22px;
  border-radius:50%;
  background:var(--cream);
  color:var(--ink);
  display:grid;place-items:center;
  flex-shrink:0;
  transition:transform 200ms var(--ease), background 140ms ease;
  font-size:14px;
  font-weight:700;
  font-family:'JetBrains Mono', monospace;
}
details.faq-item[open] .faq-icon{
  transform:rotate(45deg);
  background:var(--ink);
  color:var(--sun);
}
.faq-body{
  padding:0 18px 18px;
  font-size:14px;
  line-height:1.55;
  color:var(--ink-soft);
}
.faq-body a{color:var(--teal);font-weight:600;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:2px}

/* ─── Success state ──────────────────────── */

.success{
  text-align:center;
  padding:36px 22px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow-1);
  animation:tagIn 600ms var(--ease) both;
}
.success-mark{
  width:72px;height:72px;border-radius:50%;
  margin:0 auto 18px;
  display:grid;place-items:center;
  background:var(--cream);
}
.success--refund .success-mark{background:var(--coral-soft)}
.success--suggest .success-mark{background:var(--sun-soft)}
.success--help .success-mark{background:var(--teal-soft)}
.success-mark svg{width:34px;height:34px}
.success--refund .success-mark svg{color:var(--coral)}
.success--suggest .success-mark svg{color:var(--sun-deep)}
.success--help .success-mark svg{color:var(--teal)}
.success h2{
  font-family:'Unbounded', sans-serif;
  font-weight:700;
  font-size:22px;
  letter-spacing:-0.015em;
  color:var(--ink);
  margin-bottom:8px;
}
.success p{
  font-size:14.5px;
  line-height:1.5;
  color:var(--muted);
  margin-bottom:18px;
}
.success-ref{
  display:inline-block;
  font-family:'JetBrains Mono', monospace;
  font-weight:700;
  font-size:13px;
  letter-spacing:0.06em;
  background:var(--cream);
  border:1px dashed var(--line-strong);
  padding:8px 14px;
  border-radius:10px;
  color:var(--ink);
  margin-bottom:20px;
}
.success-actions{
  display:flex;
  gap:10px;
  justify-content:center;
  flex-wrap:wrap;
}
.success-actions a{
  text-decoration:none;
  padding:11px 18px;
  border-radius:12px;
  font-size:14px;
  font-weight:600;
  border:1px solid var(--line);
  background:var(--paper);
  color:var(--ink);
}
.success-actions a.primary{background:var(--ink);color:var(--sun);border-color:var(--ink)}

/* ─── Footer ────────────────────────────── */

.foot{
  margin-top:38px;
  display:flex;
  flex-direction:column;
  gap:22px;
  animation:up 700ms 640ms var(--ease) both;
}
.foot-form{margin-top:30px;animation-delay:280ms;padding-top:22px;border-top:1px dashed var(--line)}

.landlord{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  text-decoration:none;
  padding:18px 22px;
  border-radius:20px;
  background:linear-gradient(180deg, #122E36 0%, #0A1F25 100%);
  color:#E8F2F4;
  box-shadow:
    0 1px 0 rgba(255,255,255,0.06) inset,
    0 -3px 0 rgba(0,0,0,0.4) inset,
    0 18px 36px -16px rgba(10,31,37,0.45),
    0 3px 0 #06181D;
  transition:transform 160ms ease, box-shadow 160ms ease;
}
.landlord:active{transform:translateY(2px)}
@media(hover:hover){
  .landlord:hover{transform:translateY(-1px)}
}
.landlord-text{display:flex;flex-direction:column;gap:3px}
.landlord-text strong{
  font-family:'Unbounded', sans-serif;
  font-weight:700;
  font-size:14px;
  letter-spacing:-0.005em;
  color:#FFFFFF;
}
.landlord-text span{font-size:12.5px;color:#9FB6BC;line-height:1.4}
.landlord-arrow{
  width:36px;height:36px;border-radius:50%;
  background:var(--sun);color:var(--ink);
  display:grid;place-items:center;flex-shrink:0;
  box-shadow:0 1px 0 rgba(255,255,255,0.4) inset, 0 -2px 0 rgba(0,0,0,0.12) inset;
}
/* On the root picker the landlord button replaces the old top-of-footer
   divider, so the fineprint takes over the dashed separator role. */
.landlord + .fineprint{padding-top:18px;border-top:1px dashed var(--line)}

.fineprint{
  font-size:10.5px;
  line-height:1.5;
  color:var(--muted);
  letter-spacing:0.01em;
  text-align:center;
  font-family:'JetBrains Mono', monospace;
  font-weight:500;
}

/* ─── Animations ─────────────────────────── */

@keyframes up{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

/* ─── Hover (desktop only) ───────────────── */

@media(hover:hover){
  .act:hover{transform:translateY(-2px)}
  .act--refund:hover{box-shadow:0 1px 0 rgba(255,255,255,0.35) inset, 0 -3px 0 rgba(0,0,0,0.18) inset, 0 26px 44px -14px rgba(200,70,44,0.45)}
  .act--suggest:hover{box-shadow:0 1px 0 rgba(255,255,255,0.5) inset, 0 -3px 0 rgba(0,0,0,0.15) inset, 0 22px 40px -14px rgba(242,194,74,0.45)}
  .act--help:hover{box-shadow:0 1px 0 rgba(255,255,255,0.6) inset, 0 -2px 0 rgba(26,42,47,0.06) inset, 0 14px 30px -10px rgba(26,42,47,0.18)}
  .lang button:hover:not(.is-active){background:rgba(26,42,47,0.06)}
  .whatsapp:hover{transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,0.6) inset, 0 -2px 0 rgba(26,42,47,0.06) inset, 0 14px 28px -10px rgba(26,42,47,0.20);transition:transform 160ms ease, box-shadow 160ms ease}
  .submit:hover{transform:translateY(-1px)}
  .landlord:hover .landlord-arrow{transform:translateX(2px);transition:transform 160ms ease}
}

/* ─── Smaller phones ─────────────────────── */

@media(max-width:380px){
  .tag-id{font-size:64px}
  .q, .page-h{font-size:22px}
  .page-h{font-size:26px}
  .act-body h3{font-size:17px}
  .pill-toggle{grid-template-columns:repeat(2, 1fr)}
}


/* ─── Inline form error + disabled state ─────────────── */

.form-error{
  margin:0 0 -8px;
  padding:14px 16px;
  border-radius:14px;
  background:rgba(200,70,44,0.08);
  color:#A8341A;
  font-size:14px;
  line-height:1.45;
  font-weight:500;
  border:1px solid rgba(200,70,44,0.18);
}

.submit:disabled{
  opacity:0.5;
  cursor:not-allowed;
  transform:none !important;
}


/* ─── Machine context state ─────────────────────────────── */

/* The big root-page tag and the slim form-page context strip are
   hidden by default; machine.js reveals them via body.has-machine
   when the URL/session gives us a known machine. */
body:not(.has-machine) .tag,
body:not(.has-machine) .context{
  display:none;
}

/* The "Where is the machine?" field on each form is the inverse:
   visible by default (safe for no-JS), hidden once we have a
   known machine. */
body.has-machine .field--where{
  display:none;
}