/*
 * ds.css - BotSpice design system components for the redesigned pages (brief sections 2 and 3).
 * Loaded only by pages built on bs-ds/ (the homepage and the AU pages), after ds-chrome.css,
 * which holds the fonts, tokens, base, buttons, header and footer shared by every page.
 *
 * R2: components. Every colour and size comes from a token in ds-chrome.css; components never
 * use raw hex values.
 */

/* =====================================================================================
 * R2 components (bs-ds/components.php)
 * ===================================================================================== */

/* ---------- Type helpers ---------- */
.ds-accent { color: var(--ds-teal); }
.ds-section--tint .ds-accent, .ds-section--soft .ds-accent { color: var(--ds-teal-accent-band); }
.ds-h1 {
    font-family: var(--ds-font-display);
    font-weight: 700;
    font-size: var(--ds-fs-h1);
    line-height: 1.06;
    letter-spacing: -0.02em;
    color: var(--ds-deck-grey);
    text-wrap: balance;
}
.ds-h2 {
    font-family: var(--ds-font-display);
    font-weight: 700;
    font-size: var(--ds-fs-h2);
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: var(--ds-deck-grey);
    text-wrap: balance;
}
.ds-h2--sm { font-size: var(--ds-fs-h2-sm); }
.ds-h2--band { font-size: var(--ds-fs-h2-band); line-height: 1.2; color: #fff; letter-spacing: 0; }
.ds-h2--cta { font-size: var(--ds-fs-h2-cta); line-height: 1.12; color: #fff; letter-spacing: 0; }
.ds-eyebrow {
    font-size: var(--ds-fs-eyebrow);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ds-teal-700);
}
.ds-intro { font-size: var(--ds-fs-intro); line-height: var(--ds-lh-intro); color: var(--ds-text-soft); }
.ds-lead { font-size: var(--ds-fs-lead); line-height: var(--ds-lh-lead); color: var(--ds-text-muted); max-width: 540px; }
.ds-pill {
    align-self: flex-start;
    background: var(--ds-teal-100);
    color: var(--ds-ink-teal);
    font-size: var(--ds-fs-eyebrow);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: var(--ds-radius-pill);
}

/* ---------- Placeholder chip: unconfirmed facts. Obvious on purpose; remove by replacing the text ---------- */
.ds-ph {
    display: inline-block;
    border: 1.5px dashed var(--ds-border-dashed);
    border-radius: 8px;
    padding: 0 8px;
    color: var(--ds-text-soft);
    font-weight: 600;
    font-size: 0.875em;
    line-height: 1.6;
    background: var(--ds-surface);
}
.ds-ph--logo { border-radius: 12px; padding: 10px 16px; font-size: 14px; }
.ds-card--dark .ds-ph, .ds-statband .ds-ph, .ds-cta .ds-ph, .ds-footer .ds-ph, .ds-live--voice .ds-ph,
.ds-cards--door .ds-ph, .ds-panel--dark .ds-ph, .ds-section--deep .ds-ph {
    background: transparent;
    color: var(--ds-on-dark);
}

/* ---------- Sections ---------- */
.ds-section { padding: var(--ds-section-y) 0; }
.ds-section--white { background: var(--ds-surface); }
.ds-section--tint { background: var(--ds-teal-50); }
.ds-section--soft { background: var(--ds-surface-soft); }
.ds-section--deep { background: var(--ds-panel-deep); color: #fff; }
.ds-section--flush-top { padding-top: 0; }
.ds-section--cta { padding: var(--ds-section-y-sm) 0; }
.ds-stack { display: flex; flex-direction: column; gap: 48px; }
.ds-head { display: flex; flex-direction: column; gap: 16px; }
.ds-head-row { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; justify-content: space-between; }
.ds-split { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.ds-split > * { flex: 1 1 420px; min-width: 0; }
.ds-split--top { align-items: flex-start; gap: 48px; }

/* ---------- Hero ---------- */
.ds-hero { padding: clamp(48px, 7vw, 104px) 0 clamp(56px, 6vw, 88px); }
.ds-hero__grid { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; }
.ds-hero__text { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.ds-hero__btns { margin-top: 6px; }
.ds-hero__note { font-size: 15px; color: var(--ds-text-muted); }
.ds-hero__note--small { font-size: 13px; line-height: 20px; margin-top: -4px; }
/* A cited third-party figure on a dark band (/au/hospitality/ voice section). */
.ds-stat-cite { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--ds-on-dark); font-size: 15px; line-height: 24px; }
.ds-stat-cite strong { font-family: var(--ds-font-display); font-size: 32px; line-height: 1; color: var(--ds-mint); }
.ds-stat-cite cite { flex-basis: 100%; font-style: normal; font-size: 13px; color: var(--ds-on-dark-muted); }
.ds-hero__stats { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 4px; font-size: 15px; color: var(--ds-text-muted); }
.ds-hero__stats strong { color: var(--ds-ink-teal); font-family: var(--ds-font-display); font-size: 20px; }
.ds-hero__visual {
    flex: 1 1 480px; min-width: 0;
    position: relative;
    min-height: 560px;
    background: var(--ds-teal-50);
    border-radius: var(--ds-radius-panel);
    overflow: hidden;
}
.ds-hero__waves { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; }
.ds-hero__waves path:first-child { stroke: var(--ds-teal-200); stroke-width: 2; }
.ds-hero__waves path:last-child { stroke: var(--ds-teal-150); stroke-width: 1.5; }
.ds-hero__curio {
    position: absolute; right: 2%; bottom: 0;
    height: 74%; max-width: 56%;
    margin: 0;
    display: flex; align-items: flex-end; justify-content: center;
}
.ds-hero__curio img { height: 100%; width: auto; max-width: 100%; object-fit: contain; object-position: bottom; display: block; }
/* Dark stage for renders with a soft dark glow (hands on hips): on the light panel the glow
   reads as a grey box, so Curio stands on an ink-teal panel. The render itself is unchanged. */
.ds-hero__curio--stage {
    right: 4%;
    height: 70%;
    width: 46%;
    padding: 28px 18px 0;
    background: radial-gradient(120% 90% at 50% 100%, var(--ds-stage-light) 0%, var(--ds-ink-teal) 55%, var(--ds-stage-dark) 100%);
    border-radius: 28px 28px 0 0;
}
.ds-hero__cards { position: absolute; inset: 0; pointer-events: none; }
.ds-live {
    position: absolute;
    pointer-events: auto;
    background: var(--ds-surface);
    border-radius: 18px;
    box-shadow: var(--ds-shadow-float);
    padding: 14px 16px;
    font-size: 14px; line-height: 20px;
}
.ds-live--tl { left: 4%; top: 6%; }
.ds-live--tr { right: 5%; top: 8%; }
.ds-live--bl { left: 7%; bottom: 14%; }
.ds-live--br { right: 5%; bottom: 8%; }
.ds-live--ml { left: 5%; top: 52%; }
.ds-live--chat {
    width: min(310px, 56%);
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid var(--ds-teal-100);
    border-radius: 20px;
    padding: 16px;
    display: flex; flex-direction: column; gap: 10px;
}
.ds-live__head { display: flex; gap: 10px; align-items: center; }
.ds-live__avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; }
.ds-live__who { flex: 1; min-width: 0; }
.ds-live__title { font-weight: 700; color: var(--ds-navy); }
.ds-live__meta { font-size: 12px; color: var(--ds-text-soft); line-height: 18px; }
.ds-live__chan { color: var(--ds-teal-700); flex-shrink: 0; }
.ds-bubble { padding: 9px 12px; border-radius: 14px 14px 14px 4px; background: var(--ds-teal-50); color: var(--ds-text); }
.ds-bubble--user { align-self: flex-end; max-width: 80%; background: var(--ds-teal-700); color: #fff; border-radius: 14px 14px 4px 14px; }
.ds-live--event { width: min(280px, 54%); display: flex; gap: 12px; align-items: center; }
.ds-live--event .ds-live__meta { font-size: 13px; }
.ds-tile {
    width: 40px; height: 40px; border-radius: 12px; flex-shrink: 0;
    background: var(--ds-teal-100); color: var(--ds-teal-700);
    display: inline-flex; align-items: center; justify-content: center;
}
.ds-live--voice {
    width: min(210px, 35%);
    background: var(--ds-ink-teal); color: #fff;
    border: 1px solid rgba(143, 228, 226, 0.35);
    display: flex; flex-direction: column; gap: 10px;
    font-size: 13px; line-height: 18px;
}
.ds-live__row { display: flex; gap: 8px; align-items: center; }
/* Mint, not coral: Curio's eye is the one coral spot in the hero (brand rule). */
.ds-live__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ds-mint); box-shadow: 0 0 0 3px rgba(143, 228, 226, 0.25); flex-shrink: 0; }
.ds-live__vtitle { font-weight: 600; }
.ds-live__time { margin-left: auto; color: var(--ds-mint); }
.ds-live__bars { display: flex; gap: 3px; align-items: center; height: 28px; }
.ds-live__bars span { width: 4px; background: var(--ds-mint); border-radius: 2px; }
.ds-live__quote { color: #fff; font-size: 14px; line-height: 20px; }
.ds-live__vtext { color: var(--ds-on-dark); }
.ds-live--tags { width: min(270px, 52%); display: flex; flex-direction: column; gap: 10px; }
.ds-live--wide { width: min(310px, 56%); }
.ds-hero__visual--tall { min-height: 660px; }
.ds-hero__visual--tall .ds-live--ml { top: 55%; }
.ds-hero__visual--tall .ds-live--bl { bottom: 5%; }

/* Hero motion (Shiv 3 Nov 2026). Pure CSS: the cards float, the voice bars move like audio and
   the live dot pulses. ds.js adds .is-animated to the panel and plays the chat out (typing dots,
   then each message) before the outcome cards pop in; without the script, or with reduced
   motion, the cards show finished, as before. Curio does not move (brand rule). */
.ds-live { animation: ds-float 7s ease-in-out infinite; }
.ds-live--tr { animation-duration: 6s; animation-delay: -2s; }
.ds-live--bl, .ds-live--br { animation-duration: 8s; animation-delay: -4s; }
.ds-live--ml { animation-duration: 6.5s; animation-delay: -1s; }
@keyframes ds-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.ds-live__bars span { transform-origin: center; animation: ds-bars 1.1s ease-in-out infinite; }
.ds-live__bars span:nth-child(3n+1) { animation-delay: -0.3s; animation-duration: 0.9s; }
.ds-live__bars span:nth-child(3n+2) { animation-delay: -0.7s; animation-duration: 1.3s; }
@keyframes ds-bars { 0%, 100% { transform: scaleY(0.45); } 50% { transform: scaleY(1); } }
.ds-live__dot { animation: ds-pulse 1.8s ease-out infinite; }
@keyframes ds-pulse {
    0% { box-shadow: 0 0 0 0 rgba(143, 228, 226, 0.6); }
    100% { box-shadow: 0 0 0 8px rgba(143, 228, 226, 0); }
}
.ds-hero__visual.is-animated .ds-bubble { transition: opacity 0.35s var(--ds-ease), translate 0.35s var(--ds-ease); }
.ds-hero__visual.is-animated .ds-bubble:not(.is-shown) { opacity: 0; translate: 0 8px; }
.ds-hero__visual.is-animated .ds-live--event, .ds-hero__visual.is-animated .ds-live--tags {
    transition: opacity 0.4s var(--ds-ease), scale 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ds-hero__visual.is-animated .ds-live--event:not(.is-shown),
.ds-hero__visual.is-animated .ds-live--tags:not(.is-shown) { opacity: 0; scale: 0.9; }
/* Typing dots: placed by ds.js over the slot of the next message, in that message's colours. */
.ds-typing {
    position: absolute; margin: 0;
    display: flex; gap: 4px; align-items: center; height: 34px; padding: 0 14px;
    opacity: 0; transition: opacity 0.2s;
}
.ds-typing.is-shown { opacity: 1; }
.ds-typing.ds-bubble--user { max-width: none; }
.ds-typing span { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.4; animation: ds-typing 1s infinite; }
.ds-typing span:nth-child(2) { animation-delay: 0.15s; }
.ds-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes ds-typing { 0%, 60%, 100% { opacity: 0.35; translate: 0 0; } 30% { opacity: 1; translate: 0 -3px; } }
@media (prefers-reduced-motion: reduce) {
    .ds-live, .ds-live__bars span, .ds-live__dot, .ds-typing span { animation: none !important; }
}

@media (max-width: 899px) {
    /* Phones and small tablets: a compact version of the desktop composition in one panel.
       The main card sits at the top (in flow, so the panel fits any card), Curio stands below it
       on the right, and the outcome card overlaps his lower left. Cards in the other positions
       (tr, ml, br) are left out here to keep it uncluttered. */
    .ds-hero__visual, .ds-hero__visual--tall {
        flex-basis: 100%; min-height: 0;
        display: flex; flex-direction: column; padding: 16px 16px 0;
    }
    .ds-hero__cards { position: static; order: 1; }
    .ds-live { padding: 12px 13px; font-size: 13px; line-height: 18px; border-radius: 16px; }
    .ds-live--tr, .ds-live--ml, .ds-live--br { display: none; }
    .ds-live--tl { position: relative; left: auto; top: auto; width: 100%; max-width: 440px; z-index: 1; }
    .ds-live--bl { left: 16px; bottom: 18px; width: min(62%, 300px); z-index: 1; }
    .ds-hero__curio, .ds-hero__curio--stage {
        position: relative; right: auto; bottom: auto; order: 2;
        align-self: flex-end; height: 250px; max-width: 58%; margin-top: 10px;
    }
    .ds-hero__curio--stage { width: 46%; max-width: 220px; padding: 16px 10px 0; border-radius: 22px 22px 0 0; }
    .ds-live--chat { gap: 8px; padding: 12px; }
    .ds-live__avatar { width: 28px; height: 28px; }
    .ds-bubble { padding: 7px 10px; }
    .ds-live--voice { gap: 8px; }
    .ds-live__bars { height: 22px; }
    .ds-tile { width: 34px; height: 34px; border-radius: 10px; }
}

/* ---------- Breadcrumb ---------- */
.ds-breadcrumb { font-size: 14px; color: var(--ds-text-soft); }
.ds-breadcrumb ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.ds-breadcrumb li + li::before { content: "/"; margin-right: 6px; color: var(--ds-border-dashed); }
.ds-breadcrumb a { color: var(--ds-teal-700); }

/* ---------- Logo strip ---------- */
.ds-logos { border-top: 1px solid var(--ds-border); border-bottom: 1px solid var(--ds-border); background: var(--ds-surface); }
.ds-logos__row { display: flex; flex-wrap: wrap; gap: 16px 40px; align-items: center; justify-content: space-between; padding-top: 24px; padding-bottom: 24px; }
.ds-logos__label { font-size: var(--ds-fs-eyebrow); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-text-soft); }
.ds-logos__list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 36px; align-items: center; }
.ds-logos__img {
    display: block; height: 56px; width: auto; max-width: 150px; object-fit: contain;
    filter: grayscale(1); opacity: 0.72;
    transition: filter 240ms var(--ds-ease), opacity 240ms var(--ds-ease);
}
.ds-logos__img:hover { filter: none; opacity: 1; }
/* hoabl.png and rustomjee.png carry a clipped fragment of another logo on their right edge: show the left part only. */
.ds-logos__img--crop { aspect-ratio: 250 / 240; object-fit: cover; object-position: left center; }
.ds-logos__img--crop-wide { aspect-ratio: 360 / 220; }
/* Scrolling strip (three or more logos): two copies of the list slide left by one copy's width,
   so the loop is seamless. Edges fade out; hover pauses it. */
.ds-logos--scroll .ds-logos__row { flex-wrap: nowrap; }
.ds-logos--scroll .ds-logos__label { flex-shrink: 0; }
.ds-logos__viewport {
    flex: 1; min-width: 0; overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ds-logos__track { display: flex; width: max-content; animation: ds-logos-scroll calc(var(--ds-logos-n) * 3s) linear infinite; }
.ds-logos__viewport:hover .ds-logos__track { animation-play-state: paused; }
.ds-logos--scroll .ds-logos__list { flex-wrap: nowrap; gap: 0; }
.ds-logos--scroll .ds-logos__list li { padding-right: 48px; flex-shrink: 0; }
@keyframes ds-logos-scroll { to { transform: translateX(-50%); } }
@media (max-width: 899px) {
    .ds-logos--scroll .ds-logos__row { flex-direction: column; align-items: flex-start; }
    .ds-logos__viewport { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .ds-logos__track { animation: none; width: auto; }
    .ds-logos--scroll .ds-logos__list { flex-wrap: wrap; gap: 14px 36px; }
    .ds-logos--scroll .ds-logos__list li { padding-right: 0; }
    .ds-logos__list--copy, .ds-logos__repeat { display: none; }
}

/* ---------- Cards ---------- */
.ds-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(var(--ds-min, 260px), 100%), 1fr)); gap: 20px; }
.ds-card { display: flex; flex-direction: column; gap: 12px; padding: 30px; border-radius: 20px; text-decoration: none; }
.ds-cards--soft .ds-card { background: var(--ds-surface-soft); }
.ds-cards--white .ds-card { background: var(--ds-surface); border-radius: var(--ds-radius-card); gap: 14px; }
.ds-card__icon {
    width: 48px; height: 48px; border-radius: 14px;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--ds-surface); color: var(--ds-ink-teal);
}
.ds-cards--white .ds-card__icon { width: 52px; height: 52px; border-radius: 16px 16px 16px 4px; background: var(--ds-teal); color: #fff; }
.ds-card__title { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ds-navy); }
.ds-cards--white .ds-card__title { font-family: var(--ds-font-display); font-size: 24px; line-height: 32px; }
.ds-card__text { color: var(--ds-text-muted); }
.ds-card__tag { font-size: 14px; font-weight: 600; color: var(--ds-teal-700); }
.ds-card__note { margin-top: auto; }
.ds-cards .ds-card--dark { background: var(--ds-ink-teal); color: #fff; }
.ds-card--dark .ds-card__title { color: #fff; }
.ds-card--dark .ds-card__text { color: var(--ds-on-dark); }
.ds-card--dark .ds-card__tag { color: var(--ds-mint); }
.ds-cards .ds-card--dark .ds-card__icon { background: var(--ds-mint); color: var(--ds-panel-deep); }
/* Door cards: large dark link cards (industries) */
.ds-cards--door .ds-card {
    background: var(--ds-ink-teal); color: #fff;
    border-radius: var(--ds-radius-card); padding: 32px; min-height: 220px; gap: 14px;
    transition: transform 240ms var(--ds-ease), box-shadow 240ms var(--ds-ease);
}
.ds-cards--door .ds-card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(13, 68, 78, 0.18); }
.ds-cards--door .ds-card__icon { background: transparent; color: var(--ds-mint); width: auto; height: auto; justify-content: flex-start; }
.ds-cards--door .ds-card__title { font-family: var(--ds-font-display); font-size: 28px; line-height: 34px; color: #fff; }
.ds-cards--door .ds-card__text { color: var(--ds-on-dark); }
.ds-cards--door .ds-checklist { color: var(--ds-on-dark); }
.ds-cards--door .ds-checklist .ds-icon { color: var(--ds-mint); }
.ds-card__more { margin-top: auto; display: inline-flex; gap: 8px; align-items: center; color: var(--ds-mint); font-weight: 600; }
.ds-minicards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 16px; }
.ds-minicard { display: flex; flex-direction: column; gap: 6px; text-decoration: none; background: var(--ds-surface-soft); border-radius: var(--ds-radius-card-sm); padding: 22px; transition: background-color 200ms var(--ds-ease); }
.ds-minicard:hover { background: var(--ds-teal-50); }
.ds-minicard__title { font-weight: 700; color: var(--ds-navy); font-size: 18px; }
.ds-minicard__text { color: var(--ds-text-soft); font-size: 15px; line-height: 24px; }

/* ---------- Lists ---------- */
.ds-checklist { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; color: var(--ds-text); }
.ds-checklist li { display: flex; gap: 10px; align-items: flex-start; }
.ds-checklist .ds-icon { color: var(--ds-teal-700); flex-shrink: 0; margin-top: 4px; }
.ds-timeline { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ds-timeline__item { display: flex; gap: 16px; align-items: flex-start; background: var(--ds-surface-soft); border-radius: var(--ds-radius-card-sm); padding: 18px 20px; }
.ds-timeline__mark {
    flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
    background: var(--ds-teal-700); color: #fff; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.ds-timeline__body { flex: 1; min-width: 0; }
.ds-timeline__title { font-weight: 700; color: var(--ds-navy); }
.ds-timeline__text { color: var(--ds-text-soft); font-size: 15px; }
.ds-timeline__time { font-size: 13px; font-weight: 600; color: var(--ds-teal-700); white-space: nowrap; }
.ds-timeline__item--active { background: var(--ds-teal-100); border: 1.5px solid var(--ds-teal-200); }
.ds-timeline__item--active .ds-timeline__mark { background: var(--ds-ink-teal); }
.ds-timeline__item--active .ds-timeline__text { color: var(--ds-text-muted); }
.ds-timeline__item--active .ds-timeline__time { color: var(--ds-ink-teal); }
.ds-timeline__item--next { background: var(--ds-surface); border: 1.5px dashed var(--ds-border-dashed); }
.ds-timeline__item--next .ds-timeline__mark { background: var(--ds-border); color: var(--ds-text-muted); }
.ds-timeline__item--next .ds-timeline__time { color: var(--ds-text-soft); }
.ds-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; }
.ds-step { background: var(--ds-surface); border-radius: 20px; padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; }
.ds-step__num { font-family: var(--ds-font-display); font-weight: 800; font-size: 28px; line-height: 1; color: var(--ds-teal-700); }
.ds-step__title { font-size: 19px; line-height: 26px; font-weight: 700; color: var(--ds-navy); }
.ds-step__text { color: var(--ds-text-muted); font-size: 15px; line-height: 24px; }
.ds-journey { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.ds-journey__col { background: var(--ds-surface); border-radius: var(--ds-radius-card); padding: 30px; display: flex; flex-direction: column; gap: 18px; }
.ds-journey__head { display: flex; gap: 12px; align-items: center; }
.ds-journey__num {
    width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
    background: var(--ds-teal-700); color: #fff; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}
.ds-journey__title { font-family: var(--ds-font-display); font-size: 24px; line-height: 30px; font-weight: 700; color: var(--ds-navy); }

/* ---------- Stat band ---------- */
.ds-statband { background: var(--ds-panel-deep); color: #fff; position: relative; overflow: hidden; padding: clamp(56px, 6vw, 80px) 0; }
.ds-statband .ds-stack { position: relative; gap: 36px; }
.ds-statband__wave { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; stroke: var(--ds-panel-line); stroke-width: 2; }
.ds-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 28px; }
.ds-stat { display: flex; flex-direction: column; gap: 4px; border-top: 1px solid var(--ds-panel-line); padding-top: 18px; }
.ds-stat__value { font-family: var(--ds-font-display); font-weight: 800; font-size: clamp(44px, 5vw, 60px); line-height: 1; color: var(--ds-mint); }
.ds-stat__label { color: var(--ds-on-dark); }

/* ---------- Testimonials ---------- */
.ds-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.ds-quote { background: var(--ds-surface); border-radius: var(--ds-radius-card); padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.ds-section--white .ds-quote { background: var(--ds-surface-soft); }
.ds-quote__stat { display: flex; flex-direction: column; gap: 2px; }
.ds-quote__value { font-family: var(--ds-font-display); font-weight: 800; font-size: 44px; line-height: 1.05; color: var(--ds-teal-700); }
.ds-quote__label { font-size: 14px; color: var(--ds-text-soft); }
.ds-quote__text { color: var(--ds-text); font-size: 17px; line-height: 28px; }
.ds-quote__by { margin-top: auto; font-size: 14px; line-height: 20px; display: flex; gap: 14px; align-items: center; }
.ds-quote__who { display: flex; flex-direction: column; }
.ds-quote__by strong { color: var(--ds-navy); }
.ds-quote__who > span { color: var(--ds-text-soft); }
/* Client photos (Shiv, 3 Nov 2026): a round thumbnail on cards, a large photo on the feature quote. */
.ds-quote__thumb { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; box-shadow: 0 0 0 3px var(--ds-surface), 0 0 0 4px var(--ds-teal-100); }
.ds-quote--photo { flex-direction: row; align-items: center; gap: clamp(24px, 4vw, 48px); }
.ds-quote__photo { width: clamp(160px, 24vw, 260px); aspect-ratio: 1; height: auto; border-radius: 24px; object-fit: cover; flex-shrink: 0; }
.ds-quote__body { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
@media (max-width: 699px) {
    .ds-quote--photo { flex-direction: column; align-items: flex-start; }
    .ds-quote__photo { width: 140px; border-radius: 18px; }
}
.ds-quotes--feature .ds-quote { background: var(--ds-teal-50); padding: clamp(32px, 4vw, 48px); }
.ds-quotes--feature .ds-quote__text { font-family: var(--ds-font-display); font-weight: 600; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.35; color: var(--ds-ink-teal); }

/* ---------- Chips ---------- */
.ds-chips { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ds-chip {
    border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-pill);
    padding: 7px 16px; font-size: 15px; font-weight: 600; color: var(--ds-ink-teal); background: var(--ds-surface);
}
.ds-chip .ds-ph { border: 0; padding: 0; font-size: inherit; background: transparent; }
.ds-chip:has(.ds-ph) { border-style: dashed; border-color: var(--ds-border-dashed); border-width: 1.5px; }
.ds-chips--sm { gap: 6px; }
.ds-chips--sm .ds-chip { padding: 3px 10px; font-size: 13px; background: var(--ds-teal-50); border-color: var(--ds-teal-100); }

/* ---------- FAQ ---------- */
.ds-faq { display: flex; flex-direction: column; gap: 28px; max-width: 860px; }
.ds-faq__list { display: flex; flex-direction: column; gap: 12px; }
.ds-faq__item { background: var(--ds-surface-soft); border-radius: var(--ds-radius-card-sm); padding: 0 22px; }
.ds-faq__item summary {
    cursor: pointer; list-style: none;
    display: flex; justify-content: space-between; gap: 16px; align-items: center;
    min-height: 60px; padding: 14px 0;
    font-weight: 700; color: var(--ds-navy); font-size: 17px;
}
.ds-faq__item summary::-webkit-details-marker { display: none; }
.ds-faq__item summary::after {
    content: "+"; flex-shrink: 0;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--ds-surface); color: var(--ds-teal-700);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 20px; font-weight: 600;
}
.ds-faq__item[open] summary::after { content: "\2212"; }
.ds-faq__item p { padding: 0 0 20px; color: var(--ds-text-muted); }
.ds-section--soft .ds-faq__item { background: var(--ds-surface); }
.ds-section--soft .ds-faq__item summary::after { background: var(--ds-teal-50); }

/* ---------- CTA banner ---------- */
.ds-cta {
    background: var(--ds-teal-700); border-radius: var(--ds-radius-panel);
    padding: clamp(36px, 5vw, 64px);
    display: flex; flex-wrap: wrap; gap: 32px; align-items: center; justify-content: space-between;
}
.ds-cta__text { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
/* The banner is teal-700 so white text of any size meets WCAG AA (review item 59). */
.ds-cta__text p { font-size: 18px; line-height: 28px; font-weight: 700; color: #fff; }

/* ---------- Contact lines, panels ---------- */
.ds-contact { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; }
.ds-contact li { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; color: var(--ds-ink-teal); }
.ds-contact .ds-icon { color: var(--ds-teal-700); }
.ds-page .ds-contact a { color: var(--ds-ink-teal); min-height: 44px; display: inline-flex; align-items: center; }
.ds-panel { border-radius: 28px; padding: clamp(28px, 4vw, 40px); display: flex; flex-direction: column; gap: 16px; }
.ds-panel--tint { background: var(--ds-teal-50); }
.ds-panel--soft { background: var(--ds-surface-soft); }
.ds-panel--dark { background: var(--ds-ink-teal); color: #fff; }
.ds-panel h3 { font-family: var(--ds-font-display); font-size: 26px; line-height: 34px; font-weight: 700; color: var(--ds-navy); }
.ds-panel--dark h3 { color: #fff; }
.ds-panel--dark p { color: var(--ds-on-dark); }

/* ---------- Page pieces: homepage ---------- */
/* Integrations orbit (Shiv, 6 Nov 2026). Sizes are % of the square stage, so it scales to any
   width. The rings spin and each tile spins back at the same speed, so logos stay upright.
   Curio sits in a white disc and never moves (brand rule). Hover pauses it; reduced motion
   shows it still. */
.ds-orbit {
    position: relative; width: 100%; max-width: 520px; aspect-ratio: 1; margin: 0 auto;
    border-radius: 32px; overflow: hidden;
    background: radial-gradient(70% 70% at 50% 50%, var(--ds-stage-light) 0%, var(--ds-ink-teal) 60%, var(--ds-stage-dark) 100%);
}
.ds-orbit__track { position: absolute; border-radius: 50%; border: 1px dashed rgba(143, 228, 226, 0.35); }
.ds-orbit__ring { position: absolute; inset: 0; animation: ds-orbit-cw 70s linear infinite; }
.ds-orbit__ring--inner { animation: ds-orbit-ccw 50s linear infinite; }
.ds-orbit__item { position: absolute; width: 18%; aspect-ratio: 2; translate: -50% -50%; }
.ds-orbit__tile {
    display: block; width: 100%; height: 100%; border-radius: 14px;
    background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(143, 228, 226, 0.4);
    animation: ds-orbit-ccw 70s linear infinite;
}
.ds-orbit__ring--inner .ds-orbit__tile { animation: ds-orbit-cw 50s linear infinite; }
.ds-orbit__tile img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ds-orbit__hub {
    position: absolute; left: 50%; top: 50%; width: 20%; aspect-ratio: 1; translate: -50% -50%;
    border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(143, 228, 226, 0.25);
    display: flex; align-items: center; justify-content: center;
}
.ds-orbit__hub img { width: 68%; height: auto; display: block; }
.ds-orbit__pulse {
    position: absolute; left: 50%; top: 50%; width: 20%; aspect-ratio: 1; translate: -50% -50%;
    border-radius: 50%; border: 1px solid var(--ds-mint); opacity: 0;
    animation: ds-orbit-pulse 4s ease-out infinite;
}
.ds-orbit:hover :is(.ds-orbit__ring, .ds-orbit__tile, .ds-orbit__pulse) { animation-play-state: paused; }
@keyframes ds-orbit-cw { to { rotate: 360deg; } }
@keyframes ds-orbit-ccw { to { rotate: -360deg; } }
@keyframes ds-orbit-pulse { 0% { scale: 1; opacity: 0.7; } 100% { scale: 4; opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
    .ds-orbit__ring, .ds-orbit__tile, .ds-orbit__pulse { animation: none !important; }
}
/* Data security and compliance band (Shiv, 3 Nov 2026). */
.ds-security__badge {
    width: 64px; height: 64px; border-radius: 20px 20px 20px 6px;
    background: var(--ds-mint); color: var(--ds-panel-deep);
    display: inline-flex; align-items: center; justify-content: center;
}
.ds-security .ds-accent { color: var(--ds-mint); }
.ds-security__marks { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ds-security__marks li {
    display: inline-flex; gap: 8px; align-items: center;
    padding: 8px 16px; border-radius: var(--ds-radius-pill);
    border: 1px solid rgba(143, 228, 226, 0.5); color: #fff; font-weight: 700; font-size: 15px;
}
.ds-security__marks .ds-icon { color: var(--ds-mint); }
.ds-security__grid { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 14px; }
.ds-security__grid li {
    display: flex; gap: 14px; align-items: center;
    padding: 20px; border-radius: var(--ds-radius-card);
    background: rgba(255, 255, 255, 0.06); border: 1px solid var(--ds-panel-line);
    color: #fff; font-weight: 600; font-size: 16px; line-height: 22px;
}
.ds-security__icon {
    width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
    background: rgba(143, 228, 226, 0.14); color: var(--ds-mint);
    display: inline-flex; align-items: center; justify-content: center;
}
.ds-agentic__img { width: 100%; max-width: 380px; margin-top: 8px; }
.ds-map { position: relative; display: flex; flex-direction: column; gap: 16px; }
.ds-map__art { width: 100%; height: auto; display: block; }
.ds-map__pins { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ds-map__pins :is(a, span) {
    display: inline-flex; align-items: center; min-height: 36px;
    background: var(--ds-surface); border-radius: var(--ds-radius-pill); padding: 6px 14px;
    font-size: 14px; font-weight: 600; color: var(--ds-ink-teal); text-decoration: none;
    box-shadow: 0 6px 16px rgba(13, 68, 78, 0.1);
    transition: background 160ms var(--ds-ease), color 160ms var(--ds-ease);
}
.ds-map__pins a:hover, .ds-map__pins a.is-highlight { background: var(--ds-ink-teal); color: #fff; }
.ds-map__pins a.is-highlight { font-weight: 700; }

/* ---------- Page pieces: AU pages ---------- */
.ds-section--tight { padding: var(--ds-section-y-sm) 0; }
.ds-split--stretch { align-items: stretch; }
.ds-eyebrow--mint { color: var(--ds-mint); }
.ds-h2--on-dark { color: #fff; }
.ds-intro--on-dark { color: var(--ds-on-dark); }
.ds-checklist--on-dark { color: var(--ds-on-dark); }
.ds-checklist--on-dark .ds-icon { color: var(--ds-mint); }

/* Time-zone band (/au/) */
.ds-zones { background: var(--ds-panel-deep); color: #fff; }
.ds-zones__row { display: flex; flex-wrap: wrap; gap: 28px 48px; align-items: center; justify-content: space-between; padding-top: clamp(40px, 5vw, 64px); padding-bottom: clamp(40px, 5vw, 64px); }
.ds-zones__text { flex: 1 1 360px; display: flex; flex-direction: column; gap: 10px; }
.ds-zones__text p { color: var(--ds-on-dark); }
.ds-zones__list { flex: 2 1 520px; list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(110px, 100%), 1fr)); gap: 12px; }
.ds-zones__list li { border-top: 1px solid var(--ds-panel-line); padding-top: 12px; display: flex; flex-direction: column; gap: 2px; }
.ds-zones__code { font-family: var(--ds-font-display); font-weight: 800; font-size: 26px; line-height: 1.1; color: var(--ds-mint); }
.ds-zones__city { font-size: 14px; line-height: 20px; color: var(--ds-on-dark); }

/* Small stat row (/au/ proof) */
.ds-minstats { display: flex; flex-wrap: wrap; gap: 16px 40px; }
.ds-minstats > div { display: flex; flex-direction: column; }
.ds-minstats__value { font-family: var(--ds-font-display); font-weight: 800; font-size: clamp(36px, 4vw, 48px); line-height: 1.05; color: var(--ds-ink-teal); }
.ds-minstats__label { font-size: 15px; color: var(--ds-text-soft); }

/* Compliance cards: white on the tint band, plain teal icon */
.ds-cards--white-soft .ds-card { background: var(--ds-surface); border-radius: 20px; padding: 28px; }
.ds-cards--white-soft .ds-card__icon { background: var(--ds-teal-50); color: var(--ds-teal-700); }
.ds-cards--white-soft .ds-card__title { font-size: 19px; line-height: 26px; }

/* Local team + pricing panels (/au/) */
.ds-team { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 24px; }
.ds-team__text { flex: 1 1 280px; display: flex; flex-direction: column; gap: 14px; }
.ds-team__img { flex: 0 1 200px; width: 200px; max-width: 46%; margin: 0 auto; }
.ds-team__people { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.ds-team__people li { display: flex; flex-direction: column; line-height: 22px; }
.ds-team__people strong { color: var(--ds-navy); }
.ds-team__people span { font-size: 14px; color: var(--ds-text-soft); }
.ds-price { justify-content: center; }
.ds-price__value { font-family: var(--ds-font-display); font-weight: 800; font-size: clamp(40px, 4.4vw, 56px); line-height: 1.05; color: var(--ds-mint) !important; }
.ds-price__value span { font-family: var(--ds-font-text); font-weight: 600; font-size: 18px; color: var(--ds-on-dark); }

/* Voice receptionist call card (/au/hospitality/) */
.ds-call {
    background: var(--ds-ink-teal); border: 1px solid rgba(143, 228, 226, 0.25);
    border-radius: var(--ds-radius-card); padding: 26px; color: #fff;
    display: flex; flex-direction: column; gap: 14px; font-size: 15px; line-height: 24px;
}
.ds-call__line { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, 0.06); }
.ds-call__line--agent { background: rgba(143, 228, 226, 0.12); }
.ds-call__who { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ds-mint); }
.ds-call__foot { display: flex; gap: 8px; align-items: center; color: var(--ds-on-dark); font-size: 14px; }
.ds-call__foot .ds-icon { color: var(--ds-mint); }

/* Orchestration art (/au/real-estate/): the holo-panels render on the deep band */
.ds-orch__art { display: flex; justify-content: center; }
.ds-orch__img { width: 100%; max-width: 360px; }

/* ---------- Inner pages (R8.3: AU plans, contact and comparisons) ---------- */
.ds-pagehero { background: var(--ds-teal-50); padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 5vw, 64px); }
.ds-pagehero__inner { display: flex; flex-direction: column; gap: 18px; }
.ds-h1--page { font-size: clamp(38px, 4.4vw, 60px); max-width: 900px; }
.ds-lead--wide { max-width: 720px; }
.ds-notice {
    align-self: flex-start; max-width: 760px;
    background: var(--ds-draft-bg); color: var(--ds-draft-text); border: 1px solid var(--ds-draft-line);
    border-radius: 12px; padding: 10px 16px; font-size: 14px; line-height: 20px;
}

.ds-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 24px; align-items: stretch; }
.ds-plan {
    background: var(--ds-surface); border: 1.5px solid var(--ds-border); border-radius: var(--ds-radius-card);
    padding: clamp(28px, 4vw, 40px); display: flex; flex-direction: column; gap: 14px;
}
.ds-plan__name { font-family: var(--ds-font-display); font-size: 30px; line-height: 36px; font-weight: 700; color: var(--ds-navy); }
.ds-plan__text { color: var(--ds-text-muted); }
.ds-plan__price { font-family: var(--ds-font-display); font-weight: 800; font-size: clamp(36px, 4vw, 48px); line-height: 1.1; color: var(--ds-ink-teal); margin-top: 8px; }
.ds-plan__note { font-size: 14px; color: var(--ds-text-soft); padding-bottom: 14px; border-bottom: 1px solid var(--ds-border); }
.ds-plan .ds-checklist { flex: 1; }
.ds-plan__cta { padding-top: 8px; }
.ds-plan__cta .ds-btn { width: 100%; }
.ds-plan--featured { background: var(--ds-ink-teal); border-color: var(--ds-ink-teal); }
.ds-plan--featured .ds-plan__name { color: #fff; }
.ds-plan--featured .ds-plan__text { color: var(--ds-on-dark); }
.ds-plan--featured .ds-plan__price { color: var(--ds-mint); }
.ds-plan--featured .ds-plan__note { color: var(--ds-on-dark-muted); border-color: var(--ds-panel-line); }

.ds-details { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 0; }
.ds-details dt { font-weight: 700; color: var(--ds-navy); }
.ds-details dd { margin: 0; color: var(--ds-text-muted); }
.ds-page .ds-details a { color: var(--ds-teal-700); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 480px) { .ds-details { grid-template-columns: 1fr; gap: 2px; } .ds-details dd { margin-bottom: 10px; } }


.ds-table-wrap { overflow-x: auto; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-card-sm); }
.ds-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 24px; }
.ds-table th, .ds-table td { text-align: left; vertical-align: top; padding: 14px 18px; border-bottom: 1px solid var(--ds-border); }
.ds-table thead th { background: var(--ds-ink-teal); color: #fff; font-weight: 700; }
.ds-table tbody th { width: 22%; color: var(--ds-navy); font-weight: 700; }
.ds-table tbody tr:last-child > * { border-bottom: 0; }
.ds-table sup a { color: var(--ds-teal-700); font-weight: 700; text-decoration: none; margin-left: 2px; }
@media (max-width: 700px) {
    .ds-table thead { display: none; }
    .ds-table tr { display: block; padding: 14px 18px; border-bottom: 1px solid var(--ds-border); }
    .ds-table th, .ds-table td { display: block; width: auto !important; border: 0; padding: 4px 0; }
    .ds-table td::before { content: attr(data-label); display: block; font-weight: 700; color: var(--ds-ink-teal); }
}
.ds-sources { list-style: none; padding: 0; counter-reset: ds-src; display: flex; flex-direction: column; gap: 8px; font-size: 15px; color: var(--ds-text-muted); }
.ds-sources li { counter-increment: ds-src; word-break: break-word; }
.ds-sources li::before { content: "[" counter(ds-src) "] "; font-weight: 700; color: var(--ds-teal-700); }
.ds-fineprint { font-size: 14px; color: var(--ds-text-soft); }

/* The shared demo form (bs-common/demo-form) on redesigned pages: the brand font, and teal-700
   behind its white button text (review item 59). Its own styles use !important, so these do too. */
.ds-page .demo-card :is(input, select, textarea, .demo-submit-btn, h4, p) { font-family: var(--ds-font-text) !important; }
.ds-page .demo-card select.demo-select { font-family: var(--ds-font-text), "Segoe UI Emoji", "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Symbol", sans-serif !important; }
.ds-page .demo-card .demo-submit-btn { background: var(--ds-teal-700) !important; box-shadow: none !important; }
.ds-page .demo-card .demo-submit-btn:hover { background: var(--ds-ink-teal) !important; }
.ds-page .demo-card-container { padding: 0; max-width: none; }
.ds-page .demo-card .demo-disclaimer a { color: var(--ds-teal-700); }

/* ---------- Rotating ringed phrase (homepage hero, ds_rotator) ----------
   9s loop: each phrase holds about 2.6s, then slides up in 0.4s. The list holds four items, the
   fourth a copy of the first, so the jump from the end back to 0 is invisible. Each ring draws
   itself as its phrase arrives (negative delays offset items 2 and 3 by 3s and 6s). */
.ds-rotator {
    font-family: var(--ds-font-display); font-weight: 700;
    font-size: clamp(24px, 2.3vw, 32px); line-height: 1.3; color: var(--ds-deck-grey);
    margin: -6px 0 -10px;
}
.ds-rotator__lead { display: block; }
/* Clipped top and bottom only, so the ring can reach past the word sideways. */
.ds-rotator__window {
    display: inline-block; vertical-align: top; height: 1.9em; margin-top: -0.1em;
    clip-path: inset(0 -1em);
}
.ds-rotator__list { display: flex; flex-direction: column; animation: ds-rotate 9s var(--ds-ease) infinite; }
.ds-rotator__item { display: block; height: 1.9em; line-height: 1.9em; white-space: nowrap; }
.ds-ring { position: relative; display: inline-block; line-height: 1; margin: 0 0.3em 0 0.1em; color: var(--ds-navy); font-weight: 800; }
/* The ring hugs the word's glyphs (line-height 1) with room above and below, inside the 1.9em row. */
.ds-ring__svg { position: absolute; left: -0.4em; top: -0.36em; width: calc(100% + 0.8em); max-width: none; height: 1.72em; overflow: visible; pointer-events: none; }
.ds-ring__svg path {
    fill: none; stroke: var(--ds-teal); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke;
    stroke-dasharray: 1; stroke-dashoffset: 1;
    animation: ds-ring-draw 9s ease-out infinite;
}
.ds-rotator__item:nth-child(2) .ds-ring__svg path { animation-delay: -6s; }
.ds-rotator__item:nth-child(3) .ds-ring__svg path { animation-delay: -3s; }
@keyframes ds-rotate {
    0%, 29% { transform: translateY(0); }
    33.33%, 62.33% { transform: translateY(-1.9em); }
    66.67%, 95.67% { transform: translateY(-3.8em); }
    100% { transform: translateY(-5.7em); }
}
@keyframes ds-ring-draw {
    0% { stroke-dashoffset: 1; }
    11% { stroke-dashoffset: 0; }
    88% { stroke-dashoffset: 0; }
    89%, 100% { stroke-dashoffset: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .ds-rotator__list, .ds-ring__svg path { animation: none !important; }
    .ds-ring__svg path { stroke-dashoffset: 0; }
}

/* ---------- Use-case pages (use-case/_template.php, review item 75) ---------- */
.uc-hero { background: var(--ds-teal-50); padding: clamp(40px, 6vw, 88px) 0; }
.uc-hero__grid { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.uc-hero__text { flex: 1 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.uc-hero__media { flex: 1 1 460px; min-width: 0; margin: 0; }
.uc-hero__media img { width: 100%; height: auto; display: block; border-radius: var(--ds-radius-panel); box-shadow: var(--ds-shadow-float); }
.uc-hero__play { position: relative; display: block; border-radius: var(--ds-radius-panel); }
.uc-hero__playicon {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 76px; height: 76px; border-radius: 50%; background: var(--ds-teal-700); color: #fff;
    display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(13, 68, 78, 0.3);
    transition: transform 200ms var(--ds-ease), background-color 200ms var(--ds-ease);
}
.uc-hero__play:hover .uc-hero__playicon { transform: translate(-50%, -50%) scale(1.06); background: var(--ds-ink-teal); }
.uc-steps { list-style: none; padding: 0; display: flex; flex-direction: column; gap: clamp(40px, 6vw, 72px); }
.uc-step { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 64px); align-items: center; }
.uc-step--flip { flex-direction: row-reverse; }
.uc-step__media { flex: 1 1 400px; min-width: 0; }
.uc-step__media img { width: 100%; height: auto; display: block; border-radius: var(--ds-radius-card); }
.uc-step__text { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.uc-step__num {
    width: 40px; height: 40px; border-radius: 50%; background: var(--ds-teal-700); color: #fff;
    display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
}
.uc-step__title { font-family: var(--ds-font-display); font-size: clamp(22px, 2.2vw, 28px); line-height: 1.25; font-weight: 700; color: var(--ds-navy); }
.uc-body { color: var(--ds-text-muted); display: flex; flex-direction: column; gap: 12px; }
.uc-body ul, .uc-body ol { padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.uc-body a { color: var(--ds-teal-700); }
.uc-cards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; }
.uc-cards--four { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
.uc-card { background: var(--ds-surface); border-radius: var(--ds-radius-card); padding: 26px; display: flex; flex-direction: column; gap: 10px; }
.ds-section--soft .uc-card { box-shadow: 0 1px 0 var(--ds-border); }
.uc-card p { color: var(--ds-text-muted); font-size: 15px; line-height: 24px; }
.uc-card__title { font-family: var(--ds-font-display); font-size: 20px; line-height: 26px; font-weight: 700; color: var(--ds-navy); }
.uc-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 24px; }
.uc-quote { margin: 0; background: var(--ds-teal-50); border-radius: var(--ds-radius-card); padding: 32px; display: flex; flex-direction: column; gap: 20px; }
.uc-quote blockquote { margin: 0; font-size: 16px; line-height: 28px; color: var(--ds-text); }
.uc-quote figcaption { display: flex; align-items: center; gap: 14px; font-size: 15px; line-height: 22px; color: var(--ds-text-muted); }
.uc-quote figcaption img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.uc-quote figcaption strong { display: block; color: var(--ds-ink-teal); }
.uc-faq__a { padding: 0 0 20px; }
.ds-cta .uc-cta__label { color: #fff; }