/* =============================================================================
   YesBOS 2.0 — Integrations page: "A Digital Employee at work."
   The Digital Employee is the hero. Xero / MYOB / Hnry are the tools it uses,
   just as a finance manager uses accounting software. Hierarchy everywhere:
   Business Owner → Digital Employee → Business Software → Business Outcome.
   Builds on design-system.css.
   ============================================================================= */

/* --- Intro (the hire, not the software) --- */
.ig-intro { padding-block: clamp(4rem, 3rem + 5vw, 7rem) clamp(1.5rem, 1rem + 2vw, 3rem); }
.ig-intro__head { max-width: 42rem; }
.ig-intro h1 { margin-top: var(--sp-3); font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.3rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.06; }
.ig-intro .lead { margin-top: var(--sp-5); max-width: 37rem; }

/* --- The employee at work --- */
.emp { padding-bottom: clamp(3rem, 2rem + 4vw, 5rem); }
.emp__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 1rem + 4vw, 4rem); align-items: start; }
@media (min-width: 940px) { .emp__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); } }

/* The Digital Employee card — the hero of the page */
.emp-card { background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-2xl); box-shadow: var(--shadow-lg); padding: clamp(1.5rem, 1rem + 2vw, 2.25rem); }
.emp-card__top { display: flex; align-items: center; gap: var(--sp-4); }
.emp-card__avatar { flex: none; width: 46px; height: 46px; border-radius: var(--r-lg); background: var(--forest-tint); display: grid; place-items: center; }
.emp-card__avatar svg { width: 24px; height: 27px; overflow: visible; }
.emp-card__avatar .stem { stroke: var(--grey); stroke-width: 22; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.emp-card__avatar .check { stroke: var(--emerald); stroke-width: 22; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.emp-card__name { font-size: var(--fs-h3); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); }
.emp-card__role { font-size: var(--fs-sm); color: var(--text-soft); margin-top: 1px; }
.emp-card__status { margin-left: auto; display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-xs); font-weight: 600; color: var(--forest); background: var(--forest-tint); border-radius: var(--r-full); padding: .3rem .7rem; }
.emp-card__status .dot { width: .45rem; height: .45rem; border-radius: 50%; background: var(--emerald); }
@media (prefers-reduced-motion: no-preference) { .emp-card__status .dot { animation: pulseDot 2.2s ease-in-out infinite; } @keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: .35; } } }

.emp-card__label { display: block; margin-top: var(--sp-6); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); }

/* the tool belt — the software it works with (subordinate to the employee) */
.belt { margin-top: var(--sp-4); display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.belt-tool {
  cursor: pointer; background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--r-md);
  padding: .7rem 1rem; text-align: left; min-width: 8.5rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.belt-tool:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.belt-tool[aria-pressed="true"] { border-color: var(--forest); box-shadow: var(--shadow-sm); }
.belt-tool__name { display: block; font-weight: 700; color: var(--ink); font-size: var(--fs-sm); }
.belt-tool__for { display: block; margin-top: .15rem; font-size: var(--fs-xs); color: var(--text-soft); }

.emp-resp { margin-top: var(--sp-4); list-style: none; padding: 0; display: grid; grid-template-columns: 1fr; gap: .55rem; }
@media (min-width: 520px) { .emp-resp { grid-template-columns: 1fr 1fr; } }
.emp-resp li { display: flex; align-items: center; gap: .55rem; font-size: var(--fs-sm); color: var(--ink); }
.emp-resp .mark { flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--forest-tint); color: var(--forest); display: grid; place-items: center; }
.emp-resp .mark svg { width: 10px; height: 10px; }

.emp-note { margin-top: var(--sp-6); font-size: var(--fs-sm); color: var(--text-soft); line-height: 1.5; }
.emp-note b { color: var(--ink); font-weight: 600; }

/* Right — what the employee delivers, changes with the selected tool */
.deliver { position: sticky; top: 104px; }
@media (max-width: 939px) { .deliver { position: static; } }
.deliver__using { font-size: var(--fs-sm); color: var(--text-soft); transition: opacity .3s var(--ease); }
.deliver__using b { color: var(--forest); font-weight: 600; }
.deliver__list { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); transition: opacity .3s var(--ease), transform .3s var(--ease); }
.deliver.is-swapping .deliver__using, .deliver.is-swapping .deliver__list { opacity: 0; transform: translateY(4px); }
.deliver__item { position: relative; padding-left: var(--sp-5); font-size: var(--fs-h4); font-weight: 600; color: var(--ink); letter-spacing: -0.01em; }
.deliver__item::before { content: ""; position: absolute; left: 0; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); }

/* --- The Phase-1 Digital Workforce (badge roster — the site-wide badge system) --- */
.toolkit__head { max-width: 40rem; }
.toolkit__head h2 { margin-top: var(--sp-3); }
.toolkit__head .lead { margin-top: var(--sp-4); }
.tk-roster { list-style: none; padding: 0; margin-top: var(--sp-7); }
.tk-emp {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  column-gap: var(--sp-5); row-gap: .3rem;
  padding: var(--sp-5) 0; border-top: 1px solid var(--line);
}
.tk-emp:last-child { border-bottom: 1px solid var(--line); }
.tk-emp__name { grid-column: 1; grid-row: 1; font-size: var(--fs-h4); font-weight: 600; color: var(--text-soft); letter-spacing: -0.01em; }
.tk-emp--live .tk-emp__name { color: var(--ink); }
.tk-emp__role { grid-column: 1; grid-row: 2; font-size: var(--fs-sm); color: var(--text-soft); }
.tk-emp .de-badge { grid-column: 2; grid-row: 1 / span 2; justify-self: end; }
@media (max-width: 520px) {
  .tk-emp { grid-template-columns: 1fr; }
  .tk-emp .de-badge { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--sp-2); }
}

/* --- The flow: how the work actually happens --- */
.flow-how { background: var(--forest-wash); }
.flow-how__head { text-align: center; max-width: 34rem; margin-inline: auto; }
.flow-steps { margin-top: var(--sp-7); display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: var(--sp-3); }
.flow-step { display: flex; flex-direction: column; align-items: center; gap: .5rem; text-align: center; max-width: 9rem; }
.flow-step__box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: .7rem 1rem; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); box-shadow: var(--shadow-xs); min-width: 6.5rem; }
.flow-step--emp .flow-step__box { border-color: var(--forest); color: var(--forest); background: var(--surface); }
.flow-step--tool .flow-step__box { color: var(--text-soft); font-weight: 500; }
.flow-step__cap { font-size: var(--fs-xs); color: var(--text-soft); }
.flow-sep { align-self: center; color: var(--line); display: grid; place-items: center; }
.flow-sep svg { width: 18px; height: 18px; color: color-mix(in srgb, var(--forest) 40%, var(--line)); }
@media (max-width: 620px) { .flow-sep { transform: rotate(90deg); } .flow-steps { flex-direction: column; align-items: center; } .flow-step { max-width: none; } }

/* --- Memorable statement --- */
.ig-statement { background: var(--surface); }
.ig-statement .container { text-align: center; padding-block: clamp(4rem, 3rem + 4vw, 7rem); }
.ig-statement p { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3.1rem); font-weight: 800; letter-spacing: -0.035em; line-height: 1.12; color: var(--ink); text-wrap: balance; max-width: 20ch; margin-inline: auto; }
.ig-statement p .soft { color: var(--text-soft); }

/* --- What YesBOS doesn't do --- */
.notdo { background: var(--forest-wash); }
.notdo__head { max-width: 34rem; }
.notdo__grid { margin-top: var(--sp-7); display: grid; grid-template-columns: 1fr; gap: var(--sp-5); }
@media (min-width: 760px) { .notdo__grid { grid-template-columns: repeat(3, 1fr); } }
.notdo__item { display: flex; align-items: center; gap: .7rem; font-size: var(--fs-h4); font-weight: 600; color: var(--ink); padding: var(--sp-5) 0; border-top: 2px solid var(--line); }
.notdo__item svg { flex: none; width: 20px; height: 20px; color: var(--text-soft); }
.notdo__line { margin-top: var(--sp-6); font-size: var(--fs-lead); color: var(--text-muted); max-width: 42rem; }

/* --- Quiet close --- */
.ig-close { text-align: center; }
.ig-close__inner { max-width: 40rem; margin-inline: auto; }
.ig-close h2 { font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
.ig-close p { margin-top: var(--sp-5); color: var(--text-muted); font-size: var(--fs-lead); }
.ig-close .btn { margin-top: var(--sp-7); }