/* =========================================================================
 Helmara - How It Works page
 Fonts: League Spartan only. Tokens: var(--pp-*) from variables.css.
 Mobile-first; breakpoints mirror the rest of the site: 640 / 768 / 1024 /
 1280 / 1440. Diagrams (hero system, journey, workflow, setup feed, grow
 stages) stack vertically on mobile and become connected/horizontal from
 1024px up.
 ========================================================================= */

.hiw-page {
 padding-top: 78px;
}

/* -------------------------------------------------------------------------
 Shared section shells (single-column header + content sections)
 ------------------------------------------------------------------------- */
.hiw-overview__shell,
.hiw-choose__shell,
.hiw-approve__inner,
.hiw-forward__shell,
.hiw-portal__shell,
.hiw-compare__shell,
.hiw-grow__shell {
 max-width: 1400px;
 margin-inline: auto;
 padding-inline: 20px;
}

@media (min-width: 640px) {
 .hiw-overview__shell,
 .hiw-choose__shell,
 .hiw-approve__inner,
 .hiw-forward__shell,
 .hiw-portal__shell,
 .hiw-compare__shell,
 .hiw-grow__shell {
 padding-inline: 24px;
 }
}

@media (min-width: 1024px) {
 .hiw-overview__shell,
 .hiw-choose__shell,
 .hiw-forward__shell,
 .hiw-portal__shell,
 .hiw-compare__shell,
 .hiw-grow__shell {
 padding-inline: 56px;
 }
}

/* Shared header block typography */
.hiw-overview__header,
.hiw-choose__header,
.hiw-forward__header,
.hiw-portal__header,
.hiw-compare__header,
.hiw-grow__header {
 max-width: 38rem;
}

.hiw-overview__heading,
.hiw-choose__heading,
.hiw-setup__heading,
.hiw-workflow__heading,
.hiw-whatsapp__heading,
.hiw-forward__heading,
.hiw-portal__heading,
.hiw-compare__heading,
.hiw-grow__heading,
.hiw-approve__heading {
 margin: 0;
 font-family: "League Spartan", sans-serif;
 font-size: clamp(1.9rem, 3.4vw, 2.75rem);
 font-weight: 700;
 line-height: 1.14;
 letter-spacing: -0.02em;
 color: var(--pp-text);
}

.hiw-approve__heading span,
.hiw-cta__heading span,
.hiw-hero__accent,
.hiw-page .accent {
 color: var(--pp-orange);
}

.hiw-overview__body,
.hiw-choose__body,
.hiw-setup__body,
.hiw-workflow__body,
.hiw-workflow__support,
.hiw-whatsapp__body,
.hiw-forward__body,
.hiw-portal__body,
.hiw-approve__body,
.hiw-approve__wa-note {
 margin: 1rem 0 0;
 max-width: 46ch;
 font-family: "League Spartan", sans-serif;
 font-size: 1rem;
 font-weight: 400;
 line-height: 1.55;
 color: var(--pp-text-2);
}

.hiw-approve__wa-note {
 color: var(--pp-text-3);
 font-size: 0.9rem;
}

.hiw-workflow__support {
 margin-top: 0.75rem;
 color: var(--pp-text-3);
 font-size: 0.92rem;
}

/* =========================================================================
 1. HERO
 ========================================================================= */
.hiw-hero {
 position: relative;
 overflow: hidden;
 padding: 1.75rem 0 2.5rem;
}

@media (min-width: 768px) {
 .hiw-hero {
 padding: 2.25rem 0 3rem;
 }
}

@media (min-width: 1024px) {
 .hiw-hero {
 padding: 2rem 0 2.75rem;
 }
}

.hiw-hero__inner {
 max-width: 1400px;
 margin-inline: auto;
 padding-inline: 20px;
 display: grid;
 gap: 2.5rem;
 align-items: center;
}

@media (min-width: 640px) {
 .hiw-hero__inner {
 padding-inline: 24px;
 }
}

@media (min-width: 1024px) {
 .hiw-hero__inner {
 padding-inline: 56px;
 grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.2fr);
 gap: 1.5rem 3rem;
 }
}

.hiw-hero__copy {
 max-width: 34rem;
}

.hiw-hero__eyebrow {
 margin-bottom: 0.9rem;
}

.hiw-hero__heading {
 margin: 0;
 font-family: "League Spartan", sans-serif;
 font-size: clamp(2.15rem, 4.6vw, 3.4rem);
 font-weight: 700;
 line-height: 1.08;
 letter-spacing: -0.02em;
 color: var(--pp-text);
}

.hiw-hero__accent {
 color: var(--pp-orange);
}

.hiw-hero__body {
 margin: 1rem 0 1.5rem;
 max-width: 44ch;
 font-family: "League Spartan", sans-serif;
 font-size: 1.05rem;
 font-weight: 400;
 line-height: 1.55;
 color: var(--pp-text-2);
}

.hiw-hero__actions {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.9rem 1.1rem;
}

.hiw-hero__actions .btn-cta {
 min-height: 48px;
}

@media (max-width: 479px) {
 .hiw-hero__actions {
 flex-direction: column;
 align-items: stretch;
 gap: 0.75rem;
 }

 .hiw-hero__actions .btn-cta {
 width: 100%;
 text-align: center;
 }
}

/* ---- Shared diagram caption ---- */
.hiw-diagram-caption {
 margin: 0 0 1.25rem;
 max-width: 36rem;
 font-family: "League Spartan", sans-serif;
 font-size: 0.95rem;
 font-weight: 500;
 line-height: 1.45;
 color: var(--pp-text-2);
}

.hiw-diagram-caption strong {
 color: var(--pp-text);
 font-weight: 700;
}

.hiw-hero__caption {
 margin: 1.25rem 0 0;
}

/* ---- System diagram: business -> Helmara -> six specialists ---- */
.hiw-hero__system {
 position: relative;
 width: 100%;
}

.hiw-hero__diagram {
 position: relative;
 width: 100%;
 aspect-ratio: 720 / 520;
 container-type: inline-size;
 container-name: hiw-hero-diagram;
}

.hiw-hero__connectors {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 pointer-events: none;
 overflow: visible;
}

.hiw-hero__node {
 position: absolute;
 z-index: 2;
 display: inline-flex;
 flex-direction: column;
 align-items: center;
 gap: 0.75cqw;
 flex-shrink: 0;
}

.hiw-hero__node--business {
 left: 2.5%;
 top: calc(48.08% - 5.55cqw); /* icon center at y=250/520 */
}

.hiw-hero__node--hub {
 left: 43.75%; /* hub mark center ~315/720 */
 top: calc(48.08% - 11.5cqw);
 transform: translateX(-50%);
}

.hiw-hero__node-icon {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 11.1cqw; /* ~80/720 · scales with diagram/viewBox */
 height: 11.1cqw;
 border-radius: 2.2cqw;
 background: var(--pp-elevated);
 border: 1px solid var(--pp-border);
 color: var(--pp-text-2);
 box-shadow: 0 12px 28px -12px rgba(15, 23, 42, 0.18);
}

.hiw-hero__node-icon svg {
 width: 42%;
 height: 42%;
}

.hiw-hero__node-label {
 font-family: "League Spartan", sans-serif;
 font-size: max(0.7rem, 1.7cqw);
 font-weight: 600;
 color: var(--pp-text-2);
 text-align: center;
}

.hiw-hero__hub-mark {
 position: relative;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 23cqw; /* ~165/720 · stable vs SVG viewBox */
 height: 23cqw;
 padding: 2.2cqw;
 border-radius: 3.4cqw;
 background: var(--pp-elevated);
 border: 1px solid rgba(247, 151, 35, 0.22);
 box-shadow: 0 20px 44px -14px rgba(15, 23, 42, 0.2), 0 2px 0 rgba(255, 255, 255, 0.5) inset;
 box-sizing: border-box;
 overflow: hidden;
}

.hiw-hero__hub-mark img {
 position: relative;
 z-index: 1;
 display: block;
 width: 100%;
 height: 100%;
 object-fit: contain;
}

.hiw-hero__hub-mark .logo-dark {
 display: none;
}

html.dark .hiw-hero__hub-mark {
 box-shadow: 0 22px 48px -14px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
}

html.dark .hiw-hero__hub-mark .logo-light {
 display: none;
}

html.dark .hiw-hero__hub-mark .logo-dark {
 display: block;
}

.hiw-hero__tiles {
 position: absolute;
 z-index: 2;
 inset: 0;
 margin: 0;
 padding: 0;
 list-style: none;
 pointer-events: none;
}

.hiw-hero__tile {
 position: absolute;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 0.5cqw;
 width: 19.8cqw; /* ~142/720 · scales with diagram/viewBox */
}

/* Top pair - directly above the Helmara hub */
.hiw-hero__tile--content {
 left: 22%;
 top: 0;
}

.hiw-hero__tile--email {
 left: 38%;
 top: 0;
}

/* Middle pair - stacked to the right, centered on Helmara */
.hiw-hero__tile--support {
 left: 68%;
 top: 50.5%;
 transform: translateY(calc(-100% - 1cqw));
}

.hiw-hero__tile--calling {
 left: 68%;
 top: 50.5%;
 transform: translateY(1cqw);
}

/* Bottom pair - directly under the Helmara hub */
.hiw-hero__tile--leads {
 left: 22%;
 bottom: 0;
 top: auto;
}

.hiw-hero__tile--ads {
 left: 38%;
 bottom: 0;
 top: auto;
}

.hiw-hero__tile img {
 display: block;
 width: 100%;
 max-width: none;
 height: auto;
 aspect-ratio: 1;
 object-fit: contain;
 filter: drop-shadow(0 12px 24px rgba(15, 23, 42, 0.14));
}

html.dark .hiw-hero__tile img {
 filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.5));
}

/* Stack connectors: vertical stems used when SVG wires collapse.
   Hidden on desktop absolute layouts; shown per-section at stack breakpoints. */
.hiw-stack-link {
 display: none;
 position: relative;
 flex: 0 0 auto;
 width: 100%;
 height: 1.55rem;
 pointer-events: none;
 z-index: 1;
}

.hiw-stack-link::before {
 content: "";
 position: absolute;
 top: 0;
 left: 50%;
 transform: translateX(-50%);
 width: 3px;
 height: 100%;
 border-radius: 2px;
 background: var(--pp-orange);
 box-shadow: 0 0 10px rgba(247, 151, 35, 0.4);
}

.hiw-stack-link--fan {
 height: 1.85rem;
}

.hiw-stack-link--fan::after {
 content: "";
 position: absolute;
 bottom: 0;
 left: 50%;
 transform: translateX(-50%);
 width: min(14rem, 72%);
 height: 3px;
 border-radius: 2px;
 background: var(--pp-orange);
 box-shadow: 0 0 10px rgba(247, 151, 35, 0.35);
}

@media (max-width: 1023px) {
 .hiw-hero__connectors {
 display: none;
 }

 .hiw-hero__diagram > .hiw-stack-link {
 display: block;
 }

 .hiw-hero__diagram {
 aspect-ratio: auto;
 max-height: none;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 0.15rem;
 min-height: 0;
 }

 .hiw-hero__node--business,
 .hiw-hero__node--hub,
 .hiw-hero__tiles {
 position: relative;
 left: auto;
 right: auto;
 top: auto;
 bottom: auto;
 transform: none;
 inset: auto;
 }

 .hiw-hero__node--hub {
 width: auto;
 }

 .hiw-hero__hub-mark {
 width: clamp(5.5rem, 22vw, 7.5rem);
 height: clamp(5.5rem, 22vw, 7.5rem);
 padding: clamp(0.55rem, 2.2vw, 0.85rem);
 border-radius: clamp(0.85rem, 3vw, 1.15rem);
 }

 .hiw-hero__node-icon {
 width: clamp(3.25rem, 12vw, 4.25rem);
 height: clamp(3.25rem, 12vw, 4.25rem);
 border-radius: 0.85rem;
 }

 .hiw-hero__node-label {
 font-size: 0.78rem;
 }

 .hiw-hero__tiles {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 0.85rem 1rem;
 width: 100%;
 max-width: 20rem;
 pointer-events: auto;
 margin-top: 0;
 }

 .hiw-hero__diagram > .hiw-stack-link--fan::after {
 width: min(20rem, 92%);
 }

 .hiw-hero__tile {
 position: relative;
 left: auto;
 top: auto;
 transform: none;
 width: auto;
 }

 .hiw-hero__tile img {
 max-width: 5.25rem;
 margin-inline: auto;
 }
}

@media (min-width: 640px) and (max-width: 1023px) {
 .hiw-hero__tiles {
 grid-template-columns: repeat(3, 1fr);
 max-width: 28rem;
 gap: 1rem 1.15rem;
 }

 .hiw-hero__tile img {
 max-width: 5.75rem;
 }

 .hiw-hero__diagram > .hiw-stack-link--fan::after {
 width: min(28rem, 92%);
 }
}

/* =========================================================================
 2. OVERVIEW + JOURNEY
 ========================================================================= */
.hiw-overview {
 padding: 2.5rem 0 3rem;
 background: var(--pp-surface);
}

@media (min-width: 768px) {
 .hiw-overview {
 padding: 3.5rem 0 4rem;
 }
}

html.dark .hiw-overview {
 background: var(--pp-base);
}

/* ---- Connected step journey ---- */
.hiw-journey {
 display: flex;
 flex-direction: column;
 margin: 2.5rem 0 0;
 padding: 0;
 list-style: none;
}

.hiw-journey__step {
 display: block;
}

.hiw-journey__link {
 display: flex;
 align-items: center;
 gap: 1rem;
 padding: 0.85rem 0;
}

.hiw-journey__number {
 flex-shrink: 0;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 2.75rem;
 height: 2.75rem;
 border-radius: 50%;
 background: var(--pp-elevated);
 border: 1px solid var(--pp-border);
 color: var(--pp-orange);
 font-family: "League Spartan", sans-serif;
 font-weight: 700;
 font-size: 0.95rem;
 font-variant-numeric: tabular-nums;
 transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.hiw-journey__number.is-lit {
 border-color: var(--pp-orange);
 box-shadow: 0 0 0 4px rgba(247, 151, 35, 0.16), 0 0 18px rgba(247, 151, 35, 0.28);
 animation: hiw-journey-number-pulse 2.8s ease-in-out infinite;
}

.hiw-journey__text {
 font-family: "League Spartan", sans-serif;
 font-weight: 600;
 font-size: 0.98rem;
 color: var(--pp-text);
}

.hiw-journey__link:hover .hiw-journey__number {
 background: var(--pp-orange);
 border-color: var(--pp-orange);
 color: #fff;
 box-shadow: none;
 animation: none;
}

.hiw-journey__connector {
 position: relative;
 width: 2px;
 height: 1.5rem;
 margin-left: 1.375rem;
 overflow: visible;
}

.hiw-journey__rail {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 overflow: visible;
}

.hiw-journey__rail--h {
 display: none;
}

.hiw-journey__rail--v {
 display: block;
}

.hiw-journey__rail-base {
 stroke: var(--pp-border);
 stroke-width: 2;
}

.hiw-journey__rail-energy {
 stroke: #ffc56b;
 stroke-width: 2.5;
 stroke-dasharray: 18 72;
 stroke-dashoffset: 90;
 opacity: 0;
 animation: none;
}

.hiw-journey.is-energized .hiw-journey__rail-energy {
 opacity: 0.95;
 animation: hiw-journey-flow 3.2s linear infinite;
}

@keyframes hiw-journey-flow {
 to {
 stroke-dashoffset: 0;
 }
}

@keyframes hiw-journey-number-pulse {
 0%,
 100% {
 box-shadow: 0 0 0 3px rgba(247, 151, 35, 0.12), 0 0 12px rgba(247, 151, 35, 0.18);
 }
 50% {
 box-shadow: 0 0 0 6px rgba(247, 151, 35, 0.2), 0 0 22px rgba(247, 151, 35, 0.35);
 }
}

@media (prefers-reduced-motion: reduce) {
 .hiw-journey__rail-energy,
 .hiw-journey.is-energized .hiw-journey__rail-energy,
 .hiw-journey__number.is-lit {
 animation: none !important;
 }

 .hiw-journey__rail-energy {
 opacity: 0 !important;
 }
}

@media (min-width: 1024px) {
 .hiw-journey {
 flex-direction: row;
 align-items: flex-start;
 gap: 0;
 }

 .hiw-journey__step {
 flex: 0 0 auto;
 }

 .hiw-journey__link {
 flex-direction: column;
 align-items: center;
 gap: 0.85rem;
 padding: 0;
 max-width: 8.5rem;
 text-align: center;
 }

 .hiw-journey__text {
 font-size: 0.85rem;
 line-height: 1.3;
 }

 .hiw-journey__connector {
 flex: 1 1 auto;
 width: auto;
 height: 2px;
 margin: 1.375rem 0.25rem 0;
 align-self: flex-start;
 }

 .hiw-journey__rail--v {
 display: none;
 }

 .hiw-journey__rail--h {
 display: block;
 }
}

/* =========================================================================
 3. CHOOSE - module picker
 ========================================================================= */
.hiw-choose {
 padding: 3.5rem 0;
}

@media (min-width: 768px) {
 .hiw-choose {
 padding: 4.5rem 0;
 }
}

.hiw-step-eyebrow {
 display: inline-flex;
 align-items: center;
 gap: 0.55rem;
}

.hiw-step-count {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-width: 2rem;
 height: 1.55rem;
 padding: 0 0.45rem;
 border-radius: 999px;
 border: 1px solid rgba(247, 151, 35, 0.35);
 background: rgba(247, 151, 35, 0.1);
 color: var(--pp-orange);
 font-family: "League Spartan", sans-serif;
 font-size: 0.72rem;
 font-weight: 700;
 font-variant-numeric: tabular-nums;
 letter-spacing: 0.04em;
}

.hiw-step-count.is-lit {
 border-color: var(--pp-orange);
 box-shadow: 0 0 0 3px rgba(247, 151, 35, 0.14), 0 0 14px rgba(247, 151, 35, 0.28);
 animation: hiw-journey-number-pulse 2.8s ease-in-out infinite;
}

.hiw-step-eyebrow__label {
 text-transform: uppercase;
}

.hiw-picker {
 display: grid;
 gap: 0.7rem;
 margin: 2rem 0 0;
 padding: 0;
 list-style: none;
}

@media (min-width: 768px) {
 .hiw-picker {
 grid-template-columns: 1fr 1fr;
 gap: 0.8rem;
 }
}

.hiw-picker > li {
 display: flex;
 margin: 0;
 min-height: 100%;
}

.hiw-picker__item {
 display: flex;
 align-items: flex-start;
 gap: 1rem;
 width: 100%;
 flex: 1 1 auto;
 min-height: 100%;
 margin: 0;
 padding: 0.9rem 1.1rem;
 border-radius: 1.1rem;
 border: 1px solid var(--pp-border);
 background: var(--pp-elevated);
 box-shadow: 0 8px 22px -14px rgba(15, 23, 42, 0.1);
 text-align: left;
 cursor: pointer;
 font: inherit;
 color: inherit;
 appearance: none;
 -webkit-appearance: none;
 box-sizing: border-box;
 transition:
 border-color 0.22s ease,
 box-shadow 0.22s ease,
 background-color 0.22s ease,
 transform 0.22s ease;
}

.hiw-picker__item:hover {
 border-color: rgba(247, 151, 35, 0.3);
 box-shadow: 0 14px 28px -14px rgba(15, 23, 42, 0.16);
 transform: translateY(-2px);
}

.hiw-picker__item:focus-visible {
 outline: 2px solid var(--pp-orange);
 outline-offset: 3px;
}

.hiw-picker__item.is-selected {
 border-color: rgba(247, 151, 35, 0.35);
 background: linear-gradient(180deg, rgba(247, 151, 35, 0.07), transparent), var(--pp-elevated);
 box-shadow: 0 14px 32px -16px rgba(247, 151, 35, 0.3);
}

.hiw-picker__item.is-selected:hover {
 border-color: rgba(247, 151, 35, 0.55);
 box-shadow: 0 18px 36px -14px rgba(247, 151, 35, 0.38);
}

html.dark .hiw-picker__item.is-selected {
 background: linear-gradient(180deg, rgba(247, 151, 35, 0.14), transparent), var(--pp-elevated);
 box-shadow: 0 16px 34px -16px rgba(0, 0, 0, 0.5);
}

.hiw-picker__check {
 flex-shrink: 0;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 1.45rem;
 height: 1.45rem;
 margin-top: 0.1rem;
 border-radius: 50%;
 border: 1.5px solid var(--pp-border-s);
 color: #fff;
 transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.25s ease;
}

.hiw-picker__check svg {
 width: 0.68rem;
 height: 0.68rem;
}

.hiw-picker__tick {
 opacity: 0;
 stroke-dasharray: 18;
 stroke-dashoffset: 18;
 transition: opacity 0.15s ease;
}

.hiw-picker__item.is-selected .hiw-picker__check {
 border-color: var(--pp-orange);
 background: var(--pp-orange);
 transform: scale(1.05);
}

.hiw-picker__item.is-selected .hiw-picker__tick {
 opacity: 1;
 stroke-dashoffset: 0;
 transition: stroke-dashoffset 0.35s ease, opacity 0.15s ease;
}

.hiw-picker__item:hover .hiw-picker__check {
 border-color: rgba(247, 151, 35, 0.55);
}

.hiw-picker__icon {
 flex-shrink: 0;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 2.5rem;
 height: 2.5rem;
 border-radius: 0.7rem;
 background: rgba(247, 151, 35, 0.1);
 color: var(--pp-orange);
 transition: transform 0.22s ease;
}

.hiw-picker__item:hover .hiw-picker__icon {
 transform: scale(1.06);
}

.hiw-picker__icon svg {
 width: 1.3rem;
 height: 1.3rem;
}

.hiw-picker__copy {
 display: flex;
 flex-direction: column;
 gap: 0.3rem;
 min-width: 0;
 flex: 1;
}

.hiw-picker__copy strong {
 font-family: "League Spartan", sans-serif;
 font-size: 0.95rem;
 font-weight: 700;
 line-height: 1.25;
 color: var(--pp-text);
}

.hiw-picker__copy span {
 font-family: "League Spartan", sans-serif;
 font-size: 0.84rem;
 font-weight: 400;
 line-height: 1.45;
 color: var(--pp-text-3);
 /* Keep cards even without forcing a tall empty third line */
 min-height: calc(1.45em * 2);
}

@media (prefers-reduced-motion: reduce) {
 .hiw-picker__item,
 .hiw-picker__check,
 .hiw-picker__tick,
 .hiw-picker__icon {
 transition: none !important;
 }

 .hiw-picker__item:hover {
 transform: none;
 }

 .hiw-step-count.is-lit {
 animation: none !important;
 }
}

.hiw-choose__note {
 margin: 1.35rem 0 0;
 font-family: "League Spartan", sans-serif;
 font-size: 0.9rem;
 font-weight: 400;
 color: var(--pp-text-3);
}

/* =========================================================================
 4. SETUP - copy + connected feed visual
 ========================================================================= */
.hiw-setup {
 padding: 3.5rem 0;
 background: var(--pp-surface);
}

html.dark .hiw-setup {
 background: var(--pp-base);
}

@media (min-width: 768px) {
 .hiw-setup {
 padding: 4.5rem 0;
 }
}

.hiw-setup__shell {
 max-width: 1400px;
 margin-inline: auto;
 padding-inline: 20px;
 display: grid;
 gap: 2.75rem;
 align-items: center;
}

@media (min-width: 640px) {
 .hiw-setup__shell {
 padding-inline: 24px;
 }
}

@media (min-width: 1024px) {
 .hiw-setup__shell {
 padding-inline: 56px;
 grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
 gap: 3rem;
 }
}

.hiw-setup__copy {
 max-width: 32rem;
}

.hiw-setup__examples {
 display: grid;
 grid-template-columns: 1fr 1fr;
 column-gap: 1.5rem;
 row-gap: 0;
 margin: 1.85rem 0 0;
 padding: 0;
}

.hiw-setup__example {
 padding: 0.95rem 0 0.9rem;
 border-top: 1px solid var(--pp-border);
}

.hiw-setup__example:nth-child(1),
.hiw-setup__example:nth-child(2) {
 border-top-color: transparent;
 padding-top: 0.15rem;
}

.hiw-setup__example dt {
 margin: 0;
 font-family: "League Spartan", sans-serif;
 font-size: 0.72rem;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
 color: var(--pp-orange);
}

.hiw-setup__example dd {
 margin: 0.35rem 0 0;
 font-family: "League Spartan", sans-serif;
 font-size: 0.92rem;
 font-weight: 500;
 line-height: 1.35;
 color: var(--pp-text);
}

.hiw-setup__feed {
 margin: 1.5rem 0 0;
 padding: 0.95rem 0 0.95rem 1rem;
 border-left: 2px solid var(--pp-orange);
 font-family: "League Spartan", sans-serif;
 font-size: 0.92rem;
 font-weight: 400;
 line-height: 1.5;
 color: var(--pp-text-2);
}

.hiw-setup__feed strong {
 color: var(--pp-text);
 font-weight: 700;
}

.hiw-setup__feed-arrow {
 display: inline-block;
 margin: 0 0.2rem;
 color: var(--pp-orange);
 font-weight: 700;
}

/* ---- Setup visual: business panel feeding four specialists ---- */
.hiw-setup__visual {
 position: relative;
}

.hiw-setup__diagram {
 position: relative;
 width: 100%;
 max-width: 36rem;
 aspect-ratio: 520 / 420;
 container-type: inline-size;
}

.hiw-setup__wires {
 position: absolute;
 inset: 0;
 /* Under Your Business panel + tiles so wires emerge from beneath */
 z-index: 1;
 pointer-events: none;
}

.hiw-setup__wire {
 position: absolute;
 display: block;
 background: var(--pp-orange);
 border-radius: 1px;
 opacity: 0.95;
 box-shadow: 0 0 10px rgba(247, 151, 35, 0.35);
}

.hiw-setup__panel {
 position: absolute;
 z-index: 2;
 left: 4.5%;
 top: 50%;
 transform: translateY(-50%);
 width: 11.25rem;
 padding: 1.2rem 1.1rem;
 border-radius: 1.1rem;
 background: var(--pp-elevated);
 border: 1px solid var(--pp-border);
 box-shadow: 0 16px 36px -14px rgba(15, 23, 42, 0.16);
}

html.dark .hiw-setup__panel {
 box-shadow: 0 18px 38px -14px rgba(0, 0, 0, 0.55);
}

.hiw-setup__panel-title {
 display: block;
 margin-bottom: 0.85rem;
 font-family: "League Spartan", sans-serif;
 font-size: 0.82rem;
 font-weight: 700;
 color: var(--pp-text);
}

.hiw-setup__panel-list {
 display: grid;
 gap: 0.6rem;
 list-style: none;
 margin: 0;
 padding: 0;
}

.hiw-setup__panel-list li {
 display: flex;
 align-items: center;
 gap: 0.55rem;
 font-family: "League Spartan", sans-serif;
 font-size: 0.8rem;
 font-weight: 500;
 color: var(--pp-text-2);
}

.hiw-setup__panel-check {
 flex-shrink: 0;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 1.15rem;
 height: 1.15rem;
 border-radius: 50%;
 background: var(--pp-orange);
}

.hiw-setup__panel-check svg {
 width: 0.58rem;
 height: 0.58rem;
}

/* Corner tiles around Your Business:
 Content above · Support top-right · Leads bottom-right · Email below */
.hiw-setup__tiles {
 position: absolute;
 z-index: 4;
 inset: 0;
 margin: 0;
 padding: 0;
 list-style: none;
 pointer-events: none;
}

.hiw-setup__tile {
 position: absolute;
 width: 23%;
 margin: 0;
}

.hiw-setup__tile--content {
 left: 34%;
 top: 0.5%;
}

.hiw-setup__tile--support {
 right: 20%;
 top: 20.5%;
}

.hiw-setup__tile--leads {
 right: 20%;
 bottom: 20.5%;
}

.hiw-setup__tile--email {
 left: 34%;
 bottom: 0.5%;
}

.hiw-setup__tile img {
 display: block;
 width: 100%;
 height: auto;
 aspect-ratio: 1;
 object-fit: contain;
 filter: drop-shadow(0 10px 20px rgba(15, 23, 42, 0.14));
}

html.dark .hiw-setup__tile img {
 filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.5));
}

@media (max-width: 639px) {
 .hiw-setup__wires {
 display: none;
 }

 .hiw-setup__diagram > .hiw-stack-link {
 display: block;
 }

 .hiw-setup__diagram {
 aspect-ratio: auto;
 max-height: none;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 0.15rem;
 }

 .hiw-setup__panel,
 .hiw-setup__tiles {
 position: relative;
 left: auto;
 right: auto;
 top: auto;
 bottom: auto;
 transform: none;
 inset: auto;
 width: 100%;
 max-width: 16rem;
 }

 .hiw-setup__tiles {
 display: grid;
 grid-template-columns: 1fr 1fr;
 grid-template-areas:
 "content support"
 "email leads";
 gap: 0.75rem 1rem;
 width: min(100%, 16rem);
 margin-top: 0;
 }

 .hiw-setup__diagram > .hiw-stack-link--fan::after {
 width: min(16rem, 92%);
 }

 .hiw-setup__tile {
 position: relative;
 width: auto;
 left: auto;
 right: auto;
 top: auto;
 bottom: auto;
 }

 .hiw-setup__tile img {
 max-width: 5rem;
 margin-inline: auto;
 }

 .hiw-setup__tile--content { grid-area: content; }
 .hiw-setup__tile--support { grid-area: support; }
 .hiw-setup__tile--email { grid-area: email; }
 .hiw-setup__tile--leads { grid-area: leads; }
}

/* =========================================================================
 5. WORKFLOW - connected specialist flow
 ========================================================================= */
.hiw-workflow {
 padding: 3.5rem 0 4rem;
}

@media (min-width: 768px) {
 .hiw-workflow {
 padding: 4.5rem 0 5rem;
 }
}

.hiw-workflow__shell {
 max-width: 1400px;
 margin-inline: auto;
 padding-inline: 20px;
 display: grid;
 gap: 2.75rem;
 align-items: center;
}

@media (min-width: 640px) {
 .hiw-workflow__shell {
 padding-inline: 24px;
 }
}

@media (min-width: 1024px) {
 .hiw-workflow__shell {
 padding-inline: 56px;
 grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
 gap: 3rem;
 }
}

@media (max-width: 1023px) {
 .hiw-workflow__copy {
 order: -1;
 }
}

.hiw-workflow__copy {
 max-width: 32rem;
}

.hiw-workflow__feed {
 margin: 1.5rem 0 0;
 padding: 0.95rem 0 0.95rem 1rem;
 border-left: 2px solid var(--pp-orange);
 font-family: "League Spartan", sans-serif;
 font-size: 0.92rem;
 font-weight: 400;
 line-height: 1.5;
 color: var(--pp-text-2);
}

.hiw-workflow__feed strong {
 color: var(--pp-text);
 font-weight: 700;
}

.hiw-workflow__feed-arrow {
 display: inline-block;
 margin: 0 0.2rem;
 color: var(--pp-orange);
 font-weight: 700;
}

.hiw-workflow__visual {
 position: relative;
 min-width: 0;
}

/* ---- Flow diagram: sources -> hub -> targets ---- */
.hiw-flow__diagram {
 position: relative;
 width: 100%;
 max-width: 48rem;
 aspect-ratio: 720 / 360;
}

.hiw-flow__connectors {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100%;
 z-index: 1;
 pointer-events: none;
 overflow: visible;
}

.hiw-flow__node {
 position: absolute;
 z-index: 2;
 display: flex;
 align-items: center;
 gap: 0.75rem;
 padding: 0.75rem 1rem;
 border-radius: 1rem;
 background: var(--pp-elevated);
 border: 1px solid var(--pp-border);
 box-shadow: 0 10px 26px -14px rgba(15, 23, 42, 0.14);
}

html.dark .hiw-flow__node {
 box-shadow: 0 12px 28px -14px rgba(0, 0, 0, 0.5);
}

.hiw-flow__node img {
 width: 2.4rem;
 height: 2.4rem;
 aspect-ratio: 1;
 object-fit: contain;
 flex-shrink: 0;
}

.hiw-flow__node span {
 font-family: "League Spartan", sans-serif;
 font-weight: 600;
 font-size: 0.88rem;
 color: var(--pp-text);
 white-space: nowrap;
}

.hiw-flow__node--content { left: 0; top: calc(19.44% - 1.9rem); } /* y=70 */
.hiw-flow__node--leads { left: 0; top: calc(80.56% - 1.9rem); } /* y=290 */
.hiw-flow__node--email { left: 79.2%; right: auto; top: calc(13.89% - 1.9rem); } /* y=50 */
.hiw-flow__node--calling { left: 79.2%; right: auto; top: calc(50% - 1.9rem); } /* y=180 */
.hiw-flow__node--ads { left: 79.2%; right: auto; top: calc(83.33% - 1.9rem); } /* y=300 */

.hiw-flow__hub {
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 z-index: 2;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 0.5rem;
}

.hiw-flow__hub-mark {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 7.25rem;
 height: 7.25rem;
 border-radius: 1.45rem;
 box-sizing: border-box;
 overflow: hidden;
}

.hiw-flow__hub-core {
 position: relative;
 z-index: 1;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%;
 height: 100%;
 padding: 0.9rem;
 border-radius: inherit;
 background: var(--pp-elevated);
 border: 1px solid rgba(247, 151, 35, 0.22);
 box-shadow:
 0 18px 36px -16px rgba(15, 23, 42, 0.2),
 0 0 0 1px rgba(247, 151, 35, 0.08),
 inset 0 1px 0 rgba(255, 255, 255, 0.55);
 box-sizing: border-box;
}

html.dark .hiw-flow__hub-core {
 box-shadow:
 0 20px 40px -16px rgba(0, 0, 0, 0.55),
 0 0 0 1px rgba(247, 151, 35, 0.2),
 inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Energy travels along the border - no element rotation, no spill */
@property --hiw-hub-angle {
 syntax: "<angle>";
 inherits: false;
 initial-value: 0deg;
}

.hiw-flow__hub-orbit,
.hiw-hero__hub-orbit {
 position: absolute;
 inset: 0;
 border-radius: inherit;
 padding: 2px;
 --hiw-hub-angle: 0deg;
 background: conic-gradient(
 from var(--hiw-hub-angle),
 transparent 0deg,
 transparent 50deg,
 rgba(247, 151, 35, 0.35) 70deg,
 #f79723 85deg,
 #ffe0a8 95deg,
 #f79723 105deg,
 rgba(247, 151, 35, 0.35) 120deg,
 transparent 145deg,
 transparent 230deg,
 rgba(247, 151, 35, 0.25) 250deg,
 #ffb347 265deg,
 #f79723 280deg,
 transparent 310deg,
 transparent 360deg
 );
 -webkit-mask:
 linear-gradient(#000 0 0) content-box,
 linear-gradient(#000 0 0);
 mask:
 linear-gradient(#000 0 0) content-box,
 linear-gradient(#000 0 0);
 -webkit-mask-composite: xor;
 mask-composite: exclude;
 animation: hiw-hub-border 2.2s linear infinite;
 pointer-events: none;
 z-index: 3;
}

.hiw-flow__hub-core img {
 display: block;
 width: 100%;
 height: 100%;
 object-fit: contain;
}

.hiw-flow__hub-core .logo-dark {
 display: none;
}

html.dark .hiw-flow__hub-core .logo-light {
 display: none;
}

html.dark .hiw-flow__hub-core .logo-dark {
 display: block;
}

.hiw-flow__hub > span:not(.hiw-flow__hub-mark) {
 font-family: "League Spartan", sans-serif;
 font-size: 0.82rem;
 font-weight: 700;
 color: var(--pp-text-2);
 white-space: nowrap;
}

@keyframes hiw-hub-border {
 to {
 --hiw-hub-angle: 360deg;
 }
}

@media (prefers-reduced-motion: reduce) {
 .hiw-flow__hub-orbit,
 .hiw-hero__hub-orbit {
 animation: none;
 }
}

.hiw-flow__legend {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 0.6rem 0.75rem;
 margin: 1.25rem 0 0;
 padding: 0;
 list-style: none;
}

.hiw-flow__legend li {
 position: relative;
 overflow: hidden;
 display: inline-flex;
 align-items: center;
 gap: 0.45rem;
 padding: 0.5rem 1rem;
 border-radius: 999px;
 background: var(--pp-elevated);
 border: 1px solid var(--pp-border);
 font-family: "League Spartan", sans-serif;
 font-size: 0.8rem;
 font-weight: 600;
 color: var(--pp-text-2);
 opacity: 0.55;
 transform: scale(0.98);
 transition:
 opacity 0.35s ease,
 transform 0.35s ease,
 border-color 0.35s ease,
 box-shadow 0.35s ease,
 color 0.35s ease;
}

.hiw-flow__legend li.is-active {
 opacity: 1;
 transform: scale(1);
 color: var(--pp-text);
 border-color: rgba(247, 151, 35, 0.55);
 box-shadow: 0 0 0 1px rgba(247, 151, 35, 0.18), 0 8px 22px -14px rgba(247, 151, 35, 0.55);
}

.hiw-flow__legend-arrow {
 position: relative;
 color: var(--pp-orange);
 font-weight: 700;
}

.hiw-flow__legend li.is-active .hiw-flow__legend-arrow {
 animation: hiw-legend-arrow 0.9s ease-in-out infinite;
}

.hiw-flow__legend li.is-active::after {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(
 105deg,
 transparent 35%,
 rgba(247, 151, 35, 0.16) 50%,
 transparent 65%
 );
 background-size: 220% 100%;
 animation: hiw-legend-sweep 1.1s ease-in-out infinite;
 pointer-events: none;
}

@keyframes hiw-legend-arrow {
 0%,
 100% {
 transform: translateX(0);
 opacity: 0.75;
 }
 50% {
 transform: translateX(3px);
 opacity: 1;
 }
}

@keyframes hiw-legend-sweep {
 0% {
 background-position: 100% 0;
 }
 100% {
 background-position: -100% 0;
 }
}

@media (prefers-reduced-motion: reduce) {
 .hiw-flow__legend li {
 opacity: 1;
 transform: none;
 }

 .hiw-flow__legend li.is-active .hiw-flow__legend-arrow,
 .hiw-flow__legend li.is-active::after {
 animation: none;
 }
}

@media (max-width: 767px) {
 .hiw-flow__connectors {
 display: none;
 }

 .hiw-flow__diagram > .hiw-stack-link {
 display: block;
 }

 .hiw-flow__diagram {
 aspect-ratio: auto;
 max-height: none;
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 align-items: center;
 gap: 0.4rem 0.65rem;
 }

 .hiw-flow__node,
 .hiw-flow__hub {
 position: relative;
 left: auto !important;
 right: auto !important;
 top: auto !important;
 transform: none;
 }

 .hiw-flow__node--content,
 .hiw-flow__node--leads {
 flex: 1 1 calc(50% - 0.4rem);
 max-width: 11.5rem;
 justify-content: center;
 padding: 0.65rem 0.75rem;
 }

 .hiw-flow__hub {
 flex: 0 0 100%;
 width: 100%;
 margin-block: 0.1rem;
 }

 .hiw-flow__hub-mark {
 width: 5.5rem;
 height: 5.5rem;
 }

 .hiw-flow__node--email,
 .hiw-flow__node--calling,
 .hiw-flow__node--ads {
 flex: 1 1 calc(33.333% - 0.5rem);
 max-width: 10rem;
 min-width: 6.5rem;
 justify-content: center;
 padding: 0.65rem 0.7rem;
 }

 .hiw-flow__node img {
 width: 2rem;
 height: 2rem;
 }

 .hiw-flow__node span {
 font-size: 0.8rem;
 white-space: normal;
 text-align: center;
 }

 .hiw-stack-link--fan::after {
 width: min(16rem, 86%);
 }
}

@media (max-width: 479px) {
 .hiw-flow__node--email,
 .hiw-flow__node--calling,
 .hiw-flow__node--ads {
 flex: 1 1 calc(50% - 0.4rem);
 max-width: 11rem;
 }
}

/* =========================================================================
 6. APPROVE - client-in-the-loop
 ========================================================================= */
.hiw-approve {
 padding: 3.5rem 0;
 background: var(--pp-surface);
}

html.dark .hiw-approve {
 background: var(--pp-base);
}

@media (min-width: 768px) {
 .hiw-approve {
 padding: 4.5rem 0;
 }
}

.hiw-approve__inner {
 display: grid;
 gap: 3rem 2.5rem;
 align-items: center;
}

@media (min-width: 1024px) {
 .hiw-approve__inner {
 grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
 }
}

.hiw-approve__visual {
 position: relative;
 max-width: 26rem;
 margin-inline: auto;
 padding-bottom: 3rem;
}

@media (min-width: 1024px) {
 .hiw-approve__visual {
 margin-inline: 0;
 }
}

.hiw-approve__card {
 position: relative;
 z-index: 1;
 padding: 1.5rem 1.4rem 1.4rem;
 border-radius: 1.35rem;
 background: var(--pp-elevated);
 border: 1px solid var(--pp-border);
 box-shadow: 0 26px 54px -18px rgba(15, 23, 42, 0.2);
 animation: hiw-approve-card-float 4.8s ease-in-out infinite;
}

html.dark .hiw-approve__card {
 box-shadow: 0 28px 56px -18px rgba(0, 0, 0, 0.6);
}

.hiw-approve__card-head {
 display: flex;
 align-items: flex-start;
 gap: 0.85rem;
 margin-bottom: 0.9rem;
}

.hiw-approve__card-icon {
 flex-shrink: 0;
 display: inline-flex;
 align-items: center;
 justify-content: center;
 width: 2.5rem;
 height: 2.5rem;
 border-radius: 0.75rem;
 background: var(--pp-orange);
}

.hiw-approve__card-icon svg {
 width: 1.1rem;
 height: 1.1rem;
}

.hiw-approve__card-head em {
 display: block;
 margin-bottom: 0.2rem;
 font-style: normal;
 font-family: "League Spartan", sans-serif;
 font-size: 0.7rem;
 font-weight: 700;
 letter-spacing: 0.06em;
 text-transform: uppercase;
 color: var(--pp-orange);
}

.hiw-approve__card-head strong {
 display: block;
 font-family: "League Spartan", sans-serif;
 font-size: 0.98rem;
 font-weight: 700;
 line-height: 1.3;
 color: var(--pp-text);
}

.hiw-approve__card p {
 margin: 0 0 1.1rem;
 font-family: "League Spartan", sans-serif;
 font-size: 0.85rem;
 line-height: 1.5;
 color: var(--pp-text-3);
}

.hiw-approve__card-actions {
 display: flex;
 flex-wrap: wrap;
 gap: 0.6rem;
}

.hiw-approve__approve,
.hiw-approve__request {
 min-height: 2.35rem;
 padding: 0.5rem 1.1rem;
 border-radius: 0.6rem;
 border: 1px solid var(--pp-border);
 background: var(--pp-base);
 color: var(--pp-text);
 font-family: "League Spartan", sans-serif;
 font-size: 0.82rem;
 font-weight: 700;
 cursor: default;
}

.hiw-approve__approve {
 background: var(--pp-orange);
 border-color: var(--pp-orange);
 color: #fff;
 animation: hiw-approve-btn-pulse 2.4s ease-in-out infinite;
}

.hiw-approve__whatsapp {
 position: absolute;
 z-index: 2;
 left: 0.5rem;
 bottom: 0;
 display: grid;
 grid-template-columns: auto 1fr;
 gap: 0.5rem 0.7rem;
 width: min(16rem, 88%);
 padding: 0.9rem 1rem;
 border-radius: 1rem;
 background: var(--pp-elevated);
 border: 1px solid var(--pp-border);
 box-shadow: 0 20px 42px -16px rgba(15, 23, 42, 0.24);
 animation: hiw-approve-wa-bob 3.6s ease-in-out infinite;
}

.hiw-approve__whatsapp.is-pinging {
 animation:
 hiw-approve-wa-bob 3.6s ease-in-out infinite,
 hiw-approve-wa-ping 0.7s ease-out;
}

html.dark .hiw-approve__whatsapp {
 box-shadow: 0 22px 44px -16px rgba(0, 0, 0, 0.65);
}

.hiw-approve__whatsapp-icon {
 display: grid;
 place-items: center;
 width: 2.35rem;
 height: 2.35rem;
 border-radius: 0.6rem;
 background: #25d366;
}

.hiw-approve__whatsapp-icon svg {
 width: 1.35rem;
 height: 1.35rem;
}

.hiw-approve__whatsapp strong {
 display: block;
 font-family: "League Spartan", sans-serif;
 font-size: 0.85rem;
 font-weight: 700;
 color: var(--pp-text);
}

.hiw-approve__whatsapp span {
 display: block;
 margin-top: 0.15rem;
 font-family: "League Spartan", sans-serif;
 font-size: 0.72rem;
 font-weight: 400;
 line-height: 1.35;
 color: var(--pp-text-3);
}

.hiw-approve__whatsapp-avatars {
 grid-column: 1 / -1;
 display: flex;
 margin-top: 0.15rem;
}

.hiw-approve__whatsapp-avatars img {
 width: 1.5rem;
 height: 1.5rem;
 margin-left: -0.3rem;
 border: 2px solid var(--pp-elevated);
 border-radius: 50%;
 object-fit: cover;
}

.hiw-approve__whatsapp-avatars img:first-child {
 margin-left: 0;
}

.hiw-approve__copy {
 max-width: 34rem;
}

.hiw-approve__examples {
 display: grid;
 gap: 0.75rem;
 margin: 1.5rem 0 0;
 padding: 0;
 list-style: none;
}

.hiw-approve__examples li {
 position: relative;
 overflow: hidden;
 display: flex;
 align-items: center;
 justify-content: space-between;
 flex-wrap: wrap;
 gap: 0.5rem 0.75rem;
 padding: 0.85rem 1rem;
 border-radius: 999px;
 border: 1px solid var(--pp-border);
 background: var(--pp-elevated);
 font-family: "League Spartan", sans-serif;
 font-size: 0.86rem;
 color: var(--pp-text-2);
 opacity: 0.55;
 transform: scale(0.98);
 transition:
 opacity 0.35s ease,
 transform 0.35s ease,
 border-color 0.35s ease,
 box-shadow 0.35s ease,
 color 0.35s ease;
}

.hiw-approve__examples li.is-active {
 opacity: 1;
 transform: scale(1);
 color: var(--pp-text);
 border-color: rgba(247, 151, 35, 0.55);
 box-shadow: 0 0 0 1px rgba(247, 151, 35, 0.16), 0 10px 24px -14px rgba(247, 151, 35, 0.5);
}

.hiw-approve__examples li.is-active::after {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(
 105deg,
 transparent 35%,
 rgba(247, 151, 35, 0.14) 50%,
 transparent 65%
 );
 background-size: 220% 100%;
 animation: hiw-legend-sweep 1.1s ease-in-out infinite;
 pointer-events: none;
}

.hiw-approve__examples li strong {
 font-weight: 700;
 color: inherit;
}

.hiw-approve__arrow {
 color: var(--pp-orange);
 font-weight: 700;
}

.hiw-approve__examples li.is-active .hiw-approve__arrow {
 animation: hiw-legend-arrow 0.9s ease-in-out infinite;
}

@keyframes hiw-approve-card-float {
 0%,
 100% {
 transform: translateY(0);
 }
 50% {
 transform: translateY(-6px);
 }
}

@keyframes hiw-approve-wa-bob {
 0%,
 100% {
 transform: translateY(0);
 }
 50% {
 transform: translateY(-4px);
 }
}

@keyframes hiw-approve-wa-ping {
 0% {
 box-shadow: 0 20px 42px -16px rgba(15, 23, 42, 0.24), 0 0 0 0 rgba(37, 211, 102, 0.45);
 }
 100% {
 box-shadow: 0 20px 42px -16px rgba(15, 23, 42, 0.24), 0 0 0 14px rgba(37, 211, 102, 0);
 }
}

@keyframes hiw-approve-btn-pulse {
 0%,
 100% {
 box-shadow: 0 0 0 0 rgba(247, 151, 35, 0.35);
 }
 50% {
 box-shadow: 0 0 0 6px rgba(247, 151, 35, 0);
 }
}

@media (prefers-reduced-motion: reduce) {
 .hiw-approve__card,
 .hiw-approve__whatsapp,
 .hiw-approve__approve,
 .hiw-approve__examples li.is-active .hiw-approve__arrow,
 .hiw-approve__examples li.is-active::after {
 animation: none;
 }

 .hiw-approve__examples li {
 opacity: 1;
 transform: none;
 }
}

/* =========================================================================
 7. WHATSAPP CONTROL
 ========================================================================= */
.hiw-whatsapp {
 padding: 3.5rem 0;
}

@media (min-width: 768px) {
 .hiw-whatsapp {
 padding: 4.5rem 0;
 }
}

.hiw-whatsapp__shell {
 max-width: 1400px;
 margin-inline: auto;
 padding-inline: 20px;
 display: grid;
 gap: 2.75rem;
 align-items: center;
}

@media (min-width: 640px) {
 .hiw-whatsapp__shell {
 padding-inline: 24px;
 }
}

@media (min-width: 1024px) {
 .hiw-whatsapp__shell {
 padding-inline: 56px;
 grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
 gap: 3rem;
 }
}

.hiw-whatsapp__copy {
 max-width: 32rem;
}

.hiw-whatsapp__sequence {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.4rem 0.6rem;
 margin: 1.75rem 0 0;
 padding: 0;
 list-style: none;
}

.hiw-whatsapp__sequence li {
 position: relative;
 overflow: hidden;
 display: inline-flex;
 align-items: center;
 padding: 0.55rem 0.95rem;
 border-radius: 999px;
 border: 1px solid var(--pp-border);
 background: var(--pp-elevated);
 font-family: "League Spartan", sans-serif;
 font-size: 0.8rem;
 font-weight: 600;
 color: var(--pp-text-2);
 opacity: 0.5;
 transform: scale(0.98);
 transition:
 opacity 0.35s ease,
 transform 0.35s ease,
 border-color 0.35s ease,
 box-shadow 0.35s ease,
 color 0.35s ease;
}

.hiw-whatsapp__sequence li.is-active {
 opacity: 1;
 transform: scale(1);
 color: var(--pp-text);
 border-color: rgba(247, 151, 35, 0.55);
 box-shadow: 0 0 0 1px rgba(247, 151, 35, 0.16), 0 8px 22px -14px rgba(247, 151, 35, 0.5);
}

.hiw-whatsapp__sequence li.is-active::before {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(
 105deg,
 transparent 35%,
 rgba(247, 151, 35, 0.14) 50%,
 transparent 65%
 );
 background-size: 220% 100%;
 animation: hiw-legend-sweep 1.1s ease-in-out infinite;
 pointer-events: none;
}

.hiw-whatsapp__sequence li:not(:last-child)::after {
 content: "\2192";
 margin-left: 0.55rem;
 color: var(--pp-orange);
 font-weight: 700;
}

.hiw-whatsapp__sequence li.is-active:not(:last-child)::after {
 animation: hiw-legend-arrow 0.9s ease-in-out infinite;
}

.hiw-whatsapp__visual {
 display: flex;
 justify-content: center;
 align-self: start;
}

.hiw-whatsapp__phone {
 width: min(100%, 15.25rem);
 border-radius: 1.55rem;
 overflow: hidden;
 background: #efeae2;
 border: 1px solid rgba(15, 23, 42, 0.08);
 box-shadow: 0 30px 64px -22px rgba(15, 23, 42, 0.3);
 animation: hiw-wa-phone-float 5s ease-in-out infinite;
}

html.dark .hiw-whatsapp__phone {
 border-color: rgba(255, 255, 255, 0.08);
 box-shadow: 0 32px 68px -22px rgba(0, 0, 0, 0.65);
}

.hiw-wa-chat__head {
 display: flex;
 align-items: center;
 gap: 0.55rem;
 padding: 0.7rem 0.75rem;
 background: #075e54;
 color: #fff;
}

.hiw-wa-chat__avatar {
 flex-shrink: 0;
 display: grid;
 place-items: center;
 width: 2rem;
 height: 2rem;
 border-radius: 50%;
 background: linear-gradient(145deg, #f79723, #e07a00);
 font-family: "League Spartan", sans-serif;
 font-size: 0.62rem;
 font-weight: 800;
 letter-spacing: 0.02em;
}

.hiw-wa-chat__identity {
 flex: 1;
 min-width: 0;
}

.hiw-wa-chat__identity strong {
 display: block;
 font-family: "League Spartan", sans-serif;
 font-size: 0.82rem;
 font-weight: 700;
 line-height: 1.15;
}

.hiw-wa-chat__identity em {
 display: block;
 margin-top: 0.1rem;
 font-style: normal;
 font-family: "League Spartan", sans-serif;
 font-size: 0.62rem;
 font-weight: 500;
 opacity: 0.8;
}

.hiw-wa-chat__head-icons {
 display: inline-flex;
 align-items: center;
 gap: 0.55rem;
 color: rgba(255, 255, 255, 0.9);
}

.hiw-wa-chat__head-icons svg {
 width: 0.95rem;
 height: 0.95rem;
}

.hiw-wa-chat__body {
 display: flex;
 flex-direction: column;
 gap: 0.45rem;
 min-height: 15.5rem;
 padding: 0.75rem 0.65rem 0.85rem;
 background:
 linear-gradient(180deg, rgba(236, 229, 221, 0.92), rgba(236, 229, 221, 0.92)),
 radial-gradient(circle at 20% 10%, rgba(247, 151, 35, 0.08), transparent 40%);
}

.hiw-wa-chat__typing,
.hiw-wa-chat__bubble,
.hiw-wa-chat__actions {
 opacity: 0;
 transform: translateY(10px) scale(0.96);
 pointer-events: none;
 transition:
 opacity 0.35s ease,
 transform 0.35s ease;
}

.hiw-wa-chat__typing.is-shown,
.hiw-wa-chat__bubble.is-shown,
.hiw-wa-chat__actions.is-shown {
 opacity: 1;
 transform: translateY(0) scale(1);
 pointer-events: auto;
}

.hiw-wa-chat__typing {
 align-self: flex-start;
 display: inline-flex;
 align-items: center;
 gap: 0.28rem;
 padding: 0.55rem 0.7rem;
 border-radius: 0.85rem 0.85rem 0.85rem 0.2rem;
 background: #fff;
 box-shadow: 0 1px 1px rgba(15, 23, 42, 0.06);
}

.hiw-wa-chat__typing span {
 width: 0.34rem;
 height: 0.34rem;
 border-radius: 50%;
 background: #9ca3af;
 animation: hiw-wa-dot 1.1s ease-in-out infinite;
}

.hiw-wa-chat__typing span:nth-child(2) {
 animation-delay: 0.15s;
}

.hiw-wa-chat__typing span:nth-child(3) {
 animation-delay: 0.3s;
}

.hiw-wa-chat__bubble {
 max-width: 88%;
 padding: 0.55rem 0.65rem 0.35rem;
 box-shadow: 0 1px 1px rgba(15, 23, 42, 0.06);
}

.hiw-wa-chat__bubble--in {
 align-self: flex-start;
 border-radius: 0.85rem 0.85rem 0.85rem 0.2rem;
 background: #fff;
}

.hiw-wa-chat__bubble--out {
 align-self: flex-end;
 border-radius: 0.85rem 0.85rem 0.2rem 0.85rem;
 background: #dcf8c6;
}

.hiw-wa-chat__bubble p {
 margin: 0;
 font-family: "League Spartan", sans-serif;
 font-size: 0.72rem;
 font-weight: 500;
 line-height: 1.35;
 color: #111b21;
}

.hiw-wa-chat__bubble time {
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: 0.2rem;
 margin-top: 0.25rem;
 font-family: "League Spartan", sans-serif;
 font-size: 0.55rem;
 font-weight: 500;
 color: #667781;
}

.hiw-wa-chat__bubble time svg {
 width: 0.85rem;
 height: 0.55rem;
}

.hiw-wa-chat__actions {
 align-self: stretch;
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 0.4rem;
}

.hiw-wa-chat__btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 min-height: 1.9rem;
 border-radius: 999px;
 border: 1px solid rgba(7, 94, 84, 0.18);
 background: #e7f8ef;
 color: #075e54;
 font-family: "League Spartan", sans-serif;
 font-size: 0.68rem;
 font-weight: 700;
}

.hiw-wa-chat__btn--approve.is-hot {
 background: #25d366;
 border-color: #25d366;
 color: #fff;
 box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45);
 animation: hiw-wa-approve-pulse 1.2s ease-out infinite;
}

.hiw-wa-chat__compose {
 display: flex;
 align-items: center;
 gap: 0.45rem;
 padding: 0.45rem 0.5rem 0.55rem;
 background: #f0f2f5;
}

.hiw-wa-chat__input {
 flex: 1;
 min-height: 2rem;
 display: flex;
 align-items: center;
 padding: 0 0.75rem;
 border-radius: 999px;
 background: #fff;
 font-family: "League Spartan", sans-serif;
 font-size: 0.68rem;
 font-weight: 500;
 color: #8696a0;
}

.hiw-wa-chat__mic {
 display: grid;
 place-items: center;
 width: 2rem;
 height: 2rem;
 border-radius: 50%;
 background: #25d366;
}

.hiw-wa-chat__mic svg {
 width: 0.95rem;
 height: 0.95rem;
}

@keyframes hiw-wa-phone-float {
 0%,
 100% {
 transform: translateY(0);
 }
 50% {
 transform: translateY(-8px);
 }
}

@keyframes hiw-wa-dot {
 0%,
 80%,
 100% {
 opacity: 0.35;
 transform: translateY(0);
 }
 40% {
 opacity: 1;
 transform: translateY(-2px);
 }
}

@keyframes hiw-wa-approve-pulse {
 0% {
 box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45);
 }
 70% {
 box-shadow: 0 0 0 8px rgba(37, 211, 102, 0);
 }
 100% {
 box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
 }
}

@media (prefers-reduced-motion: reduce) {
 .hiw-whatsapp__phone,
 .hiw-whatsapp__sequence li.is-active::before,
 .hiw-whatsapp__sequence li.is-active:not(:last-child)::after,
 .hiw-wa-chat__typing span,
 .hiw-wa-chat__btn--approve.is-hot {
 animation: none;
 }

 .hiw-whatsapp__sequence li,
 .hiw-wa-chat__typing,
 .hiw-wa-chat__bubble,
 .hiw-wa-chat__actions {
 opacity: 1;
 transform: none;
 }
}

/* =========================================================================
 8. FORWARD - approved work keeps moving
 ========================================================================= */
.hiw-forward {
 padding: 3.5rem 0;
 background: var(--pp-surface);
}

html.dark .hiw-forward {
 background: var(--pp-base);
}

@media (min-width: 768px) {
 .hiw-forward {
 padding: 4.5rem 0;
 }
}

.hiw-forward__shell {
 display: grid;
 gap: 2.75rem;
 align-items: center;
}

@media (min-width: 1024px) {
 .hiw-forward__shell {
 grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
 gap: 3rem 2.5rem;
 }

 .hiw-forward__header {
 max-width: none;
 }
}

.hiw-forward__visual {
 display: flex;
 flex-direction: column;
 gap: 1.25rem;
 width: 100%;
 max-width: 28rem;
 margin-inline: auto;
}

@media (min-width: 1024px) {
 .hiw-forward__visual {
 margin-inline: 0 0 auto;
 justify-self: end;
 }
}

.hiw-forward__flow {
 display: flex;
 flex-direction: column;
 align-items: stretch;
 gap: 0.45rem;
 margin: 0;
}

.hiw-forward__flow-step {
 display: inline-flex;
 align-items: center;
 justify-content: flex-start;
 width: 100%;
 padding: 0.85rem 1.15rem;
 border-radius: 999px;
 border: 1px solid var(--pp-border);
 background: var(--pp-elevated);
 font-family: "League Spartan", sans-serif;
 font-size: 0.9rem;
 font-weight: 700;
 line-height: 1;
 color: var(--pp-text-2);
 opacity: 0;
 transform: translateX(18px) scale(0.96);
 transition:
 opacity 0.35s ease,
 transform 0.35s ease,
 border-color 0.35s ease,
 box-shadow 0.35s ease,
 background 0.35s ease,
 color 0.35s ease;
}

.hiw-forward__flow-step.is-shown {
 opacity: 1;
 transform: translateX(0) scale(1);
}

.hiw-forward__flow-step.is-active {
 border-color: rgba(247, 151, 35, 0.55);
 box-shadow: 0 0 0 1px rgba(247, 151, 35, 0.16), 0 10px 24px -14px rgba(247, 151, 35, 0.5);
 color: var(--pp-text);
}

.hiw-forward__flow-step--final.is-shown {
 border-color: var(--pp-orange);
 background: var(--pp-orange);
 color: #fff;
 box-shadow: 0 12px 28px -12px rgba(247, 151, 35, 0.65);
}

.hiw-forward__flow-arrow {
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--pp-orange);
 font-weight: 700;
 font-size: 1.05rem;
 line-height: 1;
 height: 1rem;
 opacity: 0;
 transform: translateY(-4px);
 transition:
 opacity 0.3s ease,
 transform 0.3s ease;
}

.hiw-forward__flow-arrow.is-shown {
 opacity: 1;
 transform: translateY(0);
}

.hiw-forward__flow-arrow.is-shown.is-active {
 animation: hiw-forward-arrow-bounce 0.9s ease-in-out infinite;
}

@keyframes hiw-forward-arrow-bounce {
 0%,
 100% {
 transform: translateY(0);
 opacity: 0.75;
 }
 50% {
 transform: translateY(3px);
 opacity: 1;
 }
}

.hiw-forward__branches {
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-start;
 gap: 0.55rem;
 margin: 0;
 padding: 0;
 list-style: none;
}

.hiw-forward__branches li {
 padding: 0.5rem 0.95rem;
 border-radius: 999px;
 border: 1px solid var(--pp-border);
 background: var(--pp-elevated);
 font-family: "League Spartan", sans-serif;
 font-size: 0.78rem;
 font-weight: 600;
 color: var(--pp-text-3);
 opacity: 0;
 transform: translateY(10px) scale(0.96);
 transition:
 opacity 0.3s ease,
 transform 0.3s ease,
 border-color 0.3s ease,
 color 0.3s ease,
 box-shadow 0.3s ease;
}

.hiw-forward__branches li.is-shown {
 opacity: 1;
 transform: translateY(0) scale(1);
}

.hiw-forward__branches li.is-active {
 color: var(--pp-text);
 border-color: rgba(247, 151, 35, 0.45);
 box-shadow: 0 0 0 1px rgba(247, 151, 35, 0.12);
}

@media (prefers-reduced-motion: reduce) {
 .hiw-forward__flow-step,
 .hiw-forward__flow-arrow,
 .hiw-forward__branches li {
 opacity: 1;
 transform: none;
 transition: none;
 }

 .hiw-forward__flow-arrow.is-shown.is-active {
 animation: none;
 }
}

/* =========================================================================
 9. PORTAL
 ========================================================================= */
.hiw-portal {
 padding: 3.5rem 0;
}

@media (min-width: 768px) {
 .hiw-portal {
 padding: 4.5rem 0;
 }
}

.hiw-portal__header {
 max-width: min(52rem, 100%);
 margin-inline: auto;
 text-align: center;
}

.hiw-portal__heading {
 text-wrap: balance;
}

.hiw-portal__heading-line {
 display: block;
}

@media (min-width: 768px) {
 .hiw-portal__heading-line {
 white-space: nowrap;
 }
}

.hiw-portal__body {
 margin-inline: auto;
}

.hiw-portal__items {
 display: flex;
 flex-wrap: wrap;
 justify-content: center;
 gap: 0.6rem;
 margin: 1.75rem 0 0;
 padding: 0;
 list-style: none;
}

.hiw-portal__items li {
 position: relative;
 overflow: hidden;
 padding: 0.5rem 1rem;
 border-radius: 999px;
 border: 1px solid var(--pp-border);
 background: var(--pp-elevated);
 font-family: "League Spartan", sans-serif;
 font-size: 0.82rem;
 font-weight: 600;
 color: var(--pp-text-2);
 opacity: 0.5;
 transform: scale(0.98) translateY(8px);
 transition:
 opacity 0.35s ease,
 transform 0.35s ease,
 border-color 0.35s ease,
 box-shadow 0.35s ease,
 color 0.35s ease;
}

.hiw-portal__items li.is-shown {
 opacity: 0.55;
 transform: scale(0.98) translateY(0);
}

.hiw-portal__items li.is-active {
 opacity: 1;
 transform: scale(1) translateY(0);
 color: var(--pp-text);
 border-color: rgba(247, 151, 35, 0.55);
 box-shadow: 0 0 0 1px rgba(247, 151, 35, 0.16), 0 8px 22px -14px rgba(247, 151, 35, 0.5);
}

.hiw-portal__items li.is-active::after {
 content: "";
 position: absolute;
 inset: 0;
 background: linear-gradient(
 105deg,
 transparent 35%,
 rgba(247, 151, 35, 0.14) 50%,
 transparent 65%
 );
 background-size: 220% 100%;
 animation: hiw-legend-sweep 1.1s ease-in-out infinite;
 pointer-events: none;
}

.hiw-portal__visual {
 position: relative;
 margin-top: 2.5rem;
 border-radius: 1.5rem;
 overflow: hidden;
 border: 1px solid var(--pp-border);
 box-shadow: 0 34px 76px -26px rgba(15, 23, 42, 0.2);
 opacity: 0;
 transform: translateY(28px) scale(0.985);
}

.hiw-portal__visual.is-shown {
 opacity: 1;
 transform: translateY(0) scale(1);
 transition:
 opacity 0.7s ease,
 transform 0.7s ease;
}

html.dark .hiw-portal__visual {
 box-shadow: 0 36px 80px -26px rgba(0, 0, 0, 0.65);
}

.hiw-portal__visual img {
 display: block;
 width: 100%;
 height: auto;
}

.hiw-portal__visual .dashboard-dark {
 display: none;
}

html.dark .hiw-portal__visual .dashboard-light {
 display: none;
}

html.dark .hiw-portal__visual .dashboard-dark {
 display: block;
}

@media (prefers-reduced-motion: reduce) {
 .hiw-portal__items li,
 .hiw-portal__visual {
 opacity: 1;
 transform: none;
 transition: none;
 }

 .hiw-portal__items li.is-active::after {
 animation: none;
 }
}

/* =========================================================================
 10. COMPARE - without / with
 ========================================================================= */
.hiw-compare {
 padding: 3.5rem 0;
 background: var(--pp-surface);
}

html.dark .hiw-compare {
 background: var(--pp-base);
}

@media (min-width: 768px) {
 .hiw-compare {
 padding: 4.5rem 0;
 }
}

.hiw-compare__header {
 max-width: 40rem;
 margin-inline: auto;
 text-align: center;
}

.hiw-compare__board {
 margin: 2.75rem auto 0;
 max-width: 52rem;
}

.hiw-compare__axis {
 display: none;
 align-items: center;
 gap: 0.75rem;
 margin-bottom: 0.85rem;
 padding-inline: 0.15rem;
}

@media (min-width: 768px) {
 .hiw-compare__axis {
 display: grid;
 grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1fr);
 }
}

.hiw-compare__axis-label {
 font-family: "League Spartan", sans-serif;
 font-size: 0.72rem;
 font-weight: 700;
 letter-spacing: 0.08em;
 text-transform: uppercase;
}

.hiw-compare__axis-label--from {
 color: var(--pp-text-d);
}

.hiw-compare__axis-label--to {
 color: var(--pp-orange);
 text-align: right;
}

.hiw-compare__rows {
 display: grid;
 gap: 0.7rem;
}

.hiw-compare__row {
 display: grid;
 gap: 0.55rem;
 align-items: stretch;
}

@media (min-width: 768px) {
 .hiw-compare__row {
 grid-template-columns: minmax(0, 1fr) 3.5rem minmax(0, 1fr);
 gap: 0.75rem;
 align-items: center;
 }
}

.hiw-compare__from,
.hiw-compare__to {
 display: flex;
 align-items: center;
 min-height: 3.15rem;
 padding: 0.85rem 1.1rem;
 font-family: "League Spartan", sans-serif;
 font-size: 0.92rem;
 font-weight: 600;
 line-height: 1.3;
 opacity: 0;
 transform: translateY(12px);
 transition:
 opacity 0.4s ease,
 transform 0.4s ease,
 border-color 0.35s ease,
 box-shadow 0.35s ease;
}

.hiw-compare__from {
 border-radius: 0.95rem;
 border: 1px dashed var(--pp-border-s);
 background: var(--pp-muted);
 color: var(--pp-text-3);
 text-decoration: line-through;
 text-decoration-color: rgba(100, 116, 139, 0.45);
 text-decoration-thickness: 1px;
}

.hiw-compare__to {
 border-radius: 0.95rem;
 border: 1px solid rgba(247, 151, 35, 0.28);
 background:
 linear-gradient(105deg, rgba(247, 151, 35, 0.12), transparent 42%),
 var(--pp-elevated);
 color: var(--pp-text);
 box-shadow: 0 10px 24px -16px rgba(247, 151, 35, 0.35);
}

.hiw-compare__to::before {
 content: "";
 flex-shrink: 0;
 width: 0.45rem;
 height: 0.45rem;
 margin-right: 0.7rem;
 border-radius: 50%;
 background: var(--pp-orange);
 box-shadow: 0 0 0 4px rgba(247, 151, 35, 0.15);
}

.hiw-compare__bridge {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 1.1rem;
 opacity: 0;
 transform: scaleX(0.4);
 transform-origin: center;
 transition:
 opacity 0.35s ease,
 transform 0.35s ease;
}

@media (min-width: 768px) {
 .hiw-compare__bridge {
 min-height: auto;
 height: 100%;
 }
}

.hiw-compare__bridge-line {
 display: block;
 width: 2px;
 height: 0.85rem;
 border-radius: 999px;
 background: linear-gradient(180deg, rgba(247, 151, 35, 0.15), #f79723);
}

@media (min-width: 768px) {
 .hiw-compare__bridge-line {
 width: 100%;
 height: 2px;
 background: linear-gradient(90deg, rgba(148, 163, 184, 0.45), #f79723);
 }
}

.hiw-compare__bridge-dot {
 position: absolute;
 width: 0.55rem;
 height: 0.55rem;
 border-radius: 50%;
 background: var(--pp-orange);
 box-shadow: 0 0 0 3px rgba(247, 151, 35, 0.18);
}

@media (min-width: 768px) {
 .hiw-compare__bridge-dot {
 right: 0;
 }
}

.hiw-compare__row.is-shown .hiw-compare__from,
.hiw-compare__row.is-shown .hiw-compare__to,
.hiw-compare__row.is-shown .hiw-compare__bridge {
 opacity: 1;
 transform: none;
}

.hiw-compare__row.is-active .hiw-compare__to {
 border-color: rgba(247, 151, 35, 0.55);
 box-shadow: 0 0 0 1px rgba(247, 151, 35, 0.12), 0 14px 30px -16px rgba(247, 151, 35, 0.55);
}

.hiw-compare__row.is-active .hiw-compare__bridge-dot {
 animation: hiw-compare-pulse 1.1s ease-in-out infinite;
}

@keyframes hiw-compare-pulse {
 0%,
 100% {
 box-shadow: 0 0 0 3px rgba(247, 151, 35, 0.18);
 }
 50% {
 box-shadow: 0 0 0 7px rgba(247, 151, 35, 0);
 }
}

@media (prefers-reduced-motion: reduce) {
 .hiw-compare__from,
 .hiw-compare__to,
 .hiw-compare__bridge {
 opacity: 1;
 transform: none;
 transition: none;
 }

 .hiw-compare__row.is-active .hiw-compare__bridge-dot {
 animation: none;
 }
}

/* =========================================================================
 11. GROW - staged progression
 ========================================================================= */
.hiw-grow {
 padding: 3.5rem 0 4rem;
}

@media (min-width: 768px) {
 .hiw-grow {
 padding: 4.5rem 0 5rem;
 }
}

.hiw-grow__header {
 max-width: 40rem;
 margin-inline: auto;
 text-align: center;
}

.hiw-grow__body {
 margin-inline: auto;
}

.hiw-grow__board {
 margin: 2.75rem auto 0;
 max-width: 40rem;
}

.hiw-grow__tabs {
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 justify-content: center;
 gap: 0.45rem 0.55rem;
 margin-bottom: 1.15rem;
}

.hiw-grow__tab {
 appearance: none;
 border: 1px solid var(--pp-border);
 background: var(--pp-elevated);
 color: var(--pp-text-3);
 border-radius: 999px;
 padding: 0.55rem 1rem;
 font-family: "League Spartan", sans-serif;
 font-size: 0.78rem;
 font-weight: 700;
 letter-spacing: 0.04em;
 text-transform: uppercase;
 cursor: pointer;
 transition:
 color 0.3s ease,
 border-color 0.3s ease,
 background 0.3s ease,
 box-shadow 0.3s ease,
 transform 0.3s ease;
}

.hiw-grow__tab.is-active {
 color: #fff;
 border-color: var(--pp-orange);
 background: var(--pp-orange);
 box-shadow: 0 10px 24px -12px rgba(247, 151, 35, 0.65);
 transform: translateY(-1px);
}

.hiw-grow__tab-rail {
 display: none;
 width: 1.35rem;
 height: 2px;
 border-radius: 999px;
 background: linear-gradient(90deg, rgba(148, 163, 184, 0.35), rgba(247, 151, 35, 0.7));
}

@media (min-width: 640px) {
 .hiw-grow__tab-rail {
 display: block;
 }
}

.hiw-grow__panel {
 position: relative;
 padding: 1.5rem 1.35rem 1.35rem;
 border-radius: 1.45rem;
 border: 1px solid rgba(247, 151, 35, 0.22);
 background:
 radial-gradient(ellipse 70% 55% at 80% 0%, rgba(247, 151, 35, 0.12), transparent 55%),
 var(--pp-elevated);
 box-shadow: 0 24px 50px -22px rgba(15, 23, 42, 0.18);
 overflow: hidden;
}

html.dark .hiw-grow__panel {
 background:
 radial-gradient(ellipse 70% 55% at 80% 0%, rgba(247, 151, 35, 0.18), transparent 55%),
 var(--pp-elevated);
 box-shadow: 0 26px 52px -22px rgba(0, 0, 0, 0.6);
}

.hiw-grow__caption {
 margin: 0 0 1.1rem;
 font-family: "League Spartan", sans-serif;
 font-size: 0.9rem;
 font-weight: 500;
 line-height: 1.45;
 color: var(--pp-text-2);
 text-align: center;
 min-height: 1.35em;
}

.hiw-grow__modules {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 0.65rem;
 margin: 0;
 padding: 0;
 list-style: none;
}

@media (min-width: 640px) {
 .hiw-grow__modules {
 grid-template-columns: repeat(3, minmax(0, 1fr));
 }
}

.hiw-grow__modules li {
 position: relative;
 display: flex;
 align-items: center;
 justify-content: center;
 min-height: 3.1rem;
 padding: 0.7rem 0.85rem;
 border-radius: 0.95rem;
 border: 1px dashed var(--pp-border-s);
 background: var(--pp-muted);
 font-family: "League Spartan", sans-serif;
 font-size: 0.88rem;
 font-weight: 700;
 color: var(--pp-text-d);
 transition:
 color 0.35s ease,
 background 0.35s ease,
 border-color 0.35s ease,
 box-shadow 0.35s ease,
 transform 0.35s ease;
}

.hiw-grow__modules li.is-on {
 color: var(--pp-text);
 border-style: solid;
 border-color: rgba(247, 151, 35, 0.4);
 background:
 linear-gradient(160deg, rgba(247, 151, 35, 0.14), transparent 55%),
 var(--pp-elevated);
 box-shadow: 0 10px 22px -14px rgba(247, 151, 35, 0.45);
 transform: translateY(-2px);
}

.hiw-grow__modules li.is-new {
 animation: hiw-grow-pop 0.55s ease;
}

.hiw-grow__modules li.is-on::after {
 content: "";
 position: absolute;
 top: 0.45rem;
 right: 0.45rem;
 width: 0.4rem;
 height: 0.4rem;
 border-radius: 50%;
 background: var(--pp-orange);
 box-shadow: 0 0 0 3px rgba(247, 151, 35, 0.18);
}

.hiw-grow__count {
 margin: 1.15rem 0 0;
 text-align: center;
 font-family: "League Spartan", sans-serif;
 font-size: 0.78rem;
 font-weight: 600;
 letter-spacing: 0.02em;
 color: var(--pp-text-3);
}

.hiw-grow__count span {
 color: var(--pp-orange);
 font-weight: 800;
}

@keyframes hiw-grow-pop {
 0% {
 transform: scale(0.92) translateY(4px);
 }
 60% {
 transform: scale(1.04) translateY(-3px);
 }
 100% {
 transform: scale(1) translateY(-2px);
 }
}

@media (prefers-reduced-motion: reduce) {
 .hiw-grow__modules li.is-new {
 animation: none;
 }
}

/* =========================================================================
 12. CTA - mirrors about-cta banner
 ========================================================================= */
.hiw-cta {
 padding: 1.5rem 0 4rem;
 background: var(--pp-base);
}

.hiw-cta__shell {
 max-width: 1400px;
 margin-inline: auto;
 padding-inline: clamp(1.25rem, 4vw, 3.5rem);
}

.hiw-cta__banner {
 position: relative;
 overflow: hidden;
 display: flex;
 flex-direction: column;
 align-items: flex-start;
 gap: 1.5rem;
 padding: 2rem 1.5rem;
 border-radius: 1.5rem;
 background: radial-gradient(ellipse 55% 90% at 92% 50%, rgba(247, 151, 35, 0.55) 0%, rgba(247, 151, 35, 0.18) 38%, transparent 68%),
 radial-gradient(circle at 88% 42%, rgba(255, 197, 107, 0.35), transparent 28%), #0b1220;
 color: #fff;
}

@media (min-width: 768px) {
 .hiw-cta__banner {
 flex-direction: row;
 align-items: center;
 justify-content: space-between;
 gap: 2rem;
 padding: 2.35rem 2.5rem;
 }
}

.hiw-cta__copy {
 position: relative;
 z-index: 1;
 max-width: 34rem;
}

.hiw-cta__eyebrow {
 margin: 0 0 0.75rem;
 color: var(--pp-orange);
 font-family: "League Spartan", sans-serif;
 font-size: 0.72rem;
 font-weight: 700;
 letter-spacing: 0.16em;
 text-transform: uppercase;
}

.hiw-cta__heading {
 margin: 0;
 color: #fff;
 font-family: "League Spartan", sans-serif;
 font-size: clamp(1.85rem, 3.2vw, 2.65rem);
 font-weight: 700;
 line-height: 1.12;
 letter-spacing: -0.03em;
}

.hiw-cta__heading span {
 color: var(--pp-orange);
}

.hiw-cta__body {
 margin: 0.85rem 0 0;
 max-width: 42ch;
 color: rgba(248, 250, 252, 0.78);
 font-family: "League Spartan", sans-serif;
 font-size: 0.98rem;
 line-height: 1.5;
}

.hiw-cta__actions {
 position: relative;
 z-index: 1;
 display: flex;
 flex-wrap: wrap;
 align-items: center;
 gap: 0.75rem 1rem;
 flex-shrink: 0;
}

.hiw-cta__btn,
.hiw-cta__btn-secondary {
 white-space: nowrap;
}

@media (max-width: 639px) {
 .hiw-cta {
 padding: 1rem 0 3rem;
 }

 .hiw-cta__banner {
 border-radius: 1.25rem;
 padding: 1.6rem 1.25rem;
 }

 .hiw-cta__actions {
 flex-direction: column;
 align-items: stretch;
 width: 100%;
 }

 .hiw-cta__actions .btn-cta {
 width: 100%;
 text-align: center;
 }
}

/* =========================================================================
 Large-desktop refinements (1440px+)
 ========================================================================= */
@media (min-width: 1440px) {
 .hiw-hero__heading {
 font-size: 3.6rem;
 }

 .hiw-hero__system-inner {
 min-height: 29rem;
 }

 .hiw-overview__heading,
 .hiw-choose__heading,
 .hiw-setup__heading,
 .hiw-workflow__heading,
 .hiw-whatsapp__heading,
 .hiw-forward__heading,
 .hiw-portal__heading,
 .hiw-compare__heading,
 .hiw-grow__heading {
 font-size: 2.9rem;
 }
}