/* =============================================================================
   HisaBooks — Workspace pages
   -----------------------------------------------------------------------------
   One template (workspace.php) renders six pages. Somebody landing here has
   already half decided the platform might work and is checking whether one
   specific area is deep enough, so the page leads with the workflow end to end,
   then shows the real screens, then the specifics that prove depth.

   Each workspace carries an accent from marketing_workspaces.php. Without it the
   six pages read as one page printed six times, so the accent drives the hero
   wash, the eyebrows, the step numbers, and the active tab.
   ============================================================================= */

/* ── Per-workspace accent ─────────────────────────────────────────────────
   Defaults to brand blue; each body class overrides. Deep values are the ones
   used for text and fills, so every accent clears AA on white.
   ---------------------------------------------------------------------- */
.hb-ws {
    --ws-accent: var(--hb-blue-deep);
    --ws-wash: #e9f0fb;
    --ws-edge: #c6d9f5;
}
.hb-ws--blue   { --ws-accent: #00306f; --ws-wash: #e9f0fb; --ws-edge: #c6d9f5; }
.hb-ws--teal   { --ws-accent: #0b6b71; --ws-wash: #e6f6f7; --ws-edge: #b8e2e5; }
.hb-ws--violet { --ws-accent: #5b41cc; --ws-wash: #f1eefe; --ws-edge: #d3c9f7; }
.hb-ws--green  { --ws-accent: #0f7a4c; --ws-wash: #e9f7f0; --ws-edge: #b9e2cf; }
.hb-ws--amber  { --ws-accent: #8a5a06; --ws-wash: #fdf3e3; --ws-edge: #f2ddb8; }
.hb-ws--slate  { --ws-accent: #3d4a63; --ws-wash: #eef1f6; --ws-edge: #d3dae6; }

.hb-ws .hb-eyebrow { color: var(--ws-accent); }
.hb-ws .hb-eyebrow--night { color: rgba(255, 255, 255, .58); }

/* =============================================================================
   HERO
   ========================================================================== */
.ws-hero {
    position: relative;
    padding-top: calc(var(--hb-nav-h) + clamp(40px, calc(5 * var(--hb-vw, 1vw)), 76px));
    padding-bottom: clamp(56px, calc(6 * var(--hb-vw, 1vw)), 88px);
    overflow: hidden;
    isolation: isolate;
}
.ws-hero__wash {
    position: absolute;
    inset: 0 0 auto 0;
    height: 100%;
    z-index: -1;
    background: linear-gradient(180deg, var(--ws-wash), transparent 78%);
    pointer-events: none;
}

.ws-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
    gap: clamp(32px, calc(4.5 * var(--hb-vw, 1vw)), 72px);
    align-items: center;
}
.ws-hero__copy .hb-eyebrow { margin-bottom: var(--hb-s4); }
.ws-hero__title { margin-bottom: var(--hb-s4); text-wrap: balance; }
.ws-hero__lede { margin-bottom: var(--hb-s7); }

.ws-hero__metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--hb-s4);
    margin-top: clamp(32px, calc(4 * var(--hb-vw, 1vw)), 48px);
    padding-top: var(--hb-s5);
    border-top: 1px solid var(--ws-edge);
}
.ws-hero__metrics dt {
    font-size: var(--hb-t-eyebrow);
    font-weight: 620;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hb-faint);
    margin-bottom: 5px;
}
.ws-hero__metrics dd {
    margin: 0;
    font-size: var(--hb-t-sm);
    font-weight: 600;
    letter-spacing: -.014em;
    color: var(--hb-ink);
    line-height: 1.35;
}

@media (max-width: 940px) {
    .ws-hero__grid { grid-template-columns: 1fr; }
    .ws-hero__stage { order: -1; }
}
@media (max-width: 560px) {
    .ws-hero__metrics { grid-template-columns: 1fr; gap: var(--hb-s3); }
}

/* =============================================================================
   GUIDED SEQUENCE — the signature element of a workspace page
   -----------------------------------------------------------------------------
   Three real screens play in order with a pointer that moves to the part of the
   screen each step is about. The step list is the control: each row carries its
   own meter, which is also the clock driving the advance.

   The pointer target comes from the content (data-cursor), not from this file,
   so a new slide can aim it without a CSS change.
   ========================================================================== */
/* Surface rhythm across the page, so no two neighbours share a background:
   hero wash, story mist, who paper, flow mist, modules paper, groups mist,
   swap paper, outcomes night, questions mist, siblings paper, close night. */
.ws-story { background: var(--hb-mist); }

.ws-story__head { max-width: 54ch; margin-bottom: clamp(36px, calc(4.5 * var(--hb-vw, 1vw)), 56px); }
.ws-story__head .hb-eyebrow { margin-bottom: var(--hb-s4); }
.ws-story__head .hb-lede { margin-top: var(--hb-s4); }

.ws-story__stage {
    display: grid;
    grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
    gap: clamp(28px, calc(4 * var(--hb-vw, 1vw)), 64px);
    align-items: start;
}

/* ── The step list ────────────────────────────────────────────────────── */
.ws-story__steps { display: grid; gap: var(--hb-s2); align-content: start; }
.ws-story__stepitem { list-style: none; }

.ws-story__step {
    position: relative;
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    gap: var(--hb-s3);
    width: 100%;
    padding: var(--hb-s4) var(--hb-s4) calc(var(--hb-s4) + 5px);
    border: 1px solid transparent;
    border-radius: var(--hb-r-lg);
    background: none;
    text-align: left;
    cursor: pointer;
    transition:
        background-color var(--hb-mid) var(--hb-ease),
        border-color var(--hb-mid) var(--hb-ease);
}
.ws-story__step:hover { background: var(--hb-paper); }
.ws-story__step.is-active {
    background: var(--ws-wash);
    border-color: var(--ws-edge);
}

.ws-story__stepnum {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--hb-line);
    background: var(--hb-paper);
    color: var(--hb-muted);
    font-size: 12px;
    font-weight: 640;
    font-variant-numeric: tabular-nums;
    transition:
        background-color var(--hb-mid) var(--hb-ease),
        border-color var(--hb-mid) var(--hb-ease),
        color var(--hb-mid) var(--hb-ease);
}
/* Paper rather than the wash behind a completed number: the accent clears AA
   on paper for all six workspaces, but blue lands just under it on its wash. */
.ws-story__step.is-done .ws-story__stepnum {
    border-color: var(--ws-edge);
    background: var(--hb-paper);
    color: var(--ws-accent);
}
.ws-story__step.is-active .ws-story__stepnum {
    background: var(--ws-accent);
    border-color: var(--ws-accent);
    color: #fff;
}

.ws-story__steptext { display: grid; gap: 3px; }
.ws-story__steptext strong {
    font-size: var(--hb-t-sm);
    font-weight: 620;
    letter-spacing: -.014em;
    color: var(--hb-ink);
}
.ws-story__steptext span {
    font-size: var(--hb-t-xs);
    line-height: 1.55;
    color: var(--hb-muted);
}

/* The meter is the clock. JS writes --fill from 0 to 1 over the dwell. */
.ws-story__meter {
    position: absolute;
    left: var(--hb-s4);
    right: var(--hb-s4);
    bottom: var(--hb-s3);
    height: 2px;
    border-radius: 2px;
    background: var(--hb-line);
    opacity: 0;
    transition: opacity var(--hb-mid) var(--hb-ease);
}
.ws-story__step.is-active .ws-story__meter { opacity: 1; }
.ws-story__meter i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ws-accent);
    transform: scaleX(var(--fill, 0));
    transform-origin: left center;
}

/* ── The screens ──────────────────────────────────────────────────────── */
.ws-story__screens {
    position: relative;
    display: grid;
}
/* Every screen occupies the same cell so the stage never resizes between
   steps. Only the active one is painted. */
.ws-story__screen {
    grid-area: 1 / 1;
    display: grid;
    grid-template-rows: auto 1fr auto;
    border-radius: var(--hb-r-2xl);
    background: var(--hb-paper);
    border: 1px solid var(--hb-line);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 10px, 0);
    transition:
        opacity 520ms var(--hb-ease-out),
        transform 520ms var(--hb-ease-out),
        visibility 0s linear 520ms;
}
.ws-story__screen.is-active {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s, 0s, 0s;
    z-index: 1;
}

.ws-story__shot { position: relative; display: block; background: var(--hb-mist); }
.ws-story__shot img { display: block; width: 100%; height: auto; }

.ws-story__caption {
    padding: var(--hb-s4) var(--hb-s5);
    border-top: 1px solid var(--hb-line);
    font-size: var(--hb-t-xs);
    line-height: 1.6;
    color: var(--hb-muted);
}

/* ── The pointer ──────────────────────────────────────────────────────────
   It enters low-left, travels to whatever the slide points at, and taps once.
   Targets are named in the content; each name resolves to a position here.
   ---------------------------------------------------------------------- */
.ws-story__screen[data-cursor="top-right"]    { --px: 76%; --py: 26%; }
.ws-story__screen[data-cursor="center"]       { --px: 50%; --py: 52%; }
.ws-story__screen[data-cursor="bottom-right"] { --px: 71%; --py: 73%; }
.ws-story__screen[data-cursor="bottom-left"]  { --px: 28%; --py: 73%; }

.ws-story__pointer {
    position: absolute;
    left: 16%;
    top: 88%;
    width: 22px;
    height: 22px;
    margin: -3px 0 0 -3px;
    opacity: 0;
    pointer-events: none;
    color: var(--ws-accent);
    /* The arrow carries its own white outline so it stays readable on any
       screenshot behind it. A drop shadow would do the same job, and this
       site does not use them. */
    background: var(--ws-pointer) center / contain no-repeat;
}
.hb-ws {
    --ws-pointer: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 2.5 19 12l-6.2 1.3L9.6 19.6z' fill='%230a1224' stroke='%23ffffff' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.ws-story__screen.is-pointing .ws-story__pointer {
    left: var(--px, 50%);
    top: var(--py, 50%);
    opacity: 1;
    transition:
        left 1050ms var(--hb-ease-out) 220ms,
        top 1050ms var(--hb-ease-out) 220ms,
        opacity 260ms var(--hb-ease) 220ms;
}

/* The tap ring fires as the pointer arrives. */
.ws-story__pointer::after {
    content: "";
    position: absolute;
    left: 1px;
    top: 1px;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0;
}
.ws-story__screen.is-pointing .ws-story__pointer::after {
    animation: ws-tap 620ms var(--hb-ease-out) 1300ms;
}
@keyframes ws-tap {
    from { opacity: .35; transform: scale(.3); }
    to   { opacity: 0;   transform: scale(2.4); }
}

/* Reduced motion, or no JS: show the screens as a plain stacked list with no
   pointer and no advancing. Nothing is hidden from anyone. */
.ws-story__stage.is-static { grid-template-columns: 1fr; }
.ws-story__stage.is-static .ws-story__steps {
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: var(--hb-s3);
}
.ws-story__stage.is-static .ws-story__screens { display: grid; gap: var(--hb-s4); }
.ws-story__stage.is-static .ws-story__screen {
    grid-area: auto;
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: none;
}
.ws-story__stage.is-static .ws-story__pointer { display: none; }

@media (prefers-reduced-motion: reduce) {
    .ws-story__screen { transition: none; }
    .ws-story__pointer { display: none; }
    .ws-story__meter i { transition: none; }
}

@media (max-width: 940px) {
    .ws-story__stage { grid-template-columns: 1fr; }
    .ws-story__steps { grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--hb-s2); }
    .ws-story__steptext span { display: none; }
}
@media (max-width: 620px) {
    .ws-story__steps { grid-auto-flow: row; }
    .ws-story__steptext span { display: block; }
}

/* =============================================================================
   WHO OPENS THIS — three roles sharing one record
   -----------------------------------------------------------------------------
   Deliberately not cards on a wash. These are set as columns divided by rules,
   so the section reads as one statement split three ways rather than three
   competing tiles.
   ========================================================================== */
.ws-who__head { max-width: 46ch; margin-bottom: clamp(36px, calc(4.5 * var(--hb-vw, 1vw)), 56px); }
.ws-who__head .hb-eyebrow { margin-bottom: var(--hb-s4); }

.ws-who__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 0;
    border-top: 2px solid var(--ws-accent);
}
.ws-who__card {
    padding: clamp(28px, calc(3 * var(--hb-vw, 1vw)), 40px) clamp(22px, calc(2.4 * var(--hb-vw, 1vw)), 34px);
    border-right: 1px solid var(--hb-line);
    transition: background-color var(--hb-mid) var(--hb-ease);
}
.ws-who__card:last-child { border-right: 0; }
.ws-who__card:hover { background: var(--hb-mist); }

.ws-who__role {
    display: block;
    font-size: var(--hb-t-eyebrow);
    font-weight: 620;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ws-accent);
    margin-bottom: var(--hb-s4);
}
.ws-who__card h3 {
    font-size: clamp(1.02rem, .96rem + calc(.3 * var(--hb-vw, 1vw)), 1.2rem);
    font-weight: 620;
    letter-spacing: -.018em;
    line-height: 1.32;
    color: var(--hb-ink);
    margin-bottom: var(--hb-s3);
    text-wrap: balance;
}
.ws-who__card p {
    font-size: var(--hb-t-sm);
    line-height: 1.7;
    color: var(--hb-ink-soft);
}

@media (max-width: 780px) {
    .ws-who__card { border-right: 0; border-bottom: 1px solid var(--hb-line); }
    .ws-who__card:last-child { border-bottom: 0; }
}

/* =============================================================================
   BEFORE AND AFTER — what the workspace replaces
   -----------------------------------------------------------------------------
   A ledger of swaps. The left side is muted and struck through in tone, the
   right side is the accent. Reading down the column is the argument.
   ========================================================================== */
.ws-swap__head { max-width: 48ch; margin-bottom: clamp(32px, calc(4 * var(--hb-vw, 1vw)), 48px); }
.ws-swap__head .hb-eyebrow { margin-bottom: var(--hb-s4); }
.ws-swap__head .hb-lede { margin-top: var(--hb-s4); }

.ws-swap__list { display: grid; gap: var(--hb-s3); }
.ws-swap__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
    align-items: center;
    gap: var(--hb-s3);
    padding: clamp(18px, calc(2 * var(--hb-vw, 1vw)), 24px) clamp(20px, calc(2.2 * var(--hb-vw, 1vw)), 28px);
    border-radius: var(--hb-r-lg);
    border: 1px solid var(--hb-line);
    background: var(--hb-paper);
    transition: border-color var(--hb-mid) var(--hb-ease);
}
.ws-swap__row:hover { border-color: var(--ws-edge); }

.ws-swap__from {
    font-size: var(--hb-t-sm);
    line-height: 1.55;
    color: var(--hb-faint);
}
.ws-swap__to {
    font-size: var(--hb-t-sm);
    font-weight: 560;
    line-height: 1.55;
    color: var(--hb-ink);
}
.ws-swap__arrow {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--ws-wash);
    color: var(--ws-accent);
}
.ws-swap__arrow svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform var(--hb-mid) var(--hb-ease);
}
.ws-swap__row:hover .ws-swap__arrow svg { transform: translateX(2px); }

@media (max-width: 700px) {
    .ws-swap__row { grid-template-columns: 1fr; gap: var(--hb-s2); text-align: left; }
    .ws-swap__arrow { transform: rotate(90deg); }
    .ws-swap__row:hover .ws-swap__arrow svg { transform: none; }
}

/* =============================================================================
   WORKFLOW — a connected run of steps, not four loose cards
   ========================================================================== */
.ws-flow { background: var(--hb-mist); }
.ws-flow__head { max-width: 46ch; margin-bottom: clamp(40px, calc(5 * var(--hb-vw, 1vw)), 64px); }
.ws-flow__head .hb-eyebrow { margin-bottom: var(--hb-s4); }
.ws-flow__head .hb-lede { margin-top: var(--hb-s4); }

.ws-flow__track { position: relative; }
.ws-flow__steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--hb-s4);
}

/* The rail runs between the first and last step markers, never to the edges
   of the track, so it cannot hang past the final number. JS measures those
   two points and writes the geometry; when the steps wrap onto more than one
   row it writes --rail-on: 0 and the rail takes itself out of the picture. */
.ws-flow__rail {
    position: absolute;
    left: var(--rail-left, 0px);
    top: var(--rail-top, 0px);
    width: var(--rail-width, 0px);
    /* A stale measurement must never be able to widen the page. The rail is
       absolutely positioned, so its width counts towards the scroll area
       whether or not it is visible. */
    max-width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--hb-line);
    opacity: var(--rail-on, 0);
    pointer-events: none;
    z-index: 0;
}
.ws-flow__rail i {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ws-accent);
    transform: scaleX(var(--draw, 0));
    transform-origin: left center;
}

.ws-flow__step {
    position: relative;
    z-index: 1;
    padding: clamp(22px, calc(2.4 * var(--hb-vw, 1vw)), 30px);
    border-radius: var(--hb-r-xl);
    background: var(--hb-paper);
    border: 1px solid var(--hb-line);
    transition: border-color var(--hb-mid) var(--hb-ease);
}
.ws-flow__step:hover { border-color: var(--ws-edge); }

.ws-flow__num {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin-bottom: var(--hb-s4);
    border-radius: 50%;
    background: var(--hb-paper);
    border: 2px solid var(--hb-line);
    color: var(--hb-muted);
    font-size: 12.5px;
    font-weight: 640;
    font-variant-numeric: tabular-nums;
    transition:
        background-color 320ms var(--hb-ease),
        border-color 320ms var(--hb-ease),
        color 320ms var(--hb-ease);
}
/* Each marker lights as the drawn rail reaches it. */
.ws-flow__num.is-lit {
    background: var(--ws-accent);
    border-color: var(--ws-accent);
    color: #fff;
}

.ws-flow__step p {
    font-size: var(--hb-t-sm);
    line-height: 1.65;
    color: var(--hb-ink-soft);
}

@media (prefers-reduced-motion: reduce) {
    .ws-flow__num { transition: none; }
}

/* =============================================================================
   MODULES — a tab rail driving one large screenshot
   Reuses the landing page's suite behaviour via data-home-tab / data-home-panel.
   ========================================================================== */
.ws-modules__head { max-width: 48ch; margin-bottom: clamp(32px, calc(4 * var(--hb-vw, 1vw)), 48px); }
.ws-modules__head .hb-eyebrow { margin-bottom: var(--hb-s4); }
.ws-modules__head .hb-lede { margin-top: var(--hb-s4); }

.ws-modules__rail {
    display: flex;
    flex-wrap: wrap;
    gap: var(--hb-s2);
    margin-bottom: var(--hb-s6);
}
.ws-modules__tab {
    padding: 9px 16px;
    border-radius: var(--hb-r-pill);
    border: 1px solid var(--hb-line);
    background: var(--hb-paper);
    font-size: var(--hb-t-xs);
    font-weight: 540;
    color: var(--hb-muted);
    white-space: nowrap;
    transition:
        background-color var(--hb-mid) var(--hb-ease),
        border-color var(--hb-mid) var(--hb-ease),
        color var(--hb-mid) var(--hb-ease);
}
.ws-modules__tab:hover { color: var(--hb-ink); border-color: var(--ws-edge); }
.ws-modules__tab.is-active {
    background: var(--ws-accent);
    border-color: var(--ws-accent);
    color: #fff;
}

.ws-modules__stage {
    border-radius: var(--hb-r-2xl);
    background: var(--ws-wash);
    border: 1px solid var(--ws-edge);
    padding: clamp(20px, calc(3 * var(--hb-vw, 1vw)), 40px);
}
.ws-module {
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1.28fr);
    gap: clamp(24px, calc(3.5 * var(--hb-vw, 1vw)), 52px);
    align-items: center;
}
.ws-module[hidden] { display: none; }
.ws-module__copy .hb-h3 { margin-bottom: var(--hb-s3); }
.ws-module.is-active .ws-module__shot { animation: ws-panel-in 560ms var(--hb-ease-out) both; }
.ws-module.is-active .ws-module__copy { animation: ws-panel-in 480ms var(--hb-ease-out) both; }

@keyframes ws-panel-in {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
    .ws-module { grid-template-columns: 1fr; }
    .ws-module__shot { order: -1; }
}
@media (prefers-reduced-motion: reduce) {
    .ws-module.is-active .ws-module__shot,
    .ws-module.is-active .ws-module__copy { animation: none; }
}

/* =============================================================================
   FEATURE GROUPS
   ========================================================================== */
.ws-groups { background: var(--hb-mist); }
.ws-groups__head { max-width: 46ch; margin-bottom: clamp(32px, calc(4 * var(--hb-vw, 1vw)), 48px); }
.ws-groups__head .hb-eyebrow { margin-bottom: var(--hb-s4); }

.ws-groups__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--hb-s4);
}
.ws-group {
    padding: clamp(24px, calc(2.6 * var(--hb-vw, 1vw)), 32px);
    border-radius: var(--hb-r-xl);
    background: var(--hb-paper);
    border: 1px solid var(--hb-line);
}
.ws-group h3 {
    font-size: var(--hb-t-body);
    font-weight: 620;
    letter-spacing: -.016em;
    margin-bottom: var(--hb-s4);
    padding-bottom: var(--hb-s3);
    border-bottom: 1px solid var(--hb-line-soft);
}
.ws-group ul { display: grid; gap: 8px; }
.ws-group li {
    position: relative;
    padding-left: 22px;
    font-size: var(--hb-t-sm);
    line-height: 1.6;
    color: var(--hb-ink-soft);
}
.ws-group li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: .62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ws-accent);
}

/* =============================================================================
   OUTCOMES — night surface so the "what changes" moment lands differently
   ========================================================================== */
.ws-outcomes { background: var(--hb-night); color: #fff; }
.ws-outcomes__grid {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    gap: clamp(32px, calc(5 * var(--hb-vw, 1vw)), 76px);
    align-items: start;
}
.ws-outcomes__copy .hb-eyebrow { margin-bottom: var(--hb-s4); }
.ws-outcomes__copy .hb-h2 { color: #fff; }
.ws-outcomes__copy .hb-lede { color: var(--hb-night-text); margin-top: var(--hb-s4); }

.ws-outcomes__list { display: grid; }
.ws-outcomes__list li {
    position: relative;
    padding: var(--hb-s5) 0 var(--hb-s5) 40px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    font-size: var(--hb-t-sm);
    line-height: 1.7;
    color: rgba(255, 255, 255, .8);
}
.ws-outcomes__list li:first-child { padding-top: 0; }
.ws-outcomes__list li:first-child::before { top: .5em; }
.ws-outcomes__list li:last-child { border-bottom: 0; }
.ws-outcomes__list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: calc(var(--hb-s5) + .5em);
    width: 17px;
    height: 17px;
    background: var(--hb-check-gold) center / contain no-repeat;
}

@media (max-width: 880px) { .ws-outcomes__grid { grid-template-columns: 1fr; } }

/* =============================================================================
   QUESTIONS
   ========================================================================== */
.ws-questions { background: var(--hb-mist); }
.ws-questions__grid {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: clamp(32px, calc(5 * var(--hb-vw, 1vw)), 76px);
    align-items: start;
}
.ws-questions__head .hb-eyebrow { margin-bottom: var(--hb-s4); }
.ws-questions__head .hb-h2 { margin-bottom: var(--hb-s4); }
.ws-questions__list { display: grid; gap: var(--hb-s3); }

@media (max-width: 880px) { .ws-questions__grid { grid-template-columns: 1fr; } }

/* =============================================================================
   SIBLING WORKSPACES
   ========================================================================== */
.ws-siblings__head { max-width: 46ch; margin-bottom: clamp(32px, calc(4 * var(--hb-vw, 1vw)), 48px); }
.ws-siblings__head .hb-eyebrow { margin-bottom: var(--hb-s4); }
.ws-siblings__head .hb-lede { margin-top: var(--hb-s4); }

.ws-siblings__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--hb-s3);
}
.ws-sibling {
    display: block;
    padding: var(--hb-s5);
    border-radius: var(--hb-r-lg);
    background: var(--hb-paper);
    border: 1px solid var(--hb-line);
    transition: border-color var(--hb-mid) var(--hb-ease), background-color var(--hb-mid) var(--hb-ease);
}
.ws-sibling:hover { border-color: var(--ws-edge); background: var(--ws-wash); }
.ws-sibling strong {
    display: block;
    font-size: var(--hb-t-sm);
    font-weight: 620;
    letter-spacing: -.014em;
    color: var(--hb-ink);
    margin-bottom: 3px;
}
.ws-sibling span { font-size: var(--hb-t-xs); color: var(--hb-muted); }

/* =============================================================================
   CLOSE
   ========================================================================== */
.ws-close {
    background: var(--hb-night-soft);
    color: #fff;
    padding-block: clamp(64px, calc(7 * var(--hb-vw, 1vw)), 100px);
}
.ws-close__panel { max-width: 60ch; margin-inline: auto; text-align: center; }
.ws-close__panel .hb-h2 { color: #fff; margin-bottom: var(--hb-s4); }
.ws-close__panel .hb-lede { color: var(--hb-night-text); margin-inline: auto; margin-bottom: var(--hb-s7); }
.ws-close__actions { justify-content: center; }
.ws-close__note {
    margin-top: var(--hb-s5);
    font-size: var(--hb-t-xs);
    color: rgba(255, 255, 255, .5);
}
.ws-close__note a { color: rgba(255, 255, 255, .8); text-decoration: underline; text-underline-offset: 2px; }
.ws-close__note a:hover { color: #fff; }