/* =========================================================================
   /v2 Checkout — refined token system
   DNA evolved from the current site: Playfair Display + Nunito,
   warm cream / teal / amber. New: tighter type ramp, softer elevations,
   subtler accent treatments, premium feel without losing the "handcrafted"
   warmth.
   ========================================================================= */

.v2{
  --teal:        #3D7B6F;
  --teal-deep:   #2E5C53;
  --teal-soft:   #E5F0ED;
  --teal-tint:   #F2F8F6;
  --amber:       #C4935A;
  --amber-deep:  #9E6F3D;
  --amber-soft:  #F8EEDC;
  --amber-tint:  #FBF6EC;
  --cream:       #FFF8F0;
  --cream-warm:  #FBF4E8;
  --cream-dark:  #F0ECE6;
  --white:       #FFFFFF;
  --ink:         #2D2A26;
  --ink-2:       #5A5650;
  --ink-3:       #8A867E;
  --ink-4:       #B5B1A8;
  --line:        #E8E2D6;
  --line-soft:   #F1ECE2;
  --danger:      #C7553F;
  --danger-bg:   #FBEEEA;
  --success:     #3D7B6F;
  --success-bg:  #EAF3F0;
  --warn-bg:     #FBF1D8;
  --warn-border: #E8C765;

  --radius-xs: 6px;
  --radius-sm: 10px;
  --radius:    14px;
  --radius-lg: 18px;
  --radius-xl: 24px;

  --shadow-xs: 0 1px 2px rgba(45,42,38,.05);
  --shadow:    0 1px 2px rgba(45,42,38,.04), 0 8px 20px -8px rgba(45,42,38,.14);
  --shadow-lg: 0 2px 4px rgba(45,42,38,.05), 0 18px 36px -14px rgba(45,42,38,.22);

  --f-body:    "Nunito", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-display: "Playfair Display", "Iowan Old Style", Georgia, serif;
  --f-mono:    ui-monospace, "SF Mono", Menlo, monospace;
}

/* ─── Reset within .v2 ─── */
.v2, .v2 *, .v2 *::before, .v2 *::after{ box-sizing:border-box }
.v2{
  font-family:var(--f-body);
  font-weight:500;
  color:var(--ink);
  background:var(--cream);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  letter-spacing:0;
}
.v2 button, .v2 input, .v2 select, .v2 textarea{
  font-family:inherit; color:inherit; font-size:inherit;
}
.v2 a{ color:inherit; text-decoration:none }
.v2 :focus-visible{ outline:2px solid var(--teal); outline-offset:2px }
.v2 strong, .v2 b{ font-weight:700 }

/* ─── Type ─── */
.v2 h1{
  font-family:var(--f-display); font-weight:700;
  font-size:34px; line-height:1.1; letter-spacing:-.01em;
  color:var(--ink); margin:0;
  text-wrap:balance;
}
.v2 h2{
  font-family:var(--f-display); font-weight:700;
  font-size:22px; line-height:1.2; letter-spacing:-.005em;
  color:var(--ink); margin:0;
  text-wrap:balance;
}
.v2 h3{
  font-family:var(--f-body); font-weight:800;
  font-size:15px; line-height:1.3; letter-spacing:.01em;
  color:var(--ink); margin:0;
}
.v2 p{ margin:0 }
.v2 .lead{ color:var(--ink-2); font-size:15px; line-height:1.55 }
.v2 .micro{ font-size:12px; color:var(--ink-3); letter-spacing:.01em }
.v2 .kicker{
  font:800 11px/1 var(--f-body); letter-spacing:.14em;
  text-transform:uppercase; color:var(--teal-deep);
}
.v2 .num-serif{ font-family:var(--f-display); font-weight:700; font-feature-settings:"lnum" }

/* ─── Top nav ─── */
.v2-top{
  height:64px; display:flex; align-items:center; justify-content:space-between;
  padding:0 28px;
  border-bottom:.5px solid var(--line);
  background:rgba(255,248,240,.85);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
}
.v2-logo{
  font-family:var(--f-display); font-weight:700; font-style:italic;
  font-size:22px; color:var(--amber-deep);
  letter-spacing:.005em;
  display:flex; align-items:center; gap:8px;
}
.v2-logo .dot{
  width:8px; height:8px; border-radius:50%; background:var(--amber);
  box-shadow: 0 0 0 3px rgba(196,147,90,.18);
}
.v2-top-right{ display:flex; align-items:center; gap:18px }
.v2-helplink{ font-size:13.5px; color:var(--ink-2); font-weight:600 }
.v2-helplink:hover{ color:var(--ink) }
.v2-langsel{
  display:inline-flex; align-items:center; gap:6px;
  font:600 12.5px var(--f-body);
  padding:6px 10px; border-radius:8px;
  border:.5px solid var(--line); background:transparent;
  color:var(--ink-2);
}

/* ─── Wizard frame ─── */
.v2-page{ background:var(--cream); min-height:100% }
.v2-shell{ max-width:720px; margin:0 auto; padding:36px 24px 56px }
.v2-header{ text-align:center; margin-bottom:32px }
.v2-header h1{ margin-bottom:10px }
.v2-header p{ color:var(--ink-2); font-size:15px; max-width:48ch; margin:0 auto }

/* ─── Steps indicator ─── */
.v2-steps{
  display:flex; align-items:center; justify-content:center;
  gap:0; margin: 8px 0 28px;
}
.v2-step{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 14px 8px 8px;
  border-radius:999px;
  font:700 13px var(--f-body);
  letter-spacing:.01em;
  white-space:nowrap;
  background:var(--cream-dark);
  color:var(--ink-3);
  border:.5px solid transparent;
}
.v2-step .v2-step-num{
  font-family:var(--f-display);
  font-size:13px; font-weight:700;
  width:22px; height:22px; border-radius:50%;
  background:var(--white); color:var(--ink-3);
  display:grid; place-items:center;
  border:.5px solid var(--line);
}
.v2-step.complete{
  background:var(--amber-soft); color:var(--amber-deep); cursor:pointer;
}
.v2-step.complete .v2-step-num{ background:var(--amber); color:#fff; border-color:transparent }
.v2-step.complete .v2-step-num::after{
  content:""; position:absolute; width:9px; height:9px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'><path d='M1.5 4.5l2 2 4-4' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}
.v2-step.complete .v2-step-num{ position:relative; color:transparent }
.v2-step.active{
  background:linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%);
  color:#fff;
  box-shadow: 0 4px 12px -4px rgba(61,123,111,.45);
}
.v2-step.active .v2-step-num{ background:rgba(255,255,255,.22); color:#fff; border-color:transparent }
.v2-step-line{
  flex:0 0 18px; height:2px;
  background:var(--line);
  margin:0 -1px;
  border-radius:1px;
}
.v2-step-line.complete{ background:var(--amber) }

/* ─── Wizard card ─── */
.v2-card{
  background:var(--white);
  border-radius:var(--radius-lg);
  box-shadow: var(--shadow);
  border:.5px solid var(--line-soft);
  padding: 32px;
  position:relative;
}
.v2-card .v2-card-head{ margin-bottom:24px }
.v2-card .v2-card-head h2{ margin-bottom:6px }
.v2-card .v2-card-head p{ color:var(--ink-2); font-size:14.5px }

/* ─── Form primitives ─── */
.v2-field{ display:flex; flex-direction:column; gap:6px }
.v2-row{ display:grid; grid-template-columns: 1fr 1fr; gap:16px }
.v2-row-3{ display:grid; grid-template-columns: 1fr 1fr 1fr; gap:12px }
.v2-stack{ display:flex; flex-direction:column; gap:18px }
.v2-stack-sm{ display:flex; flex-direction:column; gap:12px }
.v2-stack-lg{ display:flex; flex-direction:column; gap:24px }

.v2-label{
  font:700 13px var(--f-body);
  color:var(--ink); letter-spacing:.005em;
  display:flex; gap:6px; align-items:baseline;
}
.v2-label .opt{ font-weight:500; color:var(--ink-3); font-size:12px }
.v2-label .req{ color:var(--teal-deep); font-weight:800 }

.v2-input,
.v2-select,
.v2-textarea{
  width:100%;
  height:46px;
  padding:0 14px;
  background:var(--white);
  border:1.25px solid var(--line);
  border-radius:var(--radius-sm);
  font:500 15px var(--f-body);
  color:var(--ink);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.v2-input::placeholder,
.v2-textarea::placeholder{ color:var(--ink-4); font-weight:500 }
.v2-input:hover, .v2-select:hover, .v2-textarea:hover{ border-color: color-mix(in oklab, var(--ink) 18%, transparent) }
.v2-input:focus, .v2-select:focus, .v2-textarea:focus{
  outline:none; border-color:var(--teal);
  box-shadow: 0 0 0 4px rgba(61,123,111,.12);
}
.v2-input.is-error{ border-color:var(--danger); background:var(--danger-bg) }
.v2-input.is-error:focus{ box-shadow: 0 0 0 4px rgba(199,85,63,.14) }

.v2-textarea{ height:auto; min-height:96px; padding:12px 14px; resize:vertical; line-height:1.5 }

.v2-select{
  appearance:none; -webkit-appearance:none;
  padding-right:38px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%235A5650' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
  background-repeat:no-repeat;
  background-position:right 14px center;
  background-color:var(--white);
}

.v2-help{ font-size:12.5px; color:var(--ink-3); margin-top:2px }
.v2-err{ font-size:12.5px; color:var(--danger); font-weight:600; margin-top:2px; display:flex; gap:4px; align-items:center }

/* Inline radio group */
.v2-radio-row{ display:flex; gap:10px; flex-wrap:wrap }
.v2-radio{
  display:inline-flex; align-items:center; gap:9px;
  padding:10px 16px;
  border:1.25px solid var(--line);
  border-radius:var(--radius-sm);
  background:var(--white);
  font-weight:600; font-size:14px; color:var(--ink-2);
  cursor:pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.v2-radio:hover{ border-color: color-mix(in oklab, var(--ink) 18%, transparent); color:var(--ink) }
.v2-radio .v2-radio-mark{
  width:18px; height:18px; border-radius:50%;
  border:1.5px solid var(--line);
  background:var(--white);
  display:grid; place-items:center;
  flex-shrink:0;
  transition: border-color .15s;
}
.v2-radio.checked{
  border-color:var(--teal); color:var(--ink);
  background: var(--teal-tint);
}
.v2-radio.checked .v2-radio-mark{ border-color:var(--teal) }
.v2-radio.checked .v2-radio-mark::after{
  content:""; width:9px; height:9px; border-radius:50%; background:var(--teal);
}

/* Radio cards (bigger, for voice/options) */
.v2-radio-card{
  display:flex; align-items:flex-start; gap:12px;
  padding:14px 16px;
  border:1.25px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
  cursor:pointer;
  transition: border-color .15s, background .15s, transform .15s;
  flex:1;
  min-width:0;
}
.v2-radio-card .v2-radio-mark{
  width:20px; height:20px; border-radius:50%;
  border:1.5px solid var(--line); background:var(--white);
  flex-shrink:0; margin-top:1px; position:relative;
}
.v2-radio-card.checked{
  border-color: var(--teal);
  background: var(--teal-tint);
}
.v2-radio-card.checked .v2-radio-mark{ border-color:var(--teal) }
.v2-radio-card.checked .v2-radio-mark::after{
  content:""; position:absolute; inset:3px; border-radius:50%; background:var(--teal);
}
.v2-radio-card-body{ flex:1; min-width:0 }
.v2-radio-card-title{ font-weight:700; font-size:14.5px; color:var(--ink); line-height:1.25 }
.v2-radio-card-hint{ font-size:12.5px; color:var(--ink-3); margin-top:2px; line-height:1.4 }

/* Checkbox */
.v2-check{
  display:flex; align-items:flex-start; gap:10px; cursor:pointer;
  font-size:14px; color:var(--ink-2); line-height:1.5;
}
.v2-check .box{
  width:20px; height:20px; border-radius:6px;
  border:1.5px solid var(--ink-4); background:var(--white);
  flex-shrink:0; margin-top:1px;
  display:grid; place-items:center;
  transition:background .15s, border-color .15s;
}
.v2-check.checked .box{ background:var(--teal); border-color:var(--teal) }
.v2-check.checked .box::after{
  content:""; width:11px; height:11px;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 11'><path d='M2 5.5l2.5 2.5L9 3' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}
.v2-check strong{ color:var(--ink) }

/* Callouts */
.v2-callout{
  padding:16px 18px;
  border-radius:var(--radius);
  border:1.25px solid;
  display:flex; gap:14px; align-items:flex-start;
}
.v2-callout .ic{
  width:32px; height:32px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; font-size:14px;
}
.v2-callout-title{ font-weight:700; font-size:14.5px; color:var(--ink); margin-bottom:2px }
.v2-callout-body{ font-size:13.5px; color:var(--ink-2); line-height:1.55; flex:1 }

.v2-callout.amber{ background:var(--warn-bg); border-color: var(--warn-border) }
.v2-callout.amber .ic{ background: var(--amber); color:#fff }
.v2-callout.success{ background:var(--success-bg); border-color: color-mix(in oklab, var(--success) 30%, transparent) }
.v2-callout.success .ic{ background:var(--success); color:#fff }
.v2-callout.teal{ background:var(--teal-tint); border-color: color-mix(in oklab, var(--teal) 22%, transparent) }
.v2-callout.teal .ic{ background:var(--teal); color:#fff }

/* ─── Buttons ─── */
.v2-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:0 22px; height:48px;
  font:800 15px var(--f-body); letter-spacing:.005em;
  border:0; border-radius:var(--radius-sm);
  cursor:pointer; white-space:nowrap;
  transition: transform .12s ease, box-shadow .15s, background .15s;
}
.v2-btn:hover{ transform: translateY(-1px) }
.v2-btn .ar{ font-size:16px }

.v2-btn-primary{
  background: linear-gradient(135deg, #D4915E 0%, #E8C4A0 100%);
  color:#3a2818;
  box-shadow: 0 2px 4px rgba(196,147,90,.18), 0 10px 22px -10px rgba(196,147,90,.55);
}
.v2-btn-primary:hover{ box-shadow: 0 2px 4px rgba(196,147,90,.22), 0 14px 28px -10px rgba(196,147,90,.65) }
.v2-btn-primary.disabled, .v2-btn-primary[disabled]{
  opacity:.45; pointer-events:none; box-shadow:none; transform:none;
}

.v2-btn-teal{
  background: linear-gradient(135deg, var(--teal) 0%, var(--teal-deep) 100%);
  color:#fff;
  box-shadow: 0 2px 4px rgba(46,92,83,.18), 0 10px 22px -10px rgba(46,92,83,.55);
}
.v2-btn-ghost{
  background:transparent; color:var(--ink-2);
  font-weight:700;
}
.v2-btn-ghost:hover{ background: color-mix(in oklab, var(--ink) 5%, transparent); transform:none; color:var(--ink) }
.v2-btn-ghost[disabled]{ opacity:.4; pointer-events:none }

.v2-btn-secondary{
  background:var(--white); color:var(--ink);
  border:1.25px solid var(--line);
  font-weight:700;
}
.v2-btn-secondary:hover{ background:var(--cream-dark); border-color: color-mix(in oklab, var(--ink) 16%, transparent) }

.v2-btn-sm{ height:38px; padding:0 14px; font-size:13.5px; border-radius:var(--radius-xs) }
.v2-btn-lg{ height:56px; padding:0 28px; font-size:16px }
.v2-btn-full{ width:100% }

/* ─── Wizard nav ─── */
.v2-nav{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:24px;
}
.v2-nav .v2-btn-primary{ min-width:160px }

/* ─── Photo upload zone ─── */
.v2-dropzone{
  border:1.5px dashed color-mix(in oklab, var(--teal) 40%, var(--line));
  border-radius:var(--radius);
  background: var(--teal-tint);
  padding: 28px 24px;
  text-align:center;
  cursor:pointer;
  transition: background .15s, border-color .15s;
}
.v2-dropzone:hover{ background: color-mix(in oklab, var(--teal) 8%, var(--teal-tint)); border-color: var(--teal) }
.v2-dropzone .dz-ic{
  width:48px; height:48px; border-radius:50%;
  background: var(--white); color:var(--teal);
  display:grid; place-items:center; margin: 0 auto 12px;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.v2-dropzone .dz-title{ font-weight:800; font-size:15px; color:var(--ink) }
.v2-dropzone .dz-hint{ font-size:12.5px; color:var(--ink-3); margin-top:4px }
.v2-photo-tips{
  display:flex; gap:18px; justify-content:center; flex-wrap:wrap;
  margin-top:16px;
  font:600 12px var(--f-body); color:var(--ink-2);
}
.v2-photo-tips span{ display:inline-flex; align-items:center; gap:6px }
.v2-photo-tips i{
  display:inline-grid; place-items:center;
  width:22px; height:22px; border-radius:50%;
  background: var(--cream-dark); color:var(--ink-2);
  font-style:normal; font-size:11px; font-weight:800;
}

/* Photo preview state */
.v2-photo-preview{
  display:grid; grid-template-columns: 96px 1fr auto; gap:16px; align-items:center;
  padding:16px;
  border-radius:var(--radius);
  background: var(--teal-tint);
  border:1.25px solid color-mix(in oklab, var(--teal) 22%, transparent);
}
.v2-photo-thumb{
  width:96px; height:96px; border-radius:14px;
  background:
    repeating-linear-gradient(135deg,
      color-mix(in oklab, var(--teal) 18%, var(--cream-dark)) 0 10px,
      color-mix(in oklab, var(--teal) 26%, var(--cream-dark)) 10px 20px);
  position:relative; overflow:hidden;
  display:grid; place-items:center;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04);
}
.v2-photo-thumb .ph-label{
  font:700 9px var(--f-mono); letter-spacing:.04em;
  color: var(--teal-deep);
  background:var(--cream); padding:4px 6px; border-radius:4px;
  text-align:center; line-height:1.2;
}
.v2-photo-preview .v2-photo-meta strong{ display:block; font-size:14.5px; color:var(--ink) }
.v2-photo-preview .v2-photo-meta span{ font-size:12.5px; color:var(--ink-3) }

/* Trait panel */
.v2-traits{
  background: var(--cream-warm);
  border:1.25px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}
.v2-traits-head{
  display:flex; align-items:center; gap:10px; margin-bottom:14px;
}
.v2-traits-head .v2-ic{
  width:28px; height:28px; border-radius:8px;
  background:var(--teal); color:#fff;
  display:grid; place-items:center;
}
.v2-traits-head h3{ font-size:14px; letter-spacing:.01em }
.v2-traits-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px }
.v2-trait{ display:flex; flex-direction:column; gap:4px }
.v2-trait label{ font:700 11px var(--f-body); letter-spacing:.04em; text-transform:uppercase; color:var(--ink-3) }
.v2-trait .v2-input{ height:40px; font-size:14px }

/* ─── Step 3: Style picker ─── */
.v2-style-rail-wrap{ position:relative; margin: 4px -32px 0; padding: 4px 0 8px }
.v2-style-rail{
  display:flex; gap:14px; overflow-x:auto; padding: 8px 32px;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.v2-style-rail::-webkit-scrollbar{ display:none }
.v2-style-card{
  flex:0 0 160px;
  scroll-snap-align:start;
  cursor:pointer;
  display:flex; flex-direction:column;
  gap:8px;
  transition: transform .15s;
}
.v2-style-card:hover{ transform: translateY(-2px) }
.v2-style-thumb{
  aspect-ratio:1/1;
  border-radius: var(--radius);
  border:2px solid transparent;
  background: var(--cream-dark);
  position:relative; overflow:hidden;
  box-shadow: var(--shadow-xs);
  transition: border-color .15s, box-shadow .15s;
}
.v2-style-thumb .ph-label{
  position:absolute; left:8px; bottom:8px;
  font:700 9px var(--f-mono); letter-spacing:.04em;
  color:var(--cream); background: rgba(45,42,38,.5);
  padding:3px 6px; border-radius:4px;
  backdrop-filter:blur(6px);
}
.v2-style-card.selected .v2-style-thumb{
  border-color: var(--teal);
  box-shadow: 0 0 0 4px var(--teal-soft);
}
.v2-style-card.selected .v2-style-thumb::after{
  content:""; position:absolute; top:10px; right:10px;
  width:24px; height:24px; border-radius:50%;
  background:var(--teal) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2.5 6.5l2.5 2.5L9.5 3' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/12px no-repeat;
  box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.v2-style-name{
  font:700 13px var(--f-body); text-align:center;
  color:var(--ink);
}
.v2-style-name .v2-style-sub{ display:block; font:500 11.5px var(--f-body); color:var(--ink-3); margin-top:2px }
.v2-style-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:50%;
  background:var(--white); border:.5px solid var(--line);
  box-shadow: var(--shadow);
  display:grid; place-items:center;
  color:var(--ink-2);
  cursor:pointer;
  z-index:2;
}
.v2-style-arrow.left{ left:6px }
.v2-style-arrow.right{ right:6px }

/* ─── Voice picker ─── */
.v2-voice-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap:10px;
}
.v2-voice-card{
  display:flex; align-items:center; gap:12px;
  padding:12px;
  border:1.25px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
  cursor:pointer;
  transition:border-color .15s, background .15s;
}
.v2-voice-card.selected{
  border-color:var(--teal);
  background: var(--teal-tint);
}
.v2-voice-avatar{
  width:38px; height:38px; border-radius:50%;
  background:
    linear-gradient(135deg,
      color-mix(in oklab, var(--amber) 18%, var(--cream-dark)),
      color-mix(in oklab, var(--teal) 22%, var(--cream-dark)));
  display:grid; place-items:center;
  font:700 13px var(--f-display); color:var(--ink-2);
  flex-shrink:0;
}
.v2-voice-meta{ flex:1; min-width:0 }
.v2-voice-meta strong{ display:block; font-size:13.5px; color:var(--ink) }
.v2-voice-meta span{ font-size:11.5px; color:var(--ink-3) }
.v2-voice-play{
  width:30px; height:30px; border-radius:50%;
  border:.5px solid var(--line); background:var(--white);
  color:var(--teal-deep);
  display:grid; place-items:center;
  cursor:pointer; flex-shrink:0;
  font-size:11px;
}
.v2-voice-card.selected .v2-voice-play{ background:var(--teal); color:#fff; border-color:transparent }

/* Voice record */
.v2-voice-record{
  padding:24px; text-align:center;
  background: var(--cream-warm);
  border:1.25px solid var(--line);
  border-radius:var(--radius);
}
.v2-voice-record .sample{
  font-family:var(--f-display); font-style:italic;
  font-size:16px; color:var(--ink); margin-bottom:18px;
  line-height:1.5;
}
.v2-rec-btn{
  display:inline-flex; align-items:center; gap:10px;
  height:48px; padding:0 22px;
  border-radius:999px;
  background: var(--danger); color:#fff;
  font:800 14px var(--f-body); border:0; cursor:pointer;
  box-shadow: 0 8px 18px -8px rgba(199,85,63,.55);
}
.v2-rec-btn .v2-rec-dot{
  width:10px; height:10px; border-radius:50%; background:#fff;
  box-shadow:0 0 0 0 rgba(255,255,255,.7);
  animation: v2-pulse 1.4s infinite;
}
@keyframes v2-pulse{
  0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}
  70%{box-shadow:0 0 0 10px rgba(255,255,255,0)}
}
.v2-rec-timer{
  margin-top:14px; font:700 28px var(--f-display);
  color:var(--ink); font-variant-numeric: tabular-nums;
}

/* ─── Step 5: Synopsis + Chat ─── */
.v2-synopsis-card{
  padding:24px;
  border-radius:var(--radius);
  background: linear-gradient(180deg, var(--cream-warm), var(--cream));
  border:1.25px solid var(--line);
}
.v2-synopsis-card .v2-syn-title{
  font-family:var(--f-display); font-weight:700;
  font-size:26px; line-height:1.15; color:var(--ink);
  text-wrap:balance;
}
.v2-synopsis-card .v2-syn-sub{
  font-family:var(--f-display); font-style:italic;
  color:var(--amber-deep); font-size:15px; margin-top:6px;
}
.v2-synopsis-card .v2-syn-body{
  margin-top:14px; color:var(--ink-2); font-size:14.5px; line-height:1.6;
  max-width:56ch;
}
.v2-syn-scenes{
  margin-top:18px; padding-top:18px;
  border-top:.5px solid var(--line);
  display:grid; gap:8px;
}
.v2-syn-scene{
  display:flex; gap:10px; align-items:flex-start;
  font-size:13.5px; color:var(--ink-2); line-height:1.5;
}
.v2-syn-scene .v2-scene-n{
  font:700 11px var(--f-mono);
  width:22px; height:22px;
  border-radius:6px;
  background: var(--teal-soft); color: var(--teal-deep);
  display:grid; place-items:center; flex-shrink:0;
  margin-top:1px;
}
.v2-chat{
  margin-top:20px;
  display:flex; flex-direction:column; gap:10px;
}
.v2-chat-msg{ display:flex; gap:10px; align-items:flex-end; max-width:85% }
.v2-chat-msg.from-bot{ align-self:flex-start }
.v2-chat-msg.from-user{ align-self:flex-end; flex-direction:row-reverse }
.v2-chat-av{
  width:30px; height:30px; border-radius:50%;
  background: var(--teal); color:#fff;
  display:grid; place-items:center;
  font:700 12px var(--f-display); flex-shrink:0;
}
.v2-chat-msg.from-user .v2-chat-av{ background:var(--amber); color:#fff }
.v2-chat-bubble{
  padding:11px 14px; border-radius:14px;
  font-size:14px; line-height:1.4;
  background:var(--cream-warm); color:var(--ink);
  border:.5px solid var(--line-soft);
}
.v2-chat-msg.from-user .v2-chat-bubble{
  background:var(--teal); color:#fff; border-color:transparent;
}
.v2-chat-input{
  margin-top:14px;
  display:flex; gap:8px; align-items:center;
  border:1.25px solid var(--line);
  border-radius:999px;
  padding:6px 6px 6px 16px;
  background:var(--white);
}
.v2-chat-input input{
  flex:1; border:0; outline:none; background:transparent;
  font-size:14px; height:36px;
}
.v2-chat-send{
  height:36px; padding:0 16px; border-radius:999px;
  background: var(--teal); color:#fff;
  border:0; cursor:pointer; font:800 13.5px var(--f-body);
}

/* Loading state */
.v2-loading{
  padding:60px 24px; text-align:center;
}
.v2-spinner{
  width:48px; height:48px; margin:0 auto 18px;
  border-radius:50%;
  border:3px solid color-mix(in oklab, var(--teal) 18%, transparent);
  border-top-color: var(--teal);
  animation: v2-spin 1.1s linear infinite;
}
@keyframes v2-spin{ to{ transform: rotate(360deg) } }
.v2-loading p{ font-family:var(--f-display); font-style:italic; font-size:18px; color:var(--ink-2); margin-top:6px }
.v2-loading .sub{ font-family:var(--f-body); font-style:normal; font-size:13px; color:var(--ink-3); margin-top:6px }

/* ─── Step 6: Payment ─── */
.v2-order{
  padding:20px;
  border-radius:var(--radius);
  background: var(--cream-warm);
  border:1.25px solid var(--line);
}
.v2-order-row{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:8px 0;
  font-size:14px;
  color:var(--ink-2);
}
.v2-order-row.is-total{
  margin-top:6px; padding-top:14px;
  border-top:.5px solid var(--line);
  font-size:16px; color:var(--ink); font-weight:700;
}
.v2-order-row .v2-amt{ font-family:var(--f-display); font-size:15px; color:var(--ink); font-weight:600 }
.v2-order-row.is-total .v2-amt{ font-size:28px; line-height:1; color:var(--ink) }
.v2-order-row .v2-amt-strike{ text-decoration:line-through; color:var(--ink-4); margin-right:8px; font-size:14px; font-weight:500 }
.v2-order-row .v2-amt.success{ color:var(--success) }
.v2-order-row .v2-amt.muted{ color:var(--ink-3); font-style:italic; font-size:13.5px; font-family:var(--f-body); font-weight:500 }
.v2-order-fine{ font-size:12px; color:var(--ink-3); margin-top:10px; padding-top:10px; border-top:.5px solid var(--line) }

.v2-delivery{
  display:flex; align-items:center; gap:8px;
  font-size:13px; color:var(--ink-2);
  padding: 10px 14px;
  background: var(--teal-tint);
  border-radius:var(--radius-sm);
  border:.5px solid color-mix(in oklab, var(--teal) 18%, transparent);
}
.v2-delivery .v2-ic{
  width:22px; height:22px; border-radius:50%;
  background:var(--teal); color:#fff;
  display:grid; place-items:center; flex-shrink:0;
}

/* Payment method tabs */
.v2-pay-tabs{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:8px;
}
.v2-pay-tab{
  display:flex; flex-direction:column; gap:4px;
  padding:14px 12px;
  border:1.5px solid var(--line);
  border-radius:var(--radius);
  background:var(--white);
  cursor:pointer;
  text-align:left;
  transition: border-color .15s, background .15s;
  position:relative;
}
.v2-pay-tab:hover{ border-color: color-mix(in oklab, var(--teal) 30%, var(--line)) }
.v2-pay-tab.active{
  border-color: var(--teal);
  background: var(--teal-tint);
  box-shadow: 0 0 0 4px var(--teal-soft);
}
.v2-pay-tab .v2-pay-ic{
  width:28px; height:28px; border-radius:8px;
  background: var(--cream-dark); color:var(--ink-2);
  display:grid; place-items:center;
  margin-bottom:4px;
}
.v2-pay-tab.active .v2-pay-ic{ background:var(--teal); color:#fff }
.v2-pay-tab .v2-pay-name{ font-weight:800; font-size:13.5px; color:var(--ink) }
.v2-pay-tab .v2-pay-sub{ font-size:11.5px; color:var(--ink-3); font-weight:600 }
.v2-pay-tab.active .v2-pay-sub{ color:var(--teal-deep) }
.v2-pay-tab .v2-pay-badge{
  position:absolute; top:-7px; right:10px;
  background: var(--amber); color:#fff;
  font:800 10px var(--f-body); letter-spacing:.06em;
  padding:3px 7px; border-radius:99px;
}

/* Guarantee */
.v2-guarantee{
  display:flex; align-items:center; gap:10px;
  font-size:13px; color:var(--ink-2);
}
.v2-guarantee .v2-ic{
  width:22px; height:22px; border-radius:50%;
  background:var(--success-bg); color:var(--success);
  display:grid; place-items:center; flex-shrink:0;
}

/* Pay big button */
.v2-paybtn{
  width:100%; height:62px;
  font:800 17px var(--f-body); letter-spacing:.005em;
  border:0; border-radius:var(--radius);
  background: linear-gradient(135deg, #D4915E 0%, #C4935A 60%, #E8C4A0 120%);
  color:#3a2818;
  cursor:pointer;
  box-shadow: 0 4px 8px rgba(196,147,90,.18), 0 20px 36px -14px rgba(196,147,90,.6);
  display:flex; align-items:center; justify-content:center; gap:10px;
}
.v2-paybtn .v2-lock{ font-size:14px }

/* PIX modal */
.v2-modal{
  position:relative;
  width: 460px; max-width:100%;
  background: var(--cream);
  border-radius: var(--radius-xl);
  padding:32px;
  box-shadow: 0 32px 60px -20px rgba(45,42,38,.4), 0 0 0 1px var(--line-soft);
}
.v2-modal-x{
  position:absolute; top:18px; right:18px;
  width:34px; height:34px; border-radius:50%;
  background:var(--cream-dark); border:0;
  color:var(--ink-2); cursor:pointer;
  display:grid; place-items:center; font-size:16px;
}
.v2-modal h2{ text-align:center; margin-bottom:6px }
.v2-modal .sub{ text-align:center; color:var(--ink-2); font-size:14px; margin-bottom:22px }
.v2-qr{
  width:220px; height:220px; border-radius:var(--radius);
  margin: 0 auto 18px;
  background:var(--white);
  border:3px solid var(--amber);
  padding:10px;
  display:grid; place-items:center;
  position:relative;
}
.v2-qr-grid{
  width:100%; height:100%;
  background:
    radial-gradient(circle at 10% 10%, var(--ink) 6%, transparent 7%) 0 0/22px 22px,
    radial-gradient(circle at 90% 90%, var(--ink) 6%, transparent 7%) 0 0/22px 22px,
    repeating-linear-gradient(90deg, var(--ink) 0 4px, transparent 4px 8px),
    repeating-linear-gradient(0deg, var(--ink) 0 4px, transparent 4px 8px);
  background-color: var(--white);
  border-radius:6px;
  opacity:.95;
}
.v2-copybox{
  padding:10px 12px;
  background: var(--cream-warm);
  border:1.25px solid var(--line);
  border-radius:var(--radius-sm);
  font: 500 11.5px var(--f-mono);
  color:var(--ink-2);
  word-break:break-all;
  margin-bottom:10px;
  max-height:80px; overflow:auto;
}
.v2-modal-wait{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin-top:14px;
  font-size:13px; color:var(--ink-2);
}
.v2-modal-wait .v2-spinner-sm{
  width:16px; height:16px; border-radius:50%;
  border:2px solid color-mix(in oklab, var(--teal) 16%, transparent);
  border-top-color:var(--teal);
  animation: v2-spin 1s linear infinite;
}

/* ─── Mobile shell ───
   Em produção não há JS que adicione .is-mobile ao .v2; aplicamos por @media.
   Mantemos os seletores .v2.is-mobile para compat com o design canvas (artboards forçadas). */
.v2.is-mobile .v2-shell{ padding: 20px 16px 100px }
.v2.is-mobile .v2-card{ padding:22px 18px; border-radius:var(--radius) }
.v2.is-mobile .v2-row{ grid-template-columns:1fr }
.v2.is-mobile .v2-row-3{ grid-template-columns:1fr }
.v2.is-mobile h1{ font-size:24px }
.v2.is-mobile h2{ font-size:18px }
.v2.is-mobile .v2-steps{ gap:0 }
.v2.is-mobile .v2-step{ padding:6px 10px 6px 6px; font-size:11.5px }
.v2.is-mobile .v2-step .v2-step-label{ display:none }
.v2.is-mobile .v2-step.active .v2-step-label{ display:inline }
.v2.is-mobile .v2-step-line{ flex:0 0 6px }
.v2.is-mobile .v2-traits-grid{ grid-template-columns:1fr }
.v2.is-mobile .v2-voice-grid{ grid-template-columns:1fr }
.v2.is-mobile .v2-pay-tabs{ grid-template-columns:1fr; gap:6px }
.v2.is-mobile .v2-pay-tab{ flex-direction:row; align-items:center; gap:10px; padding:12px 14px }
.v2.is-mobile .v2-pay-tab .v2-pay-ic{ margin-bottom:0 }
.v2.is-mobile .v2-pay-tab .v2-pay-badge{ top:8px; right:10px }
.v2.is-mobile .v2-style-rail-wrap{ margin: 4px -18px 0 }
.v2.is-mobile .v2-style-rail{ padding: 8px 18px }
.v2.is-mobile .v2-style-card{ flex:0 0 56vw; max-width:200px }

@media (max-width: 768px){
  .v2 .v2-shell{ padding: 20px 16px 100px }
  .v2 .v2-card{ padding:22px 18px; border-radius:var(--radius) }
  .v2 .v2-row{ grid-template-columns:1fr }
  .v2 .v2-row-3{ grid-template-columns:1fr }
  .v2 h1{ font-size:24px }
  .v2 h2{ font-size:18px }
  .v2 .v2-steps{ gap:0 }
  .v2 .v2-step{ padding:6px 10px 6px 6px; font-size:11.5px }
  .v2 .v2-step .v2-step-label{ display:none }
  .v2 .v2-step.active .v2-step-label{ display:inline }
  .v2 .v2-step-line{ flex:0 0 6px }
  .v2 .v2-traits-grid{ grid-template-columns:1fr }
  .v2 .v2-voice-grid{ grid-template-columns:1fr }
  .v2 .v2-pay-tabs{ grid-template-columns:1fr; gap:6px }
  .v2 .v2-pay-tab{ flex-direction:row; align-items:center; gap:10px; padding:12px 14px }
  .v2 .v2-pay-tab .v2-pay-ic{ margin-bottom:0 }
  .v2 .v2-pay-tab .v2-pay-badge{ top:8px; right:10px }
  .v2 .v2-style-rail-wrap{ margin: 4px -18px 0 }
  .v2 .v2-style-rail{ padding: 8px 18px }
  .v2 .v2-style-card{ flex:0 0 56vw; max-width:200px }
  /* extras: ajustes que estavam faltando no design canvas */
  .v2 .v2-header{ margin-bottom:20px }
  .v2 .v2-header p{ font-size:14px }
  .v2 .v2-card .v2-card-head h2{ margin-bottom:4px }
  .v2 .v2-card .v2-card-head p{ font-size:13.5px }
  .v2 .v2-callout{ padding:14px 16px; gap:12px }
  .v2 .v2-callout .ic{ width:28px; height:28px; font-size:13px }
  .v2 .v2-callout-title{ font-size:14px }
  .v2 .v2-callout-body{ font-size:13px }
  .v2 .v2-dropzone{ padding:22px 18px }
  .v2 .v2-photo-preview{ grid-template-columns: 72px 1fr; gap:12px; padding:14px }
  .v2 .v2-photo-preview .v2-photo-thumb{ width:72px; height:72px }
  .v2 .v2-photo-tips{ gap:12px; font-size:11.5px }
  .v2 .v2-traits{ padding:16px }
  .v2 .v2-radio-row{ gap:8px }
  .v2 .v2-radio{ padding:9px 14px; font-size:13.5px }
  .v2 .v2-radio-card{ padding:12px 14px }
  .v2 .v2-synopsis-card{ padding:18px }
  .v2 .v2-synopsis-card .v2-syn-title{ font-size:22px }
  .v2 .v2-synopsis-card .v2-syn-sub{ font-size:14px }
  .v2 .v2-synopsis-card .v2-syn-body{ font-size:14px }
  .v2 .v2-order{ padding:16px }
  .v2 .v2-order-row.is-total .v2-amt{ font-size:24px }
  .v2 .v2-paybtn{ height:58px; font-size:16px }
  .v2 .v2-btn-lg{ height:52px; font-size:15px }
  .v2 .v2-btn{ height:46px }
  .v2 .v2-modal{ padding:24px 20px; border-radius:var(--radius-lg) }
  .v2 .v2-modal h2{ font-size:20px }
  .v2 .v2-qr{ width:200px; height:200px }
}

/* Telas muito estreitas (≤360px): apertar ainda mais */
@media (max-width: 360px){
  .v2 .v2-shell{ padding: 16px 12px 96px }
  .v2 .v2-card{ padding:18px 14px }
  .v2 h1{ font-size:22px }
  .v2 .v2-step{ padding:5px 8px 5px 5px; font-size:11px }
  .v2 .v2-step-line{ flex:0 0 4px }
  .v2 .v2-pages-row{ gap:8px }
  .v2 .v2-paybtn{ height:54px; font-size:15px }
  .v2 .v2-photo-preview{ grid-template-columns:1fr; text-align:center }
  .v2 .v2-photo-preview .v2-photo-thumb{ margin:0 auto }
}

.v2-mobile-nav{
  position:absolute; left:0; right:0; bottom:0;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: rgba(255,248,240,.92);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border-top:.5px solid var(--line);
  display:flex; gap:10px; align-items:center;
}
.v2-mobile-nav .v2-btn-ghost{ flex:0 0 auto }
.v2-mobile-nav .v2-btn-primary{ flex:1 }