@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Poppins:wght@500;600&display=swap");

.roseflow-section-five {
  --heading: "Poppins", ui-rounded, system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

.roseflow-section-five *, .roseflow-section-five *::before, .roseflow-section-five *::after { box-sizing: border-box; }
.roseflow-section-five button, .roseflow-section-five a { font: inherit; }
.roseflow-section-five button { color: inherit; }
.roseflow-section-five a { color: inherit; text-decoration: none; }
.roseflow-section-five button:focus-visible, .roseflow-section-five a:focus-visible { outline: 3px solid rgba(220,79,245,.42); outline-offset: 3px; }

.roseflow-section-five {
  --page: #fff8fe;
  --surface: rgba(255,255,255,.76);
  --surface-strong: rgba(255,255,255,.94);
  --surface-soft: rgba(244,239,251,.78);
  --ink: #1a0a3a;
  --muted: #696276;
  --faint: #8c8499;
  --line: rgba(84,73,139,.16);
  --line-bright: rgba(255,255,255,.9);
  --purple: #9582c3;
  --purple-deep: #54498b;
  --pink: #dc4ff5;
  --hot-pink: #f65ed8;
  --peach: #f6895e;
  --cream: #fbe8c8;
  --navy: #1a0a3a;
  --lavender: #e0d9fa;
  --slate: #27313a;
  position: relative;
  overflow: hidden;
  color: var(--ink);
  background: var(--page);
  transition: background-color .3s ease, color .3s ease;
}

.roseflow-section-five[data-theme="dark"] {
  --page: #1a0a3a;
  --surface: rgba(45,27,67,.72);
  --surface-strong: rgba(52,31,75,.94);
  --surface-soft: rgba(58,36,82,.78);
  --ink: #faf7ff;
  --muted: #c8bed5;
  --faint: #a99db7;
  --line: rgba(224,217,250,.17);
  --line-bright: rgba(255,255,255,.12);
}

.section-toolbar { position: absolute; z-index: 30; top: 16px; right: clamp(18px, 3vw, 48px); }
.theme-switcher { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: 0 10px 30px rgba(39,24,74,.1), inset 0 1px 0 var(--line-bright); backdrop-filter: blur(18px); }
.theme-switcher button { height: 30px; padding: 0 11px; display: inline-flex; align-items: center; gap: 5px; border: 0; border-radius: 999px; color: var(--faint); background: transparent; font-size: 9px; font-weight: 700; cursor: pointer; }
.theme-switcher button.active { color: var(--ink); background: var(--surface-strong); box-shadow: 0 4px 12px rgba(39,24,74,.08); }

.s5-chapter { position: relative; width: 100%; isolation: isolate; }
.s5-chapter-inner { position: relative; z-index: 2; width: min(1380px, calc(100% - clamp(32px, 7vw, 112px))); margin-inline: auto; }
.s5-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--purple-deep); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.s5-eyebrow i { width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--pink), var(--peach)); box-shadow: 0 0 0 5px rgba(220,79,245,.1); }
.s5-chapter h1, .s5-chapter h2, .s5-chapter h3 { margin: 0; font-family: var(--heading); font-weight: 600; }
.s5-chapter h1 em, .s5-chapter h2 em { color: transparent; font-style: normal; background: linear-gradient(100deg, var(--purple-deep), var(--pink) 55%, var(--peach)); background-clip: text; -webkit-background-clip: text; }
.s5-chapter p { margin: 0; }

/* Part 1 */
.fast-setup {
  min-height: 570px;
  display: grid;
  align-items: center;
  margin-top: -1px;
  padding: 62px 0 44px;
  background:
    radial-gradient(ellipse 34% 44% at 0% 52%, rgba(246,94,216,.2), transparent 72%),
    radial-gradient(ellipse 36% 48% at 100% 53%, rgba(149,130,195,.2), transparent 72%),
    var(--page);
  transition: background .35s ease;
}
.roseflow-section-five:not([data-theme="dark"]) .fast-setup {
  background:
    radial-gradient(ellipse 34% 44% at 0% 52%, rgba(246,94,216,.2), transparent 72%),
    radial-gradient(ellipse 36% 48% at 100% 53%, rgba(149,130,195,.25), transparent 72%),
    radial-gradient(ellipse 28% 38% at 86% 48%, rgba(251,232,200,.25), transparent 76%),
    var(--page);
}
.fast-setup-grid { display: grid; grid-template-columns: minmax(320px,.8fr) minmax(590px,1.2fr); gap: clamp(50px,7vw,110px); align-items: center; }
.setup-copy h1 { margin: 17px 0 16px; font-size: clamp(42px,4.7vw,68px); line-height: 1.02; letter-spacing: -.05em; }
.setup-copy > p { max-width: 540px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.setup-assurances { margin-top: 21px; display: flex; flex-wrap: wrap; gap: 7px; }
.setup-assurances span { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface); font-size: 9px; font-weight: 700; box-shadow: inset 0 1px 0 var(--line-bright); }
.setup-assurances strong { color: transparent; background: linear-gradient(105deg,var(--purple-deep),var(--pink) 62%,var(--peach)); background-clip: text; -webkit-background-clip: text; font-weight: 900; }
.setup-actions { margin-top: 25px; display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.play-setup { min-height: 45px; padding: 0 18px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid var(--line); border-radius: 13px; color: var(--ink); background: transparent; box-shadow: none; font-size: 11px; font-weight: 800; cursor: pointer; transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease; }
.play-setup:hover:not(:disabled) { border-color: transparent; color: #fff; background: linear-gradient(105deg,var(--purple-deep),var(--pink) 65%,var(--peach)); box-shadow: 0 16px 32px rgba(220,79,245,.22); transform: translateY(-2px); }
.play-setup:disabled { cursor: wait; opacity: .78; }
.play-setup > span { width: 16px; font-size: 9px; letter-spacing: 1px; }
.setup-primary-cta { min-height: 45px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 13px; color: #fff !important; background: linear-gradient(105deg,var(--purple-deep),var(--pink) 65%,var(--peach)); box-shadow: 0 16px 32px rgba(220,79,245,.22); font-size: 11px; font-weight: 800; transition: transform .2s ease, box-shadow .2s ease; }
.setup-primary-cta:hover { box-shadow: 0 20px 40px rgba(220,79,245,.28); transform: translateY(-2px); }
.setup-copy > small { display: block; max-width: 440px; margin-top: 10px; color: var(--faint); font-size: 9px; line-height: 1.5; }
.setup-copy > small span { display: block; }
.setup-copy > small span + span { margin-top: 2px; color: var(--muted); font-weight: 700; }

.setup-visual { min-width: 0; }
.wizard-shell { min-height: 456px; display: grid; grid-template-columns: minmax(0,1fr) 184px; overflow: hidden; border: 1px solid var(--line); border-radius: 28px; background: linear-gradient(145deg,var(--surface-strong),var(--surface-soft)); box-shadow: 0 34px 90px rgba(64,41,100,.16), inset 0 1px 0 var(--line-bright); backdrop-filter: blur(18px); }
.wizard-main { min-width: 0; position: relative; background: radial-gradient(circle at 47% 43%,rgba(224,217,250,.42),transparent 48%); }
.roseflow-section-five[data-theme="dark"] .wizard-main { background: radial-gradient(circle at 48% 42%,rgba(220,79,245,.13),transparent 52%); }
.wizard-topbar { height: 54px; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.dashboard-brand { display: flex; align-items: center; gap: 9px; color: var(--ink); font-size: 10px; font-weight: 800; }
.dashboard-brand img { width: 27px; height: 27px; border-radius: 9px; object-fit: cover; }
.wizard-status { display: inline-flex; align-items: center; gap: 7px; color: var(--faint); font-size: 9px; font-weight: 700; }
.wizard-conversation { width: min(590px,calc(100% - 44px)); margin: 0 auto; padding: 28px 0 26px; }
.wizard-heading { text-align: center; }
.wizard-heading > span { color: var(--purple-deep); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.roseflow-section-five[data-theme="dark"] .wizard-heading > span { color: #d4c6f1; }
.wizard-heading h3 { margin-top: 8px; color: var(--ink); font-size: clamp(19px,2vw,27px); line-height: 1.2; letter-spacing: -.025em; }
.wizard-heading p { margin: 7px auto 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.wizard-composer { min-height: 132px; margin-top: 19px; padding: 16px 17px 12px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(84,73,139,.2); border-radius: 19px; background: var(--surface-strong); box-shadow: 0 16px 44px rgba(67,42,101,.1), inset 0 1px 0 var(--line-bright); transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.setup-visual.is-playing .wizard-composer, .wizard-composer.has-answer { border-color: rgba(220,79,245,.38); box-shadow: 0 18px 52px rgba(149,130,195,.18), inset 0 1px 0 var(--line-bright); }
.wizard-composer > p { max-width: 545px; min-height: 66px; color: var(--faint); font-size: 11px; line-height: 1.58; }
.wizard-composer.has-answer > p { color: var(--ink); }
.typing-caret { display: none; width: 1.5px; height: 1.1em; margin-left: 2px; vertical-align: -.14em; background: var(--pink); animation: caretBlink .75s steps(1,end) infinite; }
.setup-visual.is-playing .typing-caret { display: inline-block; }
.wizard-composer > div { display: flex; align-items: center; justify-content: space-between; }
.wizard-composer > div > span { color: var(--faint); font-size: 8px; font-weight: 700; }
.wizard-composer button { width: 29px; height: 29px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: linear-gradient(135deg,var(--purple-deep),var(--pink)); box-shadow: 0 7px 16px rgba(220,79,245,.23); font-size: 15px; }
.organised-panel { margin-top: 13px; padding: 12px 13px; display: grid; grid-template-columns: 132px 1fr; gap: 12px; align-items: center; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); opacity: .28; transform: translateY(7px); transition: opacity .45s ease, transform .45s cubic-bezier(.22,.75,.25,1), border-color .45s ease; }
.organised-panel.is-visible { border-color: rgba(220,79,245,.24); opacity: 1; transform: none; }
.organised-title { display: flex; align-items: center; gap: 8px; }
.organised-title > span { width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: linear-gradient(135deg,var(--purple-deep),var(--pink)); box-shadow: 0 8px 18px rgba(220,79,245,.2); font-size: 11px; }
.organised-title > div { display: flex; flex-direction: column; gap: 2px; }
.organised-title strong { color: var(--ink); font-size: 8px; line-height: 1.3; }
.organised-title small { color: var(--faint); font-size: 7px; }
.organised-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.organised-grid > span { padding: 6px 8px; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface-strong); font-size: 7px; font-weight: 700; opacity: .35; transform: translateY(5px); transition: opacity .35s ease, transform .35s ease; }
.organised-grid small { color: var(--faint); font-size: 6px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.organised-panel.is-visible .organised-grid > span { opacity: 1; transform: none; }
.organised-panel.is-visible .organised-grid > span:nth-child(2) { transition-delay: .08s; }
.organised-panel.is-visible .organised-grid > span:nth-child(3) { transition-delay: .16s; }
.organised-panel.is-visible .organised-grid > span:nth-child(4) { transition-delay: .24s; }
.organised-panel.is-visible .organised-grid > span:nth-child(5) { transition-delay: .32s; }
.wizard-steps { padding: 19px 16px; display: flex; flex-direction: column; border-left: 1px solid var(--line); background: rgba(149,130,195,.07); }
.wizard-step-label { padding: 0 3px 14px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); }
.wizard-step-label span { color: var(--faint); font-size: 7px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.wizard-step-label strong { color: var(--purple-deep); font-family: var(--heading); font-size: 10px; }
.roseflow-section-five[data-theme="dark"] .wizard-step-label strong { color: #e0d9fa; }
.wizard-steps ol { margin: 17px 0 0; padding: 0; display: flex; flex-direction: column; list-style: none; }
.wizard-steps li { position: relative; min-height: 61px; display: grid; grid-template-columns: 29px 1fr; gap: 9px; color: var(--faint); }
.wizard-steps li:not(:last-child)::after { content: ""; position: absolute; left: 14px; top: 31px; width: 1px; height: 28px; background: var(--line); }
.wizard-steps li > span { position: relative; z-index: 1; width: 29px; height: 29px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: inherit; background: var(--surface-strong); font-size: 7px; font-weight: 800; transition: color .3s ease, background .3s ease, border-color .3s ease, transform .3s ease; }
.wizard-steps li > div { padding-top: 2px; display: flex; flex-direction: column; gap: 3px; }
.wizard-steps li strong { color: inherit; font-size: 8px; line-height: 1.25; }
.wizard-steps li small { color: var(--faint); font-size: 6.5px; line-height: 1.3; }
.wizard-steps li.complete > span { color: #fff; border-color: transparent; background: var(--purple); }
.wizard-steps li.complete strong { color: var(--muted); }
.wizard-steps li.active { color: var(--ink); }
.wizard-steps li.active > span { color: #fff; border-color: transparent; background: linear-gradient(135deg,var(--purple-deep),var(--pink)); box-shadow: 0 8px 20px rgba(220,79,245,.24); transform: scale(1.06); }
.wizard-ready { margin-top: auto; padding: 10px; display: flex; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); opacity: .35; transform: translateY(5px); transition: opacity .35s ease, transform .35s ease, border-color .35s ease; }
.wizard-ready.is-visible { border-color: rgba(70,185,131,.28); opacity: 1; transform: none; }
.wizard-ready > i { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #46b983; font-size: 8px; font-style: normal; }
.wizard-ready > span { display: flex; flex-direction: column; gap: 2px; }
.wizard-ready strong { color: var(--ink); font-size: 7.5px; }
.wizard-ready small { color: var(--faint); font-size: 6px; line-height: 1.35; }

/* Part 2 */
.ai-employee {
  --employee-ink: #1a0a3a;
  --employee-muted: #6f667c;
  --employee-faint: #8b8296;
  --employee-line: rgba(84,73,139,.16);
  --employee-panel: rgba(255,255,255,.78);
  --employee-panel-strong: rgba(255,255,255,.94);
  --employee-panel-soft: rgba(244,239,251,.88);
  --employee-shadow: rgba(69,45,104,.14);
  --employee-role: #625872;
  min-height: 880px;
  padding: 60px 0 40px;
  color: var(--employee-ink);
  background: radial-gradient(circle at 8% 28%,rgba(220,79,245,.12),transparent 34%), radial-gradient(circle at 92% 76%,rgba(246,137,94,.16),transparent 33%), linear-gradient(145deg,#fbf9fd 0%,#f2edf8 48%,#e8e0f7 100%);
  overflow: hidden;
  transition: color .3s ease, background-color .3s ease;
}
.roseflow-section-five[data-theme="dark"] .ai-employee {
  --employee-ink: #faf7ff;
  --employee-muted: #cec4da;
  --employee-faint: #ad9fba;
  --employee-line: rgba(224,217,250,.18);
  --employee-panel: rgba(39,23,61,.74);
  --employee-panel-strong: rgba(50,30,73,.9);
  --employee-panel-soft: rgba(59,37,83,.86);
  --employee-shadow: rgba(4,1,12,.3);
  --employee-role: #ddd3e9;
  background: radial-gradient(circle at 7% 30%,rgba(220,79,245,.2),transparent 34%), radial-gradient(circle at 93% 75%,rgba(246,137,94,.18),transparent 34%), linear-gradient(145deg,#120722 0%,#1a0a3a 42%,#54498b 100%);
}
.employee-aurora { position: absolute; pointer-events: none; border-radius: 50%; filter: blur(10px); opacity: .55; }
.s5-aurora-one { width: 620px; height: 620px; left: -260px; top: 20%; background: radial-gradient(circle,rgba(220,79,245,.22),transparent 68%); }
.s5-aurora-two { width: 540px; height: 540px; right: -230px; bottom: -20%; background: radial-gradient(circle,rgba(246,137,94,.2),transparent 68%); }
.roseflow-section-five[data-theme="dark"] .s5-aurora-one { background: radial-gradient(circle,rgba(220,79,245,.3),transparent 68%); }
.roseflow-section-five[data-theme="dark"] .s5-aurora-two { background: radial-gradient(circle,rgba(246,137,94,.24),transparent 68%); }
.employee-inner { min-height: 780px; display: flex; flex-direction: column; }
.employee-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; }
.employee-s5-eyebrow { color: var(--purple-deep); }
.roseflow-section-five[data-theme="dark"] .employee-s5-eyebrow { color: #e0d9fa; }
.employee-header h2 { margin-top: 14px; font-size: clamp(43px,5vw,72px); line-height: 1.01; letter-spacing: -.055em; }
.employee-header h2 em { background-image: linear-gradient(100deg,#54498b,#dc4ff5 55%,#f6895e); }
.roseflow-section-five[data-theme="dark"] .employee-header h2 em { background-image: linear-gradient(100deg,#d9cdf8,#fc90e4 55%,#f6895e); }
.employee-offer { position: relative; min-width: 230px; padding: 15px 42px 15px 17px; display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--employee-line); border-radius: 17px; background: var(--employee-panel); box-shadow: 0 16px 42px var(--employee-shadow), inset 0 1px 0 var(--line-bright); backdrop-filter: blur(18px); transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.employee-offer::after { content: "↗"; position: absolute; top: 50%; right: 16px; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: linear-gradient(135deg,var(--purple-deep),var(--pink)); font-size: 10px; transform: translateY(-50%); }
.employee-offer:hover { border-color: rgba(220,79,245,.34); box-shadow: 0 20px 52px var(--employee-shadow), inset 0 1px 0 var(--line-bright); transform: translateY(-2px); }
.employee-offer span { color: var(--employee-muted); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.employee-offer strong { font-family: var(--heading); font-size: 14px; }
.employee-offer small { color: var(--employee-faint); font-size: 8px; }
.employee-stage { flex: 1; min-height: 560px; margin-top: 20px; display: grid; grid-template-columns: minmax(240px,1fr) minmax(330px,420px) minmax(250px,1fr); gap: clamp(24px,4vw,68px); align-items: center; }
.incoming-side, .output-side { min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.incoming-bubble, .booking-output, .insight-output { position: relative; border: 1px solid var(--employee-line); box-shadow: 0 25px 70px var(--employee-shadow), inset 0 1px 0 var(--line-bright); backdrop-filter: blur(18px); }
.incoming-bubble { max-width: 310px; padding: 15px 17px; border-radius: 19px; color: var(--employee-ink); background: var(--employee-panel-strong); }
.owner-bubble { align-self: flex-end; border-bottom-right-radius: 5px; }
.client-bubble { align-self: flex-start; border-bottom-left-radius: 5px; background: linear-gradient(145deg,var(--employee-panel-strong),var(--employee-panel-soft)); }
.incoming-bubble > span { color: var(--employee-muted); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.incoming-bubble p { margin-top: 8px; font-size: 12px; line-height: 1.5; }
.incoming-bubble small { display: block; margin-top: 7px; color: var(--employee-faint); font-size: 7px; }
.ai-employee.is-visible .incoming-bubble { animation: incomingReveal .65s cubic-bezier(.22,.75,.25,1) both; }
.ai-employee.is-visible .client-bubble { animation-delay: .18s; }

.receptionist-stage { position: relative; height: 570px; display: flex; justify-content: center; align-items: flex-end; }
.receptionist-halo { position: absolute; left: 50%; top: 45%; width: 370px; height: 370px; border-radius: 50%; background: radial-gradient(circle at 50% 45%,rgba(252,144,228,.32),rgba(149,130,195,.16) 48%,transparent 70%); transform: translate(-50%,-50%); animation: haloBreathe 5.5s ease-in-out infinite; }
.roseflow-section-five[data-theme="dark"] .receptionist-halo { background: radial-gradient(circle at 50% 45%,rgba(252,144,228,.38),rgba(149,130,195,.18) 48%,transparent 70%); }
.agent-status { position: absolute; z-index: 5; top: 42px; left: 50%; padding: 8px 12px; display: flex; align-items: center; gap: 7px; border: 1px solid var(--employee-line); border-radius: 999px; color: var(--employee-ink); background: var(--employee-panel); box-shadow: 0 12px 30px var(--employee-shadow), inset 0 1px 0 var(--line-bright); font-size: 8px; font-weight: 700; transform: translateX(-50%); backdrop-filter: blur(18px); }
.agent-status i { width: 7px; height: 7px; border-radius: 50%; background: #4fd08d; box-shadow: 0 0 0 5px rgba(79,208,141,.12); }
.employee-receptionist { position: relative; z-index: 3; width: auto; height: 540px; object-fit: contain; object-position: center bottom; opacity: 1; transform: none; transform-origin: 50% 72%; filter: drop-shadow(0 30px 44px rgba(77,52,111,.17)); transition: filter .3s ease; }
.roseflow-section-five[data-theme="dark"] .employee-receptionist { filter: drop-shadow(0 30px 44px rgba(4,1,12,.3)); }
.ai-employee.is-visible .employee-receptionist { animation: receptionistEnter .8s cubic-bezier(.22,.75,.25,1) .15s both, receptionistIdle 5.4s ease-in-out 1.1s infinite; }
.booking-output { max-width: 340px; padding: 17px; border-radius: 19px; color: var(--employee-ink); background: var(--employee-panel-strong); }
.booking-output > div { padding-bottom: 11px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--employee-line); }
.booking-output > div span { color: var(--employee-muted); font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.booking-output > div i { padding: 4px 7px; border-radius: 999px; color: #267d55; background: rgba(79,184,132,.12); font-size: 7px; font-style: normal; font-weight: 800; }
.booking-output p { margin-top: 12px; display: flex; flex-direction: column; gap: 5px; }
.booking-output .result-line + .result-line { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--employee-line); }
.booking-output .result-line small { color: var(--employee-muted); font-size: 7px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.booking-output strong { font-family: var(--heading); font-size: 13px; }
.booking-output small { color: var(--employee-muted); font-size: 8px; }
.insight-output { max-width: 320px; align-self: flex-end; padding: 17px 18px; border-radius: 19px 19px 5px 19px; color: #31152d; background: linear-gradient(140deg,#fbe8c8,#f9cfda 55%,#f6a180); }
.insight-output > span { color: #7a3b58; font-size: 8px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.insight-output p { margin-top: 8px; font-size: 11px; line-height: 1.55; }
.ai-employee.is-visible .output-side > article { animation: outputReveal .65s cubic-bezier(.22,.75,.25,1) .32s both; }
.ai-employee.is-visible .insight-output { animation-delay: .5s; }
.role-tags { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
.role-tags span { --role-delay: 0ms; padding: 9px 13px; display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--employee-line); border-radius: 999px; color: var(--employee-role); background: var(--employee-panel); box-shadow: inset 0 1px 0 var(--line-bright); font-size: 9px; font-weight: 600; opacity: 0; transform: translateY(8px); backdrop-filter: blur(18px); }
.role-tags i { color: var(--pink); font-style: normal; }
.ai-employee.is-visible .role-tags span { animation: roleReveal .45s ease calc(.75s + var(--role-delay)) both; }

/* Part 3 */
.whats-included { min-height: 650px; padding: 64px 0 58px; background: radial-gradient(circle at 8% 18%,rgba(224,217,250,.55),transparent 27%), radial-gradient(circle at 92% 88%,rgba(246,137,94,.13),transparent 27%), var(--page); }
.included-header { display: grid; grid-template-columns: minmax(400px,.9fr) minmax(320px,.6fr); gap: 70px; align-items: end; }
.included-header h2 { margin-top: 13px; font-size: clamp(37px,4.1vw,58px); line-height: 1.04; letter-spacing: -.05em; }
.included-header > p { max-width: 520px; justify-self: end; color: var(--muted); font-size: 14px; line-height: 1.68; }
.suite-tabs { margin-top: 30px; display: inline-flex; gap: 5px; padding: 5px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); box-shadow: inset 0 1px 0 var(--line-bright); }
.suite-tabs button { min-height: 38px; padding: 0 14px; display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; color: var(--faint); background: transparent; font-size: 9px; font-weight: 700; }
.suite-tabs button.active { color: #fff; background: linear-gradient(105deg,var(--purple-deep),var(--pink)); box-shadow: 0 9px 20px rgba(220,79,245,.19); }
.suite-tabs button span { padding: 3px 6px; border-radius: 999px; color: inherit; background: rgba(255,255,255,.14); font-size: 6px; text-transform: uppercase; letter-spacing: .06em; }
.suite-tabs button:disabled { cursor: not-allowed; opacity: .68; }
.feature-grid { margin-top: 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.feature-grid button { min-height: 43px; min-width: 0; padding: 0 12px 0 15px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: var(--surface); box-shadow: 0 10px 26px rgba(50,34,78,.055), inset 0 1px 0 var(--line-bright); font-size: 9px; font-weight: 700; cursor: pointer; transition: transform .2s ease, color .2s ease, border-color .2s ease, background .2s ease; }
.feature-grid button:hover { transform: translateY(-2px); color: var(--ink); border-color: rgba(220,79,245,.3); }
.feature-grid button.flagship { color: #fff; border-color: transparent; background: linear-gradient(105deg,var(--purple-deep),var(--pink) 64%,var(--peach)); box-shadow: 0 12px 28px rgba(220,79,245,.2); }
.feature-grid button.active { color: #fff; border-color: transparent; background: linear-gradient(105deg,var(--purple-deep),var(--pink) 64%,var(--peach)); box-shadow: 0 14px 32px rgba(220,79,245,.24), inset 0 1px 0 rgba(255,255,255,.2); }
.feature-grid button.flagship.active { color: #fff; }
.feature-grid button small { padding: 3px 6px; border-radius: 999px; color: #fff; background: #27313a; font-size: 6px; font-weight: 800; text-transform: uppercase; }
.feature-grid button i { color: var(--faint); font-size: 10px; font-style: normal; transition: transform .2s ease; }
.feature-grid button.flagship i { color: #fff; }
.feature-grid button.active i { color: #fff; transform: rotate(45deg); }
.feature-grid button.active small { color: #fff; background: rgba(26,10,58,.3); }
.feature-detail { min-height: 124px; margin-top: 27px; padding: 22px 24px; display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 30px; align-items: center; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.feature-detail > div { animation: detailReveal .32s cubic-bezier(.22,.75,.25,1) both; }
.feature-detail > div > span { color: var(--purple-deep); font-size: 8px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.feature-detail h3 { margin-top: 7px; font-size: 19px; letter-spacing: -.035em; }
.feature-detail > div > p { max-width: 770px; margin-top: 7px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.feature-prompt { display: flex; align-items: center; gap: 10px; color: var(--faint); font-size: 11px; font-style: italic; }
.feature-prompt span { color: var(--pink); font-style: normal; }
.feature-detail > a { min-height: 41px; padding: 0 16px; display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; color: #fff; background: linear-gradient(105deg,var(--purple-deep),var(--pink) 64%,var(--peach)); box-shadow: 0 12px 28px rgba(220,79,245,.18); font-size: 9px; font-weight: 800; white-space: nowrap; transition: transform .2s ease; }
.feature-detail > a:hover { transform: translateY(-2px); }

@keyframes caretBlink { 0%,48% { opacity:1; } 49%,100% { opacity:0; } }
@keyframes incomingReveal { from { opacity:0; transform:translateX(-26px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes outputReveal { from { opacity:0; transform:translateX(-18px) scale(.97); } to { opacity:1; transform:none; } }
@keyframes receptionistEnter { from { opacity:0; transform:translateY(18px) scale(.985); } to { opacity:1; transform:none; } }
@keyframes receptionistIdle { 0%,100% { transform:translateY(0) scale(1); } 50% { transform:translateY(-4px) scale(1.006); } }
@keyframes haloBreathe { 0%,100% { opacity:.62; transform:translate(-50%,-50%) scale(.96); } 50% { opacity:.88; transform:translate(-50%,-50%) scale(1.04); } }
@keyframes roleReveal { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes detailReveal { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }

@media (max-width: 1120px) {
  .fast-setup-grid { grid-template-columns: minmax(300px,.75fr) minmax(520px,1.25fr); gap:45px; }
  .wizard-shell { grid-template-columns:minmax(0,1fr) 164px; }
  .wizard-conversation { width:min(540px,calc(100% - 34px)); }
  .employee-stage { grid-template-columns:minmax(210px,1fr) 330px minmax(220px,1fr); gap:24px; }
  .employee-receptionist { height:500px; }
  .receptionist-stage { height:530px; }
  .feature-grid button { padding-inline:11px; font-size:8px; }
}

@media (max-width: 900px) {
  .fast-setup { padding-top:80px; }
  .fast-setup-grid { grid-template-columns:1fr; gap:38px; }
  .setup-copy { max-width:650px; }
  .wizard-shell { min-height:456px; grid-template-columns:minmax(0,1fr) 190px; }
  .ai-employee { min-height:1180px; }
  .employee-stage { grid-template-columns:1fr 350px 1fr; grid-template-areas:"incoming receptionist output"; gap:16px; }
  .incoming-side { grid-area:incoming; }
  .receptionist-stage { grid-area:receptionist; }
  .output-side { grid-area:output; }
  .incoming-bubble, .booking-output, .insight-output { font-size:10px; }
  .included-header { grid-template-columns:1fr; gap:18px; }
  .included-header > p { justify-self:start; }
  .feature-grid button { font-size:9px; }
}

@media (max-width: 720px) {
  .s5-chapter-inner { width:min(100% - 28px, 620px); }
  .section-toolbar { position:absolute; top:12px; right:14px; }
  .fast-setup { min-height:0; padding:78px 0 46px; }
  .setup-copy h1 { font-size:43px; }
  .wizard-shell { grid-template-columns:1fr; border-radius:23px; }
  .wizard-conversation { width:calc(100% - 28px); padding-top:24px; }
  .wizard-heading h3 { font-size:22px; }
  .wizard-composer { min-height:142px; }
  .organised-panel { grid-template-columns:1fr; }
  .wizard-steps { padding:15px; border-top:1px solid var(--line); border-left:0; }
  .wizard-step-label { padding-bottom:11px; }
  .wizard-steps ol { margin-top:13px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
  .wizard-steps li { min-height:76px; display:flex; flex-direction:column; gap:7px; }
  .wizard-steps li:not(:last-child)::after { left:30px; top:14px; width:calc(100% - 25px); height:1px; }
  .wizard-steps li > div { padding:0; }
  .wizard-steps li strong { font-size:7px; }
  .wizard-steps li small { display:none; }
  .wizard-ready { margin-top:2px; }
  .ai-employee { min-height:1370px; padding-top:50px; }
  .employee-header { align-items:flex-start; flex-direction:column; }
  .employee-header h2 { font-size:45px; }
  .employee-offer { min-width:0; }
  .employee-stage { margin-top:32px; grid-template-columns:1fr; grid-template-areas:"incoming" "receptionist" "output"; gap:15px; }
  .incoming-side, .output-side { gap:12px; }
  .incoming-bubble, .booking-output, .insight-output { max-width:86%; }
  .receptionist-stage { height:540px; }
  .employee-receptionist { height:510px; }
  .role-tags { margin-top:24px; }
  .whats-included { padding-block:50px; }
  .included-header h2 { font-size:39px; }
  .suite-tabs { width:100%; overflow-x:auto; }
  .suite-tabs button { flex:0 0 auto; }
  .feature-grid { display:grid; grid-template-columns:1fr; gap:7px; }
  .feature-grid button { justify-content:space-between; width:100%; }
  .feature-detail { grid-template-columns:1fr; }
  .feature-detail > a { justify-self:start; }
}

@media (max-width: 440px) {
  .setup-copy h1 { font-size:38px; }
  .setup-actions > * { flex:1 1 145px; }
  .wizard-topbar { padding-inline:13px; }
  .wizard-status { font-size:7px; }
  .wizard-conversation { width:calc(100% - 22px); }
  .wizard-heading p { max-width:280px; }
  .wizard-composer { padding-inline:14px; }
  .organised-grid > span { flex:1 1 44%; }
  .employee-header h2 { font-size:39px; }
  .employee-receptionist { height:460px; }
  .receptionist-stage { height:485px; }
}

@media (prefers-reduced-motion: reduce) {
  .roseflow-section-five *, .roseflow-section-five *::before, .roseflow-section-five *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* Integrates with the homepage CTA system and removes standalone arrow treatments. */
.roseflow-section-five .play-setup,
.roseflow-section-five .feature-detail > a { border-radius: 13px; }
.roseflow-section-five .employee-offer { padding-right: 17px; }
.roseflow-section-five .employee-offer::after { display: none; }