:root {
    --sq-ink: #040406;
    --sq-paper: #F6F0E5;
    --sq-amber: #FEB113;
    --sq-magenta: #F31C81;
    --sq-blue: #1C73E7;
    --sq-purple: #9012CF;
    --sq-teal: #0FB8B8;
    --sq-gradient: linear-gradient(90deg, #9012CF 0%, #0FB8B8 100%);
}

@property --sq-cta-start {
    syntax: "<color>";
    inherits: false;
    initial-value: #9012CF;
}

@property --sq-cta-end {
    syntax: "<color>";
    inherits: false;
    initial-value: #0FB8B8;
}

body {
    font-family: "Inter", sans-serif;
    background-color: var(--sq-paper);
}

h1,
h2 {
    font-family: "Sulphur Point", sans-serif;
}

h3,
h4,
summary {
    font-family: "Urbanist", sans-serif;
}

a,
button,
input,
select,
textarea,
summary {
    outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--sq-teal);
}

:is(a, button).sq-btn-shape,
.sq-cta,
.pricing-card-cta {
    position: relative;
    overflow: hidden;
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 220ms ease, color 220ms ease, box-shadow 220ms ease;
}

:is(a, button).sq-btn-shape:hover,
.sq-cta:hover,
.pricing-card-cta:hover {
    transform: translateY(-2px);
    border-color: rgba(15, 184, 184, 0.72);
    box-shadow: 0 10px 24px rgba(4, 4, 6, 0.2), 0 0 0 3px rgba(15, 184, 184, 0.12);
}

:is(a, button).sq-btn-shape:active,
.sq-cta:active,
.pricing-card-cta:active {
    transform: translateY(0) scale(0.985);
}

.pricing-toggle {
    display: inline-grid;
    grid-template-columns: repeat(2, minmax(92px, 1fr));
    gap: 3px;
    padding: 4px;
    border: 1px solid rgba(4, 4, 6, 0.16);
    border-radius: 12px;
    background: rgba(4, 4, 6, 0.06);
}

.pricing-mode {
    min-height: 42px;
    border-radius: 9px;
    padding: 8px 16px;
    color: rgba(4, 4, 6, 0.65);
    font-size: 14px;
    font-weight: 700;
    transition: background 180ms ease, color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.pricing-mode:hover:not([data-active="true"]) {
    color: var(--sq-ink);
    background: rgba(255, 255, 255, 0.6);
    box-shadow: inset 0 0 0 1px rgba(15, 184, 184, 0.26);
    transform: translateY(-1px);
}

.pricing-toggle .pricing-mode[data-active="true"] {
    background: var(--sq-gradient);
    color: #fff;
    box-shadow: 0 5px 14px rgba(80, 20, 130, 0.2);
}

details[open] {
    box-shadow: 0 0 0 1px rgba(15, 184, 184, 0.2);
}

.pricing-grid {
    align-items: stretch;
}

.pricing-card {
    display: grid;
    grid-template-rows: 44px auto 44px 48px 1fr auto;
    min-width: 0;
}

.pricing-badge-slot {
    display: flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
}

.pricing-badge {
    display: flex;
    width: 100%;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(15, 184, 184, 0.2);
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 700;
    color: var(--sq-teal);
    letter-spacing: 0.01em;
}

.pricing-card-title-gradient {
    display: inline-block;
    background-image: linear-gradient(90deg, #9012CF 0%, #1C73E7 56%, #0FB8B8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.pricing-card-title {
    margin-top: 12px;
    line-height: 1.1;
}

.pricing-card-audience {
    align-self: start;
    line-height: 1.35;
}

.pricing-card-price {
    display: flex;
    min-height: 72px;
    align-self: end;
    align-items: flex-end;
    flex-wrap: wrap;
    line-height: 1;
}

.pricing-card-features {
    align-self: start;
}

.pricing-card-cta {
    display: flex;
    height: 66px;
    width: 100%;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
}

.sq-cta {
    --sq-cta-start: #9012CF;
    --sq-cta-end: #0FB8B8;
    background: linear-gradient(90deg, var(--sq-cta-start) 0%, var(--sq-cta-end) 100%);
    color: #f3f7ff;
    border: 0;
    border-radius: 0;
    box-shadow: 0 8px 24px rgba(4, 4, 6, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    transition: transform 220ms cubic-bezier(0.2, 0.8, 0.2, 1), border-color 220ms ease, color 220ms ease, box-shadow 220ms ease, --sq-cta-start 340ms ease, --sq-cta-end 340ms ease;
}

.sq-cta:hover {
    --sq-cta-start: #C626DF;
    --sq-cta-end: #22D8D2;
    border-color: transparent;
    box-shadow: 0 14px 32px rgba(4, 4, 6, 0.26), 0 0 0 3px rgba(15, 184, 184, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

.sq-cta:active {
    transform: translateY(0);
}

.sq-cta:focus-visible {
    outline: 2px solid rgba(15, 184, 184, 0.65);
    outline-offset: 3px;
}

.sq-cta-soft {
    border-radius: 12px;
}

.pain-point-card {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    transition: border-color 240ms ease, background 240ms ease, transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 240ms ease;
}

.pain-point-card::before {
    position: absolute;
    top: 0;
    right: 18%;
    left: 18%;
    height: 2px;
    background: var(--sq-gradient);
    content: "";
    opacity: 0.55;
    transform: scaleX(0.45);
    transition: opacity 240ms ease, transform 240ms ease;
}

.pain-point-card:hover {
    border-color: rgba(15, 184, 184, 0.38);
    background: rgba(255, 255, 255, 0.07);
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
    transform: translateY(-4px);
}

.pain-point-card:hover::before {
    opacity: 1;
    transform: scaleX(1);
}

.pain-icon-visual {
    position: relative;
    display: grid;
    width: 104px;
    height: 104px;
    margin-inline: auto;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 24px;
    background:
        radial-gradient(circle at 22% 85%, rgba(15, 184, 184, 0.16), transparent 45%),
        radial-gradient(circle at 82% 16%, rgba(144, 18, 207, 0.2), transparent 44%),
        #07070a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), 0 14px 32px rgba(0, 0, 0, 0.25);
}

.pain-icon-visual::after {
    position: absolute;
    inset: 9px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 17px;
    content: "";
    pointer-events: none;
}

.pain-icon-visual svg {
    position: relative;
    z-index: 1;
    display: block;
    width: 94px;
    height: 94px;
    overflow: visible;
}

.pain-icon-layer {
    fill: rgba(255, 255, 255, 0.045);
    stroke: rgba(255, 255, 255, 0.22);
    stroke-width: 1.3;
}

.pain-layer-back { fill: rgba(15, 184, 184, 0.07); stroke: rgba(15, 184, 184, 0.42); }
.pain-layer-front { fill: rgba(144, 18, 207, 0.08); stroke: rgba(144, 18, 207, 0.48); }
.pain-comment-layer { fill: rgba(28, 115, 231, 0.08); stroke: rgba(28, 115, 231, 0.52); }
.pain-calendar-layer { fill: rgba(243, 28, 129, 0.055); stroke: rgba(243, 28, 129, 0.38); }
.pain-report-layer { fill: rgba(144, 18, 207, 0.05); stroke: rgba(144, 18, 207, 0.36); }

.pain-icon-line,
.pain-icon-spark,
.pain-report-line,
.pain-approval-check,
.pain-approval-like,
.pain-clock-minute,
.pain-clock-hour {
    fill: none;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.pain-icon-spark { stroke-width: 1.8; }

.pain-icon-muted {
    fill: none;
    stroke: rgba(255, 255, 255, 0.32);
    stroke-width: 1.4;
    stroke-linecap: round;
}

.pain-icon-node {
    fill: #f6f0e5;
    stroke: rgba(15, 184, 184, 0.72);
    stroke-width: 1.4;
    filter: drop-shadow(0 0 5px rgba(15, 184, 184, 0.48));
}

.pain-icon-orbit {
    fill: none;
    stroke: rgba(255, 255, 255, 0.25);
    stroke-width: 1;
    stroke-dasharray: 3 4;
    stroke-linecap: round;
}

.pain-icon-date {
    fill: rgba(255, 255, 255, 0.1);
    stroke: rgba(255, 255, 255, 0.22);
    stroke-width: 1;
}

.pain-icon-date.is-active {
    fill: rgba(243, 28, 129, 0.34);
    stroke: #f31c81;
}

.pain-clock-layer {
    fill: rgba(254, 177, 19, 0.08);
    stroke: rgba(254, 177, 19, 0.58);
    stroke-width: 1.5;
}

.pain-report-line {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}

.pain-create-drawing {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: painCreateDraw 4s ease-in-out infinite;
}

.pain-icon-create .pain-layer-front,
.pain-icon-approve .pain-comment-layer {
    transform-box: fill-box;
    transform-origin: center;
}

.pain-icon-create .pain-layer-front {
    animation: painCreateFront 4s ease-in-out infinite;
}

.pain-icon-create .pain-layer-back {
    transform-box: fill-box;
    transform-origin: center;
    animation: painCreateBack 4s ease-in-out infinite;
}

.pain-icon-create .pain-icon-spark {
    transform-box: fill-box;
    transform-origin: center;
    animation: painCreateSpark 2s ease-in-out infinite;
}

.pain-icon-approve .pain-comment-layer {
    transform-box: fill-box;
    transform-origin: center;
    animation: painLayerFloat 4.2s ease-in-out infinite;
}

.pain-approval-check,
.pain-approval-like {
    transform-box: fill-box;
    transform-origin: center;
}

.pain-approval-check {
    animation: painApprovalCheck 4s ease-in-out infinite;
}

.pain-approval-like {
    opacity: 0;
    animation: painApprovalLike 4s ease-in-out infinite;
}

.pain-icon-schedule .pain-clock-layer {
    transform-box: fill-box;
    transform-origin: center;
    animation: painClockPulse 3.4s ease-in-out infinite;
}

.pain-clock-minute,
.pain-clock-hour {
    transform-origin: 70px 65px;
}

.pain-clock-minute {
    animation: painClockTurn 4s linear infinite;
}

.pain-clock-hour {
    animation: painClockTurn 16s linear infinite;
}

.pain-icon-reports .pain-report-line {
    animation: painReportDraw 3.6s 500ms ease-in-out infinite;
}

.pain-point-card:hover .pain-icon-visual {
    border-color: rgba(15, 184, 184, 0.34);
}

.pain-point-card:hover .pain-icon-spark {
    filter: drop-shadow(0 0 5px rgba(144, 18, 207, 0.55));
}

@keyframes painLayerFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

@keyframes painCreateFront {
    0%, 18%, 82%, 100% { transform: translate(0, 0); }
    38%, 62% { transform: translate(5px, -5px); }
}

@keyframes painCreateBack {
    0%, 18%, 82%, 100% { transform: translate(0, 0); }
    38%, 62% { transform: translate(-5px, 5px); }
}

@keyframes painCreateDraw {
    0%, 12% { stroke-dashoffset: 100; }
    45%, 78% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -100; }
}

@keyframes painCreateSpark {
    0%, 100% { opacity: 0.45; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.18); }
}

@keyframes painApprovalCheck {
    0%, 38%, 100% { opacity: 1; transform: scale(1) rotate(0); }
    48%, 86% { opacity: 0; transform: scale(0.65) rotate(-12deg); }
}

@keyframes painApprovalLike {
    0%, 38%, 100% { opacity: 0; transform: scale(0.65) rotate(10deg); }
    48%, 86% { opacity: 1; transform: scale(1) rotate(0); }
}

@keyframes painClockPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@keyframes painClockTurn {
    to { transform: rotate(360deg); }
}

@keyframes painReportDraw {
    0%, 15% { stroke-dashoffset: 100; }
    55%, 85% { stroke-dashoffset: 0; }
    100% { stroke-dashoffset: -100; }
}

@media (prefers-reduced-motion: reduce) {
    .pain-point-card,
    .pain-point-card::before {
        transition: none;
    }

    .pain-icon-create .pain-layer-front,
    .pain-icon-create .pain-layer-back,
    .pain-icon-create .pain-icon-spark,
    .pain-create-drawing,
    .pain-icon-approve .pain-comment-layer,
    .pain-approval-check,
    .pain-approval-like,
    .pain-icon-schedule .pain-clock-layer,
    .pain-clock-minute,
    .pain-clock-hour,
    .pain-icon-reports .pain-report-line {
        animation: none;
    }

    .pain-create-drawing,
    .pain-icon-reports .pain-report-line {
        stroke-dashoffset: 0;
    }

    .pain-approval-check { opacity: 1; transform: none; }
    .pain-approval-like { opacity: 0; }
}

.sq-btn-shape {
    border-radius: 12px;
}

.footer-brand-logo {
    position: relative;
    width: 190px;
    height: 28px;
    overflow: hidden;
}

.footer-brand-logo img {
    position: absolute;
    top: -101px;
    left: -16px;
    width: 221px;
    max-width: none;
    height: auto;
}

.hero-gradient-text {
    display: inline-block;
    background-image: linear-gradient(90deg, #9012CF 0%, #0FB8B8 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.hero-targets {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(4, 4, 6, 0.1);
    background: var(--sq-paper);
    padding: 72px 24px 80px;
    color: var(--sq-ink);
}

.hero-targets-grid {
    position: relative;
    z-index: 1;
    display: grid;
    width: min(1280px, 100%);
    margin: 0 auto;
    gap: 56px;
    align-items: center;
}

.hero-targets-copy {
    max-width: 610px;
}

#hero-title {
    max-width: 650px;
    font-size: clamp(48px, 3.8vw, 60px);
}

#hero-cta {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.hero-cta-note {
    max-width: 280px;
    color: rgba(4, 4, 6, 0.54);
    font-size: 12px;
    line-height: 1.45;
}

.hero-carousel {
    min-width: 0;
}

.hero-carousel-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    min-height: 590px;
}

.hero-target-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateX(18px) scale(0.985);
    transition: opacity 520ms ease, transform 620ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero-target-slide.is-active {
    z-index: 2;
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0) scale(1);
}

.hero-slide-photo {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.hero-slide-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-role-label {
    position: absolute;
    z-index: 4;
    right: 42px;
    bottom: 36px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(4, 4, 6, 0.84);
    padding: 9px 13px;
    color: #fff;
    box-shadow: 0 12px 28px rgba(4, 4, 6, 0.24);
    backdrop-filter: blur(12px);
}

.hero-role-label span {
    color: var(--sq-teal);
    font-size: 10px;
    font-weight: 700;
}

.hero-role-label strong {
    font-family: "Urbanist", sans-serif;
    font-size: 13px;
    letter-spacing: 0.01em;
}

.hero-data-card {
    position: absolute;
    z-index: 5;
    min-width: 176px;
    border: 1px solid rgba(4, 4, 6, 0.14);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.96);
    padding: 15px;
    color: var(--sq-ink);
    box-shadow: 0 18px 38px rgba(4, 4, 6, 0.19);
    opacity: 0;
    transform: translateY(18px) scale(0.92);
    backdrop-filter: blur(10px);
}

.hero-target-slide.is-active .hero-data-card {
    animation: heroCardIn 640ms cubic-bezier(0.2, 0.9, 0.25, 1.18) both;
    animation-delay: var(--card-delay);
}

.hero-data-card strong,
.hero-data-card span,
.hero-data-card small {
    display: block;
}

.hero-data-card > strong,
.hero-data-card > div > strong {
    font-family: "Urbanist", sans-serif;
    font-size: 18px;
    line-height: 1.15;
}

.hero-data-card small {
    margin-top: 3px;
    color: rgba(4, 4, 6, 0.54);
    font-size: 10px;
    line-height: 1.35;
}

.hero-data-card [data-hero-count] {
    display: inline;
}

.hero-card-heading {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    color: rgba(4, 4, 6, 0.66);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.hero-card-heading span {
    display: inline-flex;
}

.hero-card-icon {
    display: grid !important;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 9px;
}

.hero-card-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.hero-card-icon-purple { background: rgba(144, 18, 207, 0.12); color: var(--sq-purple); }
.hero-card-icon-teal { background: rgba(15, 184, 184, 0.13); color: var(--sq-teal); }
.hero-card-icon-blue { background: rgba(28, 115, 231, 0.12); color: var(--sq-blue); }
.hero-card-icon-magenta { background: rgba(243, 28, 129, 0.12); color: var(--sq-magenta); }
.hero-card-icon-amber { background: rgba(254, 177, 19, 0.18); color: #ad7000; }

.hero-mini-bars {
    display: grid;
    gap: 5px;
    margin-top: 12px;
}

.hero-mini-bars i,
.hero-progress-track i {
    display: block;
    width: 0;
    height: 5px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--sq-purple), var(--sq-teal));
}

.hero-mini-bars i:nth-child(2) { opacity: 0.72; }
.hero-mini-bars i:nth-child(3) { opacity: 0.44; }

.hero-target-slide.is-active .hero-mini-bars i,
.hero-target-slide.is-active .hero-progress-track i {
    animation: heroBarGrow 900ms 430ms ease forwards;
}

.hero-ring {
    position: relative;
    width: 66px;
    height: 66px;
    flex: 0 0 auto;
}

.hero-ring svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.hero-ring circle {
    fill: none;
    stroke: rgba(4, 4, 6, 0.09);
    stroke-width: 4;
}

.hero-ring .hero-ring-progress {
    stroke: var(--sq-teal);
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    stroke-linecap: round;
}

.hero-target-slide.is-active .hero-ring-progress {
    animation: heroRingDraw 1100ms 430ms ease forwards;
}

.hero-ring > strong {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    white-space: nowrap;
}

.hero-ring > strong span {
    display: inline;
}

.hero-card-agency-volume { top: 5%; left: 0; width: 198px; }
.hero-card-agency-score { top: 27%; right: 0; display: flex; align-items: center; gap: 10px; }
.hero-card-agency-score > div:last-child > span { font-size: 11px; font-weight: 700; }
.hero-card-agency-brands { bottom: 7%; left: 3%; display: flex; align-items: center; gap: 10px; }

.hero-card-marketing-campaign { top: 6%; left: 0; width: 222px; }
.hero-campaign-progress { display: flex; align-items: baseline; justify-content: space-between; }
.hero-campaign-progress strong { font-size: 22px; }
.hero-campaign-progress > span { color: rgba(4, 4, 6, 0.5); font-size: 10px; }
.hero-progress-track { height: 7px; margin: 8px 0 10px; overflow: hidden; border-radius: 999px; background: rgba(4, 4, 6, 0.08); }
.hero-progress-track i { height: 100%; }
.hero-campaign-steps { display: flex; gap: 8px; font-size: 8px; }
.hero-campaign-steps span { color: rgba(4, 4, 6, 0.38); }
.hero-campaign-steps .is-done { color: var(--sq-teal); }
.hero-card-marketing-channels { top: 31%; right: 0; }
.hero-card-marketing-channels > span { margin-bottom: 9px; color: rgba(4, 4, 6, 0.58); font-size: 10px; font-weight: 700; }
.hero-channel-row { display: flex; }
.hero-channel-row i { display: grid; width: 28px; height: 28px; margin-left: -4px; place-items: center; border: 2px solid #fff; border-radius: 50%; background: var(--sq-ink); color: #fff; font-size: 8px; font-style: normal; font-weight: 700; }
.hero-channel-row i:first-child { margin-left: 0; background: var(--sq-magenta); }
.hero-channel-row i:nth-child(2) { background: var(--sq-blue); }
.hero-channel-row i:nth-child(3) { background: var(--sq-purple); }
.hero-channel-row i:nth-child(4) { background: var(--sq-teal); }
.hero-card-marketing-variants { bottom: 7%; left: 4%; display: flex; align-items: center; gap: 10px; }

.hero-card-content-trend { top: 6%; left: -1%; width: 226px; }
.hero-card-content-trend > strong { font-size: 14px; }
.hero-card-content-trend small { display: flex; gap: 3px; align-items: baseline; }
.hero-card-content-trend small b { color: var(--sq-magenta); font-size: 12px; }
.hero-sparkline { display: block; width: 100%; height: 42px; margin: 6px 0 2px; overflow: visible; }
.hero-sparkline path { fill: none; stroke: var(--sq-magenta); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 260; stroke-dashoffset: 260; }
.hero-target-slide.is-active .hero-sparkline path { animation: heroLineDraw 1200ms 430ms ease forwards; }
.hero-card-content-formats { top: 32%; right: 0; }
.hero-card-content-formats > span { color: rgba(4, 4, 6, 0.5); font-size: 10px; }
.hero-card-content-formats > strong { margin-top: 2px; }
.hero-format-grid { display: flex; gap: 4px; margin-top: 10px; }
.hero-format-grid i { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 7px; background: rgba(144, 18, 207, 0.09); color: var(--sq-purple); font-size: 8px; font-style: normal; font-weight: 800; }
.hero-format-grid i:nth-child(2) { background: rgba(15, 184, 184, 0.1); color: var(--sq-teal); }
.hero-format-grid i:nth-child(3) { background: rgba(243, 28, 129, 0.1); color: var(--sq-magenta); }
.hero-format-grid i:nth-child(4) { background: rgba(28, 115, 231, 0.1); color: var(--sq-blue); }
.hero-format-grid i:nth-child(5) { background: rgba(254, 177, 19, 0.14); color: #ad7000; }
.hero-card-content-tone { bottom: 7%; left: 4%; display: flex; align-items: center; gap: 10px; }

.hero-card-business-week { top: 6%; left: -1%; width: 224px; }
.hero-week-row { display: flex; gap: 6px; margin: 10px 0; }
.hero-week-row i { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 50%; background: rgba(4, 4, 6, 0.07); color: rgba(4, 4, 6, 0.38); font-size: 8px; font-style: normal; font-weight: 700; }
.hero-week-row .is-ready { background: var(--sq-teal); color: #fff; transform: scale(0); }
.hero-target-slide.is-active .hero-week-row .is-ready { animation: heroDayIn 360ms ease forwards; }
.hero-target-slide.is-active .hero-week-row .is-ready:nth-child(2) { animation-delay: 440ms; }
.hero-target-slide.is-active .hero-week-row .is-ready:nth-child(3) { animation-delay: 510ms; }
.hero-target-slide.is-active .hero-week-row .is-ready:nth-child(4) { animation-delay: 580ms; }
.hero-target-slide.is-active .hero-week-row .is-ready:nth-child(5) { animation-delay: 650ms; }
.hero-card-business-week > strong { font-size: 13px; }
.hero-card-business-assets { top: 34%; right: 0; display: flex; align-items: center; gap: 10px; }
.hero-card-business-time { bottom: 7%; left: 4%; display: flex; align-items: center; gap: 10px; }
.hero-card-business-time > div > span { color: rgba(4, 4, 6, 0.52); font-size: 10px; }

.hero-carousel-controls {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 42px 42px;
    gap: 8px;
    align-items: center;
    margin: 22px 22px 0 34px;
}

.hero-carousel-arrow,
.hero-carousel-pause {
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border: 1px solid rgba(4, 4, 6, 0.18);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.64);
    color: var(--sq-ink);
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease;
}

.hero-carousel-arrow:hover,
.hero-carousel-pause:hover {
    border-color: var(--sq-teal);
    background: var(--sq-ink);
    color: #fff;
    transform: translateY(-2px);
}

.hero-carousel-dots {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.hero-carousel-dot {
    min-width: 0;
    padding: 7px 5px;
    color: rgba(4, 4, 6, 0.44);
    text-align: left;
}

.hero-carousel-dot > span {
    position: relative;
    display: block;
    width: 100%;
    height: 3px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(4, 4, 6, 0.12);
}

.hero-carousel-dot > span::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--sq-gradient);
    transform: scaleX(0);
    transform-origin: left;
}

.hero-carousel-dot.is-active > span::after {
    transform: scaleX(1);
}

.hero-carousel.is-playing .hero-carousel-dot.is-active > span::after {
    animation: heroDotProgress 5.8s linear forwards;
}

.hero-carousel-dot b {
    display: block;
    margin-top: 6px;
    overflow: hidden;
    font-size: 8px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hero-carousel-dot.is-active {
    color: var(--sq-ink);
}

.hero-pause-icon {
    position: relative;
    width: 12px;
    height: 12px;
}

.hero-pause-icon::before,
.hero-pause-icon::after {
    content: "";
    position: absolute;
    top: 1px;
    width: 3px;
    height: 10px;
    border-radius: 2px;
    background: currentColor;
}

.hero-pause-icon::before { left: 2px; }
.hero-pause-icon::after { right: 2px; }

.hero-carousel-pause[aria-pressed="true"] .hero-pause-icon::before {
    top: 0;
    left: 2px;
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-left: 10px solid currentColor;
    border-radius: 0;
    background: transparent;
}

.hero-carousel-pause[aria-pressed="true"] .hero-pause-icon::after {
    display: none;
}

@keyframes heroCardIn {
    from { opacity: 0; transform: translateY(18px) scale(0.92); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes heroBarGrow {
    to { width: var(--bar-width); }
}

@keyframes heroRingDraw {
    to { stroke-dashoffset: var(--ring-offset); }
}

@keyframes heroLineDraw {
    to { stroke-dashoffset: 0; }
}

@keyframes heroDayIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

@keyframes heroDotProgress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@media (min-width: 1100px) {
    .hero-targets-grid {
        grid-template-columns: minmax(0, 1.04fr) minmax(500px, 0.96fr);
    }
}

@media (max-width: 1099px) {
    .hero-targets {
        padding-top: 58px;
    }

    .hero-targets-grid {
        gap: 46px;
    }

    .hero-targets-copy {
        max-width: 760px;
    }

    .hero-carousel {
        width: min(680px, 100%);
        margin: 0 auto;
    }
}

@media (max-width: 767px) {
    .hero-targets {
        padding: 46px 18px 58px;
    }

    .hero-targets-grid {
        gap: 36px;
    }

    #hero-title {
        font-size: clamp(43px, 12vw, 54px);
    }

    #hero-subtitle {
        font-size: 16px;
    }

    .hero-cta-note {
        max-width: 250px;
    }

    .hero-carousel-stage {
        aspect-ratio: 1;
        min-height: 420px;
    }

    .hero-role-label {
        right: 22px;
        bottom: 24px;
        padding: 7px 10px;
    }

    .hero-role-label strong {
        font-size: 10px;
    }

    .hero-data-card {
        min-width: 142px;
        border-radius: 13px;
        padding: 11px;
    }

    .hero-data-card > strong,
    .hero-data-card > div > strong {
        font-size: 14px;
    }

    .hero-card-heading {
        gap: 6px;
        margin-bottom: 7px;
        font-size: 8px;
    }

    .hero-card-icon {
        width: 25px;
        height: 25px;
    }

    .hero-card-icon svg {
        width: 14px;
        height: 14px;
    }

    .hero-card-agency-volume,
    .hero-card-marketing-campaign,
    .hero-card-content-trend,
    .hero-card-business-week {
        top: 3%;
        left: 0;
        width: 174px;
    }

    .hero-card-agency-score,
    .hero-card-marketing-channels,
    .hero-card-content-formats,
    .hero-card-business-assets {
        top: 34%;
        right: 0;
    }

    .hero-card-agency-brands,
    .hero-card-marketing-variants,
    .hero-card-content-tone,
    .hero-card-business-time {
        bottom: 3%;
        left: 0;
    }

    .hero-ring {
        width: 52px;
        height: 52px;
    }

    .hero-campaign-steps,
    .hero-card-content-trend small {
        display: none;
    }

    .hero-sparkline {
        height: 30px;
    }

    .hero-week-row {
        gap: 4px;
    }

    .hero-week-row i {
        width: 23px;
        height: 23px;
    }

    .hero-carousel-controls {
        grid-template-columns: 38px minmax(0, 1fr) 38px 38px;
        gap: 5px;
        margin: 18px 4px 0 8px;
    }

    .hero-carousel-arrow,
    .hero-carousel-pause {
        width: 38px;
        height: 38px;
    }

    .hero-carousel-dot {
        padding-inline: 3px;
    }

    .hero-carousel-dot b {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-target-slide,
    .hero-slide-photo img,
    .hero-carousel-arrow,
    .hero-carousel-pause {
        transition: none;
    }

    .hero-target-slide.is-active .hero-data-card,
    .hero-target-slide.is-active .hero-mini-bars i,
    .hero-target-slide.is-active .hero-progress-track i,
    .hero-target-slide.is-active .hero-ring-progress,
    .hero-target-slide.is-active .hero-sparkline path,
    .hero-target-slide.is-active .hero-week-row .is-ready,
    .hero-carousel.is-playing .hero-carousel-dot.is-active > span::after {
        animation: none;
    }

    .hero-target-slide.is-active .hero-data-card { opacity: 1; transform: none; }
    .hero-target-slide.is-active .hero-mini-bars i,
    .hero-target-slide.is-active .hero-progress-track i { width: var(--bar-width); }
    .hero-target-slide.is-active .hero-ring-progress { stroke-dashoffset: var(--ring-offset); }
    .hero-target-slide.is-active .hero-sparkline path { stroke-dashoffset: 0; }
    .hero-target-slide.is-active .hero-week-row .is-ready { transform: scale(1); }
    .hero-carousel-dot.is-active > span::after { transform: scaleX(1); }
}

.feature-later-shell {
    background: #0d0d10;
}

.feature-stage {
    max-width: 1120px;
    margin: 0 auto;
}

.feature-tabs {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0;
    align-items: flex-end;
}

.feature-tab-btn {
    min-width: 0;
    min-height: 58px;
    border: 1px solid rgba(255, 255, 255, 0.26);
    border-bottom: 0;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(246, 240, 229, 0.88);
    padding: 12px 8px;
    border-radius: 10px 10px 0 0;
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    text-align: center;
    transition: background 180ms ease, color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.feature-tab-btn + .feature-tab-btn {
    border-left: 0;
}

.feature-tab-btn:hover {
    border-color: rgba(15, 184, 184, 0.72);
    background: rgba(15, 184, 184, 0.15);
    color: #fff;
    box-shadow: inset 0 3px 0 var(--sq-teal);
    transform: translateY(-3px);
}

.feature-tab-btn.is-active {
    position: relative;
    z-index: 3;
    background: #f6f0e5;
    color: #040406;
    clip-path: none;
    box-shadow: inset 0 4px 0 var(--sq-teal), 0 -8px 24px rgba(15, 184, 184, 0.14);
    transform: translateY(0);
}

.feature-panels-wrap {
    position: relative;
    z-index: 1;
    margin-top: 0;
}

.feature-panel {
    border: 0;
    background: #f6f0e5;
    border-radius: 0;
    padding: 34px;
    min-height: 450px;
}

.feature-panel-grid {
    display: grid;
    gap: 26px;
    align-items: center;
}

.feature-point-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.feature-point-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.feature-point-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    color: #6c2be0;
}

.feature-media-wrap {
    background: linear-gradient(135deg, rgba(144, 18, 207, 0.16), rgba(15, 184, 184, 0.15));
    padding: 12px;
    border-radius: 16px;
}

.feature-media-asset {
    width: 100%;
    height: 320px;
    object-fit: cover;
    border-radius: 12px;
    transform: translateY(8px) scale(0.985);
    opacity: 0;
}

.feature-panel.is-active .feature-media-asset {
    animation: featureMediaIn 460ms ease forwards;
}

.feature-media-wrap-dna {
    padding: 0;
    background: transparent;
}

.brand-dna-visual {
    position: relative;
    min-height: 380px;
    overflow: hidden;
    border: 1px solid rgba(4, 4, 6, 0.1);
    border-radius: 18px;
    background:
        radial-gradient(circle at 86% 10%, rgba(15, 184, 184, 0.16), transparent 31%),
        radial-gradient(circle at 8% 92%, rgba(144, 18, 207, 0.14), transparent 34%),
        #f8f5ef;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.dna-anim-piece {
    opacity: 0;
    transform: translateY(18px) scale(0.97);
}

.feature-panel.is-active .dna-anim-piece {
    animation: dnaPieceIn 680ms cubic-bezier(0.2, 0.85, 0.25, 1.12) both;
    animation-delay: var(--dna-delay, 0ms);
}

.dna-ui-window {
    position: absolute;
    inset: 30px 34px 38px 24px;
    overflow: hidden;
    border: 1px solid rgba(4, 4, 6, 0.12);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 24px 55px rgba(4, 4, 6, 0.16);
}

.dna-ui-topbar {
    display: flex;
    min-height: 58px;
    align-items: center;
    gap: 9px;
    border-bottom: 1px solid rgba(144, 18, 207, 0.12);
    padding: 10px 14px;
    background: linear-gradient(90deg, rgba(144, 18, 207, 0.08), rgba(15, 184, 184, 0.04));
}

.dna-ui-spark {
    color: var(--sq-purple);
    font-size: 18px;
}

.dna-ui-topbar > div {
    display: grid;
    line-height: 1.05;
}

.dna-ui-topbar strong,
.dna-ui-heading strong,
.dna-ui-card strong,
.dna-float-card strong {
    font-family: "Urbanist", sans-serif;
}

.dna-ui-topbar strong {
    font-size: 13px;
}

.dna-ui-topbar small,
.dna-ui-heading small,
.dna-ui-card small,
.dna-float-card small {
    color: rgba(4, 4, 6, 0.5);
    font-size: 8px;
}

.dna-ui-status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    border-radius: 999px;
    background: rgba(15, 184, 184, 0.1);
    padding: 6px 8px;
    color: #087a7a;
    font-size: 8px;
    font-weight: 700;
}

.dna-ui-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sq-teal);
    box-shadow: 0 0 0 3px rgba(15, 184, 184, 0.12);
}

.dna-ui-body {
    display: grid;
    min-height: 255px;
    grid-template-columns: 42px minmax(0, 1fr);
}

.dna-ui-sidebar {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    border-right: 1px solid rgba(4, 4, 6, 0.08);
    padding-top: 14px;
    background: #0e0b1d;
}

.dna-ui-sidebar span {
    display: grid;
    width: 25px;
    height: 25px;
    place-items: center;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 12px;
}

.dna-ui-sidebar .is-active {
    background: linear-gradient(135deg, var(--sq-purple), var(--sq-blue));
    color: #fff;
}

.dna-ui-workspace {
    min-width: 0;
    padding: 12px;
    background: #f7f8fb;
}

.dna-ui-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.dna-ui-heading > div {
    display: grid;
}

.dna-ui-heading strong {
    font-size: 13px;
    color: var(--sq-ink);
}

.dna-ui-heading > span {
    border-radius: 7px;
    background: var(--sq-purple);
    padding: 5px 9px;
    color: #fff;
    font-size: 8px;
    font-weight: 700;
}

.dna-ui-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 8px;
}

.dna-ui-card {
    min-width: 0;
    border: 1px solid rgba(4, 4, 6, 0.08);
    border-radius: 10px;
    background: #fff;
    padding: 10px;
    box-shadow: 0 5px 14px rgba(4, 4, 6, 0.04);
}

.dna-ui-card-label {
    display: block;
    margin-bottom: 7px;
    color: var(--sq-purple);
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.dna-ui-tone strong {
    display: block;
    font-size: 11px;
    line-height: 1.2;
    color: var(--sq-ink);
}

.dna-tone-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 9px;
}

.dna-tone-tags i {
    border-radius: 999px;
    background: rgba(144, 18, 207, 0.08);
    padding: 4px 6px;
    color: #6e1596;
    font-size: 7px;
    font-style: normal;
    font-weight: 700;
}

.dna-color-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    margin-bottom: 7px;
}

.dna-color-row i {
    height: 29px;
    border-radius: 6px;
    background: #111114;
}

.dna-color-row i:nth-child(2) { background: var(--sq-blue); }
.dna-color-row i:nth-child(3) { background: var(--sq-magenta); }
.dna-color-row i:nth-child(4) { background: var(--sq-amber); }

.dna-copy-lines {
    display: grid;
    gap: 6px;
}

.dna-copy-lines i {
    height: 7px;
    border-radius: 999px;
    background: rgba(4, 4, 6, 0.09);
}

.dna-copy-lines i:nth-child(2) { width: 84%; }
.dna-copy-lines i:nth-child(3) { width: 61%; background: rgba(15, 184, 184, 0.18); }

.dna-rule-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
    color: rgba(4, 4, 6, 0.68);
    font-size: 8px;
}

.dna-rule-row + .dna-rule-row {
    border-top: 1px solid rgba(4, 4, 6, 0.06);
}

.dna-rule-row b {
    color: var(--sq-teal);
}

.dna-float-card {
    position: absolute;
    z-index: 4;
    display: grid;
    border: 1px solid rgba(4, 4, 6, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.96);
    padding: 10px 12px;
    box-shadow: 0 14px 32px rgba(4, 4, 6, 0.16);
    backdrop-filter: blur(10px);
}

.dna-float-card > span,
.dna-float-card > small {
    font-size: 8px;
}

.dna-float-card > span {
    color: rgba(4, 4, 6, 0.58);
    font-weight: 700;
}

.dna-float-card > strong {
    font-size: 20px;
    line-height: 1.05;
    color: var(--sq-ink);
}

.dna-float-card [data-feature-count] {
    display: inline;
}

.dna-float-consistency {
    top: 14px;
    right: 12px;
    width: 120px;
}

.dna-float-consistency > i {
    height: 5px;
    margin-top: 7px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(4, 4, 6, 0.08);
}

.dna-float-consistency > i b {
    display: block;
    width: 96%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--sq-purple), var(--sq-teal));
    transform: scaleX(0);
    transform-origin: left;
}

.feature-panel.is-active .dna-float-consistency > i b {
    animation: dnaProgressIn 900ms 620ms ease forwards;
}

.dna-float-rules {
    right: 12px;
    bottom: 16px;
    width: 142px;
}

.dna-float-ready {
    left: 12px;
    bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.dna-float-ready > div {
    display: grid;
}

.dna-float-ready strong {
    font-size: 10px;
    color: var(--sq-ink);
}

.dna-ready-check {
    display: grid;
    width: 28px;
    height: 28px;
    place-items: center;
    border-radius: 9px;
    background: rgba(15, 184, 184, 0.12);
    color: #078181;
    font-size: 13px !important;
}

.feature-media-wrap-ui {
    padding: 0;
    background: transparent;
}

.benefit-ui-visual {
    position: relative;
    min-height: 380px;
    overflow: hidden;
    border: 1px solid rgba(4, 4, 6, 0.1);
    border-radius: 18px;
    background:
        radial-gradient(circle at 86% 8%, rgba(144, 18, 207, 0.15), transparent 31%),
        radial-gradient(circle at 7% 93%, rgba(15, 184, 184, 0.14), transparent 34%),
        #f8f5ef;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
}

.benefit-ui-creation { background: radial-gradient(circle at 90% 8%, rgba(243, 28, 129, 0.13), transparent 30%), radial-gradient(circle at 4% 96%, rgba(144, 18, 207, 0.16), transparent 35%), #f8f5ef; }
.benefit-ui-approvals { background: radial-gradient(circle at 90% 8%, rgba(15, 184, 184, 0.14), transparent 30%), radial-gradient(circle at 5% 95%, rgba(28, 115, 231, 0.13), transparent 35%), #f8f5ef; }
.benefit-ui-calendar { background: radial-gradient(circle at 90% 8%, rgba(254, 177, 19, 0.14), transparent 30%), radial-gradient(circle at 5% 95%, rgba(144, 18, 207, 0.14), transparent 35%), #f8f5ef; }
.benefit-ui-analytics { background: radial-gradient(circle at 90% 8%, rgba(15, 184, 184, 0.15), transparent 30%), radial-gradient(circle at 5% 95%, rgba(243, 28, 129, 0.12), transparent 35%), #f8f5ef; }
.benefit-ui-multibrand { background: radial-gradient(circle at 90% 8%, rgba(144, 18, 207, 0.15), transparent 30%), radial-gradient(circle at 5% 95%, rgba(254, 177, 19, 0.13), transparent 35%), #f8f5ef; }

.benefit-ui-window {
    position: absolute;
    inset: 28px 28px 38px 22px;
    overflow: hidden;
    border: 1px solid rgba(4, 4, 6, 0.11);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 24px 55px rgba(4, 4, 6, 0.15);
}

.benefit-ui-header {
    display: flex;
    min-height: 52px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(144, 18, 207, 0.11);
    padding: 10px 13px;
    background: linear-gradient(90deg, rgba(144, 18, 207, 0.07), rgba(15, 184, 184, 0.035));
}

.benefit-ui-header > div {
    display: flex;
    align-items: center;
    gap: 7px;
}

.benefit-ui-header > div > span {
    color: var(--sq-purple);
    font-size: 15px;
}

.benefit-ui-header strong,
.creation-results-heading strong,
.approval-comments-title strong,
.analytics-chart-card strong,
.multibrand-toolbar strong {
    font-family: "Urbanist", sans-serif;
    color: var(--sq-ink);
}

.benefit-ui-header strong { font-size: 13px; }
.benefit-ui-header small { color: rgba(4, 4, 6, 0.5); font-size: 8px; }

.benefit-ui-label {
    color: rgba(4, 4, 6, 0.48);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.benefit-float-card {
    position: absolute;
    z-index: 5;
    display: grid;
    min-width: 116px;
    border: 1px solid rgba(4, 4, 6, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.97);
    padding: 10px 12px;
    color: var(--sq-ink);
    box-shadow: 0 14px 32px rgba(4, 4, 6, 0.16);
    backdrop-filter: blur(10px);
}

.benefit-float-card > span {
    color: rgba(4, 4, 6, 0.58);
    font-size: 8px;
    font-weight: 700;
}

.benefit-float-card > strong {
    font-family: "Urbanist", sans-serif;
    color: var(--sq-ink);
    font-size: 19px;
    line-height: 1.08;
    white-space: nowrap;
}

.benefit-float-card > small,
.benefit-float-card > div small {
    color: rgba(4, 4, 6, 0.52);
    font-size: 8px;
}

.benefit-float-card [data-feature-count] { display: inline; }
.benefit-float-top-right { top: 12px; right: 10px; }
.benefit-float-bottom-left { bottom: 13px; left: 10px; }
.benefit-float-bottom-right { right: 10px; bottom: 13px; }

.benefit-float-confirm {
    display: flex;
    align-items: center;
    gap: 8px;
}

.benefit-float-confirm > i {
    display: grid;
    width: 27px;
    height: 27px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 9px;
    background: rgba(15, 184, 184, 0.12);
    color: #087d7d;
    font-size: 12px;
    font-style: normal;
    font-weight: 800;
}

.benefit-float-confirm > div { display: grid; }
.benefit-float-confirm > div strong { color: var(--sq-ink); font-family: "Urbanist", sans-serif; font-size: 10px; }

.creation-ui-body {
    display: grid;
    min-height: 263px;
    grid-template-columns: 38% 62%;
}

.creation-ui-controls {
    display: flex;
    flex-direction: column;
    gap: 7px;
    border-right: 1px solid rgba(4, 4, 6, 0.08);
    padding: 12px 10px;
    background: #fbfbfd;
}

.creation-select {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid rgba(4, 4, 6, 0.09);
    border-radius: 8px;
    padding: 7px 8px;
    color: rgba(4, 4, 6, 0.7);
    font-size: 8px;
}

.creation-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: rgba(4, 4, 6, 0.65);
    font-size: 8px;
}

.creation-toggle-row i {
    width: 22px;
    height: 12px;
    border-radius: 999px;
    background: rgba(4, 4, 6, 0.13);
}

.creation-toggle-row i.is-on {
    position: relative;
    background: var(--sq-purple);
}

.creation-toggle-row i.is-on::after {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
    content: "";
}

.creation-format-row { display: flex; gap: 5px; }
.creation-format-row i { display: grid; height: 30px; flex: 1; place-items: center; border: 1px solid rgba(144, 18, 207, 0.2); border-radius: 7px; color: var(--sq-purple); font-size: 7px; font-style: normal; font-weight: 700; }
.creation-format-row i:first-child { border-color: var(--sq-purple); background: rgba(144, 18, 207, 0.07); }
.creation-ui-controls button { margin-top: auto; border: 0; border-radius: 8px; background: linear-gradient(90deg, var(--sq-purple), #5f43ed); padding: 8px; color: #fff; font-size: 8px; font-weight: 800; }

.creation-ui-results { min-width: 0; padding: 12px; background: #f7f8fb; }
.creation-results-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.creation-results-heading strong { font-size: 10px; }
.creation-results-heading span { border-radius: 999px; background: rgba(144, 18, 207, 0.1); padding: 4px 6px; color: var(--sq-purple); font-size: 7px; font-weight: 700; }
.creation-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.creation-result-card { min-width: 0; border: 1px solid rgba(4, 4, 6, 0.08); border-radius: 10px; background: #fff; padding: 7px; box-shadow: 0 6px 15px rgba(4, 4, 6, 0.05); }
.creation-art { position: relative; height: 94px; overflow: hidden; border-radius: 7px; background: linear-gradient(145deg, #15121e, #313846); }
.creation-art::before { position: absolute; inset: 0; background: radial-gradient(circle at 30% 35%, rgba(15, 184, 184, 0.8), transparent 30%), radial-gradient(circle at 74% 70%, rgba(144, 18, 207, 0.85), transparent 34%); content: ""; }
.creation-art-two { background: linear-gradient(145deg, #efe8dd, #d8e5ec); }
.creation-art-two::before { background: radial-gradient(circle at 72% 28%, rgba(243, 28, 129, 0.75), transparent 28%), radial-gradient(circle at 28% 72%, rgba(254, 177, 19, 0.8), transparent 32%); }
.creation-art i { position: absolute; top: 24%; left: 20%; width: 38%; height: 50%; border: 1px solid rgba(255, 255, 255, 0.7); transform: rotate(15deg); }
.creation-art b { position: absolute; right: 14%; bottom: 14%; width: 34%; height: 34%; border-radius: 50%; background: rgba(255, 255, 255, 0.2); }
.creation-result-card .dna-copy-lines { margin: 8px 0; gap: 4px; }
.creation-result-card .dna-copy-lines i { height: 4px; }
.creation-result-card > span { display: block; border-radius: 7px; background: #111827; padding: 5px; color: #fff; font-size: 7px; font-weight: 700; text-align: center; }

.approval-ui-body { display: grid; min-height: 263px; grid-template-columns: 43% 57%; background: #f7f8fb; }
.approval-preview { position: relative; padding: 13px; }
.approval-status { position: absolute; z-index: 2; top: 20px; left: 20px; display: flex; align-items: center; gap: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); padding: 5px 7px; color: #9a6300; font-size: 7px; font-weight: 800; }
.approval-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--sq-amber); }
.approval-art { position: relative; height: 172px; overflow: hidden; border-radius: 10px; background: linear-gradient(145deg, #241038, #153b62); }
.approval-art span { position: absolute; inset: 18% 15%; border: 1px solid rgba(255, 255, 255, 0.55); transform: rotate(-8deg); }
.approval-art i { position: absolute; left: 15%; bottom: -8%; width: 58%; height: 58%; border-radius: 50%; background: linear-gradient(135deg, var(--sq-magenta), var(--sq-amber)); opacity: 0.78; }
.approval-art b { position: absolute; top: 22%; right: 12%; width: 42%; height: 42%; border-radius: 45% 55% 62% 38%; background: linear-gradient(135deg, var(--sq-teal), var(--sq-blue)); opacity: 0.72; }
.approval-piece-meta { display: grid; margin-top: 8px; }
.approval-piece-meta strong { color: var(--sq-ink); font-family: "Urbanist", sans-serif; font-size: 9px; }
.approval-piece-meta small { color: rgba(4, 4, 6, 0.5); font-size: 7px; }
.approval-comments { border-left: 1px solid rgba(4, 4, 6, 0.08); padding: 12px 10px; background: #fff; }
.approval-comments-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.approval-comments-title strong { font-size: 10px; }
.approval-comments-title span { color: var(--sq-teal); font-size: 7px; font-weight: 700; }
.approval-comments article { display: grid; grid-template-columns: 24px minmax(0, 1fr) 14px; gap: 6px; align-items: center; border: 1px solid rgba(4, 4, 6, 0.07); border-radius: 8px; padding: 7px; }
.approval-comments article + article { margin-top: 6px; }
.approval-comments article > i { display: grid; width: 23px; height: 23px; place-items: center; border-radius: 7px; background: rgba(15, 184, 184, 0.1); color: #087e7e; font-size: 7px; font-style: normal; font-weight: 800; }
.approval-comments article > div { display: grid; min-width: 0; }
.approval-comments article strong { overflow: hidden; color: var(--sq-ink); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.approval-comments article small { overflow: hidden; color: rgba(4, 4, 6, 0.48); font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.approval-comments article > b { color: var(--sq-teal); font-size: 8px; }
.approval-comments article.is-current { border-color: rgba(144, 18, 207, 0.24); background: rgba(144, 18, 207, 0.04); }
.approval-comments article.is-current > i { background: rgba(144, 18, 207, 0.1); color: var(--sq-purple); }
.approval-comments article.is-current > b { color: var(--sq-purple); }
.approval-actions { display: flex; gap: 5px; margin-top: 9px; }
.approval-actions span, .approval-actions strong { flex: 1; border-radius: 7px; padding: 6px 4px; font-size: 6px; text-align: center; }
.approval-actions span { border: 1px solid rgba(4, 4, 6, 0.1); color: rgba(4, 4, 6, 0.58); }
.approval-actions strong { background: var(--sq-purple); color: #fff; }

.calendar-ui-toolbar { display: flex; align-items: center; gap: 5px; border-bottom: 1px solid rgba(4, 4, 6, 0.07); padding: 9px 11px; }
.calendar-ui-toolbar > span { display: grid; width: 20px; height: 20px; place-items: center; border: 1px solid rgba(4, 4, 6, 0.1); border-radius: 5px; color: rgba(4, 4, 6, 0.6); font-size: 10px; }
.calendar-ui-toolbar strong { margin: 0 auto; color: var(--sq-ink); font-family: "Urbanist", sans-serif; font-size: 10px; }
.calendar-ui-toolbar i { border-radius: 6px; background: var(--sq-purple); padding: 5px 8px; color: #fff; font-size: 7px; font-style: normal; font-weight: 700; }
.calendar-ui-grid { display: grid; grid-template-columns: repeat(7, 1fr); padding: 9px 11px; }
.calendar-ui-grid > b { padding: 5px 0; color: rgba(4, 4, 6, 0.48); font-size: 7px; text-align: center; }
.calendar-ui-grid > i { position: relative; display: flex; min-width: 0; height: 43px; justify-content: flex-end; border-top: 1px solid rgba(4, 4, 6, 0.08); border-left: 1px solid rgba(4, 4, 6, 0.08); padding: 4px; color: rgba(4, 4, 6, 0.58); font-size: 7px; font-style: normal; }
.calendar-ui-grid > i:nth-of-type(7n) { border-right: 1px solid rgba(4, 4, 6, 0.08); }
.calendar-ui-grid > i:nth-last-of-type(-n+7) { border-bottom: 1px solid rgba(4, 4, 6, 0.08); }
.calendar-ui-grid > i.has-post { background: rgba(144, 18, 207, 0.035); }
.calendar-ui-grid > i em { position: absolute; right: 4px; bottom: 5px; left: 4px; height: 9px; border-left: 2px solid var(--sq-purple); border-radius: 3px; background: rgba(144, 18, 207, 0.11); }

.analytics-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; padding: 10px 11px 6px; background: #f7f8fb; }
.analytics-kpis article { display: grid; border: 1px solid rgba(4, 4, 6, 0.07); border-radius: 9px; background: #fff; padding: 8px; }
.analytics-kpis span { color: rgba(4, 4, 6, 0.48); font-size: 6px; font-weight: 700; text-transform: uppercase; }
.analytics-kpis strong { color: var(--sq-ink); font-family: "Urbanist", sans-serif; font-size: 15px; }
.analytics-kpis i { color: var(--sq-teal); font-size: 7px; font-style: normal; }
.analytics-chart-card { margin: 4px 11px 10px; border: 1px solid rgba(4, 4, 6, 0.07); border-radius: 10px; padding: 9px 10px; background: #fff; }
.analytics-chart-card > div:first-child { display: flex; align-items: center; justify-content: space-between; }
.analytics-chart-card > div:first-child strong { font-size: 9px; }
.analytics-chart-card > div:first-child span { color: rgba(4, 4, 6, 0.45); font-size: 7px; }
.analytics-chart { display: flex; height: 125px; align-items: flex-end; gap: 8px; margin-top: 8px; border-bottom: 1px solid rgba(4, 4, 6, 0.08); background: repeating-linear-gradient(to top, transparent 0 30px, rgba(4, 4, 6, 0.045) 31px 32px); padding: 0 8px; }
.analytics-chart i { height: var(--chart-height); flex: 1; border-radius: 6px 6px 2px 2px; background: linear-gradient(180deg, #a259f3, var(--sq-purple)); transform: scaleY(0); transform-origin: bottom; }
.feature-panel.is-active .analytics-chart i { animation: benefitBarIn 620ms ease forwards; }
.feature-panel.is-active .analytics-chart i:nth-child(2) { animation-delay: 90ms; }
.feature-panel.is-active .analytics-chart i:nth-child(3) { animation-delay: 150ms; }
.feature-panel.is-active .analytics-chart i:nth-child(4) { animation-delay: 210ms; }
.feature-panel.is-active .analytics-chart i:nth-child(5) { animation-delay: 270ms; }
.feature-panel.is-active .analytics-chart i:nth-child(6) { animation-delay: 330ms; }

.multibrand-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 11px 7px; background: #f7f8fb; }
.multibrand-toolbar strong { font-size: 10px; }
.multibrand-toolbar span { border-radius: 7px; background: var(--sq-purple); padding: 6px 8px; color: #fff; font-size: 7px; font-weight: 700; }
.multibrand-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; padding: 8px 11px 12px; background: #f7f8fb; }
.multibrand-grid article { position: relative; min-width: 0; overflow: hidden; border: 1px solid rgba(4, 4, 6, 0.08); border-radius: 9px; background: #fff; padding: 7px; }
.multibrand-grid article > span { position: absolute; top: 11px; right: 10px; border-radius: 999px; background: #e8fff1; padding: 3px 4px; color: #16a45b; font-size: 5px; font-weight: 800; }
.multibrand-cover { position: relative; height: 91px; margin-bottom: 8px; overflow: hidden; border-radius: 7px; background: linear-gradient(135deg, #efe5ff, #d8f8f5); }
.multibrand-cover::before, .multibrand-cover::after { position: absolute; border-radius: 50%; content: ""; }
.multibrand-cover::before { top: 21%; left: 17%; width: 58%; height: 58%; background: linear-gradient(135deg, var(--sq-purple), var(--sq-blue)); opacity: 0.8; }
.multibrand-cover::after { right: -10%; bottom: -18%; width: 60%; height: 60%; background: var(--sq-teal); opacity: 0.45; }
.multibrand-cover.is-teal::before { background: linear-gradient(135deg, var(--sq-teal), var(--sq-blue)); }
.multibrand-cover.is-amber::before { background: linear-gradient(135deg, var(--sq-amber), var(--sq-magenta)); }
.multibrand-cover.is-blue::before { background: linear-gradient(135deg, var(--sq-blue), var(--sq-purple)); }
.multibrand-cover i { position: absolute; z-index: 2; inset: 31%; border: 1px solid rgba(255, 255, 255, 0.8); transform: rotate(45deg); }
.multibrand-grid article > strong { display: block; overflow: hidden; color: var(--sq-ink); font-family: "Urbanist", sans-serif; font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.multibrand-grid article > small { display: block; overflow: hidden; color: rgba(4, 4, 6, 0.48); font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.multibrand-grid article > em { display: grid; width: 19px; height: 19px; margin-top: 6px; margin-left: auto; place-items: center; border-radius: 50%; background: rgba(144, 18, 207, 0.08); color: var(--sq-purple); font-size: 8px; font-style: normal; }

.dna-score-dial,
.multibrand-sync-dial {
    position: absolute;
    z-index: 6;
    display: grid;
    width: 100px;
    height: 100px;
    place-items: center;
    border: 1px solid rgba(4, 4, 6, 0.1);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.97);
    color: var(--sq-ink);
    box-shadow: 0 16px 36px rgba(4, 4, 6, 0.16);
}

.dna-score-dial { top: 10px; right: 12px; }
.dna-score-dial svg, .multibrand-sync-dial svg { position: absolute; inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); transform: rotate(-90deg); }
.dna-score-dial circle, .multibrand-sync-dial circle { fill: none; stroke: rgba(4, 4, 6, 0.08); stroke-width: 5; }
.dna-score-dial .dna-score-progress { stroke: var(--sq-teal); stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; }
.dna-score-dial > strong, .multibrand-sync-dial > strong { z-index: 1; margin-top: -4px; font-family: "Urbanist", sans-serif; font-size: 19px; line-height: 1; }
.dna-score-dial > strong span, .multibrand-sync-dial > strong span { display: inline; }
.dna-score-dial > small, .multibrand-sync-dial > small { position: absolute; z-index: 1; bottom: 23px; color: rgba(4, 4, 6, 0.52); font-size: 7px; }
.feature-panel.is-active .dna-score-progress { animation: dnaDialIn 1050ms 480ms ease forwards; }

.dna-tone-cloud {
    position: absolute;
    z-index: 5;
    bottom: 18px;
    left: 12px;
    width: 145px;
    height: 72px;
}

.dna-tone-cloud span {
    position: absolute;
    border: 1px solid rgba(144, 18, 207, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.97);
    padding: 7px 10px;
    color: var(--sq-purple);
    font-size: 8px;
    font-weight: 800;
    box-shadow: 0 8px 20px rgba(4, 4, 6, 0.1);
}

.dna-tone-cloud span:first-child { top: 0; left: 8px; transform: rotate(-7deg); }
.dna-tone-cloud span:nth-child(2) { top: 22px; right: 0; transform: rotate(6deg); }
.dna-tone-cloud span:nth-child(3) { bottom: 0; left: 0; transform: rotate(-2deg); }

.dna-sync-status,
.creation-speed-chip,
.analytics-report-chip {
    position: absolute;
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid rgba(4, 4, 6, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.97);
    padding: 8px 11px 8px 8px;
    color: var(--sq-ink);
    box-shadow: 0 12px 28px rgba(4, 4, 6, 0.14);
}

.dna-sync-status { right: 12px; bottom: 16px; }
.dna-sync-status > i, .creation-speed-chip > i, .analytics-report-chip > i { display: grid; width: 27px; height: 27px; flex: 0 0 auto; place-items: center; border-radius: 50%; background: rgba(15, 184, 184, 0.12); color: #087d7d; font-size: 11px; font-style: normal; font-weight: 800; }
.dna-sync-status > div, .creation-speed-chip > div, .analytics-report-chip > div { display: grid; }
.dna-sync-status strong, .creation-speed-chip strong, .analytics-report-chip strong { color: var(--sq-ink); font-family: "Urbanist", sans-serif; font-size: 10px; }
.dna-sync-status small, .creation-speed-chip small, .analytics-report-chip small { color: rgba(4, 4, 6, 0.5); font-size: 7px; }
.dna-sync-status [data-feature-count], .creation-speed-chip [data-feature-count] { display: inline; }

.creation-batch-widget {
    position: absolute;
    z-index: 6;
    top: 13px;
    right: 10px;
    width: 166px;
    border: 1px solid rgba(4, 4, 6, 0.1);
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.97);
    padding: 10px 11px;
    box-shadow: 0 14px 30px rgba(4, 4, 6, 0.15);
}

.creation-batch-widget > div { display: flex; align-items: baseline; justify-content: space-between; }
.creation-batch-widget span { color: rgba(4, 4, 6, 0.55); font-size: 8px; font-weight: 700; }
.creation-batch-widget strong { color: var(--sq-ink); font-family: "Urbanist", sans-serif; font-size: 11px; }
.creation-batch-widget strong span { display: inline; color: inherit; font-size: inherit; }
.creation-batch-widget > i { display: block; height: 6px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: rgba(4, 4, 6, 0.08); }
.creation-batch-widget > i b { display: block; width: 100%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sq-purple), var(--sq-magenta)); transform: scaleX(0); transform-origin: left; }
.feature-panel.is-active .creation-batch-widget > i b { animation: benefitProgressIn 900ms 560ms ease forwards; }

.creation-format-fan {
    position: absolute;
    z-index: 6;
    bottom: 18px;
    left: 15px;
    width: 132px;
    height: 76px;
}

.creation-format-fan span {
    position: absolute;
    display: grid;
    width: 54px;
    height: 68px;
    place-items: center;
    border: 1px solid rgba(144, 18, 207, 0.2);
    border-radius: 10px;
    background: #fff;
    color: var(--sq-purple);
    font-size: 9px;
    font-weight: 800;
    box-shadow: 0 10px 22px rgba(4, 4, 6, 0.12);
    transform-origin: bottom center;
}

.creation-format-fan span:first-child { bottom: 0; left: 0; transform: rotate(-12deg); }
.creation-format-fan span:nth-child(2) { bottom: 4px; left: 38px; transform: rotate(0); }
.creation-format-fan span:nth-child(3) { right: 0; bottom: 0; transform: rotate(12deg); }
.creation-speed-chip { right: 13px; bottom: 18px; }
.creation-speed-chip > i { background: rgba(254, 177, 19, 0.18); color: #9b6500; }

.approval-comment-bubble {
    position: absolute;
    z-index: 6;
    top: 22px;
    left: 9px;
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr) 16px;
    gap: 7px;
    align-items: center;
    width: 184px;
    border: 1px solid rgba(4, 4, 6, 0.1);
    border-radius: 13px 13px 13px 4px;
    background: rgba(255, 255, 255, 0.98);
    padding: 9px;
    box-shadow: 0 14px 30px rgba(4, 4, 6, 0.14);
}

.approval-comment-bubble > i { display: grid; width: 27px; height: 27px; place-items: center; border-radius: 8px; background: rgba(28, 115, 231, 0.1); color: var(--sq-blue); font-size: 8px; font-style: normal; font-weight: 800; }
.approval-comment-bubble > div { display: grid; min-width: 0; }
.approval-comment-bubble strong { color: var(--sq-ink); font-size: 9px; }
.approval-comment-bubble small { color: rgba(4, 4, 6, 0.5); font-size: 7px; }
.approval-comment-bubble > b { color: var(--sq-teal); }

.approval-flow-widget {
    position: absolute;
    z-index: 6;
    top: 114px;
    right: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid rgba(4, 4, 6, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.97);
    padding: 10px;
    box-shadow: 0 14px 30px rgba(4, 4, 6, 0.14);
}

.approval-flow-widget span { display: flex; align-items: center; gap: 6px; color: rgba(4, 4, 6, 0.62); font-size: 7px; font-weight: 700; }
.approval-flow-widget span i { display: grid; width: 18px; height: 18px; place-items: center; border-radius: 50%; background: rgba(4, 4, 6, 0.08); font-size: 7px; font-style: normal; }
.approval-flow-widget span.is-done i { background: rgba(15, 184, 184, 0.12); color: #087d7d; }
.approval-flow-widget span.is-current { color: var(--sq-purple); }
.approval-flow-widget span.is-current i { background: var(--sq-purple); color: #fff; }
.approval-flow-widget em { width: 2px; height: 10px; margin-left: 8px; background: rgba(4, 4, 6, 0.1); transform: scaleY(0); transform-origin: top; }
.feature-panel.is-active .approval-flow-widget em { animation: approvalFlowIn 380ms 650ms ease forwards; }
.feature-panel.is-active .approval-flow-widget em:nth-of-type(2) { animation-delay: 820ms; }

.approval-stamp {
    position: absolute;
    z-index: 7;
    right: 18px;
    bottom: 17px;
    display: grid;
    width: 112px;
    height: 72px;
    place-items: center;
    border: 3px double var(--sq-teal);
    border-radius: 50%;
    background: rgba(246, 255, 253, 0.96);
    color: #087d7d;
    box-shadow: 0 12px 28px rgba(4, 4, 6, 0.13);
    transform: rotate(-8deg) scale(0);
}

.approval-stamp > span { align-self: end; font-family: "Urbanist", sans-serif; font-size: 13px; font-weight: 900; letter-spacing: 0.08em; }
.approval-stamp > small { align-self: start; margin-top: -2px; font-size: 7px; }
.approval-stamp [data-feature-count] { display: inline; }
.feature-panel.is-active .approval-stamp { animation: approvalStampIn 560ms 520ms cubic-bezier(0.2, 1.2, 0.3, 1) both; }

.calendar-schedule-ticket {
    position: absolute;
    z-index: 6;
    top: 12px;
    right: 11px;
    display: grid;
    width: 164px;
    border: 1px solid rgba(4, 4, 6, 0.1);
    border-left: 4px solid var(--sq-purple);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.98);
    padding: 9px 11px;
    box-shadow: 0 14px 30px rgba(4, 4, 6, 0.14);
}

.calendar-schedule-ticket > span { color: var(--sq-purple); font-size: 6px; font-weight: 900; letter-spacing: 0.08em; }
.calendar-schedule-ticket > strong { color: var(--sq-ink); font-family: "Urbanist", sans-serif; font-size: 11px; }
.calendar-schedule-ticket > small { color: rgba(4, 4, 6, 0.5); font-size: 7px; }
.calendar-schedule-ticket > i { position: absolute; top: 12px; right: 10px; width: 7px; height: 7px; border-radius: 50%; background: var(--sq-teal); box-shadow: 0 0 0 4px rgba(15, 184, 184, 0.12); }

.calendar-channel-orbit {
    position: absolute;
    z-index: 6;
    bottom: 17px;
    left: 14px;
    width: 92px;
    height: 72px;
}

.calendar-channel-orbit > i { position: absolute; z-index: 2; display: grid; width: 38px; height: 38px; place-items: center; border: 3px solid #fff; border-radius: 50%; background: linear-gradient(135deg, var(--sq-magenta), var(--sq-purple)); color: #fff; font-size: 8px; font-style: normal; font-weight: 900; box-shadow: 0 9px 22px rgba(4, 4, 6, 0.14); }
.calendar-channel-orbit > i:first-child { top: 0; left: 4px; }
.calendar-channel-orbit > i:nth-child(2) { right: 4px; bottom: 0; background: linear-gradient(135deg, var(--sq-blue), var(--sq-teal)); }
.calendar-channel-orbit > b { position: absolute; inset: 8px; border: 1px dashed rgba(144, 18, 207, 0.35); border-radius: 50%; animation: calendarOrbitSpin 8s linear infinite; }

.calendar-month-total {
    position: absolute;
    z-index: 6;
    right: 13px;
    bottom: 17px;
    display: grid;
    border-radius: 13px;
    background: #0f1120;
    padding: 10px 13px;
    color: #fff;
    box-shadow: 0 14px 30px rgba(4, 4, 6, 0.18);
}

.calendar-month-total > small { color: rgba(255, 255, 255, 0.55); font-size: 7px; }
.calendar-month-total > strong { font-family: "Urbanist", sans-serif; font-size: 13px; }
.calendar-month-total > strong span { display: inline; }
.calendar-month-total > span { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: rgba(255, 255, 255, 0.7); font-size: 7px; }
.calendar-month-total > span i { width: 6px; height: 6px; border-radius: 50%; background: var(--sq-teal); }
.calendar-ui-grid > i.has-post em { transform: scaleX(0); transform-origin: left; }
.feature-panel.is-active .calendar-ui-grid > i.has-post em { animation: calendarPostIn 460ms ease forwards; }
.feature-panel.is-active .calendar-ui-grid > i.has-post:nth-of-type(4n) em { animation-delay: 120ms; }
.feature-panel.is-active .calendar-ui-grid > i.has-post:nth-of-type(3n) em { animation-delay: 220ms; }

.analytics-reach-pill {
    position: absolute;
    z-index: 6;
    top: 13px;
    left: 14px;
    display: flex;
    align-items: baseline;
    gap: 7px;
    border: 1px solid rgba(4, 4, 6, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.98);
    padding: 8px 11px;
    box-shadow: 0 12px 28px rgba(4, 4, 6, 0.13);
}

.analytics-reach-pill > span { color: rgba(4, 4, 6, 0.54); font-size: 7px; font-weight: 700; }
.analytics-reach-pill > strong { color: var(--sq-ink); font-family: "Urbanist", sans-serif; font-size: 15px; }
.analytics-reach-pill > i { border-radius: 999px; background: rgba(15, 184, 184, 0.12); padding: 4px 6px; color: #087d7d; font-size: 7px; font-style: normal; font-weight: 800; }
.analytics-reach-pill [data-feature-count] { display: inline; }

.analytics-rise-card {
    position: absolute;
    z-index: 6;
    right: 8px;
    bottom: 13px;
    width: 225px;
    height: 140px;
    overflow: hidden;
    border: 1px solid rgba(4, 4, 6, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    padding: 11px 12px 7px;
    box-shadow: 0 16px 36px rgba(4, 4, 6, 0.16);
}

.analytics-rise-card > div { display: flex; align-items: baseline; justify-content: space-between; }
.analytics-rise-card > div span { color: rgba(4, 4, 6, 0.53); font-size: 8px; font-weight: 700; }
.analytics-rise-card > div strong { color: var(--sq-purple); font-family: "Urbanist", sans-serif; font-size: 10px; }
.analytics-rise-card [data-feature-count] { display: inline; }
.analytics-rise-card svg { display: block; width: 100%; height: 94px; margin-top: 5px; overflow: visible; }
.analytics-area { fill: url(#analytics-area-gradient); opacity: 0; }
.analytics-rise-line { fill: none; stroke: var(--sq-purple); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.analytics-rise-point { fill: var(--sq-magenta); opacity: 0; }
.feature-panel.is-active .analytics-area { animation: analyticsAreaIn 700ms 740ms ease forwards; }
.feature-panel.is-active .analytics-rise-line { animation: analyticsLineIn 1200ms 520ms ease forwards; }
.feature-panel.is-active .analytics-rise-point { animation: analyticsPointIn 360ms 1550ms ease forwards; }
.analytics-report-chip { bottom: 20px; left: 13px; }
.analytics-report-chip > i { background: rgba(144, 18, 207, 0.11); color: var(--sq-purple); }

.multibrand-sync-dial { top: 9px; right: 12px; width: 86px; height: 86px; }
.multibrand-sync-dial circle { stroke-width: 5; }
.multibrand-sync-dial .multibrand-sync-progress { stroke: var(--sq-purple); stroke-dasharray: 100; stroke-dashoffset: 100; stroke-linecap: round; }
.multibrand-sync-dial > strong { margin-top: -3px; font-size: 18px; }
.multibrand-sync-dial > small { bottom: 18px; }
.feature-panel.is-active .multibrand-sync-progress { animation: multibrandDialIn 1000ms 500ms ease forwards; }

.multibrand-card-stack {
    position: absolute;
    z-index: 6;
    bottom: 18px;
    left: 13px;
    width: 154px;
    height: 94px;
}

.multibrand-card-stack > i {
    position: absolute;
    bottom: 0;
    left: 40px;
    width: 75px;
    height: 88px;
    border: 1px solid rgba(4, 4, 6, 0.1);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 25px rgba(4, 4, 6, 0.14);
    transform-origin: bottom center;
}

.multibrand-card-stack > i::before { position: absolute; inset: 8px 8px 30px; border-radius: 7px; background: linear-gradient(135deg, var(--sq-purple), var(--sq-blue)); content: ""; }
.multibrand-card-stack > i::after { position: absolute; right: 10px; bottom: 10px; left: 10px; height: 6px; border-radius: 999px; background: rgba(4, 4, 6, 0.1); content: ""; }
.multibrand-card-stack > i.is-one { z-index: 1; transform: rotate(-17deg) translateX(-28px); }
.multibrand-card-stack > i.is-two { z-index: 2; transform: rotate(-7deg) translateX(-10px); }
.multibrand-card-stack > i.is-two::before { background: linear-gradient(135deg, var(--sq-teal), var(--sq-blue)); }
.multibrand-card-stack > i.is-three { z-index: 3; transform: rotate(11deg) translateX(20px); }
.multibrand-card-stack > i.is-three::before { background: linear-gradient(135deg, var(--sq-amber), var(--sq-magenta)); }

.multibrand-control-chip {
    position: absolute;
    z-index: 7;
    right: 12px;
    bottom: 17px;
    display: grid;
    border: 1px solid rgba(4, 4, 6, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.98);
    padding: 9px 11px;
    box-shadow: 0 14px 30px rgba(4, 4, 6, 0.14);
}

.multibrand-control-chip > span { color: rgba(4, 4, 6, 0.5); font-size: 7px; }
.multibrand-control-chip > strong { color: var(--sq-ink); font-family: "Urbanist", sans-serif; font-size: 10px; }
.multibrand-control-chip > strong i { color: var(--sq-teal); font-style: normal; }

.dna-tone-radar {
    position: absolute;
    z-index: 6;
    bottom: 13px;
    left: 11px;
    width: 178px;
    height: 118px;
    overflow: hidden;
    border: 1px solid rgba(4, 4, 6, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.97);
    padding: 9px 10px;
    box-shadow: 0 14px 30px rgba(4, 4, 6, 0.14);
}

.dna-tone-radar > div { display: flex; align-items: baseline; justify-content: space-between; }
.dna-tone-radar > div span { color: rgba(4, 4, 6, 0.52); font-size: 7px; font-weight: 700; }
.dna-tone-radar > div strong { color: var(--sq-purple); font-family: "Urbanist", sans-serif; font-size: 8px; }
.dna-tone-radar svg { display: block; width: 100%; height: 79px; margin-top: 2px; overflow: visible; }
.dna-tone-radar line, .dna-radar-grid { fill: none; stroke: rgba(4, 4, 6, 0.11); stroke-width: 1; }
.dna-radar-value { fill: rgba(144, 18, 207, 0.16); stroke: var(--sq-purple); stroke-width: 2; transform: scale(0); transform-box: fill-box; transform-origin: center; }
.dna-tone-radar circle { fill: var(--sq-teal); opacity: 0; }
.dna-radar-label { position: absolute; color: rgba(4, 4, 6, 0.6); font-size: 6px; font-weight: 800; }
.dna-radar-label.is-clear { top: 29px; left: 76px; }
.dna-radar-label.is-bold { right: 10px; bottom: 7px; }
.dna-radar-label.is-close { bottom: 7px; left: 9px; }
.feature-panel.is-active .dna-radar-value { animation: dnaRadarIn 620ms 590ms cubic-bezier(0.2, 0.9, 0.25, 1.2) forwards; }
.feature-panel.is-active .dna-tone-radar circle { animation: dnaRadarPointIn 280ms 1050ms ease forwards; }

.approval-final-state {
    position: absolute;
    z-index: 7;
    right: 13px;
    bottom: 14px;
    display: flex;
    width: 204px;
    align-items: center;
    gap: 10px;
    border: 1px solid rgba(15, 184, 184, 0.28);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(231, 255, 251, 0.98));
    padding: 10px 12px;
    color: var(--sq-ink);
    box-shadow: 0 14px 32px rgba(4, 4, 6, 0.15);
}

.approval-final-state > i {
    display: grid;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    place-items: center;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--sq-teal), #63d8cb);
    color: #fff;
    font-size: 15px;
    font-style: normal;
    box-shadow: 0 8px 18px rgba(15, 184, 184, 0.25);
}

.approval-final-state > div { display: grid; min-width: 0; }
.approval-final-state small { color: #087d7d; font-size: 6px; font-weight: 900; letter-spacing: 0.08em; }
.approval-final-state strong { overflow: hidden; color: var(--sq-ink); font-family: "Urbanist", sans-serif; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.approval-final-state > div > span { color: rgba(4, 4, 6, 0.5); font-size: 7px; }
.approval-final-state b { color: #087d7d; font-weight: 800; }
.approval-final-state [data-feature-count] { display: inline; }
.feature-panel.is-active .approval-final-state > i { animation: approvalCheckIn 520ms 760ms cubic-bezier(0.2, 1.2, 0.3, 1) both; }

.multibrand-capacity {
    position: absolute;
    z-index: 7;
    top: 12px;
    right: 10px;
    width: 184px;
    border: 1px solid rgba(4, 4, 6, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    padding: 10px 12px;
    color: var(--sq-ink);
    box-shadow: 0 14px 30px rgba(4, 4, 6, 0.14);
}

.multibrand-capacity > div { display: flex; align-items: baseline; justify-content: space-between; }
.multibrand-capacity > div span { color: rgba(4, 4, 6, 0.52); font-size: 8px; font-weight: 700; }
.multibrand-capacity > div strong { color: var(--sq-purple); font-family: "Urbanist", sans-serif; font-size: 16px; }
.multibrand-capacity > div strong span { display: inline; color: inherit; font-size: inherit; }
.multibrand-capacity > small { display: block; margin-top: -2px; color: rgba(4, 4, 6, 0.46); font-size: 7px; }
.multibrand-capacity > i { display: block; height: 6px; margin-top: 7px; overflow: hidden; border-radius: 999px; background: rgba(4, 4, 6, 0.08); }
.multibrand-capacity > i b { display: block; width: 78%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sq-purple), var(--sq-teal)); transform: scaleX(0); transform-origin: left; }
.feature-panel.is-active .multibrand-capacity > i b { animation: benefitProgressIn 900ms 600ms ease forwards; }

.multibrand-network {
    position: absolute;
    z-index: 6;
    bottom: 10px;
    left: 8px;
    width: 180px;
    height: 118px;
}

.multibrand-network svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.multibrand-network .network-line { fill: none; stroke: rgba(144, 18, 207, 0.42); stroke-width: 1.5; stroke-dasharray: 100; stroke-dashoffset: 100; }
.network-hub-ring { fill: rgba(144, 18, 207, 0.07); stroke: rgba(144, 18, 207, 0.3); stroke-width: 1.5; stroke-dasharray: 4 4; transform-origin: center; }
.network-hub, .network-node { position: absolute; display: grid; place-items: center; border-radius: 50%; background: #fff; box-shadow: 0 9px 20px rgba(4, 4, 6, 0.13); }
.network-hub { top: 33px; left: 61px; width: 48px; height: 48px; background: linear-gradient(135deg, var(--sq-purple), var(--sq-blue)); color: #fff; font-size: 17px; }
.network-node { width: 33px; height: 33px; border: 2px solid #fff; color: #fff; font-size: 7px; font-style: normal; font-weight: 900; }
.network-node.is-one { top: 2px; left: 3px; background: var(--sq-purple); }
.network-node.is-two { top: 0; right: 2px; background: var(--sq-teal); }
.network-node.is-three { bottom: 0; left: 0; background: var(--sq-amber); color: #593800; }
.network-node.is-four { right: 0; bottom: 0; background: var(--sq-blue); }
.feature-panel.is-active .network-line { animation: networkLineIn 900ms 570ms ease forwards; }
.feature-panel.is-active .network-hub-ring { animation: networkHubSpin 8s linear infinite; }

.benefit-ui-human {
    background: radial-gradient(circle at 92% 8%, rgba(254, 177, 19, 0.14), transparent 30%), radial-gradient(circle at 4% 96%, rgba(15, 184, 184, 0.15), transparent 35%), #f8f5ef;
}

.human-ui-body {
    display: grid;
    min-height: 263px;
    grid-template-columns: 45% 55%;
    background: #f7f8fb;
}

.human-drafts, .human-decision-panel { min-width: 0; padding: 11px; }
.human-drafts { border-right: 1px solid rgba(4, 4, 6, 0.08); }
.human-decision-panel { background: #fff; }
.human-section-heading { display: grid; margin-bottom: 8px; }
.human-section-heading > span { color: var(--sq-purple); font-size: 6px; font-weight: 900; letter-spacing: 0.08em; }
.human-section-heading > strong { color: var(--sq-ink); font-family: "Urbanist", sans-serif; font-size: 10px; }
.human-drafts article { display: grid; grid-template-columns: 26px minmax(0, 1fr) 14px; gap: 7px; align-items: center; border: 1px solid rgba(4, 4, 6, 0.07); border-radius: 9px; background: #fff; padding: 7px; }
.human-drafts article + article { margin-top: 6px; }
.human-drafts article.is-selected { border-color: rgba(144, 18, 207, 0.28); background: rgba(144, 18, 207, 0.04); box-shadow: inset 3px 0 0 var(--sq-purple); }
.human-drafts article > i { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 7px; background: rgba(4, 4, 6, 0.06); color: rgba(4, 4, 6, 0.55); font-size: 8px; font-style: normal; font-weight: 800; }
.human-drafts article.is-selected > i { background: rgba(144, 18, 207, 0.1); color: var(--sq-purple); }
.human-drafts article > div { display: grid; min-width: 0; }
.human-drafts article strong { overflow: hidden; color: var(--sq-ink); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.human-drafts article small { overflow: hidden; color: rgba(4, 4, 6, 0.45); font-size: 6px; text-overflow: ellipsis; white-space: nowrap; }
.human-drafts article > b { color: var(--sq-purple); font-size: 9px; }
.human-selected-concept { border: 1px solid rgba(144, 18, 207, 0.13); border-radius: 10px; background: linear-gradient(135deg, rgba(144, 18, 207, 0.06), rgba(15, 184, 184, 0.04)); padding: 9px; }
.human-selected-concept > span { color: rgba(4, 4, 6, 0.48); font-size: 7px; }
.human-selected-concept > strong { display: block; color: var(--sq-ink); font-family: "Urbanist", sans-serif; font-size: 11px; }
.human-selected-concept .dna-copy-lines { gap: 4px; margin-top: 7px; }
.human-selected-concept .dna-copy-lines i { height: 5px; }
.human-criteria-list { display: grid; gap: 5px; margin: 9px 0; }
.human-criteria-list span { display: flex; align-items: center; gap: 5px; color: rgba(4, 4, 6, 0.62); font-size: 7px; }
.human-criteria-list i { display: grid; width: 14px; height: 14px; place-items: center; border-radius: 50%; background: rgba(15, 184, 184, 0.11); color: #087d7d; font-size: 6px; font-style: normal; }
.human-actions { display: flex; gap: 6px; }
.human-actions span, .human-actions strong { flex: 1; border-radius: 7px; padding: 7px 5px; font-size: 7px; text-align: center; }
.human-actions span { border: 1px solid rgba(4, 4, 6, 0.1); color: rgba(4, 4, 6, 0.58); }
.human-actions strong { background: #111827; color: #fff; }

.human-choice-chip {
    position: absolute;
    z-index: 7;
    top: 12px;
    right: 10px;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 1px solid rgba(4, 4, 6, 0.1);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.98);
    padding: 8px 11px;
    box-shadow: 0 12px 28px rgba(4, 4, 6, 0.14);
}

.human-choice-chip span { color: rgba(4, 4, 6, 0.5); font-size: 8px; }
.human-choice-chip i { color: var(--sq-purple); font-size: 11px; font-style: normal; }
.human-choice-chip strong { color: var(--sq-ink); font-family: "Urbanist", sans-serif; font-size: 9px; }

.human-balance-meter {
    position: absolute;
    z-index: 7;
    right: 13px;
    bottom: 14px;
    left: 13px;
    border: 1px solid rgba(4, 4, 6, 0.1);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.98);
    padding: 10px 12px;
    box-shadow: 0 14px 32px rgba(4, 4, 6, 0.15);
}

.human-balance-meter > div { display: flex; align-items: baseline; justify-content: space-between; }
.human-balance-meter > div span { color: rgba(4, 4, 6, 0.5); font-size: 8px; }
.human-balance-meter > div strong { color: var(--sq-ink); font-family: "Urbanist", sans-serif; font-size: 10px; }
.human-balance-meter > i { position: relative; display: block; height: 7px; margin: 7px 0 5px; border-radius: 999px; background: linear-gradient(90deg, rgba(144, 18, 207, 0.16), rgba(15, 184, 184, 0.18)); }
.human-balance-meter > i b { display: block; width: 74%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--sq-purple), var(--sq-teal)); transform: scaleX(0); transform-origin: left; }
.human-balance-meter > i em { position: absolute; top: 50%; left: 74%; display: grid; width: 22px; height: 22px; place-items: center; border: 3px solid #fff; border-radius: 50%; background: var(--sq-teal); color: #fff; font-size: 8px; font-style: normal; box-shadow: 0 5px 12px rgba(4, 4, 6, 0.16); opacity: 0; transform: translate(-50%, -50%) scale(0); }
.human-balance-meter > small { color: rgba(4, 4, 6, 0.45); font-size: 7px; }
.feature-panel.is-active .human-balance-meter > i b { animation: benefitProgressIn 920ms 620ms ease forwards; }
.feature-panel.is-active .human-balance-meter > i em { animation: humanKnobIn 420ms 1250ms cubic-bezier(0.2, 1.2, 0.3, 1) forwards; }

@keyframes dnaRadarIn { to { transform: scale(1); } }
@keyframes dnaRadarPointIn { to { opacity: 1; } }
@keyframes approvalCheckIn { from { opacity: 0; transform: scale(0) rotate(-18deg); } to { opacity: 1; transform: scale(1) rotate(0); } }
@keyframes networkLineIn { to { stroke-dashoffset: 0; } }
@keyframes networkHubSpin { to { transform: rotate(360deg); } }
@keyframes humanKnobIn { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

@keyframes dnaDialIn { to { stroke-dashoffset: 4; } }
@keyframes benefitProgressIn { to { transform: scaleX(1); } }
@keyframes approvalFlowIn { to { transform: scaleY(1); } }
@keyframes approvalStampIn { from { opacity: 0; transform: rotate(-20deg) scale(0); } to { opacity: 1; transform: rotate(-8deg) scale(1); } }
@keyframes calendarOrbitSpin { to { transform: rotate(360deg); } }
@keyframes calendarPostIn { to { transform: scaleX(1); } }
@keyframes analyticsAreaIn { to { opacity: 1; } }
@keyframes analyticsLineIn { to { stroke-dashoffset: 0; } }
@keyframes analyticsPointIn { from { opacity: 0; transform: scale(0); transform-origin: center; } to { opacity: 1; transform: scale(1); transform-origin: center; } }
@keyframes multibrandDialIn { to { stroke-dashoffset: 8; } }

@keyframes benefitBarIn {
    from { transform: scaleY(0); }
    to { transform: scaleY(1); }
}

@keyframes dnaPieceIn {
    from { opacity: 0; transform: translateY(18px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes dnaProgressIn {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes featureMediaIn {
    0% {
        transform: translateY(10px) scale(0.985);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

.audience-statement {
    position: relative;
    isolation: isolate;
    display: grid;
    min-height: 0;
    place-items: center;
    overflow: hidden;
    padding: 56px 24px 32px;
    background: var(--sq-paper);
    color: var(--sq-ink);
}

.audience-statement-inner {
    position: relative;
    z-index: 2;
    width: min(1320px, 100%);
}

.audience-statement-title {
    margin: 0 auto;
    max-width: 1320px;
    font-family: "Sulphur Point", sans-serif;
    font-size: 76px;
    font-weight: 400;
    line-height: 0.98;
    letter-spacing: 0;
    text-align: center;
    text-wrap: balance;
}

.audience-rotating-word {
    display: inline-block;
    min-width: 10.5em;
    padding-bottom: 0.08em;
    background: var(--sq-gradient);
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    transition: opacity 180ms ease, transform 180ms ease;
}

.audience-rotating-word.is-changing {
    opacity: 0;
    transform: translateY(12px);
}

@media (prefers-reduced-motion: reduce) {
    .audience-rotating-word {
        transition: none;
    }
}

.role-showcase-section {
    padding: 56px 24px 80px;
    background: var(--sq-paper);
    color: #fff;
}

.role-showcase-card {
    display: grid;
    min-height: 470px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    background: #000;
    box-shadow: 0 24px 70px rgba(4, 4, 6, 0.28);
}

.role-showcase-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px;
}

.role-showcase-eyebrow {
    align-self: flex-start;
    margin-bottom: 32px;
    border: 1px solid rgba(255, 255, 255, 0.48);
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: uppercase;
}

.role-showcase-grid {
    display: grid;
    gap: 28px 34px;
}

.role-showcase-item {
    padding-left: 15px;
    border-left: 3px solid var(--sq-teal);
}

.role-showcase-item:nth-child(even) {
    border-left-color: var(--sq-magenta);
}

.role-showcase-item h3 {
    color: #fff;
    font-size: 25px;
    font-weight: 700;
    line-height: 1.05;
}

.role-showcase-item p {
    max-width: 34ch;
    margin-top: 8px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 14px;
    line-height: 1.5;
}

.role-showcase-photo {
    display: flex;
    min-height: 430px;
    align-items: flex-end;
    justify-content: center;
    margin: 0;
    overflow: visible;
    background: #000;
    padding: 16px 28px 0 0;
}

.role-showcase-photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

.review-showcase {
    overflow: hidden;
    padding: 92px 24px;
    background: #0d0d10;
    color: var(--sq-paper);
}

.review-showcase-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    text-align: center;
}

.review-showcase-heading h2 {
    max-width: 760px;
    font-size: 54px;
    line-height: 0.98;
}

.review-title-gradient,
.review-title-light {
    display: block;
    white-space: nowrap;
}

.review-title-gradient {
    padding-bottom: 0.05em;
    background: var(--sq-gradient);
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.review-title-light {
    color: var(--sq-paper);
}

.review-showcase-heading h2 + p {
    max-width: 650px;
    margin: 16px auto 0;
    color: rgba(246, 240, 229, 0.7);
    font-size: 17px;
}

.review-showcase-controls {
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    gap: 10px;
}

.review-arrow {
    display: grid;
    width: 46px;
    height: 46px;
    place-items: center;
    border: 1px solid rgba(246, 240, 229, 0.28);
    border-radius: 12px;
    color: var(--sq-paper);
    transition: border-color 180ms ease, background 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.review-arrow:hover {
    border-color: var(--sq-teal);
    background: var(--sq-teal);
    color: var(--sq-ink);
    box-shadow: 0 0 0 4px rgba(15, 184, 184, 0.16), 0 10px 22px rgba(0, 0, 0, 0.26);
    transform: translateY(-2px) scale(1.06);
}

.review-arrow:hover svg {
    transform: translateX(2px);
}

.review-arrow[data-review-direction="prev"]:hover svg {
    transform: translateX(-2px);
}

.review-arrow svg {
    width: 22px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    transition: transform 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
    :is(a, button).sq-btn-shape,
    .sq-cta,
    .pricing-card-cta,
    .pricing-mode,
    .feature-tab-btn,
    .review-arrow,
    .review-arrow svg {
        transition: none;
    }

    .feature-panel.is-active .dna-anim-piece,
    .feature-panel.is-active .dna-float-consistency > i b {
        animation: none;
        opacity: 1;
        transform: none;
    }

    .feature-panel.is-active .analytics-chart i {
        animation: none;
        transform: scaleY(1);
    }

    .feature-panel.is-active .dna-score-progress,
    .feature-panel.is-active .multibrand-sync-progress,
    .feature-panel.is-active .creation-batch-widget > i b,
    .feature-panel.is-active .approval-flow-widget em,
    .feature-panel.is-active .calendar-ui-grid > i.has-post em,
    .feature-panel.is-active .analytics-area,
    .feature-panel.is-active .analytics-rise-line,
    .feature-panel.is-active .analytics-rise-point,
    .feature-panel.is-active .dna-radar-value,
    .feature-panel.is-active .dna-tone-radar circle,
    .feature-panel.is-active .approval-final-state > i,
    .feature-panel.is-active .multibrand-capacity > i b,
    .feature-panel.is-active .network-line,
    .feature-panel.is-active .network-hub-ring,
    .feature-panel.is-active .human-balance-meter > i b,
    .feature-panel.is-active .human-balance-meter > i em,
    .calendar-channel-orbit > b {
        animation: none;
    }

    .feature-panel.is-active .dna-score-progress { stroke-dashoffset: 4; }
    .feature-panel.is-active .multibrand-sync-progress { stroke-dashoffset: 8; }
    .feature-panel.is-active .creation-batch-widget > i b,
    .feature-panel.is-active .calendar-ui-grid > i.has-post em { transform: scaleX(1); }
    .feature-panel.is-active .approval-flow-widget em { transform: scaleY(1); }
    .feature-panel.is-active .analytics-area,
    .feature-panel.is-active .analytics-rise-point { opacity: 1; }
    .feature-panel.is-active .analytics-rise-line { stroke-dashoffset: 0; }
    .feature-panel.is-active .dna-radar-value { transform: scale(1); }
    .feature-panel.is-active .dna-tone-radar circle { opacity: 1; }
    .feature-panel.is-active .multibrand-capacity > i b,
    .feature-panel.is-active .human-balance-meter > i b { transform: scaleX(1); }
    .feature-panel.is-active .network-line { stroke-dashoffset: 0; }
    .feature-panel.is-active .human-balance-meter > i em { opacity: 1; transform: translate(-50%, -50%) scale(1); }

}

.review-track {
    margin-top: 44px;
    overflow: hidden;
    padding-block: 8px 26px;
}

.review-strip {
    display: flex;
    width: max-content;
    gap: 22px;
    padding-inline: max(0px, calc((100vw - 445px) / 2));
    will-change: transform;
}

.review-card {
    display: flex;
    flex: 0 0 min(445px, calc(100vw - 48px));
    min-height: 330px;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid rgba(144, 18, 207, 0.28);
    border-radius: 12px;
    padding: 34px;
    background: var(--sq-paper);
    color: var(--sq-ink);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.26);
}

.review-stars {
    color: var(--sq-purple);
    font-size: 20px;
    letter-spacing: 2px;
}

.review-card blockquote {
    margin: 26px 0 32px;
    font-family: "Urbanist", sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.28;
}

.review-card footer {
    display: flex;
    align-items: center;
    gap: 13px;
    padding-top: 20px;
    border-top: 1px solid rgba(4, 4, 6, 0.12);
}

.review-avatar {
    display: block;
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    border: 1px solid rgba(4, 4, 6, 0.1);
}

.review-card footer div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.review-card footer strong {
    font-family: "Urbanist", sans-serif;
    font-size: 16px;
}

.review-card footer div span {
    color: rgba(4, 4, 6, 0.58);
    font-size: 13px;
}

.review-dots {
    display: flex;
    justify-content: center;
    gap: 9px;
    margin-top: 8px;
}

.review-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: rgba(246, 240, 229, 0.28);
    transition: width 160ms ease, border-radius 160ms ease, background 160ms ease;
}

.review-dot.is-active {
    width: 30px;
    border-radius: 8px;
    background: var(--sq-gradient);
}

.footer-logo-mark {
    filter: brightness(0) invert(1);
}

.showcase-reels {
    display: grid;
    gap: 0;
    overflow: hidden;
    padding: 0;
}

.showcase-reel-row {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: var(--sq-paper);
}

.showcase-reel-row-1,
.showcase-reel-row-3 {
    aspect-ratio: 2050 / 250;
}

.showcase-reel-row-3 {
    z-index: 1;
    margin-top: -2px;
}

.showcase-reel-row-2 {
    aspect-ratio: 2050 / 500;
}

.showcase-reel-video {
    position: absolute;
    inset: -1px 0;
    display: block;
    width: 100%;
    height: calc(100% + 2px);
    object-fit: cover;
}

@media (min-width: 768px) {
    .role-showcase-card {
        grid-template-columns: minmax(0, 1.45fr) minmax(340px, 0.85fr);
    }

    .role-showcase-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .feature-panel {
        padding: 44px;
    }

    .feature-panel-grid {
        grid-template-columns: 1.05fr 0.95fr;
    }

    .feature-media-asset {
        height: 380px;
    }

}

@media (max-width: 767px) {
    .showcase-reels {
        gap: 0;
        padding: 0;
    }

    .review-showcase {
        padding: 70px 20px;
    }

    .review-showcase-heading {
        align-items: flex-start;
    }

    .review-showcase-heading h2 {
        font-size: 34px;
    }

    .review-showcase-controls {
        display: none;
    }

    .review-track {
        margin-inline: -20px;
    }

    .review-strip {
        gap: 14px;
        padding-inline: 27px;
    }

    .review-card {
        flex-basis: calc(100vw - 54px);
        min-height: 350px;
        padding: 28px;
    }

    .review-card blockquote {
        font-size: 22px;
    }

    .role-showcase-section {
        padding: 56px 20px;
    }

    .role-showcase-copy {
        padding: 32px 26px;
    }

    .role-showcase-eyebrow {
        margin-bottom: 26px;
    }

    .role-showcase-grid {
        gap: 22px;
    }

    .role-showcase-photo {
        min-height: 390px;
        margin: 0;
        order: -1;
        padding: 18px 12px 0;
    }

    .audience-statement {
        min-height: 0;
        padding: 44px 20px 24px;
    }

    .audience-statement-title {
        font-size: 44px;
        line-height: 0.98;
    }

    .audience-rotating-word {
        min-width: 0;
        max-width: 100%;
    }

    .feature-tabs {
        display: flex;
        overflow-x: auto;
        overscroll-behavior-inline: contain;
        scrollbar-width: none;
    }

    .feature-tabs::-webkit-scrollbar {
        display: none;
    }

    .feature-tab-btn {
        flex: 0 0 132px;
        width: auto;
        text-align: center;
    }

    .feature-media-asset {
        height: 240px;
    }

    .feature-panel {
        padding: 26px 20px;
    }

    .brand-dna-visual {
        min-height: 390px;
    }

    .dna-ui-window {
        inset: 24px 10px 68px;
    }

    .dna-ui-topbar {
        min-height: 52px;
        padding-inline: 10px;
    }

    .dna-ui-status {
        display: none;
    }

    .dna-ui-body {
        grid-template-columns: 1fr;
    }

    .dna-ui-sidebar {
        display: none;
    }

    .dna-ui-workspace {
        padding: 9px;
    }

    .dna-ui-grid {
        gap: 6px;
    }

    .dna-ui-card {
        padding: 8px;
    }

    .dna-tone-tags i:nth-child(3) {
        display: none;
    }

    .dna-float-consistency {
        top: 10px;
        right: 8px;
        width: 108px;
    }

    .dna-float-rules {
        right: 8px;
        bottom: 10px;
        width: 130px;
    }

    .dna-float-ready {
        left: 8px;
        bottom: 10px;
    }

    .benefit-ui-visual {
        min-height: 420px;
    }

    .benefit-ui-window {
        inset: 24px 10px 70px;
    }

    .benefit-ui-header {
        min-height: 50px;
        padding-inline: 10px;
    }

    .benefit-ui-header > small {
        display: none;
    }

    .benefit-float-top-right {
        top: 9px;
        right: 8px;
    }

    .benefit-float-bottom-left {
        bottom: 9px;
        left: 8px;
    }

    .benefit-float-bottom-right {
        right: 8px;
        bottom: 9px;
    }

    .benefit-float-card {
        min-width: 104px;
        padding: 9px 10px;
    }

    .benefit-float-card > strong {
        font-size: 16px;
    }

    .creation-ui-controls,
    .creation-ui-results {
        padding: 8px;
    }

    .creation-art {
        height: 82px;
    }

    .approval-preview {
        padding: 9px;
    }

    .approval-art {
        height: 158px;
    }

    .approval-comments {
        padding: 9px 7px;
    }

    .approval-comments article {
        grid-template-columns: 21px minmax(0, 1fr) 11px;
        padding: 6px 5px;
    }

    .approval-comments article > i {
        width: 20px;
        height: 20px;
    }

    .calendar-ui-grid > i {
        height: 39px;
    }

    .analytics-kpis {
        gap: 5px;
        padding-inline: 8px;
    }

    .analytics-kpis article {
        padding: 7px 5px;
    }

    .analytics-chart-card {
        margin-inline: 8px;
    }

    .multibrand-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px;
        padding: 6px 8px 9px;
    }

    .multibrand-cover {
        height: 53px;
        margin-bottom: 5px;
    }

    .multibrand-grid article > em {
        position: absolute;
        right: 6px;
        bottom: 6px;
        margin: 0;
    }

    .dna-score-dial {
        top: 8px;
        right: 8px;
        width: 90px;
        height: 90px;
    }

    .dna-tone-cloud {
        bottom: 11px;
        left: 7px;
        scale: 0.9;
        transform-origin: bottom left;
    }

    .dna-sync-status {
        right: 8px;
        bottom: 10px;
    }

    .creation-batch-widget {
        top: 9px;
        right: 7px;
        width: 152px;
    }

    .creation-format-fan {
        bottom: 10px;
        left: 7px;
        scale: 0.86;
        transform-origin: bottom left;
    }

    .creation-speed-chip {
        right: 8px;
        bottom: 11px;
    }

    .approval-comment-bubble {
        top: 14px;
        left: 7px;
        width: 170px;
    }

    .approval-flow-widget {
        top: 122px;
        right: 5px;
    }

    .approval-stamp {
        right: 9px;
        bottom: 10px;
        width: 98px;
        height: 64px;
    }

    .calendar-schedule-ticket {
        top: 9px;
        right: 7px;
        width: 152px;
    }

    .calendar-channel-orbit {
        bottom: 9px;
        left: 7px;
        scale: 0.88;
        transform-origin: bottom left;
    }

    .calendar-month-total {
        right: 8px;
        bottom: 10px;
    }

    .analytics-reach-pill {
        top: 9px;
        left: 8px;
    }

    .analytics-rise-card {
        right: 6px;
        bottom: 72px;
        width: 190px;
        height: 128px;
    }

    .analytics-rise-card svg {
        height: 82px;
    }

    .analytics-report-chip {
        bottom: 10px;
        left: 8px;
    }

    .multibrand-sync-dial {
        top: 7px;
        right: 8px;
        width: 80px;
        height: 80px;
    }

    .multibrand-card-stack {
        bottom: 9px;
        left: 7px;
        scale: 0.86;
        transform-origin: bottom left;
    }

    .multibrand-control-chip {
        right: 8px;
        bottom: 10px;
    }

    .dna-tone-radar {
        bottom: 8px;
        left: 6px;
        width: 158px;
        height: 112px;
    }

    .dna-sync-status {
        top: 106px;
        right: 7px;
        bottom: auto;
    }

    .approval-final-state {
        right: 7px;
        bottom: 9px;
        width: 192px;
    }

    .multibrand-capacity {
        top: 8px;
        right: 7px;
        width: 172px;
    }

    .multibrand-network {
        bottom: 4px;
        left: 4px;
        width: 154px;
        height: 104px;
    }

    .network-hub {
        top: 29px;
        left: 53px;
        width: 42px;
        height: 42px;
    }

    .network-node {
        width: 29px;
        height: 29px;
    }

    .multibrand-control-chip {
        right: 7px;
        bottom: 88px;
    }

    .human-ui-body {
        grid-template-columns: 44% 56%;
    }

    .human-drafts,
    .human-decision-panel {
        padding: 8px 6px;
    }

    .human-drafts article {
        grid-template-columns: 22px minmax(0, 1fr) 11px;
        gap: 5px;
        padding: 6px 5px;
    }

    .human-drafts article > i {
        width: 21px;
        height: 21px;
    }

    .human-drafts article small {
        display: none;
    }

    .human-choice-chip {
        top: 9px;
        right: 7px;
    }

    .human-balance-meter {
        right: 7px;
        bottom: 9px;
        left: 7px;
    }
}

/* Resources navigation */
.main-nav {
    gap: 5px;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 9px;
}

.header-login,
.header-cta {
    display: inline-flex;
    min-height: 42px;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
}

.header-login {
    padding-inline: 19px;
}

.header-cta {
    padding-inline: 23px;
}

.main-nav-link {
    position: relative;
    padding: 10px 9px;
    transition: color 180ms ease;
}

.main-nav-link::after,
.resource-menu-trigger::after {
    content: "";
    position: absolute;
    right: 9px;
    bottom: 5px;
    left: 9px;
    height: 2px;
    border-radius: 2px;
    background: var(--sq-gradient);
    opacity: 0;
    transform: scaleX(0.35);
    transition: opacity 180ms ease, transform 180ms ease;
}

.main-nav-link:hover,
.main-nav-link:focus-visible {
    color: var(--sq-ink);
}

.main-nav-link:hover::after,
.main-nav-link:focus-visible::after,
.resource-menu-trigger:hover::after,
.resource-menu-trigger:focus-visible::after,
.resource-menu.is-open .resource-menu-trigger::after,
.resource-menu.is-current .resource-menu-trigger::after {
    opacity: 1;
    transform: scaleX(1);
}

.resource-menu {
    position: relative;
}

.resource-menu-trigger {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 9px;
    color: inherit;
    transition: color 180ms ease;
}

.resource-menu-trigger:hover,
.resource-menu.is-open .resource-menu-trigger,
.resource-menu.is-current .resource-menu-trigger {
    color: var(--sq-ink);
}

.resource-menu-chevron {
    width: 7px;
    height: 7px;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 180ms ease;
}

.resource-menu.is-open .resource-menu-chevron {
    transform: translateY(2px) rotate(225deg);
}

.resource-menu-panel {
    position: absolute;
    top: calc(100% + 12px);
    right: -110px;
    width: 390px;
    padding: 12px;
    border: 1px solid rgba(4, 4, 6, 0.12);
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(4, 4, 6, 0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 180ms ease, transform 180ms ease, visibility 180ms ease;
}

.resource-menu-panel::before {
    content: "";
    position: absolute;
    inset: -14px 0 auto;
    height: 14px;
}

.resource-menu.is-open .resource-menu-panel,
.resource-menu:focus-within .resource-menu-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.resource-menu-eyebrow {
    padding: 8px 10px 10px;
    color: rgba(4, 4, 6, 0.46);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.resource-menu-link {
    display: grid;
    grid-template-columns: 38px 1fr auto;
    gap: 12px;
    align-items: center;
    min-height: 72px;
    padding: 10px;
    border-radius: 6px;
    color: var(--sq-ink);
    transition: background 160ms ease, transform 160ms ease;
}

.resource-menu-link:hover,
.resource-menu-link.is-active {
    background: var(--sq-paper);
    transform: translateX(2px);
}

.resource-menu-mark {
    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 50%;
    background: var(--sq-gradient);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.resource-menu-link strong,
.resource-menu-link small {
    display: block;
}

.resource-menu-link strong {
    font-family: "Urbanist", sans-serif;
    font-size: 16px;
}

.resource-menu-link small {
    margin-top: 2px;
    color: rgba(4, 4, 6, 0.56);
    font-size: 12px;
}

.resource-menu-arrow {
    color: var(--sq-purple);
    font-size: 18px;
}

.mobile-resource-label {
    margin-top: 6px;
    color: rgba(4, 4, 6, 0.42);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.mobile-resource-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-left: 4px;
}

.mobile-resource-link span {
    color: var(--sq-purple);
    font-size: 11px;
    font-weight: 700;
}

.mobile-resource-link.is-active {
    color: var(--sq-purple);
    font-weight: 700;
}

/* Shared resource pages */
.resource-page {
    background: var(--sq-paper);
    color: var(--sq-ink);
}

.resource-kicker {
    color: rgba(246, 240, 229, 0.62);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.resource-kicker-dark {
    color: rgba(4, 4, 6, 0.48);
}

.resource-title {
    max-width: 820px;
    font-family: "Sulphur Point", sans-serif;
    font-size: clamp(64px, 10vw, 138px);
    font-weight: 400;
    line-height: 0.82;
    letter-spacing: 0;
}

.resource-title span {
    background: linear-gradient(90deg, var(--sq-magenta), var(--sq-amber));
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.resource-intro {
    font-size: 20px;
    line-height: 1.55;
}

.resource-section-heading {
    display: grid;
    gap: 24px;
    align-items: end;
    grid-template-columns: minmax(0, 1.2fr) minmax(260px, 0.8fr);
}

.resource-section-heading h2 {
    margin-top: 12px;
    font-size: clamp(44px, 5vw, 72px);
    line-height: 0.95;
}

.resource-section-heading > p {
    max-width: 480px;
    color: rgba(4, 4, 6, 0.62);
    font-size: 17px;
    line-height: 1.6;
}

.resource-text-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.resource-cta-band {
    border-top: 1px solid rgba(246, 240, 229, 0.12);
    background: #0d0d10;
    color: var(--sq-paper);
}

.resource-cta-band h2 {
    max-width: 780px;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1;
}

/* Blog */
.resource-hero-blog {
    position: relative;
    overflow: hidden;
    background: #0d0d10;
    color: var(--sq-paper);
}

.resource-orbit {
    position: absolute;
    border: 1px solid rgba(15, 184, 184, 0.28);
    border-radius: 50%;
    pointer-events: none;
}

.resource-orbit-one {
    top: -320px;
    right: -130px;
    width: 700px;
    height: 700px;
}

.resource-orbit-two {
    right: 120px;
    bottom: -380px;
    width: 620px;
    height: 620px;
    border-color: rgba(243, 28, 129, 0.24);
}

.resource-topic-row {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 30px;
}

.resource-topic-row span {
    padding: 8px 12px;
    border: 1px solid rgba(246, 240, 229, 0.24);
    border-radius: 999px;
    color: rgba(246, 240, 229, 0.72);
    font-size: 12px;
}

.resource-band-light {
    background: #fff;
}

.resource-band-paper {
    background: var(--sq-paper);
}

.blog-feature {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(340px, 0.8fr);
    gap: 56px;
    align-items: center;
    color: var(--sq-ink);
}

.blog-feature-media,
.blog-card-media {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
}

.blog-feature-media {
    aspect-ratio: 16 / 10;
    background: var(--sq-purple);
}

.blog-feature-media img,
.blog-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.blog-feature:hover img,
.blog-card:hover img {
    transform: scale(1.035);
}

.blog-image-stamp {
    position: absolute;
    right: 18px;
    bottom: 18px;
    padding: 9px 12px;
    border-radius: 6px;
    background: var(--sq-amber);
    font-size: 11px;
    font-weight: 700;
}

.blog-meta {
    color: rgba(4, 4, 6, 0.5);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.blog-feature-copy h2 {
    margin-top: 18px;
    font-size: clamp(38px, 4vw, 60px);
    line-height: 0.98;
}

.blog-feature-copy > p:not(.resource-kicker, .blog-meta) {
    margin: 24px 0;
    color: rgba(4, 4, 6, 0.66);
    font-size: 17px;
    line-height: 1.6;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 26px;
}

.blog-card {
    color: var(--sq-ink);
}

.blog-card-media {
    aspect-ratio: 4 / 3;
    background: #ddd;
}

.blog-card-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: currentColor;
    opacity: 0.1;
    mix-blend-mode: multiply;
}

.blog-card-magenta { color: var(--sq-magenta); }
.blog-card-teal { color: var(--sq-teal); }
.blog-card-amber { color: var(--sq-amber); }

.blog-card-media span {
    position: absolute;
    z-index: 1;
    top: 14px;
    left: 14px;
    display: grid;
    width: 42px;
    height: 42px;
    place-items: center;
    border-radius: 50%;
    background: var(--sq-ink);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.blog-card-copy {
    padding-top: 24px;
    color: var(--sq-ink);
}

.blog-card-copy h3 {
    margin-top: 12px;
    font-size: 28px;
    line-height: 1.08;
}

.blog-card-copy > p:not(.blog-meta) {
    min-height: 78px;
    margin: 16px 0 22px;
    color: rgba(4, 4, 6, 0.62);
    line-height: 1.55;
}

.article-library {
    background: #fff;
}

.long-read {
    scroll-margin-top: 86px;
    padding: 110px max(24px, calc((100vw - 1280px) / 2));
    border-top: 1px solid rgba(4, 4, 6, 0.1);
}

.long-read-dark {
    background: #0d0d10;
    color: var(--sq-paper);
}

.long-read-header {
    display: grid;
    grid-template-columns: 100px minmax(0, 850px);
    gap: 24px;
}

.long-read-header > span {
    color: var(--sq-purple);
    font-family: "Sulphur Point", sans-serif;
    font-size: 64px;
}

.long-read-header h2 {
    margin-top: 14px;
    font-size: clamp(46px, 6vw, 76px);
    line-height: 0.98;
}

.long-read-header div > p:last-child {
    max-width: 720px;
    margin-top: 24px;
    color: rgba(4, 4, 6, 0.62);
    font-size: 20px;
    line-height: 1.55;
}

.long-read-dark .blog-meta,
.long-read-dark .long-read-header div > p:last-child {
    color: rgba(246, 240, 229, 0.62);
}

.long-read-visual {
    max-width: 1050px;
    margin: 64px auto 0;
}

.long-read-visual img {
    display: block;
    width: 100%;
    height: clamp(360px, 45vw, 590px);
    border-radius: 8px;
    object-fit: cover;
}

.long-read-visual-contain img {
    padding: clamp(24px, 5vw, 70px);
    background: var(--sq-paper);
    object-fit: contain;
}

.long-read-visual figcaption {
    margin-top: 12px;
    color: rgba(4, 4, 6, 0.5);
    font-size: 12px;
    line-height: 1.5;
}

.long-read-dark .long-read-visual figcaption {
    color: rgba(246, 240, 229, 0.5);
}

.long-read-body {
    display: grid;
    grid-template-columns: 230px minmax(0, 720px);
    gap: 70px;
    margin-top: 70px;
    margin-left: 124px;
}

.long-read-aside {
    align-self: start;
    padding-top: 18px;
    border-top: 3px solid var(--sq-teal);
}

.long-read-aside strong {
    font-family: "Urbanist", sans-serif;
    font-size: 18px;
}

.long-read-aside p {
    margin-top: 12px;
    color: rgba(4, 4, 6, 0.6);
    line-height: 1.65;
}

.long-read-dark .long-read-aside p {
    color: rgba(246, 240, 229, 0.62);
}

.long-read-content {
    font-size: 18px;
    line-height: 1.75;
}

.long-read-content h3 {
    margin: 46px 0 14px;
    font-size: 30px;
    line-height: 1.15;
}

.long-read-content blockquote {
    margin: 48px 0;
    padding-left: 26px;
    border-left: 5px solid var(--sq-magenta);
    font-family: "Urbanist", sans-serif;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.35;
}

/* Casos de éxito */
.work-hero {
    position: relative;
    overflow: hidden;
    background: #0d0d10;
    color: var(--sq-paper);
}

.work-hero-grid {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(246, 240, 229, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(246, 240, 229, 0.05) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: linear-gradient(to bottom, #000, transparent 85%);
}

.work-hero-bottom {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-top: 56px;
    padding-top: 22px;
    border-top: 1px solid rgba(246, 240, 229, 0.18);
}

.work-hero-bottom p {
    max-width: 650px;
    color: rgba(246, 240, 229, 0.72);
    font-size: 18px;
    line-height: 1.55;
}

.work-hero-bottom span {
    color: rgba(246, 240, 229, 0.46);
    font-size: 12px;
    text-transform: uppercase;
}

.work-manifesto h2 {
    max-width: 970px;
    font-size: clamp(38px, 5vw, 68px);
    line-height: 1;
}

.work-manifesto em {
    color: var(--sq-purple);
    font-style: normal;
}

.work-gallery {
    padding: 0 24px 80px;
    background: var(--sq-paper);
}

.work-case {
    --case-accent: var(--sq-teal);
    display: grid;
    grid-template-columns: minmax(340px, 0.88fr) minmax(420px, 1.12fr);
    width: min(1240px, 100%);
    height: 600px;
    margin: 0 auto 24px;
    overflow: hidden;
    border: 1px solid rgba(4, 4, 6, 0.1);
    border-radius: 8px;
    background: #fff;
}

.work-case:nth-child(even) {
    grid-template-columns: minmax(420px, 1.12fr) minmax(340px, 0.88fr);
}

.work-case:nth-child(even) .work-case-media { order: 2; }
.work-case-pink { --case-accent: #F31C81; }
.work-case-purple { --case-accent: #9012CF; }
.work-case-magenta { --case-accent: #F31C81; }
.work-case-blue { --case-accent: #1C73E7; }
.work-case-green { --case-accent: #0FB8B8; }

.work-case-media {
    position: relative;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    background: var(--case-accent);
}

.work-case-media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(150deg, transparent 50%, var(--case-accent));
    opacity: 0.3;
}

.work-case-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.work-case-pink .work-case-media img,
.work-case-blue .work-case-media img {
    filter: saturate(0.75) contrast(1.05);
}

.work-case-number,
.work-case-sector {
    position: absolute;
    z-index: 1;
    top: 22px;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.work-case-number { left: 22px; }
.work-case-sector { right: 22px; }

.work-case-copy {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(38px, 4.5vw, 64px);
    border-top: 6px solid var(--case-accent);
}

.work-brand {
    color: var(--case-accent);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.work-case-copy h2 {
    margin-top: 20px;
    font-size: clamp(36px, 4vw, 52px);
    line-height: 0.98;
}

.work-story {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 30px;
}

.work-story p {
    color: rgba(4, 4, 6, 0.62);
    font-size: 14px;
    line-height: 1.58;
}

.work-story strong {
    display: block;
    margin-bottom: 8px;
    color: var(--sq-ink);
    font-family: "Urbanist", sans-serif;
    font-size: 12px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.work-metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
    margin-top: 34px;
    padding-top: 22px;
    border-top: 1px solid rgba(4, 4, 6, 0.14);
}

.work-metrics dt {
    font-family: "Sulphur Point", sans-serif;
    font-size: 36px;
    line-height: 1;
}

.work-metrics dd {
    margin-top: 6px;
    color: rgba(4, 4, 6, 0.52);
    font-size: 12px;
    text-transform: uppercase;
}

.work-principles {
    background: #0d0d10;
    color: var(--sq-paper);
}

.work-principle-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid rgba(246, 240, 229, 0.18);
}

.work-principle-grid > div {
    padding: 38px 34px 20px 0;
    border-right: 1px solid rgba(246, 240, 229, 0.18);
}

.work-principle-grid > div + div { padding-left: 34px; }
.work-principle-grid > div:last-child { border-right: 0; }
.work-principle-grid span { color: var(--sq-teal); font-size: 12px; font-weight: 700; }
.work-principle-grid h3 { margin-top: 24px; font-size: 30px; }
.work-principle-grid p { margin-top: 12px; color: rgba(246, 240, 229, 0.62); line-height: 1.55; }

/* Help Center */
.help-hero {
    position: relative;
    overflow: hidden;
    background: #0d0d10;
    color: var(--sq-paper);
}

.help-signal {
    position: absolute;
    width: 460px;
    height: 460px;
    border: 70px solid var(--sq-purple);
    border-radius: 50%;
    opacity: 0.22;
}

.help-signal-one { top: -300px; left: -170px; }
.help-signal-two { right: -250px; bottom: -350px; border-color: var(--sq-teal); }

.help-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 760px;
    margin: 42px auto 0;
    border: 1px solid rgba(246, 240, 229, 0.25);
    border-radius: 8px;
    background: #fff;
    box-shadow: none;
}

.help-title span {
    background: linear-gradient(90deg, #C626DF 0%, #22D8D2 100%);
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.help-search-icon {
    width: 18px;
    height: 18px;
    margin-left: 22px;
    border: 2px solid var(--sq-ink);
    border-radius: 50%;
}

.help-search-icon::after {
    content: "";
    display: block;
    width: 8px;
    border-top: 2px solid var(--sq-ink);
    transform: translate(12px, 14px) rotate(45deg);
}

.help-search-wrap input {
    min-width: 0;
    flex: 1;
    padding: 22px 20px;
    background: transparent;
    color: var(--sq-ink);
    font-size: 17px;
    outline: 0;
}

.help-search-wrap kbd {
    margin-right: 16px;
    padding: 5px 8px;
    border: 1px solid rgba(4, 4, 6, 0.15);
    border-radius: 5px;
    color: rgba(4, 4, 6, 0.52);
    font-size: 11px;
}

.help-popular {
    margin-top: 28px;
    color: rgba(246, 240, 229, 0.5);
    font-size: 13px;
}

.help-popular button {
    margin-left: 10px;
    border-bottom: 1px solid rgba(246, 240, 229, 0.4);
    color: rgba(246, 240, 229, 0.82);
}

.help-quick { border-block: 1px solid rgba(15, 184, 184, 0.22); background: var(--sq-paper); }
.help-quick-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(4, 4, 6, 0.2); }
.help-quick-grid a { display: flex; gap: 18px; padding: 28px 22px 12px 0; border-right: 1px solid rgba(4, 4, 6, 0.2); color: var(--sq-ink); }
.help-quick-grid a + a { padding-left: 22px; }
.help-quick-grid a:last-child { border-right: 0; }
.help-quick-grid > a > span { color: var(--sq-purple); font-size: 30px; line-height: 1; }
.help-quick-grid strong, .help-quick-grid small { display: block; }
.help-quick-grid strong { font-family: "Urbanist", sans-serif; font-size: 20px; }
.help-quick-grid small { margin-top: 6px; color: rgba(4, 4, 6, 0.62); font-size: 13px; }

.help-categories { background: var(--sq-paper); }
.help-category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: rgba(4, 4, 6, 0.14); border: 1px solid rgba(4, 4, 6, 0.14); }
.help-category { --help-icon-color: var(--sq-purple); min-height: 320px; padding: 30px; background: var(--sq-paper); color: var(--sq-ink); transition: background 180ms ease, color 180ms ease; }
.help-category:nth-child(2) { --help-icon-color: var(--sq-teal); }
.help-category:nth-child(3) { --help-icon-color: var(--sq-magenta); }
.help-category:nth-child(4) { --help-icon-color: var(--sq-blue); }
.help-category:nth-child(5) { --help-icon-color: var(--sq-purple); }
.help-category:nth-child(6) { --help-icon-color: var(--sq-teal); }
.help-category:hover { background: var(--sq-ink); color: var(--sq-paper); }
.help-category-top { display: flex; min-height: 64px; align-items: flex-start; justify-content: space-between; }
.help-category-top > span:first-child { color: var(--help-icon-color); font-size: 12px; font-weight: 700; }
.help-category-icon { display: grid; width: 58px; height: 58px; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--help-icon-color) 13%, transparent); color: var(--help-icon-color); transition: background 180ms ease, color 180ms ease, transform 180ms ease; }
.help-category-icon svg { width: 33px; height: 33px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.65; }
.help-category:hover .help-category-icon { background: var(--help-icon-color); color: #fff; transform: rotate(-4deg) scale(1.05); }
.help-category h3 { margin-top: 22px; font-size: 28px; }
.help-category p { min-height: 54px; margin-top: 12px; color: rgba(4, 4, 6, 0.58); line-height: 1.5; }
.help-category:hover p { color: rgba(246, 240, 229, 0.62); }
.help-category strong { display: flex; justify-content: space-between; margin-top: 28px; font-size: 13px; }
.help-category[hidden], .help-accordion details[hidden] { display: none; }
.help-empty { margin-top: 36px; padding: 24px; border-left: 4px solid var(--sq-magenta); background: #fff; }

.help-articles { background: #0d0d10; color: var(--sq-paper); }
.help-accordion details { border-top: 1px solid rgba(246, 240, 229, 0.2); }
.help-accordion details:last-child { border-bottom: 1px solid rgba(246, 240, 229, 0.2); }
.help-accordion summary { display: grid; grid-template-columns: 36px 1fr auto; gap: 18px; align-items: center; padding: 25px 0; cursor: pointer; list-style: none; }
.help-accordion summary::-webkit-details-marker { display: none; }
.help-accordion summary > span { color: var(--sq-teal); font-size: 11px; font-weight: 700; }
.help-accordion summary small, .help-accordion summary strong { display: block; }
.help-accordion summary small { margin-bottom: 5px; color: rgba(246, 240, 229, 0.46); font-size: 11px; text-transform: uppercase; }
.help-accordion summary strong { font-family: "Urbanist", sans-serif; font-size: 20px; }
.help-accordion summary > b { font-size: 28px; font-weight: 400; transition: transform 180ms ease; }
.help-accordion details[open] summary > b { transform: rotate(45deg); }
.help-answer { padding: 0 50px 28px 54px; }
.help-answer p { max-width: 700px; color: rgba(246, 240, 229, 0.7); line-height: 1.65; }
.help-answer a { display: inline-block; margin-top: 18px; color: var(--sq-teal); font-size: 13px; font-weight: 700; }
.help-contact { background: var(--sq-teal); }
.help-contact h2 { margin-top: 12px; font-size: clamp(38px, 5vw, 64px); line-height: 1; }
.help-contact p:not(.resource-kicker) { margin-top: 14px; color: rgba(4, 4, 6, 0.64); }

@media (max-width: 1023px) {
    .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .blog-card:last-child { grid-column: 1 / -1; max-width: calc(50% - 13px); }
    .work-case,
    .work-case:nth-child(even) { height: auto; grid-template-columns: 1fr; }
    .work-case:nth-child(even) .work-case-media { order: 0; }
    .work-case-media { min-height: min(64vw, 500px); }
    .work-case-copy { min-height: 0; }
    .help-category-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .resource-title { font-size: 68px; }
    .resource-section-heading, .blog-feature, .long-read-header, .long-read-body { grid-template-columns: 1fr; }
    .resource-section-heading > p { font-size: 16px; }
    .blog-feature { gap: 30px; }
    .blog-grid { grid-template-columns: 1fr; }
    .blog-card:last-child { grid-column: auto; max-width: none; }
    .blog-card-copy > p:not(.blog-meta) { min-height: 0; }
    .long-read { padding-block: 74px; }
    .long-read-header { gap: 12px; }
    .long-read-header > span { font-size: 42px; }
    .long-read-visual { margin-top: 42px; }
    .long-read-visual img { height: 68vw; min-height: 260px; }
    .long-read-body { gap: 38px; margin: 48px 0 0; }
    .long-read-content { font-size: 17px; }
    .long-read-content blockquote { font-size: 23px; }
    .work-hero-bottom { flex-direction: column; }
    .work-case { min-height: 0; }
    .work-gallery { padding-inline: 14px; padding-bottom: 56px; }
    .work-case-media { min-height: min(82vw, 390px); }
    .work-case-copy { min-height: 0; padding: 40px 24px; }
    .work-story { grid-template-columns: 1fr; gap: 18px; }
    .work-metrics dt { font-size: 34px; }
    .work-principle-grid, .help-quick-grid, .help-category-grid { grid-template-columns: 1fr; }
    .work-principle-grid > div, .work-principle-grid > div + div { padding: 30px 0; border-right: 0; border-bottom: 1px solid rgba(246, 240, 229, 0.18); }
    .help-search-wrap { box-shadow: none; }
    .help-search-wrap input { padding: 18px 14px; font-size: 15px; }
    .help-search-wrap kbd { display: none; }
    .help-popular { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
    .help-popular button { margin-left: 0; }
    .help-quick-grid a, .help-quick-grid a + a { padding: 22px 0; border-right: 0; border-bottom: 1px solid rgba(4, 4, 6, 0.2); }
    .help-category { min-height: 250px; }
    .help-accordion summary { grid-template-columns: 26px 1fr auto; gap: 10px; }
    .help-accordion summary strong { font-size: 17px; }
    .help-answer { padding-left: 36px; padding-right: 24px; }
}

/* Privacy policy */
.footer-privacy-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid rgba(246, 240, 229, 0.24);
    border-radius: 4px;
    color: var(--sq-paper);
    font-weight: 600;
    transition: border-color 160ms ease, background 160ms ease;
}

.footer-privacy-link:hover {
    border-color: var(--sq-teal);
    background: rgba(15, 184, 184, 0.1);
}

.privacy-page {
    background: var(--sq-paper);
    color: var(--sq-ink);
}

.privacy-page a {
    text-underline-offset: 4px;
}

.privacy-hero {
    position: relative;
    overflow: hidden;
    background: #0d0d10;
    color: var(--sq-paper);
}

.privacy-hero-grid {
    position: absolute;
    inset: 0;
    opacity: 0.16;
    background-image: linear-gradient(rgba(246, 240, 229, 0.18) 1px, transparent 1px), linear-gradient(90deg, rgba(246, 240, 229, 0.18) 1px, transparent 1px);
    background-size: 88px 88px;
    mask-image: linear-gradient(90deg, transparent, #000 55%);
    pointer-events: none;
}

.privacy-hero > div:last-child {
    position: relative;
}

.privacy-hero-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    color: rgba(246, 240, 229, 0.5);
    font-size: 12px;
    text-transform: uppercase;
}

.privacy-hero h1 {
    max-width: 1050px;
    margin-top: 62px;
    font-family: "Sulphur Point", sans-serif;
    font-size: clamp(68px, 11vw, 152px);
    font-weight: 400;
    line-height: 0.78;
    letter-spacing: 0;
}

.privacy-hero h1 span {
    background: linear-gradient(90deg, var(--sq-magenta), var(--sq-purple) 42%, var(--sq-teal));
    background-clip: text;
    color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.terms-page .privacy-hero h1 {
    font-size: clamp(2.5rem, 7vw, 6rem);
    line-height: 1;
    overflow-wrap: anywhere;
}

.privacy-hero-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px;
    align-items: end;
    margin-top: 64px;
    padding-top: 28px;
    border-top: 1px solid rgba(246, 240, 229, 0.18);
}

.privacy-hero-intro p {
    max-width: 680px;
    color: rgba(246, 240, 229, 0.72);
    font-size: 19px;
    line-height: 1.6;
}

.privacy-scroll-link {
    display: inline-flex;
    gap: 14px;
    align-items: center;
    color: var(--sq-teal);
    font-size: 13px;
    font-weight: 700;
}

.privacy-draft-wrap {
    padding: 0 24px;
    background: var(--sq-amber);
}

.privacy-draft-note {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: 42px;
    align-items: center;
    padding: 20px 0;
}

.privacy-draft-note span {
    font-family: "Urbanist", sans-serif;
    font-weight: 700;
}

.privacy-draft-note p {
    color: rgba(4, 4, 6, 0.68);
    font-size: 13px;
    line-height: 1.5;
}

.privacy-summary {
    border-bottom: 1px solid rgba(4, 4, 6, 0.16);
    background: #fff;
}

.privacy-summary-heading {
    display: grid;
    grid-template-columns: 0.62fr 1.25fr 0.8fr;
    gap: 38px;
    align-items: end;
}

.privacy-summary-heading h2 {
    font-size: clamp(40px, 5vw, 66px);
    line-height: 0.96;
}

.privacy-summary-heading > p:last-child {
    color: rgba(4, 4, 6, 0.56);
    line-height: 1.6;
}

.privacy-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-top: 54px;
    border: 1px solid rgba(4, 4, 6, 0.16);
}

.privacy-summary-grid article {
    min-height: 250px;
    padding: 26px;
    border-right: 1px solid rgba(4, 4, 6, 0.16);
}

.privacy-summary-grid article:last-child {
    border-right: 0;
}

.privacy-summary-grid span {
    color: var(--sq-purple);
    font-size: 11px;
    font-weight: 700;
}

.privacy-summary-grid h3 {
    margin-top: 54px;
    font-size: 22px;
    line-height: 1.12;
}

.privacy-summary-grid p {
    margin-top: 14px;
    color: rgba(4, 4, 6, 0.58);
    font-size: 14px;
    line-height: 1.55;
}

.privacy-document {
    display: grid;
    grid-template-columns: 250px minmax(0, 820px);
    gap: clamp(60px, 9vw, 140px);
    align-items: start;
}

.privacy-toc {
    position: sticky;
    top: 100px;
}

.privacy-toc > p {
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(4, 4, 6, 0.18);
    color: rgba(4, 4, 6, 0.42);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.privacy-toc nav {
    display: grid;
    margin-top: 12px;
}

.privacy-toc nav a {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 7px;
    padding: 7px 0;
    color: rgba(4, 4, 6, 0.62);
    font-size: 12px;
    transition: color 140ms ease;
}

.privacy-toc nav a:hover {
    color: var(--sq-purple);
}

.privacy-toc nav span {
    color: var(--sq-teal);
    font-size: 10px;
    font-weight: 700;
}

.privacy-contact-shortcut {
    display: flex;
    justify-content: space-between;
    margin-top: 24px;
    padding: 13px 14px;
    border-radius: 4px;
    background: var(--sq-ink);
    color: var(--sq-paper);
    font-size: 12px;
    font-weight: 700;
}

.privacy-introduction {
    padding-bottom: 56px;
    border-bottom: 3px solid var(--sq-ink);
    font-size: 20px;
    line-height: 1.7;
}

.privacy-introduction p + p {
    margin-top: 24px;
}

.privacy-section {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 26px;
    padding: 68px 0;
    border-bottom: 1px solid rgba(4, 4, 6, 0.18);
    scroll-margin-top: 100px;
}

.privacy-section-number {
    padding-top: 8px;
    color: var(--sq-purple);
    font-size: 12px;
    font-weight: 700;
}

.privacy-section h2 {
    max-width: 660px;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1;
}

.privacy-section h3 {
    margin-top: 34px;
    font-size: 20px;
    line-height: 1.25;
}

.privacy-section p,
.privacy-section li {
    color: rgba(4, 4, 6, 0.68);
    font-size: 16px;
    line-height: 1.72;
}

.privacy-section h2 + p,
.privacy-section h2 + ul,
.privacy-section h3 + p,
.privacy-section h3 + ul,
.privacy-section p + p,
.privacy-section ul + p {
    margin-top: 20px;
}

.privacy-section ul {
    display: grid;
    gap: 11px;
    margin-top: 22px;
    padding-left: 20px;
    list-style: square;
}

.privacy-section strong {
    color: var(--sq-ink);
}

.privacy-section a:not(.privacy-contact-card a) {
    color: var(--sq-purple);
    font-weight: 700;
    text-decoration: underline;
}

.privacy-data-table {
    margin-top: 32px;
    border: 1px solid rgba(4, 4, 6, 0.18);
}

.privacy-data-row {
    display: grid;
    grid-template-columns: 185px minmax(0, 1fr);
    border-bottom: 1px solid rgba(4, 4, 6, 0.14);
}

.privacy-data-row:last-child {
    border-bottom: 0;
}

.privacy-data-row > * {
    padding: 18px;
}

.privacy-data-row > * + * {
    border-left: 1px solid rgba(4, 4, 6, 0.14);
}

.privacy-data-row p {
    font-size: 14px;
    line-height: 1.6;
}

.privacy-data-head {
    background: var(--sq-ink);
    color: var(--sq-paper);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
}

.privacy-data-head > * + * {
    border-color: rgba(246, 240, 229, 0.16);
}

.privacy-callout {
    margin-top: 28px;
    padding: 22px 24px;
    border-left: 4px solid var(--sq-teal);
    background: rgba(15, 184, 184, 0.1);
}

.privacy-cookie-grid,
.privacy-rights-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    margin-top: 28px;
    border: 1px solid rgba(4, 4, 6, 0.16);
    background: rgba(4, 4, 6, 0.16);
}

.privacy-cookie-grid article,
.privacy-rights-grid article {
    padding: 24px;
    background: var(--sq-paper);
}

.privacy-cookie-grid h3,
.privacy-rights-grid h3 {
    margin-top: 0;
}

.privacy-cookie-grid p,
.privacy-rights-grid p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.55;
}

.privacy-rights-grid span {
    display: grid;
    width: 42px;
    height: 42px;
    margin-bottom: 42px;
    place-items: center;
    border-radius: 50%;
    background: var(--sq-teal);
    font-family: "Urbanist", sans-serif;
    font-weight: 700;
}

.privacy-contact-card {
    margin-top: 34px;
    padding: 36px;
    background: var(--sq-ink);
    color: var(--sq-paper);
}

.privacy-contact-card h3 {
    margin-top: 12px;
    font-size: 34px;
}

.privacy-contact-card p {
    margin-top: 12px;
    color: rgba(246, 240, 229, 0.62);
}

.privacy-contact-card a {
    display: flex;
    justify-content: space-between;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid rgba(246, 240, 229, 0.2);
    color: var(--sq-teal);
    font-size: 18px;
    font-weight: 700;
}

.privacy-contact-card small {
    display: block;
    margin-top: 26px;
    color: rgba(246, 240, 229, 0.4);
    font-size: 11px;
    line-height: 1.5;
}

@media (max-width: 1023px) {
    .privacy-summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .privacy-summary-grid article { border-bottom: 1px solid rgba(4, 4, 6, 0.16); }
    .privacy-summary-grid article:nth-child(2) { border-right: 0; }
    .privacy-summary-grid article:nth-child(n + 3) { border-bottom: 0; }
    .privacy-document { grid-template-columns: 1fr; }
    .privacy-toc { position: static; }
    .privacy-toc nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
    .privacy-contact-shortcut { max-width: 250px; }
}

@media (max-width: 767px) {
    .privacy-hero-grid { background-size: 56px 56px; }
    .privacy-hero-meta { align-items: flex-start; flex-direction: column; gap: 8px; }
    .privacy-hero h1 { margin-top: 46px; font-size: 68px; }
    .privacy-hero-intro { grid-template-columns: 1fr; gap: 24px; margin-top: 48px; }
    .privacy-hero-intro p { font-size: 17px; }
    .privacy-draft-note { grid-template-columns: 1fr; gap: 8px; }
    .privacy-summary-heading { grid-template-columns: 1fr; gap: 18px; }
    .privacy-summary-grid { grid-template-columns: 1fr; }
    .privacy-summary-grid article { min-height: 220px; border-right: 0; border-bottom: 1px solid rgba(4, 4, 6, 0.16); }
    .privacy-summary-grid article:nth-child(n + 3) { border-bottom: 1px solid rgba(4, 4, 6, 0.16); }
    .privacy-summary-grid article:last-child { border-bottom: 0; }
    .privacy-toc nav { grid-template-columns: 1fr; }
    .privacy-section { grid-template-columns: 1fr; gap: 10px; padding: 54px 0; }
    .privacy-section-number { padding-top: 0; }
    .privacy-section h2 { font-size: 36px; }
    .privacy-introduction { font-size: 17px; }
    .privacy-data-row { grid-template-columns: 1fr; }
    .privacy-data-row > * + * { padding-top: 0; border-left: 0; }
    .privacy-data-head { display: none; }
    .privacy-cookie-grid, .privacy-rights-grid { grid-template-columns: 1fr; }
    .privacy-contact-card { padding: 28px 22px; }
    .privacy-contact-card a { overflow-wrap: anywhere; font-size: 16px; }
}