/* ============================================================
   KINGDOM Custom Design — flow layout
   ============================================================ */
.cd-main { min-height: 70vh; padding: 0 0 20px; }

/* ============================================================
   Save & Compare My Designs
   ============================================================ */
.concept-save { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; border: none; background: rgba(255,255,255,0.9); box-shadow: var(--shadow-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .2s; z-index: 2; }
.concept-save:hover { background: #fff; transform: scale(1.08); }
.concept-save svg { width: 19px; height: 19px; }
.concept-save.on { background: rgba(200,161,90,0.15); }

.saved-bar { position: fixed; right: 26px; bottom: 26px; z-index: 120; display: flex; align-items: center; gap: 10px; background: var(--emerald); color: var(--ivory); border: 1px solid var(--gold); border-radius: 44px; padding: 13px 20px; cursor: pointer; box-shadow: var(--shadow-lg); transition: .2s; font-family: var(--sans); }
.saved-bar:hover { background: var(--emerald-deep); transform: translateY(-2px); }
.saved-bar svg { width: 19px; height: 19px; }
.saved-bar-label { font-weight: 700; font-size: 13px; letter-spacing: 0.04em; }
.saved-bar-count { background: var(--gold); color: var(--emerald); font-weight: 800; font-size: 12px; min-width: 22px; height: 22px; border-radius: 11px; display: flex; align-items: center; justify-content: center; padding: 0 6px; }

.saved-overlay { position: fixed; inset: 0; background: rgba(15,31,27,0.55); backdrop-filter: blur(5px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; animation: kmfade .2s ease; }
.saved-panel { background: var(--white); border-radius: 16px; max-width: 880px; width: 100%; max-height: 88vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); overflow: hidden; }
.saved-head { display: flex; align-items: center; justify-content: space-between; padding: 24px 28px; border-bottom: 1px solid var(--line); }
.saved-head h3 { display: flex; align-items: center; gap: 11px; font-size: 24px; color: var(--gold-deep); }
.saved-head h3 svg { width: 22px; height: 22px; }
.saved-head .sp-count { background: var(--ivory-warm); border: 1px solid var(--line-gold); color: var(--gold-deep); font-family: var(--sans); font-size: 13px; font-weight: 700; border-radius: 40px; padding: 2px 11px; }
.saved-close { background: none; border: none; cursor: pointer; width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: .2s; }
.saved-close:hover { background: var(--ivory-warm); }
.saved-close svg { width: 20px; height: 20px; }
.saved-body { padding: 22px 28px 28px; overflow-y: auto; }
.saved-empty { text-align: center; padding: 60px 20px; color: var(--charcoal); }
.saved-empty svg { width: 40px; height: 40px; stroke: var(--gold-soft); margin-bottom: 16px; }
.saved-empty p { max-width: 320px; margin: 0 auto; line-height: 1.6; }

.sv-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.sv-hint { font-size: 13px; color: var(--charcoal); }
/* Save & Claim card */
.claim-card { border: 1px solid var(--line-gold); background: var(--ivory-warm); border-radius: 11px; padding: 18px 20px; margin-bottom: 16px; }
.claim-card.offer { background: linear-gradient(135deg, #fbf4e6 0%, #f3e7cf 100%); border-color: var(--gold); }
.offer-badge { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--gold); }
.offer-badge svg { width: 15px; height: 15px; stroke: #fff; fill: #fff; }
.claim-card.done { display: flex; align-items: center; gap: 10px; color: var(--gold-deep); font-weight: 700; font-size: 14px; background: var(--ivory-warm); border-color: var(--line-gold); }
.claim-card.done svg { width: 18px; height: 18px; fill: var(--gold); stroke: var(--gold); }
.claim-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 14px; }
.claim-title { display: flex; align-items: center; gap: 9px; font-family: var(--serif); font-size: 19px; color: var(--gold-deep); }
.claim-sub { font-size: 13px; color: var(--charcoal); line-height: 1.5; margin-top: 6px; max-width: 470px; }
.claim-skip { background: none; border: none; cursor: pointer; font-family: var(--sans); font-weight: 700; font-size: 12px; color: var(--charcoal); white-space: nowrap; transition: color .2s; }
.claim-skip:hover { color: var(--gold-deep); }
.claim-row { display: flex; gap: 10px; }
.claim-row input { flex: 1; min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; font-family: var(--sans); font-size: 14px; color: var(--ink); background: #fff; outline: none; transition: border .2s; }
.claim-row input:focus { border-color: var(--gold); }
.claim-btn { white-space: nowrap; padding: 12px 18px; font-size: 12px; }

/* Discuss on WhatsApp — primary "don't lose it / talk now" action */
.wa-consult-btn { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: var(--emerald); color: var(--ivory); border: none; border-radius: 11px; padding: 16px 20px; cursor: pointer; margin-bottom: 22px; transition: .2s; }
.wa-consult-btn:hover { background: var(--emerald-deep); transform: translateY(-1px); }
.wa-consult-btn > svg:first-child { width: 24px; height: 24px; stroke: var(--gold-soft); fill: none; flex-shrink: 0; }
.wa-consult-btn span { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.wa-consult-btn b { font-family: var(--sans); font-weight: 700; font-size: 15px; letter-spacing: 0.02em; }
.wa-consult-btn small { font-size: 12.5px; color: rgba(247,242,236,0.65); }
.wa-consult-arrow { width: 20px; height: 20px; stroke: var(--gold-soft); fill: none; flex-shrink: 0; }
@media (max-width: 600px) { .claim-row { flex-direction: column; } .claim-head { flex-direction: column; } }
.sv-tools { display: flex; align-items: center; gap: 12px; }
.sv-cmp-btn { padding: 11px 18px; font-size: 12px; }
.sv-cmp-btn:disabled { opacity: .45; cursor: default; }

.sv-list { display: flex; flex-direction: column; gap: 14px; }
.sv-card { display: grid; grid-template-columns: auto 96px 1fr auto; gap: 16px; align-items: center; border: 1px solid var(--line); border-radius: 11px; padding: 14px; transition: .2s; }
.sv-card.picked { border-color: var(--gold); background: rgba(200,161,90,0.05); box-shadow: inset 0 0 0 1px var(--gold); }
.sv-pick { position: relative; display: flex; align-items: center; cursor: pointer; }
.sv-pick input { position: absolute; opacity: 0; width: 22px; height: 22px; cursor: pointer; }
.sv-pick span { width: 22px; height: 22px; border: 1.5px solid var(--line-gold); border-radius: 6px; display: block; transition: .2s; position: relative; }
.sv-pick input:checked + span { background: var(--gold); border-color: var(--gold); }
.sv-pick input:checked + span::after { content: ""; position: absolute; left: 7px; top: 3px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.sv-thumb { width: 96px; height: 96px; border-radius: 9px; overflow: hidden; background: var(--ivory-warm); }
.sv-thumb img { width: 100%; height: 100%; object-fit: cover; }
.sv-noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.sv-noimg svg { width: 30px; height: 30px; stroke: var(--gold-soft); fill: none; }
.sv-info { min-width: 0; }
.sv-name { font-family: var(--serif); font-size: 20px; color: var(--gold-deep); }
.sv-meta { font-size: 13px; color: var(--charcoal); margin: 5px 0 12px; }
.sv-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sv-link { background: none; border: 1px solid var(--line); cursor: pointer; display: inline-flex; align-items: center; gap: 7px; font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: 0.03em; color: var(--gold-deep); padding: 8px 15px; border-radius: 999px; white-space: nowrap; transition: .18s; }
.sv-link svg { width: 15px; height: 15px; stroke: var(--gold); fill: none; stroke-width: 1.4; }
.sv-link:hover { color: var(--gold); border-color: var(--gold); background: rgba(200,161,90,0.07); }
.sv-link.danger { color: var(--charcoal); }
.sv-link.danger svg { stroke: var(--charcoal); }
.sv-link.danger:hover { color: #b04a3a; }
.sv-link.danger:hover svg { stroke: #b04a3a; }
/* delete — tidy: small, borderless icon grouped with the action links (not a floating box) */
.sv-trash { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: 6px; background: none; color: #c2bcb2; cursor: pointer; transition: .18s; }
.sv-trash svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.5; }
.sv-trash:hover { color: #b04a3a; background: rgba(176,74,58,0.09); }
.sv-discuss { display: inline-flex; align-items: center; gap: 8px; background: var(--emerald); color: var(--gold-soft); border: none; border-radius: 8px; padding: 12px 18px; cursor: pointer; font-family: var(--sans); font-weight: 700; font-size: 12.5px; letter-spacing: 0.04em; white-space: nowrap; transition: .2s; align-self: center; }
.sv-discuss:hover { background: var(--emerald-deep); transform: translateY(-1px); }
.sv-discuss svg { width: 16px; height: 16px; stroke: var(--gold-soft); fill: none; }

.sv-back { background: none; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 700; font-size: 12.5px; color: var(--gold-deep); margin-bottom: 18px; padding: 0; }
.sv-back svg { width: 16px; height: 16px; stroke: var(--gold); fill: none; }
.sv-compare { display: grid; gap: 18px; }
.sv-compare-col { border: 1px solid var(--line); border-radius: 11px; padding: 16px; }
.sv-compare-img { width: 100%; height: 170px; border-radius: 8px; overflow: hidden; background: var(--ivory-warm); margin-bottom: 14px; }
.sv-compare-img img { width: 100%; height: 100%; object-fit: cover; }
.sv-compare-col h4 { font-family: var(--serif); font-size: 19px; color: var(--gold-deep); margin-bottom: 12px; }
.sv-row { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; padding: 5px 0; border-bottom: 1px solid var(--line); }
.sv-row span { color: var(--charcoal); }
.sv-row b { color: var(--ink); font-weight: 600; text-align: right; }
.sv-row.sv-budget { border-bottom: none; margin-top: 6px; }
.sv-row.sv-budget b { color: var(--gold-deep); }
.sv-couple { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sv-couple-h { font-family: var(--sans); font-weight: 700; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 6px; }
.sv-refine { margin-top: 16px; padding: 12px; font-size: 12px; }

@media (max-width: 640px) {
  .sv-card { grid-template-columns: 1fr; gap: 11px; position: relative; padding: 12px; }
  .sv-pick { position: absolute; top: 19px; left: 19px; z-index: 2; }
  .sv-pick span { background: rgba(255,255,255,.92); }
  .sv-thumb { width: 100%; height: 188px; }
  .sv-name { font-size: 19px; line-height: 1.2; }
  .sv-meta { margin: 4px 0 12px; }
  .sv-actions { flex-direction: column; align-items: stretch; gap: 8px; }
  .sv-link, .kg-share-link { width: 100%; justify-content: center; }
  .sv-trash { align-self: flex-end; margin-top: 2px; }
  .sv-discuss { grid-column: 1 / -1; justify-content: center; margin-top: 4px; width: 100%; }
  .saved-bar-label { display: none; }
  .saved-bar { right: 16px; bottom: 16px; padding: 13px; }
}

.cd-wrap { max-width: 1280px; margin: 0 auto; padding: 0 40px; }

/* ---- Step indicator ---- */
.stepper { background: var(--ivory); border-bottom: 1px solid var(--line); }
.stepper-inner { display: flex; align-items: center; gap: 10px; padding-top: 26px; padding-bottom: 26px; }
.stp { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.stp .dot {
  width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-weight: 700; font-size: 14px;
  border: 1px solid var(--line-gold); color: var(--charcoal);
  background: var(--beige-soft); flex-shrink: 0; transition: .3s;
}
.stp .stp-label { font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--charcoal); white-space: nowrap; transition: color .3s; }
.stp.active .dot { background: var(--gold); border-color: var(--gold); color: #fff; }
.stp.active .stp-label { color: var(--gold-deep); font-weight: 700; }
.stp.done .dot { background: var(--emerald); border-color: var(--emerald); color: var(--gold-soft); }
.stp.done .stp-label { color: var(--emerald); }
.stp.active { position: relative; }
.stp.active::after { content: ""; position: absolute; left: 52px; right: 0; bottom: -27px; height: 2px; background: var(--gold); }
.stp-line { flex: 1; height: 1px; border-top: 1px dashed var(--line-gold); min-width: 18px; opacity: .8; }
.stp.disabled { cursor: default; opacity: .9; }

/* ---- Step header ---- */
.cd-head { text-align: center; padding: 50px 0 36px; }
.cd-head .kicker { display:inline-flex; align-items:center; gap:16px; justify-content:center; flex-wrap: nowrap; max-width: 100%; }
.cd-head .kicker h1 { white-space: nowrap; }
.cd-head h1 { font-size: clamp(40px, 5vw, 66px); color: var(--gold-deep); line-height: 1.04; }
.cd-head .spark { width: 26px; height: 26px; stroke: var(--gold); fill: var(--gold); opacity:.85; }
.cd-head p { margin-top: 14px; color: var(--charcoal); font-size: 17px; }

/* ---- Card surface ---- */
.panel { background: var(--white); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-sm); }

/* ===========================================================
   STEP 1 — Tell Us Your Vision
   =========================================================== */
.s1-grid { display: grid; grid-template-columns: 1.35fr 0.9fr; gap: 32px; align-items: start; }
.s1-form { padding: 40px 40px 36px; }
.field { margin-bottom: 30px; }
.field:last-child { margin-bottom: 0; }
.field > .label { display: block; margin-bottom: 14px; }

/* type cards */
.type-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.type-card {
  border: 1px solid var(--line); border-radius: 8px; background: var(--ivory-warm);
  padding: 22px 10px 18px; text-align: center; cursor: pointer; position: relative;
  transition: .22s; display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.type-card:hover { border-color: var(--line-gold); background: #fff; }
.type-card svg.t-ico { width: 40px; height: 40px; stroke: var(--gold); stroke-width: 1.2; fill: none; }
.type-card .t-name { font-family: var(--sans); font-weight: 700; font-size: 14px; color: var(--ink); }
.type-card.sel { border-color: var(--gold); background: rgba(200,161,90,0.07); box-shadow: 0 0 0 1px var(--gold); }
.type-card .check { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; border-radius: 50%; background: var(--gold); display: none; align-items: center; justify-content: center; }
.type-card .check svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 2.4; fill: none; }
.type-card.sel .check { display: flex; }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: 11px; }
.chip {
  border: 1px solid var(--line); background: var(--white); border-radius: 40px;
  padding: 11px 22px; font-family: var(--sans); font-weight: 600; font-size: 14px;
  color: var(--ink); cursor: pointer; transition: .2s; white-space: nowrap;
}
.chip:hover { border-color: var(--line-gold); }
.chip.sel { border-color: var(--gold); color: var(--gold-deep); background: rgba(200,161,90,0.07); box-shadow: inset 0 0 0 1px var(--gold); font-weight: 700; }

/* textarea */
.idea-wrap { position: relative; }
.idea {
  width: 100%; border: 1px solid var(--line); border-radius: 8px; background: var(--ivory-warm);
  padding: 18px 18px 30px; font-family: var(--sans); font-size: 15.5px; color: var(--ink);
  resize: vertical; min-height: 120px; line-height: 1.6; outline: none; transition: border .2s;
}
.idea:focus { border-color: var(--gold); background: #fff; }
.idea::placeholder { color: rgba(90,86,84,0.5); }
.idea-count { position: absolute; right: 14px; bottom: 10px; font-size: 12px; color: var(--charcoal); }

.req-note { font-size: 12.5px; color: #b04a3a; margin-top: 10px; display: none; }
.req-note.show { display: block; }

/* right rail */
.s1-side { padding: 0; overflow: hidden; }
.s1-side image-slot { width: 100%; height: 320px; }
.s1-side .side-body { padding: 28px 30px 32px; }
.s1-side h3 { display:flex; gap:10px; align-items:flex-start; font-size: 25px; color: var(--gold-deep); line-height: 1.15; }
.s1-side h3 svg { width: 22px; height: 22px; stroke: var(--gold); fill: var(--gold); flex-shrink:0; margin-top:4px; }
.s1-side .side-copy { margin-top: 14px; color: var(--charcoal); font-size: 15px; }
.s1-side .side-bullets { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 15px; }
.s1-side .side-bullets div { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--ink); }
.s1-side .side-bullets svg { width: 20px; height: 20px; stroke: var(--gold); stroke-width: 1.3; fill: none; flex-shrink: 0; }

.gen-btn { margin-top: 34px; width: 100%; padding: 19px; font-size: 14px; }
.btn-spin { width: 16px; height: 16px; border: 2px solid rgba(216,189,138,0.4); border-top-color: var(--gold-soft); border-radius: 50%; animation: spin .8s linear infinite; display: inline-block; }
.label .opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--charcoal); font-size: 11px; }

/* reference upload */
.ref-drop { width: 100%; border: 1px dashed var(--line-gold); background: var(--ivory-warm); border-radius: 10px; padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 7px; cursor: pointer; transition: .2s; }
.ref-drop:hover { border-color: var(--gold); background: #fff; }
.ref-ico { width: 30px; height: 30px; stroke: var(--gold); stroke-width: 1.3; fill: none; margin-bottom: 3px; }
.ref-cta { font-family: var(--sans); font-weight: 700; font-size: 14px; color: var(--emerald); }
.ref-hint { font-size: 12.5px; color: var(--charcoal); }
.ref-preview { display: flex; gap: 16px; border: 1px solid var(--line-gold); background: var(--ivory-warm); border-radius: 10px; padding: 14px; align-items: center; }
.ref-preview img { width: 92px; height: 92px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.ref-meta { display: flex; flex-direction: column; gap: 5px; }
.ref-name { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 700; font-size: 13.5px; color: var(--emerald); }
.ref-meta p { font-size: 12.5px; color: var(--charcoal); line-height: 1.45; }
.ref-remove { align-self: flex-start; margin-top: 4px; background: none; border: none; color: var(--gold-deep); font-family: var(--sans); font-weight: 700; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer; padding: 0; text-decoration: underline; text-underline-offset: 2px; }
.ref-remove:hover { color: var(--gold); }

/* ===========================================================
   STEP 1 (chat) — Conversational intake
   =========================================================== */
/* intro: headline + subhead + progress */
.s1-intro { max-width: 880px; margin: 0 auto 30px; text-align: center; }
.s1-headline { font-size: clamp(26px, 3vw, 40px); line-height: 1.12; color: var(--gold-deep); }
.s1-subhead { margin: 14px auto 0; max-width: 680px; color: var(--charcoal); font-size: 15px; line-height: 1.65; }
.s1-progress { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 26px; flex-wrap: wrap; }
.s1-prog-step { display: flex; align-items: center; gap: 9px; }
.s1-prog-dot { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--line-gold); background: var(--white); display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 700; font-size: 12px; color: var(--charcoal); transition: .3s; }
.s1-prog-label { font-family: var(--sans); font-weight: 700; font-size: 11.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--charcoal); transition: .3s; }
.s1-prog-step.done .s1-prog-dot { background: var(--emerald); border-color: var(--emerald); color: var(--gold-soft); }
.s1-prog-step.done .s1-prog-label { color: var(--emerald); }
.s1-prog-line { width: 30px; height: 1px; border-top: 1px dashed var(--line-gold); }

/* consultant note + budget-fit inside the chat */
.consult-note { align-self: stretch; background: linear-gradient(180deg, #fbf6ee, #f6efe2); border: 1px solid var(--line-gold); border-left: 3px solid var(--gold); border-radius: 10px; padding: 14px 16px; }
.cn-head { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 8px; }
.cn-head svg { width: 15px; height: 15px; stroke: var(--gold); fill: var(--gold); }
.cn-body { font-size: 13.5px; color: var(--ink); line-height: 1.55; }
.cn-fit { margin-left: auto; font-size: 10px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: 40px; }
.fit-good { background: rgba(31,138,91,0.12); color: #1f8a5b; border: 1px solid rgba(31,138,91,0.3); }
.fit-stretch { background: rgba(200,161,90,0.14); color: var(--gold-deep); border: 1px solid var(--line-gold); }
.fit-adjust { background: rgba(176,74,58,0.10); color: #b04a3a; border: 1px solid rgba(176,74,58,0.28); }
.fit-flexible { background: rgba(90,86,84,0.08); color: var(--charcoal); border: 1px solid var(--line); }

/* live filling brief card (right rail) */
.live-brief { margin-top: 14px; display: flex; flex-direction: column; gap: 2px; }
.lb-row { display: grid; grid-template-columns: 20px auto 1fr; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); animation: lbIn .35s ease; }
.lb-row:last-of-type { border-bottom: none; }
.lb-row svg { width: 17px; height: 17px; stroke: var(--gold); stroke-width: 1.3; fill: none; }
.lb-k { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--charcoal); }
.lb-v { font-size: 13.5px; color: var(--ink); font-weight: 600; text-align: right; }
.lb-rec { display: flex; gap: 9px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; background: var(--ivory-warm); border: 1px solid var(--line-gold); border-radius: 9px; font-size: 12.5px; color: var(--ink); line-height: 1.5; animation: lbIn .35s ease; }
.lb-rec svg { width: 15px; height: 15px; stroke: var(--gold); fill: var(--gold); flex-shrink: 0; margin-top: 2px; }
@keyframes lbIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.s1chat-grid { display: grid; grid-template-columns: 1.35fr 0.9fr; gap: 32px; align-items: stretch; }
.s1chat { display: flex; flex-direction: column; padding: 0; overflow: hidden; min-height: 560px; }
.s1chat-scroll { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 30px 32px; display: flex; flex-direction: column; gap: 18px; max-height: 520px; }
.s1chat-scroll .msg { max-width: 92%; }
.s1chat-scroll .bubble { font-size: 15px; }
.chat-ref-img { width: 180px; max-width: 100%; height: auto; border-radius: 8px; margin-top: 4px; display: block; }
.s1chat-input { border-top: 1px solid var(--line); padding: 20px 24px; background: var(--ivory-warm); }

.chat-replies { display: flex; flex-wrap: wrap; gap: 11px; }
.reply-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-gold); background: var(--white); border-radius: 40px; padding: 12px 20px; font-family: var(--sans); font-weight: 600; font-size: 14px; color: var(--ink); cursor: pointer; transition: .18s; }
.reply-chip:hover { border-color: var(--gold); background: rgba(200,161,90,0.07); transform: translateY(-1px); }

/* Budget — draggable dual-thumb range meter */
.budget-slider { align-self: stretch; max-width: 460px; }
.bs-val { font-family: var(--serif); font-size: 24px; color: var(--gold-deep); margin-bottom: 18px; }
.bs-track { position: relative; height: 26px; display: flex; align-items: center; }
.bs-track::before { content: ""; position: absolute; left: 0; right: 0; height: 6px; border-radius: 6px; background: var(--ivory-warm); border: 1px solid var(--line-gold); }
.bs-fill { position: absolute; height: 6px; border-radius: 6px; background: var(--gold); }
.bs-range { -webkit-appearance: none; appearance: none; position: absolute; left: 0; width: 100%; height: 26px; margin: 0; background: transparent; pointer-events: none; }
.bs-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--white); border: 2px solid var(--gold); box-shadow: 0 2px 7px rgba(15,31,27,0.22); cursor: grab; pointer-events: auto; transition: transform .12s ease; }
.bs-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }
.bs-range::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--white); border: 2px solid var(--gold); box-shadow: 0 2px 7px rgba(15,31,27,0.22); cursor: grab; pointer-events: auto; }
.bs-scale { display: flex; justify-content: space-between; margin-top: 10px; font-family: var(--sans); font-size: 11.5px; color: var(--charcoal); letter-spacing: 0.03em; }
.bs-actions { display: flex; flex-wrap: wrap; gap: 11px; margin-top: 18px; }
/* Rich option chips: visual glyph + label + plain-language description */
.chat-replies.opts-rich { flex-direction: column; align-items: stretch; gap: 9px; }
.reply-chip.rich { width: 100%; display: flex; align-items: center; gap: 13px; text-align: left; border-radius: 12px; padding: 11px 14px; text-transform: none; letter-spacing: 0; }
.reply-chip.rich .rc-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.reply-chip.rich .rc-label { display: flex; align-items: center; gap: 6px; font-family: var(--sans); font-weight: 700; font-size: 14px; color: var(--ink); }
.reply-chip.rich .rc-desc { font-size: 12px; line-height: 1.4; color: var(--charcoal); font-weight: 400; }
.reply-chip.rich.sel { border-color: var(--gold); background: rgba(200,161,90,0.09); }
.opt-vis { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.opt-vis svg { width: 30px; height: 30px; display: block; }
.opt-vis.swatch { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(15,31,27,0.2); box-shadow: inset 0 -2px 4px rgba(0,0,0,0.12), inset 0 2px 3px rgba(255,255,255,0.5); }
.reply-chip.strong { background: var(--emerald); color: var(--gold-soft); border-color: var(--emerald); }
.reply-chip.strong svg { stroke: var(--gold-soft) !important; }
.reply-chip.strong:hover { background: var(--emerald-deep); }
.reply-chip.sel { border-color: var(--gold); background: rgba(200,161,90,0.10); box-shadow: inset 0 0 0 1px var(--gold); color: var(--gold-deep); font-weight: 700; }
.notes-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 2px; }

/* notes step — closing panel */
.notes-panel { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; border: 1px solid var(--line-gold); border-radius: 12px; background: #fff; padding: 22px 24px; }
.np-title { font-family: var(--serif); font-size: 20px; color: var(--emerald); display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.np-opt { font-family: var(--sans); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); background: rgba(200,161,90,0.10); border: 1px solid var(--line-gold); border-radius: 40px; padding: 3px 10px; }
.np-ta { width: 100%; border: 1px solid var(--line); border-radius: 9px; background: var(--ivory-warm); padding: 14px 16px; font-family: var(--sans); font-size: 14px; color: var(--ink); resize: vertical; min-height: 92px; line-height: 1.55; outline: none; box-sizing: border-box; transition: border .2s, background .2s; }
.np-ta:focus { border-color: var(--gold); background: #fff; }
.np-chips { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.np-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line); background: #fff; border-radius: 40px; padding: 9px 14px; font-family: var(--sans); font-weight: 600; font-size: 12.5px; color: var(--ink); cursor: pointer; transition: .18s; }
.np-chip:hover { border-color: var(--gold); background: rgba(200,161,90,0.06); }
.np-chip svg { width: 15px; height: 15px; stroke: var(--gold); stroke-width: 1.4; fill: none; }
.np-right { border-left: 1px solid var(--line); padding-left: 24px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.np-cta { width: 100%; padding: 16px; font-size: 13px; }
.np-review { display: flex; align-items: flex-start; gap: 9px; font-size: 12.5px; color: var(--charcoal); line-height: 1.45; }
.np-review svg { width: 16px; height: 16px; stroke: var(--gold); stroke-width: 1.3; fill: none; flex-shrink: 0; margin-top: 1px; }
.np-skip { background: none; border: none; cursor: pointer; font-family: var(--sans); font-weight: 700; font-size: 13px; color: var(--emerald); padding: 14px 8px 4px; border-top: 1px solid var(--line); width: 100%; transition: color .2s; }
.np-skip:hover { color: var(--gold-deep); }
@media (max-width: 640px) {
  .notes-panel { grid-template-columns: 1fr; gap: 18px; }
  .np-right { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 18px; }
}

.chat-compose { display: flex; gap: 12px; align-items: flex-end; }
.chat-ta { flex: 1; border: 1px solid var(--line); border-radius: 10px; background: var(--white); padding: 14px 16px; font-family: var(--sans); font-size: 15px; color: var(--ink); resize: vertical; min-height: 64px; line-height: 1.55; outline: none; transition: border .2s; }
.chat-ta:focus { border-color: var(--gold); }
.chat-ta::placeholder { color: rgba(90,86,84,0.55); opacity: 1; transition: opacity .4s ease; }
.chat-ta.ph-out::placeholder { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .chat-ta::placeholder { transition: none; } }
.chat-send { padding: 14px 22px; white-space: nowrap; }

.chat-upload-has { display: flex; flex-direction: column; gap: 14px; }
.chat-upload-has img { width: 200px; max-width: 100%; height: 150px; object-fit: cover; border-radius: 10px; border: 1px solid var(--line-gold); }
.cu-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }

/* ===========================================================
   STEP 1B — Confirm Your Details
   =========================================================== */
.s1c-grid { display: grid; grid-template-columns: 1.4fr 0.85fr; gap: 28px; align-items: start; }
.s1c-main { padding: 34px 36px 30px; }
.consult-msg { display: flex; gap: 14px; padding: 20px 22px; background: var(--ivory-warm); border: 1px solid var(--line-gold); border-radius: 12px; margin-bottom: 30px; }
.consult-msg .cm-av { width: 40px; height: 40px; border-radius: 50%; background: var(--emerald); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.consult-msg .cm-av svg { width: 20px; height: 20px; fill: var(--gold); stroke: var(--gold); }
.consult-msg .cm-who { font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; color: var(--gold-deep); margin-bottom: 9px; line-height: 1.3; }
.consult-msg .cm-who .ai-tag { vertical-align: middle; }
.consult-msg .cm-body p { font-size: 15px; color: var(--ink); line-height: 1.6; }

.confirm-attrs { display: flex; flex-direction: column; gap: 24px; }
.cattr-label { display: flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--charcoal); margin-bottom: 13px; }

.s1c-actions { display: flex; gap: 14px; margin-top: 34px; }
.s1c-actions .btn-outline { flex-shrink: 0; }
.s1c-actions .btn-primary { flex: 1; }
.s1c-note { font-size: 12.5px; color: var(--charcoal); text-align: center; margin-top: 16px; opacity: .85; }

.s1c-side { padding: 0; overflow: hidden; }
.s1c-summary { padding: 26px 26px 22px; }
.s1c-summary .label { display: block; margin-bottom: 14px; }
.s1c-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.s1c-chips .bb-chip { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink); font-weight: 600; background: var(--ivory-warm); border: 1px solid var(--line); border-radius: 40px; padding: 7px 14px; }
.s1c-chips .bb-chip svg { width: 16px; height: 16px; stroke: var(--gold); stroke-width: 1.3; fill: none; }
.s1c-idea { margin-top: 16px; font-family: var(--serif-2); font-style: italic; font-size: 17px; color: var(--charcoal); line-height: 1.5; }
.s1c-ref { position: relative; border-top: 1px solid var(--line); }
.s1c-ref img { width: 100%; height: 230px; object-fit: cover; display: block; }
.s1c-ref-tag { position: absolute; bottom: 12px; left: 12px; background: rgba(15,31,27,0.78); color: #fff; border-radius: 40px; padding: 6px 13px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; display: flex; align-items: center; gap: 7px; }

/* ===========================================================
   STEP 2 — AI Concepts
   =========================================================== */
.brief-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 26px; padding: 18px 26px; border: 1px solid var(--line-gold); background: var(--ivory-warm); border-radius: 10px; margin-bottom: 30px; }
.brief-bar .bb-label { font-family: var(--sans); font-weight: 700; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-deep); }
.brief-bar .bb-chip { display: flex; align-items: center; gap: 9px; font-size: 14.5px; color: var(--ink); font-weight: 600; }
.brief-bar .bb-chip svg { width: 18px; height: 18px; stroke: var(--gold); stroke-width: 1.3; fill: none; }
.brief-bar .bb-sep { color: var(--line-gold); }

.concept-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.concept-carousel { position: relative; }
.concept-dots { display: none; }
.concept-card { background: var(--white); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; transition: .3s; box-shadow: var(--shadow-sm); }
.concept-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.concept-img { position: relative; }
.concept-img image-slot { width: 100%; height: 240px; }
.concept-photo { width: 100%; height: 240px; object-fit: cover; display: block; }

/* ---- luxury hover-zoom for generated images ---- */
.zoom-wrap { position: relative; overflow: hidden; display: block; }
.zoom-wrap.concept-photo { object-fit: unset; }
.zoom-wrap .zoom-img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease-out; will-change: transform; user-select: none; -webkit-user-drag: none; }
.zoom-wrap:not(.is-touch) { cursor: zoom-in; }
.zoom-wrap.is-touch { cursor: pointer; }
.zoom-hint { position: absolute; left: 12px; bottom: 12px; width: 30px; height: 30px; border-radius: 50%; background: rgba(15,31,27,0.55); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; opacity: 0; transform: translateY(4px); transition: opacity .2s ease, transform .2s ease; pointer-events: none; z-index: 3; }
.zoom-hint svg { width: 15px; height: 15px; stroke: var(--gold-soft); stroke-width: 1.7; fill: none; stroke-linecap: round; }
.zoom-wrap:hover .zoom-hint, .zoom-wrap.is-touch .zoom-hint { opacity: 1; transform: translateY(0); }
.zoom-wrap.zooming .zoom-hint { opacity: 0; }

/* ---- KINGDOM watermark overlay on generated concept images (steps 2–4) ----
   Targets only real images (.zoom-wrap.concept-photo); the loading/failed
   states are plain .concept-photo.gen divs and are not affected. The scrim
   guarantees the gold logo reads on any background (skin tones, ivory). */
.zoom-wrap.concept-photo::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(to top, rgba(15,31,27,0.46), rgba(15,31,27,0)); pointer-events: none; z-index: 2; }
.zoom-wrap.concept-photo::after { content: ""; position: absolute; right: 5%; bottom: 5.5%; width: 30%; height: 15%; background: url("../img/kingdom-watermark.png") right bottom / contain no-repeat; pointer-events: none; z-index: 3; filter: drop-shadow(0 1px 3px rgba(0,0,0,0.55)); }
/* fullscreen preview (touch) */
.zoom-modal { position: fixed; inset: 0; z-index: 300; background: rgba(10,23,20,0.92); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: kmfade .2s ease; cursor: zoom-out; }
.zoom-modal-img { max-width: 100%; max-height: 100%; border-radius: 10px; box-shadow: var(--shadow-lg); touch-action: pinch-zoom; object-fit: contain; }
.zoom-close { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; cursor: pointer; }
.zoom-close svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 1.8; fill: none; stroke-linecap: round; }
.zoom-close:hover { background: rgba(255,255,255,0.22); }
.concept-photo.gen { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: linear-gradient(135deg, #efe2d4 0%, #e6d6c6 50%, #dcc8b4 100%); position: relative; overflow: hidden; }
.concept-photo.gen::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, rgba(255,255,255,0.45) 50%, transparent 80%); transform: translateX(-100%); animation: shimmer 1.4s infinite; }
@keyframes shimmer { to { transform: translateX(100%); } }
.gen-orbit { width: 34px; height: 34px; border: 2px solid rgba(200,161,90,0.4); border-top-color: var(--gold); border-radius: 50%; animation: spin .9s linear infinite; z-index: 1; }
.gen-label { font-family: ui-monospace, Menlo, monospace; font-size: 11px; letter-spacing: 0.04em; color: rgba(90,70,50,0.7); z-index: 1; }
.concept-photo.failed { gap: 12px; }
.img-regen { position: absolute; top: 60px; right: 14px; width: 34px; height: 34px; border-radius: 50%; border: none; background: rgba(255,255,255,0.88); box-shadow: var(--shadow-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0.7; transition: .22s; }
.concept-card:hover .img-regen, .refine-hero:hover .img-regen { opacity: 1; }
.img-regen svg { width: 17px; height: 17px; }
.img-regen:hover { background: #fff; transform: rotate(-45deg); }
.btn-mini { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line-gold); background: rgba(255,255,255,0.7); border-radius: 40px; padding: 7px 14px; font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-deep); cursor: pointer; z-index: 1; transition: .2s; }
.btn-mini:hover { background: #fff; border-color: var(--gold); }
.btn-mini svg { width: 14px; height: 14px; }
.concept-badge { position: absolute; top: 14px; left: 14px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: center; font-family: var(--serif); font-size: 16px; color: var(--emerald); box-shadow: var(--shadow-sm); }
.concept-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.concept-body h3 { font-size: 24px; color: var(--gold-deep); }
.concept-body .c-desc { font-size: 14px; color: var(--charcoal); margin: 10px 0 18px; line-height: 1.6; flex: 1; }
/* strategy eyebrow + budget-fit pill (budget-realism) */
.c-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 9px; }
.c-strategy { font-family: var(--sans); font-weight: 700; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); }
.c-fit { font-family: var(--sans); font-weight: 800; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 9px; border-radius: 40px; white-space: nowrap; }
.c-fit.ok { background: rgba(31,138,91,0.12); color: #1f8a5b; border: 1px solid rgba(31,138,91,0.3); }
.c-fit.stretch { background: rgba(200,161,90,0.14); color: var(--gold-deep); border: 1px solid var(--line-gold); }
.c-fit.over { background: rgba(176,74,58,0.10); color: #b04a3a; border: 1px solid rgba(176,74,58,0.28); }
.concept-body .c-tradeoff { font-size: 12.5px; color: var(--charcoal); line-height: 1.55; margin: -4px 0 16px; padding: 10px 12px; background: var(--ivory-warm); border: 1px solid var(--line-gold); border-radius: 8px; }
.concept-body .c-tradeoff .ct-k { font-family: var(--sans); font-weight: 700; color: var(--gold-deep); text-transform: uppercase; font-size: 10px; letter-spacing: 0.08em; }
.spec-list { display: flex; flex-direction: column; gap: 10px; padding: 16px 0; border-top: 1px solid var(--line); margin-bottom: 18px; }
.spec-row { display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.spec-row svg { width: 17px; height: 17px; stroke: var(--gold); stroke-width: 1.3; fill: none; }
.spec-row .sk { color: var(--charcoal); }
.spec-row .sv { color: var(--ink); font-weight: 600; text-align: right; }
.concept-body .btn { margin-bottom: 14px; }
.concept-body .c-disclaimer { font-size: 11.5px; font-style: italic; color: var(--charcoal); line-height: 1.5; margin: 0 0 16px; opacity: .85; }
.concept-body .textlink { align-self: center; }
/* Concept-card actions: primary "book consultation" + two matching secondary pills */
.concept-actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; }
.concept-actions .btn { width: 100%; margin-bottom: 0; }
.concept-book { white-space: normal; letter-spacing: 0.08em; font-size: 12.5px; padding: 15px 22px; line-height: 1.25; text-align: center; }
.concept-refine { margin-top: 0; }
.concept-refine svg { stroke: var(--gold-deep); fill: var(--gold-deep); }
.concept-share { margin-top: 0; }
.concept-consult { display: block; width: 100%; background: none; border: none; cursor: pointer; font-family: var(--sans); font-weight: 700; font-size: 12.5px; letter-spacing: 0.03em; color: var(--emerald); padding: 2px 0 10px; text-align: center; transition: color .2s; }
.concept-consult:hover { color: var(--gold-deep); }

/* ---- Share button (per-concept) + toast ---- */
.btn-share { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border: 1px solid var(--line-gold); background: rgba(255,255,255,0.6); color: var(--gold-deep); border-radius: 40px; padding: 11px 16px; font-family: var(--sans); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; cursor: pointer; transition: background .2s, border-color .2s, transform .15s; }
.btn-share:hover { background: #fff; border-color: var(--gold); transform: translateY(-1px); }
.btn-share:disabled { opacity: .55; cursor: default; transform: none; }

/* ---- Review-step lead capture (Name + WhatsApp, required before WhatsApp) ---- */
.book-contact { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; }
.bc-field { width: 100%; box-sizing: border-box; font-family: var(--sans); font-size: 14.5px; color: var(--ink); background: #fff; border: 1px solid var(--line-gold); border-radius: 10px; padding: 13px 15px; transition: border-color .2s; }
.bc-field::placeholder { color: #9c968e; }
.bc-field:focus { outline: none; border-color: var(--gold); }
.bc-field.bc-err { border-color: #c0392b; background: rgba(176,74,58,0.04); }
.bc-note { font-size: 11.5px; line-height: 1.45; color: var(--charcoal); margin: 1px 2px 0; }
.bc-note.err { color: #b04a3a; font-weight: 700; }
.btn-share svg { width: 15px; height: 15px; stroke: var(--gold-deep); }
.concept-share { margin-top: -4px; }
.kd-toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px); background: var(--emerald, #0F1F1B); color: #F7F2EC; font-family: var(--sans); font-size: 14px; font-weight: 600; padding: 13px 22px; border-radius: 40px; box-shadow: 0 10px 30px rgba(0,0,0,0.28); z-index: 9999; opacity: 0; pointer-events: none; transition: opacity .3s, transform .3s; max-width: min(90vw, 460px); text-align: center; }
.kd-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- Couple / wedding-set bride+groom paired TABLE ---- */
.couple-table { border: 1px solid var(--line-gold); border-radius: 10px; overflow: hidden; margin: 4px 0 16px; }
.ct-row { display: grid; grid-template-columns: 1.05fr 1fr 1fr; align-items: stretch; border-bottom: 1px solid var(--line); }
.ct-row:last-child { border-bottom: none; }
.ct-row:nth-child(even):not(.ct-head) { background: rgba(200,161,90,0.035); }
.ct-head { background: var(--ivory-warm); border-bottom: 1px solid var(--line-gold); }
.ct-head .ct-v { font-family: var(--sans); font-weight: 700; font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--gold-deep); display: flex; align-items: center; gap: 6px; }
.ct-head .ct-v svg { width: 14px; height: 14px; stroke: var(--gold); fill: none; stroke-width: 1.4; }
.ct-k { padding: 9px 12px; font-size: 11.5px; color: var(--charcoal); display: flex; align-items: center; }
.ct-v { padding: 9px 12px; font-size: 12px; color: var(--ink); font-weight: 600; border-left: 1px solid var(--line); display: flex; align-items: center; line-height: 1.4; word-break: break-word; }
.review-left .couple-table, .refine-meta .couple-table { margin-top: 16px; }
.review-left .couple-table { grid-column: 1 / -1; }
.review-left .ct-row, .refine-meta .ct-row { grid-template-columns: 1fr 1.3fr 1.3fr; }

.s2-actions { display: flex; justify-content: center; gap: 18px; margin-top: 46px; }
.thinking { text-align: center; padding: 80px 0; }
.thinking .orbit { width: 56px; height: 56px; margin: 0 auto 22px; border: 2px solid var(--line-gold); border-top-color: var(--gold); border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.thinking p { color: var(--charcoal); font-family: var(--serif-2); font-style: italic; font-size: 20px; }
.ai-tag { display:inline-flex; align-items:center; gap:7px; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; font-weight:700; color:var(--gold-deep); margin-left:8px; }
.ai-tag.fb { color: var(--charcoal); }

/* ===========================================================
   STEP 3 — Refine
   =========================================================== */
.s3-grid { display: grid; grid-template-columns: 1fr 1.08fr; gap: 28px; align-items: start; }
.refine-left { padding: 24px; }
.refine-hero { position: relative; border-radius: 8px; overflow: hidden; }
.refine-hero image-slot { width: 100%; height: 380px; }
.refine-hero .sel-tag { position: absolute; top: 16px; right: 16px; background: rgba(255,255,255,0.92); border-radius: 40px; padding: 7px 15px; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--gold-deep); box-shadow: var(--shadow-sm); }
.refine-hero .sel-tag svg { width: 15px; height: 15px; stroke: var(--gold); fill: var(--gold); }
.refine-meta { padding: 22px 4px 4px; }
.refine-meta h2 { font-size: 27px; color: var(--gold-deep); line-height: 1.12; }
.refine-quick-specs { display: flex; flex-direction: column; gap: 11px; margin: 16px 0; }
.refine-quick-specs .r-row { display: flex; align-items: center; gap: 11px; font-size: 14.5px; color: var(--ink); }
.refine-quick-specs .r-row svg { width: 19px; height: 19px; stroke: var(--gold); stroke-width: 1.3; fill: none; }
.keyspec { border-top: 1px solid var(--line); padding-top: 18px; }
.keyspec .label { display: block; margin-bottom: 14px; }
.kspec-row { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; border: 1px solid var(--line); border-radius: 7px; padding: 9px 14px; margin-bottom: 8px; }
.kspec-row .kk { font-size: 12px; letter-spacing: 0.04em; color: var(--charcoal); font-weight: 600; }
.kspec-row .kv { font-size: 13.5px; color: var(--ink); font-weight: 700; text-align: right; }

.refine-right { padding: 26px 28px 28px; }
.refine-right .label { display: block; margin-bottom: 18px; }
.chatbox { background: var(--ivory-warm); border: 1px solid var(--line); border-radius: 10px; padding: 20px; min-height: 200px; max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; }
.msg { display: flex; gap: 12px; max-width: 88%; }
.msg .av { width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.msg .av svg { width: 18px; height: 18px; }
.msg .bubble { border-radius: 12px; padding: 12px 15px; font-size: 14px; line-height: 1.55; }
.msg .bubble .who { font-size: 11px; font-weight: 700; letter-spacing: 0.06em; margin-bottom: 5px; opacity: .8; }
.msg.user { align-self: flex-end; flex-direction: row-reverse; }
.msg.user .av { background: var(--beige); }
.msg.user .av svg { stroke: var(--emerald); stroke-width: 1.5; fill: none; }
.msg.user .bubble { background: var(--beige-soft); color: var(--ink); }
.msg.user .bubble .who { color: var(--gold-deep); }
.msg.ai .av { background: var(--emerald); }
.msg.ai .av svg { stroke: var(--gold); fill: var(--gold); }
.msg.ai .bubble { background: var(--white); border: 1px solid var(--line); color: var(--ink); }
.msg.ai .bubble .who { color: var(--gold-deep); }
.msg.typing .bubble { display: flex; gap: 5px; padding: 16px; }
.msg.typing span { width: 7px; height: 7px; border-radius: 50%; background: var(--gold-soft); animation: bounce 1s infinite; }
.msg.typing span:nth-child(2) { animation-delay: .15s; }
.msg.typing span:nth-child(3) { animation-delay: .3s; }
@keyframes bounce { 0%,60%,100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

.chat-input { display: flex; gap: 10px; margin-top: 14px; }
.chat-input input { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; font-family: var(--sans); font-size: 14.5px; outline: none; transition: border .2s; }
.chat-input input:focus { border-color: var(--gold); }
.chat-input button { border: none; background: var(--emerald); color: var(--gold-soft); border-radius: 8px; width: 50px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: .2s; }
.chat-input button:hover { background: var(--emerald-deep); }
.chat-input button svg { width: 20px; height: 20px; stroke: var(--gold-soft); fill: none; stroke-width: 1.6; }
.update-inline { margin-top: 12px; }
/* pending-change state: draw the eye to the button that renders the edit */
.update-inline.glow{animation:updateGlow 1.8s ease-in-out infinite;position:relative}
@keyframes updateGlow{0%,100%{box-shadow:0 0 0 0 rgba(200,161,90,0.0),0 6px 18px rgba(15,42,34,0.14)}50%{box-shadow:0 0 0 4px rgba(200,161,90,0.30),0 6px 22px rgba(200,161,90,0.35)}}
@media (prefers-reduced-motion:reduce){.update-inline.glow{animation:none;box-shadow:0 0 0 3px rgba(200,161,90,0.32)}}
.update-hint{margin:8px 2px 0;font-size:12px;line-height:1.45;color:var(--gold-deep);text-align:center;opacity:.9}
/* stale-preview badge: the shown image doesn't yet reflect the pending edit */
.refine-hero .stale-tag{position:absolute;top:16px;left:16px;display:flex;align-items:center;gap:7px;background:rgba(15,42,34,0.9);color:var(--gold-soft);border-radius:40px;padding:7px 14px;font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;box-shadow:var(--shadow-sm)}
.refine-hero .stale-tag svg{width:14px;height:14px;stroke:var(--gold-soft);fill:none;stroke-width:1.6;animation:staleSpin 2.4s linear infinite}
@keyframes staleSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.refine-hero .stale-tag svg{animation:none}}

.quick-actions { margin-top: 26px; }
.qa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.qa { display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: 40px; padding: 10px 16px; background: var(--white); cursor: pointer; font-size: 13px; font-weight: 600; color: var(--ink); transition: .2s; text-align: left; }
.qa:hover { border-color: var(--gold); background: rgba(200,161,90,0.06); }
.qa svg { width: 16px; height: 16px; stroke: var(--gold); stroke-width: 1.4; fill: none; flex-shrink: 0; }

.updated-summary { margin-top: 24px; border: 1px solid var(--line-gold); background: var(--ivory-warm); border-radius: 10px; padding: 20px 22px; display: grid; grid-template-columns: 1fr auto; gap: 24px; }
.updated-summary .us-label { font-family: var(--sans); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.updated-summary .us-label svg { width: 15px; height: 15px; stroke: var(--gold); fill: var(--gold); }
.updated-summary .us-text { font-size: 14px; color: var(--ink); line-height: 1.55; max-width: 320px; }
.updated-summary .us-specs { display: flex; flex-direction: column; gap: 8px; border-left: 1px solid var(--line-gold); padding-left: 22px; }
.updated-summary .us-specs div { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink); font-weight: 600; white-space: nowrap; }
.updated-summary .us-specs svg { width: 16px; height: 16px; stroke: var(--gold); stroke-width: 1.3; fill: none; }

.refine-cta { margin-top: 26px; }
.refine-cta .continue { margin-top: 12px; }

/* ===========================================================
   STEP 4 — Review & Consult
   =========================================================== */
.s4-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 28px; align-items: start; }
.review-left { padding: 32px; }
.review-left .label { display: block; margin-bottom: 20px; }
.review-top { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 26px; }
.review-img image-slot { width: 100%; height: 300px; border-radius: 8px; }
.review-specs { display: flex; flex-direction: column; }
.rspec { display: grid; grid-template-columns: 26px 1fr; gap: 13px; padding: 13px 0; border-bottom: 1px solid var(--line); align-items: center; }
.rspec:last-child { border-bottom: none; }
.rspec svg { width: 22px; height: 22px; stroke: var(--gold); stroke-width: 1.2; fill: none; }
.rspec .rs-k { font-size: 10.5px; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-deep); font-weight: 700; }
.rspec .rs-v { font-size: 15px; color: var(--ink); font-weight: 600; margin-top: 2px; }
.whatsnext { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.whatsnext .label { margin-bottom: 18px; }
.wn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.wn-item { display: flex; flex-direction: column; gap: 9px; }
.wn-item .wn-ico { width: 30px; height: 30px; stroke: var(--gold); stroke-width: 1.3; fill: none; }
.wn-item h4 { font-family: var(--sans); font-weight: 700; font-size: 13px; color: var(--emerald); }
.wn-item p { font-size: 12.5px; color: var(--charcoal); line-height: 1.5; }

.book-panel { padding: 32px; }
.book-panel .eyebrow { color: var(--gold-deep); }
.book-panel h2 { font-size: 38px; color: var(--gold-deep); margin-top: 12px; line-height: 1.05; display: flex; align-items: center; gap: 10px; }
.book-panel h2 svg { width: 26px; height: 26px; stroke: var(--gold); fill: var(--gold); }
.book-meta { display: flex; flex-direction: column; gap: 11px; margin: 22px 0 26px; padding-bottom: 26px; border-bottom: 1px solid var(--line); }
.book-meta div { display: flex; align-items: center; gap: 12px; font-size: 15px; color: var(--ink); font-weight: 600; }
.book-meta svg { width: 19px; height: 19px; stroke: var(--gold); stroke-width: 1.3; fill: none; }
.wa-block .wa-title { display: flex; align-items: center; gap: 10px; font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: #1f8a4c; }
.wa-block .wa-title svg { width: 20px; height: 20px; }
.wa-block .wa-sub { font-size: 13.5px; color: var(--charcoal); margin: 7px 0 14px; }
.wa-preview { background: #e7f6ec; border: 1px solid #cde9d6; border-radius: 12px 12px 12px 4px; padding: 16px 18px; font-size: 13.5px; color: #15331f; line-height: 1.6; white-space: pre-wrap; position: relative; max-height: 230px; overflow-y: auto; }
.wa-preview .wa-time { display: block; text-align: right; font-size: 10.5px; color: #5b8a6c; margin-top: 8px; }
.book-cta { margin-top: 24px; display: flex; flex-direction: column; gap: 12px; }
.wa-hint { font-size: 12px; color: var(--charcoal); line-height: 1.5; margin-top: 2px; opacity: .85; text-align: center; }

/* ---- bottom trust strip ---- */
.cd-trust { background: var(--white); border-top: 1px solid var(--line); margin-top: 40px; }
.cd-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.cd-trust-item { display: flex; gap: 14px; align-items: flex-start; padding: 30px 26px; border-right: 1px solid var(--line); }
.cd-trust-item:last-child { border-right: none; }
.cd-trust-item svg { width: 30px; height: 30px; stroke: var(--gold); stroke-width: 1.2; fill: none; flex-shrink: 0; }
.cd-trust-item .ct-t { font-family: var(--sans); font-weight: 700; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--emerald); }
.cd-trust-item .ct-d { font-size: 12.5px; color: var(--charcoal); margin-top: 5px; line-height: 1.45; }

.cd-error { max-width: 760px; margin: 16px auto 0; text-align: center; font-size: 13px; color: #9a5a2a; background: #fbf0e3; border: 1px solid #ecd6bd; border-radius: 8px; padding: 12px 18px; }
.cd-connect { background: none; border: none; cursor: pointer; font: inherit; color: var(--gold-deep); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; padding: 0 2px; }
.cd-connect:hover { color: var(--gold); }
.cd-connected { display: inline-flex; align-items: center; gap: 8px; margin: 16px auto 0; font-size: 12px; letter-spacing: 0.06em; font-weight: 700; color: var(--gold-deep); background: rgba(200,161,90,0.10); border: 1px solid var(--line-gold); border-radius: 40px; padding: 8px 16px; }

/* ---- Resume in-progress brief ---- */
.cd-resume { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1180px; margin: 18px auto 0; padding: 11px 16px 11px 18px; background: rgba(200,161,90,0.09); border: 1px solid var(--line-gold); border-radius: 10px; }
.cd-resume-msg { display: inline-flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--gold-deep); font-weight: 600; }
.cd-resume-actions { display: flex; align-items: center; gap: 6px; }
.cd-resume-over { background: none; border: 1px solid var(--line-gold); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 700; color: var(--gold-deep); padding: 6px 13px; border-radius: 40px; white-space: nowrap; }
.cd-resume-over:hover { background: var(--gold); color: #fff; border-color: var(--gold); }
.cd-resume-x { background: none; border: none; cursor: pointer; color: var(--charcoal); font-size: 14px; line-height: 1; padding: 6px 8px; border-radius: 6px; }
.cd-resume-x:hover { color: var(--ink); background: rgba(0,0,0,0.04); }

/* ---- Live estimate row in the brief sidebar ---- */
.lb-row.lb-est .lb-v { font-weight: 800; color: var(--gold-deep); }
.lb-note { display: flex; align-items: flex-start; gap: 7px; margin-top: 10px; font-size: 11px; line-height: 1.45; color: var(--charcoal); opacity: .85; }
.lb-note svg { width: 13px; height: 13px; flex-shrink: 0; margin-top: 1px; stroke: var(--gold); fill: none; }

/* ---- Connect AI modal ---- */
.km-overlay { position: fixed; inset: 0; background: rgba(15,31,27,0.55); backdrop-filter: blur(4px); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 24px; animation: kmfade .2s ease; }
@keyframes kmfade { from { opacity: 0; } to { opacity: 1; } }
.km { background: var(--white); border-radius: 14px; max-width: 440px; width: 100%; padding: 38px 36px 30px; text-align: center; box-shadow: var(--shadow-lg); }
.km-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--ivory-warm); border: 1px solid var(--line-gold); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.km-icon svg { width: 26px; height: 26px; }
.km h3 { font-size: 27px; color: var(--gold-deep); }
.km p { font-size: 14px; color: var(--charcoal); margin-top: 12px; line-height: 1.6; }
.km input { width: 100%; margin-top: 22px; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; font-family: var(--sans); font-size: 15px; outline: none; transition: border .2s; }
.km input:focus { border-color: var(--gold); }
.km-actions { margin-top: 18px; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.km-note { font-size: 11.5px; color: var(--charcoal); margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); opacity: .8; }
.km code, .cd-error code { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; background: var(--ivory-warm); padding: 1px 5px; border-radius: 4px; }

/* ---- responsive ---- */
@media (max-width: 1000px) {
  .stp-label { display: none; }
  .stp.active::after { display: none; }
  .s1-grid, .s3-grid, .s4-grid { grid-template-columns: 1fr; }
  .s1-grid > *, .s3-grid > *, .s4-grid > * { min-width: 0; }
  .s1chat-grid { grid-template-columns: 1fr; }
  .s1c-grid { grid-template-columns: 1fr; }
  .review-top { grid-template-columns: 1fr; }
  /* Concept options become a horizontal swipe carousel on mobile (no vertical stack) */
  .concept-grid {
    display: flex;
    grid-template-columns: none;
    gap: 14px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding-left: 18px;
    margin-inline: -18px;
    padding: 4px 18px 6px;
    scrollbar-width: none;
  }
  .concept-grid::-webkit-scrollbar { display: none; }
  /* trailing spacer so the last card can snap to the left gutter */
  .concept-grid::after { content: ""; flex: 0 0 14%; }
  .concept-card { flex: 0 0 86%; scroll-snap-align: start; }
  .concept-card:hover { transform: none; box-shadow: var(--shadow-sm); }
  .concept-dots { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 18px; }
  .concept-dot { width: 8px; height: 8px; border-radius: 50%; padding: 0; border: none; background: var(--line-gold); cursor: pointer; transition: background .25s ease, width .25s ease, border-radius .25s ease; }
  .concept-dot.on { background: var(--gold-deep); width: 22px; border-radius: 4px; }
  .qa-grid { grid-template-columns: 1fr 1fr; }
  .cd-trust-grid { grid-template-columns: 1fr 1fr; }
  .cd-trust-item:nth-child(2n) { border-right: none; }
  .updated-summary { grid-template-columns: 1fr; }
  .updated-summary .us-specs { border-left: none; padding-left: 0; border-top: 1px solid var(--line-gold); padding-top: 16px; }
}
@media (max-width: 640px) {
  .cd-wrap { padding: 0 18px; }
  .s1-form { padding: 26px 22px; }
  .type-grid { grid-template-columns: repeat(2, 1fr); }
  /* Quick refinement actions: two compact columns instead of one long stack */
  .qa-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .qa { justify-content: center; text-align: center; padding: 12px 10px; font-size: 12.5px; min-height: 46px; line-height: 1.25; }
  .wn-grid { grid-template-columns: 1fr; gap: 22px; }
  .s2-actions { flex-direction: column; }
  .cd-trust-grid { grid-template-columns: 1fr; }
  .cd-trust-item { border-right: none; border-bottom: 1px solid var(--line); }
  /* Step 1 chat: size to content so the question sits right above the answer
     chips instead of leaving a tall empty box on first load */
  /* The chat is a self-contained panel: it sticks just under the fixed site
     header and fits the screen as a flex column. Messages take the top and the
     answer/compose bar sits below them — they STACK, so the answer bar can never
     overlap the conversation. When a step has many options the bar is capped and
     scrolls internally, keeping the last AI question/answer visible above it. */
  .s1chat { min-height: 0; display: flex; flex-direction: column; overflow: hidden; position: sticky; top: 97px; max-height: calc(100vh - 105px); max-height: calc(100dvh - 105px); }
  .s1chat-scroll { flex: 1 1 auto; max-height: none; min-height: 96px; }
  .s1chat-input { flex: 0 0 auto; max-height: 46vh; overflow-y: auto; }
  /* The right-rail brief card (ring image + "Cerita Anda Menjadi Brief" + bullets)
     is redundant on mobile — the chat already carries the whole brief. Hide the
     entire panel on small screens. */
  .s1-side { display: none; }
  /* Compose: full-width textarea with the send button stacked beneath it */
  .chat-compose { flex-direction: column; align-items: stretch; gap: 10px; }
  .chat-ta { width: 100%; }
  .chat-send { width: 100%; }
  /* Larger touch target for the save-heart on concept cards (>=44px) */
  .concept-save { width: 44px; height: 44px; top: 12px; right: 12px; }
  .img-regen { top: 66px; right: 12px; }
  .concept-save svg { width: 20px; height: 20px; }
  /* Shorter concept cards: smaller hero image, tighter body, clamped blurb */
  .concept-img image-slot, .concept-photo, .zoom-wrap.concept-photo { height: 200px; }
  .concept-body { padding: 20px 20px 22px; }
  .concept-body .c-desc { flex: none; margin: 9px 0 15px; }
  .spec-list { gap: 8px; padding: 14px 0; margin-bottom: 15px; }
  /* Step 1 intro: compress the marketing copy + progress so the consultant
     chat leads on mobile instead of sitting below a wall of text */
  .cd-head:empty { padding: 0; }
  .stepper-inner { padding-top: 16px; padding-bottom: 16px; }
  .s1-intro { margin-top: 22px; margin-bottom: 14px; }
  .s1-headline { font-size: 20px; line-height: 1.18; }
  /* The consultant's opening question already guides the user — drop the
     redundant marketing paragraph on mobile */
  .s1-subhead { display: none; }
  /* Collapse the 5-phase tracker to a single slim row of dots (labels hidden)
     so it no longer wraps to two rows and steals vertical space */
  .s1-progress { margin-top: 12px; gap: 0; flex-wrap: nowrap; }
  .s1-prog-step { gap: 0; }
  .s1-prog-label { display: none; }
  .s1-prog-dot { width: 9px; height: 9px; border-radius: 50%; font-size: 0; color: transparent; border-width: 1px; }
  .s1-prog-dot svg { display: none; }
  .s1-prog-step.done .s1-prog-dot { background: var(--gold); border-color: var(--gold); }
  .s1-prog-line { width: 18px; }
}

/* ---- mobile pass: AI flow refinements ---- */
.refine-photo { height: 380px; }
@media (max-width: 760px) {
  .cd-head { padding: 34px 0 26px; }
  .cd-head .kicker { gap: 10px; }
  .cd-head .spark { width: 20px; height: 20px; }
  .refine-left, .refine-right, .review-left, .book-panel { padding: 20px 18px; }
  .refine-photo { height: 300px; }
  .refine-hero image-slot { height: 300px; }
  .chatbox { max-height: 260px; }
  /* couple table: tighten so 3 columns fit cleanly */
  .ct-k { padding: 8px 9px; font-size: 11px; }
  .ct-v { padding: 8px 9px; font-size: 11.5px; }
  .ct-head .ct-v { font-size: 9px; gap: 4px; }
  .ct-head .ct-v svg { width: 12px; height: 12px; }
  /* compare view scrolls horizontally instead of squeezing */
  .saved-body { padding: 18px; }
  /* compare view: swipe horizontally, one card at a time (not squeezed) */
  .sv-compare { grid-template-columns: none !important; grid-auto-flow: column; grid-auto-columns: 82%; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  .sv-compare-col { min-width: 0; scroll-snap-align: start; }
  .brief-bar { gap: 8px 16px; padding: 14px 16px; }
  .brief-bar .bb-chip { font-size: 13px; }
}
@media (max-width: 460px) {
  .cd-head h1 { font-size: 30px; }
  .refine-meta h2 { font-size: 23px; }
  .kspec-row { grid-template-columns: 1fr auto; }
  .concept-body h3 { font-size: 21px; }
  .saved-bar { padding: 12px; }
  .saved-bar-label { display: none; }
  /* couple table can stack label above the two values if extremely narrow */
  .ct-k { font-size: 10.5px; }
  .ct-v { font-size: 11px; word-break: break-word; }
}

/* ============================================================
   Luxe motion — custom flow (Tier 3). transform/opacity only,
   all looping/entrance effects gated behind prefers-reduced-motion.
   ============================================================ */

/* 8 · Smooth step-to-step transition (cd-step-pane remounts via key={step}) */
@media (prefers-reduced-motion: no-preference) {
  .cd-step-pane { animation: cdStepIn .5s cubic-bezier(.22, .61, .36, 1) both; }
}
@keyframes cdStepIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* 9 · Concept cards reveal in a gentle stagger when the three appear */
@media (prefers-reduced-motion: no-preference) {
  .concept-grid .concept-card { animation: cdCardIn .6s cubic-bezier(.22, .61, .36, 1) both; }
  .concept-grid .concept-card:nth-child(1) { animation-delay: .05s; }
  .concept-grid .concept-card:nth-child(2) { animation-delay: .16s; }
  .concept-grid .concept-card:nth-child(3) { animation-delay: .27s; }
}
@keyframes cdCardIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* 10 · Luxe gold shimmer while a concept preview is generating */
.concept-photo.gen { position: relative; overflow: hidden; }
.concept-photo.gen::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, transparent 18%, rgba(200, 161, 90, .16) 50%, transparent 82%);
  transform: translateX(-100%);
}
@media (prefers-reduced-motion: no-preference) {
  .concept-photo.gen::after { animation: cdShimmer 1.7s ease-in-out infinite; }
}
@keyframes cdShimmer { to { transform: translateX(100%); } }

/* 11 · Micro-feedback — chip press + select pop, save-heart pop */
.reply-chip { transition: border-color .2s, background .2s, transform .15s ease; }
.reply-chip:active { transform: scale(.96); }
.concept-save { transition: background .2s, transform .15s ease; }
.concept-save:active { transform: scale(.92); }
@media (prefers-reduced-motion: no-preference) {
  .reply-chip.sel { animation: cdChipPop .42s cubic-bezier(.34, 1.56, .64, 1); }
  .concept-save.on svg { animation: cdHeartPop .44s cubic-bezier(.34, 1.56, .64, 1); }
}
@keyframes cdChipPop { 0% { transform: scale(1); } 45% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes cdHeartPop { 0% { transform: scale(1); } 40% { transform: scale(1.34); } 100% { transform: scale(1); } }

/* ============================================================
   12 · Atelier "curating" state — the generating / empty concept
   placeholder becomes an intentional on-brand emerald + gold
   rendering moment (was a plain beige box that read as "broken").
   Pure CSS; appended last so it wins over the rules above.
   ============================================================ */
.concept-photo.gen {
  gap: 18px;
  background:
    radial-gradient(58% 58% at 50% 42%, rgba(200, 161, 90, .20), rgba(200, 161, 90, 0) 70%),
    linear-gradient(160deg, #1d3a31 0%, #122821 55%, #0b1b16 100%);
}
/* faint KINGDOM mark behind the ring (replaces the old white sweep) */
.concept-photo.gen::before {
  content: ""; position: absolute; inset: 0;
  background: url("../img/kingdom-watermark.png") center 43% / 160px auto no-repeat;
  opacity: .16; transform: none; animation: none;
}
/* gold sheen tuned for the dark ground (keeps the existing cdShimmer sweep) */
.concept-photo.gen::after {
  background: linear-gradient(100deg, transparent 22%, rgba(227, 200, 146, .20) 50%, transparent 78%);
}
/* elegant thin gold ring with a soft breathing glow */
.concept-photo.gen .gen-orbit {
  width: 42px; height: 42px; border-width: 1.5px;
  border-color: rgba(227, 200, 146, .22); border-top-color: var(--gold-soft);
}
/* serif copy instead of the dev-style monospace label */
.concept-photo.gen .gen-label {
  font-family: var(--serif-2, Georgia, serif); font-style: italic;
  font-size: 14.5px; letter-spacing: .01em; text-transform: none;
  color: rgba(247, 242, 236, .80);
}
@media (prefers-reduced-motion: no-preference) {
  .concept-photo.gen .gen-orbit { animation: spin .95s linear infinite, cdOrbitGlow 2.6s ease-in-out infinite; }
}
@keyframes cdOrbitGlow {
  0%, 100% { box-shadow: 0 0 14px rgba(200, 161, 90, .18); }
  50%      { box-shadow: 0 0 28px rgba(200, 161, 90, .45); }
}
/* graceful failed state on the same dark ground */
.concept-photo.gen.failed { background: linear-gradient(160deg, #1d3a31, #0b1b16); }
.concept-photo.gen.failed::after { animation: none; opacity: 0; }
.concept-photo.gen.failed .gen-label { color: rgba(247, 242, 236, .74); }
.concept-photo.gen.failed .btn-mini {
  background: rgba(247, 242, 236, .10); border-color: rgba(227, 200, 146, .42); color: var(--gold-soft);
}
.concept-photo.gen.failed .btn-mini:hover { background: rgba(247, 242, 236, .18); border-color: var(--gold-soft); }



/* ============================================================
   AI ATELIER v2 — planner cards, regen dialog, debug panel,
   reference sheet (cd-planner / cd-extras / cd-sheet)
   ============================================================ */
.c-terr{display:inline-flex;align-items:center;padding:3px 10px;border:1px solid var(--gold-deep);color:var(--gold-deep);border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
/* symmetry across the 3 cards: badges on one reserved row; description clamped with a real ellipsis (never a mid-word cut). */
.concept-card .c-meta{min-height:26px;flex-wrap:wrap}
.concept-card .concept-body .c-desc{flex:0 0 auto;line-height:1.6;margin:8px 0 4px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
/* mobile carousel shows one card at a time — no cross-card symmetry to keep; never cut the description there */
@media (max-width:640px){.concept-card .concept-body .c-desc{display:block;max-height:none;overflow:visible}}
/* desktop 3-column symmetry: normalise the variable-height rows so the spec
   list, fit line, consideration box and buttons align across the 3 cards */
@media (min-width:641px){
.concept-card .concept-body .c-desc{min-height:3.3em}
.concept-card .c-why-list li{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;min-height:calc(2 * 1.55em)}
.concept-card .c-fitfor{min-height:60px}
.concept-card .c-fitfor,.concept-card .c-desc{text-wrap:pretty}
.concept-card .c-tradeoff{min-height:66px}
}
.c-sec{margin:12px 0 0}
.c-sec-t{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 7px}
.c-why-list{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.c-why-list li{font-size:13.5px;line-height:1.55;padding-left:15px;position:relative}
.c-why-list li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:5px;border-radius:50%;background:var(--gold-deep)}
.c-why-list b{font-weight:700}
.c-fitfor{margin:16px 0 0;font-size:13px;line-height:1.6}
/* the couple-table's global .ct-k (display:flex + padding) bleeds into these card labels — neutralise it here */
.c-fitfor .ct-k,.c-strategy-note .ct-k{display:block;padding:0;margin:0 0 3px;font-family:var(--sans);font-weight:800;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-deep)}
.concept-card .c-tradeoff{margin:12px 0 0}
.concept-card .c-tradeoff .ct-k{display:block;padding:0;margin:0 0 3px}
.concept-card .spec-list{margin-top:12px;margin-bottom:4px}
.concept-card .c-disclaimer{margin:16px 0 12px}
.concept-card .cd-detail-toggle{padding:14px 0 0}
.c-strategy-note{margin:8px 0 0;font-size:13px;line-height:1.5;opacity:.9}
.c-decisions{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 0}
.c-decision{font-size:12px;line-height:1.35;padding:4px 11px;border-radius:999px;background:rgba(168,130,63,.08);border:1px solid rgba(168,130,63,.28)}
.cd-detail-toggle{background:none;border:none;color:var(--gold-deep);font-weight:700;font-size:13px;cursor:pointer;padding:10px 0 0;text-decoration:underline;text-underline-offset:3px;align-self:flex-start}
.cd-set-note{text-align:center;font-size:12.5px;opacity:.75;max-width:760px;margin:18px auto 0;line-height:1.55}
.cd-notice{margin:0 auto 18px;max-width:680px;text-align:center;font-size:13.5px;line-height:1.5;background:rgba(168,130,63,.08);border:1px solid rgba(168,130,63,.3);padding:10px 18px;border-radius:10px}
.regen-km .rgn-chips{justify-content:flex-start;margin:14px 0 4px}
.regen-km .rgn-ta{width:100%;min-height:64px;margin-top:10px}
.rgn-target{font-style:italic;opacity:.8;margin:-4px 0 6px}
.dbg-panel{margin:24px auto 0;max-width:1020px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-align:left}
.dbg-toggle{width:100%;text-align:left;background:#0F1F1B;color:#C8A15A;border:none;padding:9px 14px;border-radius:8px;font-size:12px;cursor:pointer}
.dbg-body{background:#0F1F1B;color:#d9d4c8;border-radius:0 0 8px 8px;padding:10px 14px;max-height:440px;overflow:auto}
.dbg-tabs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.dbg-tab{background:transparent;border:1px solid rgba(200,161,90,.4);color:#C8A15A;font-size:11px;padding:3px 11px;border-radius:99px;cursor:pointer}
.dbg-tab.on{background:#C8A15A;color:#0F1F1B;font-weight:700}
.dbg-pre{font-size:11px;line-height:1.55;white-space:pre-wrap;word-break:break-word;margin:0}
.sheet-block{margin-top:28px;padding-top:20px;border-top:1px solid rgba(15,31,27,.08)}
.sheet-intro p{font-size:14px;line-height:1.6;margin:8px 0 14px}
.sheet-note{font-size:12.5px;opacity:.7;margin:6px 0 0}
.sheet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}
.sheet-tile{margin:0;position:relative;border-radius:10px;overflow:hidden;background:#EFE8DE}
.sheet-tile.hero{grid-column:1 / -1}
.sheet-tile img{width:100%;height:150px;object-fit:cover;display:block}
.sheet-tile.hero img{height:280px}
.sheet-tile figcaption{position:absolute;left:8px;bottom:8px;background:rgba(15,31,27,.55);color:#F7F2EC;font-size:10.5px;font-weight:700;letter-spacing:.06em;padding:3px 10px;border-radius:99px;text-transform:uppercase}
.sheet-wait{display:flex;align-items:center;justify-content:center;gap:8px;height:150px;font-size:12px;opacity:.75}
.sheet-fail{width:100%;height:150px;border:none;background:#EFE8DE;font-size:12px;cursor:pointer;color:inherit;line-height:1.4;padding:0 10px}
.sheet-actions{display:flex;gap:12px;align-items:center;margin-top:14px;flex-wrap:wrap}
.sheet-busy{font-size:12.5px;opacity:.75}
.btn-spin.dark{border-color:rgba(15,31,27,.25);border-top-color:var(--gold-deep)}
@media (max-width:560px){.sheet-grid{grid-template-columns:repeat(2,1fr)}}
/* single combined 3-panel sheet image: show it whole at its native 3:2 ratio */
.sheet-tile.gridv img{height:auto;aspect-ratio:1536/1024;object-fit:cover}
.sheet-tile.gridv .sheet-wait,.sheet-tile.gridv .sheet-fail{height:220px}