.flow-choices { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; margin: 24px 0; }
.flow-choices.two { grid-template-columns: repeat(2,minmax(0,1fr)); }
.flow-choices.styles { grid-template-columns: repeat(auto-fit,minmax(195px,1fr)); }
.flow-choice { background: #fffdf8; border: 1px solid #d9d2c6; border-radius: 16px; padding: 22px; color: #24231f; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 10px; font: inherit; min-width: 0; }
.flow-choice:hover, .flow-choice.selected { border-color: #9c6614; box-shadow: 0 0 0 2px #c8821a; }
.flow-choice strong { font-size: 18px; }
.flow-choice span { line-height: 1.5; }
.flow-choice:focus-visible { outline: 3px solid #24231f; outline-offset: 4px; }
.flow-form { max-width: 720px; margin: 24px auto; display: grid; gap: 20px; }
.flow-form textarea, .flow-form input, .flow-form select { max-width: 100%; }
.flow-footnote { text-align: center; font-size: 13px; }
.flow-logo { display: flex; gap: 20px; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.flow-logo img { max-width: 100px; max-height: 64px; object-fit: contain; margin-right: 16px; }
.flow-logo form { display: grid; gap: 12px; max-width: 100%; }
.flow-logo input { max-width: 100%; }
.flow-style-preview { background: var(--style-background); border-radius: 10px; width: 100%; aspect-ratio: 4/5; position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; padding: 16px; box-sizing: border-box; }
.flow-style-preview > span { color: #252525; font-size: 11px; background: #fffef8; border-radius: 4px; padding: 4px; align-self: start; }
.flow-style-preview > strong { background: var(--style-accent); color: var(--style-text); padding: 16px; font-size: 16px; z-index: 1; }
.flow-style-preview img { position: absolute; top: 48px; right: 16px; max-width: 64px; max-height: 40px; object-fit: contain; background: #fff; padding: 6px; border-radius: 5px; }
.flow-sample-shape { height: 42%; width: 65%; border-radius: 60% 40% 30% 70%; background: var(--style-accent); opacity: .7; transform: rotate(-15deg); align-self: center; }
.flow-colors { display: flex; gap: 24px; padding: 20px 0; }
.flow-wait { max-width: 660px; margin: 20px auto; padding: 40px; display: grid; gap: 24px; justify-items: center; text-align: center; }
.flow-dashboard-status { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-bottom: 1px solid #d9d2c6; }
.flow-next { margin: 24px 0; padding: 28px; }
.flow-next .button { margin: 8px 12px 0 0; }
.flow-planned { display: flex; width: 100%; justify-content: space-between; gap: 20px; align-items: center; margin: 12px 0; text-align: left; color: inherit; cursor: pointer; font: inherit; }
.flow-planned small { display: block; margin-top: 6px; }
.flow-tip-dismiss { display: flex; gap: 6px; margin-top: 12px; flex-wrap: wrap; }
.flow-channel { display: flex; gap: 12px; align-items: center; padding: 12px 0; }
.flow-channel input { width: 20px; height: 20px; }
@media (max-width: 600px) {
  .flow-choices, .flow-choices.two { grid-template-columns: 1fr; }
  .flow-choices.styles { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
  .flow-style { padding: 10px; }
  .flow-style-preview { padding: 10px; }
  .flow-style-preview > strong { font-size: 13px; padding: 10px; }
  .flow-wait { padding: 24px; }
  .flow-planned, .flow-dashboard-status { align-items: flex-start; flex-direction: column; gap: 10px; }
  .flow-logo { display: grid; }
  .flow-choice, .flow-form, .flow-tip, .flow-planned { overflow-wrap: anywhere; }
}
.flow-rendered-preview { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; }
.flow-brand-dna { max-width: 980px; margin: 24px auto; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(260px,.8fr); gap: 28px; align-items: center; }
.flow-brand-dna h2, .flow-brand-system h2 { margin: 5px 0 8px; }
.flow-brand-dna p, .flow-brand-system p { margin: 0; color: #625e56; line-height: 1.55; }
.flow-brand-facts { display: grid; gap: 12px; margin: 0; padding-left: 24px; border-left: 1px solid #d9d2c6; }
.flow-brand-facts div { display: grid; grid-template-columns: minmax(130px,1fr) auto; gap: 16px; align-items: center; }
.flow-brand-facts dt { color: #625e56; font-size: 13px; }
.flow-brand-facts dd { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 0; color: #24231f; font-size: 13px; font-weight: 700; text-align: right; }
.flow-brand-facts i { width: 22px; height: 22px; border-radius: 50%; border: 1px solid #d9d2c6; box-shadow: inset 0 0 0 3px #fff; flex: 0 0 auto; }
.flow-logo-treatments { min-width: 0; margin: 0; padding: 0; border: 0; }
.flow-logo-treatments legend { font-weight: 700; font-size: 18px; }
.flow-logo-treatments > p { margin: 6px 0 14px; color: #625e56; font-size: 14px; line-height: 1.5; }
.flow-logo-treatments > div { display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 10px; }
.flow-logo-treatments label { position: relative; display: grid; grid-template-rows: 76px auto auto; gap: 5px; min-width: 0; padding: 10px; border: 1px solid #d9d2c6; border-radius: 14px; cursor: pointer; }
.flow-logo-treatments label:has(input:checked) { border-color: #9c6614; box-shadow: 0 0 0 2px #c8821a; }
.flow-logo-treatments label:has(input:focus-visible) { outline: 3px solid #24231f; outline-offset: 3px; }
.flow-logo-treatments input { position: absolute; opacity: 0; }
.flow-logo-treatments img { width: 100%; height: 76px; object-fit: contain; border-radius: 8px; background: linear-gradient(135deg,#f5f2eb 25%,#fff 25%,#fff 50%,#f5f2eb 50%,#f5f2eb 75%,#fff 75%); background-size: 16px 16px; }
.flow-logo-treatments strong { font-size: 13px; }
.flow-logo-treatments small { color: #625e56; font-size: 11px; line-height: 1.35; }
.flow-brand-system { max-width: 1120px; margin: 34px auto 18px; }
.flow-brand-system-head { max-width: 720px; margin-bottom: 18px; }
.flow-brand-examples { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 16px; }
.flow-brand-example { margin: 0; overflow: hidden; border: 1px solid #d9d2c6; border-radius: 16px; background: #fff; }
.flow-brand-example img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; background: #eee9df; }
.flow-brand-example figcaption { display: grid; gap: 4px; padding: 13px; }
.flow-brand-example figcaption strong { font-size: 14px; }
.flow-brand-example figcaption span { color: #625e56; font-size: 12px; line-height: 1.4; }
.flow-start { max-width: 1040px; margin: 32px auto; }
.flow-form .text-back { justify-self: start; }
.flow-business-summary { display: grid; gap: 24px; margin: 0; }
.flow-business-summary dt { font-weight: 700; margin-bottom: 6px; }
.flow-business-summary dd { margin: 0; line-height: 1.6; color: #625e56; }
.flow-profile-fields { display: grid; gap: 20px; margin-top: 20px; }
.flow-logo-ready { justify-content: flex-start; }
.flow-logo-ready p { margin: 6px 0 0; }
.flow-logo-ready details { margin-left: auto; }
.flow-logo-ready form { margin-top: 16px; }
@media (max-width: 600px) {
  .flow-logo-ready { grid-template-columns: auto 1fr; gap: 16px; }
  .flow-logo-ready img { max-width: 64px; margin: 0; }
  .flow-logo-ready details { grid-column: 1 / -1; margin-left: 0; }
  .flow-brand-dna { grid-template-columns: 1fr; gap: 16px; }
  .flow-brand-facts { padding: 16px 0 0; border-left: 0; border-top: 1px solid #d9d2c6; }
  .flow-brand-examples { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
  .flow-brand-example figcaption { padding: 10px; }
  .flow-logo-treatments > div { grid-template-columns: 1fr; }
  .flow-logo-treatments label { grid-template-columns: 88px minmax(0,1fr); grid-template-rows: auto auto; align-items: center; }
  .flow-logo-treatments img { grid-row: 1 / span 2; height: 60px; }
}
.flow-website-icon::after { content: ""; position: absolute; inset: 35% 35% auto; height: 18%; border-top: 5px solid var(--color-action-primary); border-bottom: 3px solid var(--color-border-default); }
.flow-story-icon { background: linear-gradient(150deg,var(--color-warm-paper),var(--color-action-primary)); }
.flow-story-icon::after { content: ""; position: absolute; inset: 35% 36% auto; height: 22%; background: repeating-linear-gradient(to bottom,var(--color-border-default) 0 3px,transparent 3px 8px); }
.flow-footnote { color: #625e56; line-height: 1.6; }
 .flow-hero p, .flow-start small, .flow-style small { color: #625e56; }

.studio-upload-picker { width: 100%; min-width: 0; color: #24231f; font: inherit; text-align: left; box-sizing: border-box; position: relative; display: grid; grid-template-columns: 56px minmax(0,1fr) auto; gap: 16px; align-items: center; padding: 20px; border: 1px solid var(--color-border-default); border-radius: 16px; background: var(--color-warm-paper); cursor: pointer; transition: border-color .15s, background .15s; }
.studio-upload-picker:hover, .studio-upload-picker.has-file, .studio-upload-picker.selected, .studio-upload-picker.dragging { border-color: var(--color-action-primary); }
.studio-upload-picker:focus-within, .studio-upload-picker:focus-visible { outline: 3px solid var(--color-action-primary); outline-offset: 4px; }
.studio-upload-picker input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; padding: 0; margin: 0; cursor: pointer; z-index: 1; }
.studio-upload-icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px; background: #fff; color: #765e2f; }
.studio-upload-icon svg { width: 28px; height: 28px; }
.studio-upload-icon svg[hidden] { display: none; }
.flow-logo .flow-logo-pick-preview { width: 48px; height: 48px; max-width: 48px; max-height: 48px; margin: 0; border-radius: 6px; object-fit: contain; }
.studio-upload-copy { display: grid; gap: 6px; min-width: 0; }
.studio-upload-copy strong { color: #24231f; font-size: 18px; }
.studio-upload-copy small { color: #625e56; line-height: 1.5; }
.studio-upload-arrow { color: #765e2f; font-size: 24px; }
.flow-logo-file-name { margin: 0; color: #625e56; font-size: 13px; overflow-wrap: anywhere; line-height: 1.5; }
.flow-logo-file-name:empty { display: none; }
.flow-logo form { min-width: 0; width: min(100%,460px); }
@media (max-width: 600px) {
  .studio-upload-picker { padding: 16px; gap: 12px; grid-template-columns: 48px minmax(0,1fr); }
  .studio-upload-icon { width: 48px; height: 48px; }
  .studio-upload-arrow { display: none; }
  .flow-logo-ready details { min-width: 0; }
}

.studio-upload-icon img { width: 48px; height: 48px; border-radius: 6px; object-fit: contain; }
.studio-upload-filename, .post-photo-queue span { min-width: 0; overflow-wrap: anywhere; font-size: 13px; line-height: 1.5; color: #625e56; }
.upload-file strong { white-space: normal; overflow-wrap: anywhere; }
.studio-upload-thumbnail { width: 56px; height: 56px; object-fit: contain; border-radius: 8px; margin-bottom: 8px; background: var(--color-warm-paper); }
.tester-evidence-actions { flex-wrap: wrap; }
.tester-evidence-actions > .studio-upload-picker { flex-basis: 100%; }
.upload-file:has(.studio-upload-thumbnail) { grid-template-columns: 56px minmax(0,1fr); column-gap: 12px; align-items: center; }
.upload-file:has(.studio-upload-thumbnail) > strong, .upload-file:has(.studio-upload-thumbnail) > small { grid-column: 2; }
.upload-file .studio-upload-thumbnail { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
@media (max-width: 600px) {
  .upload-row { grid-template-columns: minmax(0,1fr) 36px; }
  .upload-row > .upload-progress { grid-column: 1 / -1; grid-row: 2; }
  .upload-row > b { grid-column: 2; grid-row: 1; }
}

.flow-first { gap: 16px; }
.flow-first-choices { display: grid; gap: 12px; }
.flow-first-status { margin: 0; color: #625e56; font-size: 13px; line-height: 1.5; }
#flow-first-topic { min-height: 72px; }

/* Brand screen 228 — approved Figma hierarchy and fixed preview geometry. */
.flow-style-screen { width: min(100%,1372px); margin: 0 auto; }
.flow-style-screen .flow-style-hero { max-width: none; margin: 0 0 42px; text-align: left; }
.flow-style-screen .flow-style-hero::before { content: "HUISSTIJL"; display: inline-flex; align-items: center; min-height: 32px; margin-bottom: 18px; padding: 0 16px; border-radius: 999px; background: var(--color-action-soft); color: var(--color-gold-deep); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.flow-style-screen .flow-style-hero h2 { max-width: 760px; margin-top: 0; }
.flow-style-screen .flow-style-hero p { max-width: 980px; font-size: 18px; }
.flow-style-layout { display: grid; grid-template-columns: minmax(380px,420px) minmax(0,1fr); gap: 32px; align-items: start; }
.flow-style-controls,.flow-brand-system { min-width: 0; border: 1px solid var(--color-border-default); border-radius: 20px; background: var(--color-bg-surface); }
.flow-style-controls { overflow: hidden; }
.flow-style-controls > form { display: grid; gap: 0; padding: 28px 24px 24px; }
.flow-style-controls h2,.flow-brand-system h2 { margin: 10px 0 8px; font-size: clamp(1.75rem,2.6vw,2.25rem); }
.flow-style-intro { margin: 0; color: var(--color-text-secondary); font-size: 14px; line-height: 1.55; }
.flow-brand-basis { display: flex; justify-content: space-between; gap: 18px; min-height: 142px; margin: 28px 0 24px; padding: 18px 16px; border-radius: 16px; background: var(--color-action-soft); }
.flow-brand-basis p { max-width: 205px; margin: 8px 0 0; color: var(--color-text-secondary); font-size: 13px; line-height: 1.45; }
.flow-brand-swatches { display: grid; grid-template-columns: repeat(2,28px); grid-template-rows: 28px auto; gap: 12px 8px; align-content: start; }
.flow-brand-swatches i { display: block; width: 28px; height: 28px; border: 1px solid var(--color-border-default); border-radius: 50%; }
.flow-brand-swatches b { grid-column: 1/-1; font: 600 25px/1.2 var(--font-display); text-align: center; }
.flow-logo-treatments legend { font: 600 1.25rem/1.25 var(--font-display); }
.flow-logo-treatments > p { margin-bottom: 16px; }
.flow-logo-treatments > div { display: grid; grid-template-columns: 1fr; gap: 12px; }
.flow-logo-treatments label { position: relative; display: grid; grid-template-columns: 76px minmax(0,1fr) 20px; grid-template-rows: 76px; gap: 12px; align-items: center; min-height: 104px; padding: 12px; box-sizing: border-box; border: 1px solid var(--color-border-default); border-radius: 16px; background: var(--color-bg-surface); cursor: pointer; }
.flow-logo-treatments label:has(input:checked) { border: 2px solid var(--color-action-primary); background: var(--color-action-soft); box-shadow: none; }
.flow-logo-treatments label:has(input:focus-visible) { outline: 3px solid var(--color-text-primary); outline-offset: 3px; }
.flow-logo-treatments img { grid-column: 1; grid-row: 1; width: 76px; height: 76px; border-radius: 12px; object-fit: contain; }
.flow-logo-treatments label > span { display: grid; grid-column: 2; grid-row: 1; gap: 8px; min-width: 0; }
.flow-logo-treatments strong { font-size: 13px; }
.flow-logo-treatments small { color: var(--color-text-secondary); font-size: 12px; line-height: 1.45; }
.flow-logo-treatments label > i { grid-column: 3; grid-row: 1; width: 18px; height: 18px; border: 2px solid var(--color-border-default); border-radius: 50%; }
.flow-logo-treatments label:has(input:checked) > i { border-color: var(--color-action-primary); background: var(--color-action-primary); box-shadow: inset 0 0 0 4px var(--color-action-soft); }
.flow-style-adjust { margin-top: 28px; border-top: 1px solid var(--color-border-default); }
.flow-style-adjust summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 24px 0 16px; cursor: pointer; list-style: none; }
.flow-style-adjust summary::-webkit-details-marker { display: none; }
.flow-style-adjust summary span { display: grid; gap: 5px; }
.flow-style-adjust summary small { color: var(--color-text-secondary); font-size: 12px; font-weight: 400; }
.flow-style-adjust summary b { color: var(--color-gold-deep); font-size: 26px; transform: rotate(90deg); transition: transform .15s ease; }
.flow-style-adjust[open] summary b { transform: rotate(270deg); }
.flow-style-adjust > p { color: var(--color-text-secondary); font-size: 13px; line-height: 1.5; }
.flow-style-adjust > label { display: grid; gap: 8px; }
.flow-style-stable,.flow-style-decision { display: grid; gap: 6px; padding: 15px 16px; border-radius: 14px; background: var(--color-action-soft); }
.flow-style-stable { margin: 12px 0 24px; }
.flow-style-stable span,.flow-style-decision span { color: var(--color-text-secondary); font-size: 12px; line-height: 1.45; }
.flow-style-controls .button.primary { width: 100%; min-height: 58px; }
.flow-style-future { margin: 14px 0 0; color: var(--color-text-secondary); font-size: 11px; line-height: 1.45; text-align: center; }
.flow-style-replace { margin: 0 24px 24px; padding-top: 18px; border-top: 1px solid var(--color-border-default); }
.flow-style-replace summary { color: var(--color-gold-deep); cursor: pointer; font-size: 13px; font-weight: 700; }
.flow-style-replace form { display: grid; gap: 12px; margin-top: 14px; }
.flow-style-upload { display: grid; gap: 16px; padding: 24px; }
.flow-brand-system { margin: 0; padding: 28px 32px 32px; }
.flow-brand-system-head { display: flex; justify-content: space-between; gap: 24px; max-width: none; margin: 0 0 32px; }
.flow-brand-system-head > div { min-width: 0; }
.flow-brand-system-head p { max-width: 670px; }
.flow-automatic { align-self: start; flex: 0 0 auto; padding: 8px 14px; border-radius: 999px; background: var(--color-action-soft); color: var(--color-gold-deep); font-size: 12px; font-weight: 700; text-transform: uppercase; }
.flow-brand-examples { display: grid; grid-template-columns: repeat(2,minmax(0,300px)); justify-content: center; gap: 24px 32px; }
.flow-brand-example { min-width: 0; margin: 0; overflow: hidden; border: 1px solid var(--color-border-default); border-radius: 16px; background: var(--color-bg-surface); box-shadow: 0 8px 24px rgba(20,42,34,.08); }
.flow-brand-example.recommended { border: 2px solid var(--color-action-primary); }
.flow-example-image { width: 100%; aspect-ratio: 5/6; overflow: hidden; background: var(--color-action-soft); }
.flow-brand-example img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 0; background: var(--color-action-soft); }
.flow-brand-example figcaption { display: grid; align-content: start; gap: 8px; min-height: 108px; padding: 12px 16px 16px; box-sizing: border-box; }
.flow-brand-example figcaption strong { font-size: 13px; }
.flow-brand-example figcaption span { color: var(--color-text-secondary); font-size: 12px; line-height: 1.45; }
.flow-style-decision { max-width: 632px; margin: 28px auto 0; }
.flow-style-mobile-submit { display: none; }

@media (max-width: 1050px) {
  .flow-style-layout { grid-template-columns: minmax(320px,380px) minmax(0,1fr); gap: 20px; }
  .flow-brand-system { padding-inline: 22px; }
  .flow-brand-examples { gap: 16px; }
}

@media (max-width: 760px) {
  .flow-style-screen .flow-style-hero { margin-bottom: 28px; }
  .flow-style-screen .flow-style-hero h2 { font-size: 2.35rem; }
  .flow-style-screen .flow-style-hero p { font-size: 15px; }
  .flow-style-layout { display: grid; grid-template-columns: minmax(0,1fr); gap: 24px; }
  .flow-style-controls,.flow-brand-system { border: 0; border-radius: 0; background: transparent; }
  .flow-style-controls > form { padding: 0; }
  .flow-brand-basis { min-height: 126px; }
  .flow-logo-treatments label { max-width: 342px; margin-inline: auto; }
  .flow-style-replace { margin: 18px 0 0; }
  .flow-brand-system { padding: 18px 0 0; }
  .flow-brand-system-head { display: grid; gap: 16px; margin-bottom: 20px; }
  .flow-automatic { justify-self: start; }
  .flow-brand-examples { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
  .flow-example-image { aspect-ratio: 1/.98; }
  .flow-brand-example figcaption { min-height: 76px; padding: 10px 11px; }
  .flow-brand-example figcaption strong { font-size: 12px; }
  .flow-brand-example figcaption span { font-size: 10px; }
  .flow-style-decision { margin-top: 20px; }
  .flow-style-desktop-submit,.flow-style-future { display: none; }
  .flow-style-mobile-submit { position: sticky; z-index: 3; bottom: max(10px,env(safe-area-inset-bottom)); display: inline-flex; width: calc(100% - 16px); min-height: 58px; margin: 0 8px; box-shadow: 0 10px 28px rgba(20,42,34,.18); }
}