/* ==========================================================================
   ANIMATION SOCIAL KIT PAGE (/social-kit/)
   Sits on top of the site's style.css. The kit's own palette: a dark ground,
   cream type, one orange accent per line, gold eyebrows, green buttons.
   Motion stays calm: only the loop nearest the middle of the screen plays.
   ========================================================================== */

:root {
    --sk-ground: #1C1C1C;
    --sk-cream: #FAE7CD;
    --sk-orange: #D76B2B;
    --sk-gold: #F6C654;
    --sk-green: #7DAD6E;
}

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
}

/* The site only loads Nunito 500 and 700, so its 800 and 900 rules render at
   700. This page loads the heavier weights for its headlines; pin the shared
   footer back so it looks the same here as everywhere else. */
.sk-page .footer-column-title,
.sk-page .footer-nav-link,
.sk-page .social-icon,
.sk-page .legal-identity-name {
    font-weight: 700;
}

.sk-page .logo {
    display: block;
}

.sk-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 50px;
}

/* The site's header scrolls away with the page (body's overflow-x: hidden
   stops position: sticky), so anchored sections only need a little air */
.sk-anchor {
    scroll-margin-top: 24px;
}

.sk-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- Type ---------- */

.sk-eyebrow {
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--sk-gold);
    margin-bottom: 14px;
}

.sk-title {
    font-weight: 900;
    font-size: clamp(44px, 7.4vw, 88px);
    line-height: 1.02;
    letter-spacing: -2px;
    color: var(--sk-cream);
}

.sk-accent {
    color: var(--sk-orange);
}

.sk-lede {
    font-size: clamp(18px, 2.2vw, 22px);
    line-height: 1.6;
    max-width: 620px;
    margin: 24px auto 36px;
    color: rgba(250, 231, 205, 0.85);
}

.sk-h2 {
    font-weight: 900;
    font-size: clamp(32px, 4.4vw, 46px);
    letter-spacing: -1px;
    line-height: 1.1;
    color: var(--sk-ground);
    text-align: center;
}

.sk-h2-line {
    display: block;
    width: 60px;
    height: 3px;
    border-radius: 2px;
    background: var(--sk-orange);
    margin: 18px auto 0;
}

/* ---------- Buttons: pills with a stitched inner edge, like the kit's own ---------- */

.sk-actions {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

.sk-btn {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    border: none;
    border-radius: 999px;
    font-family: 'Nunito', sans-serif;
    font-weight: 800;
    font-size: 16px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.sk-btn::before {
    content: '';
    position: absolute;
    inset: 4px;
    border: 1px dashed currentColor;
    border-radius: inherit;
    opacity: 0.55;
    pointer-events: none;
}

.sk-btn:hover {
    transform: translateY(-2px);
}

.sk-btn:focus-visible {
    outline: 3px solid var(--sk-gold);
    outline-offset: 3px;
}

/* Dark type on the green: white on this green is too faint to read */
.sk-btn--green {
    background: var(--sk-green);
    color: var(--sk-ground);
}

.sk-btn--green::before {
    border-color: rgba(255, 255, 255, 0.9);
    opacity: 1;
}

.sk-btn--green:hover {
    background: #8fbe80;
}

/* Orange for the way into the web demo (Try the kit), so it doesn't read as Book a live demo */
.sk-btn--orange {
    background: var(--sk-orange);
    color: var(--sk-cream);
}

.sk-btn--orange::before {
    border-color: rgba(250, 231, 205, 0.85);
    opacity: 1;
}

.sk-btn--orange:hover {
    background: #e07a3c;
}

.sk-btn[disabled] {
    opacity: 0.7;
    cursor: default;
    transform: none;
}

/* ---------- Hero and the explainer ---------- */

.sk-hero {
    position: relative;
    text-align: center;
    color: var(--sk-cream);
    padding: 90px 0 110px;
    background:
        radial-gradient(ellipse 70% 55% at 60% 0%, rgba(215, 107, 43, 0.18), transparent 70%),
        radial-gradient(ellipse 60% 50% at 15% 100%, rgba(120, 110, 40, 0.14), transparent 70%),
        var(--sk-ground);
}

.sk-video {
    max-width: 960px;
    margin: 60px auto 0;
}

/* The stitched patch: an orange band with the stitching through its middle,
   as on the home page reel */
.sk-patch-frame {
    position: relative;
    isolation: isolate;
    padding: 12px;
    border-radius: 16px;
    background: var(--sk-orange);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.25);
}

.sk-patch-frame::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 2px dashed rgba(255, 255, 255, 0.85);
    border-radius: 12px;
    pointer-events: none;
    z-index: 3;
}

.sk-patch-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background-image: var(--patch-grain-svg);
    background-size: 160px 160px;
    opacity: 0.18;
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 1;
}

.sk-patch-frame video {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 6px;
    background: #141414;
}

/* ---------- Sections ---------- */

.sk-section {
    padding: 100px 0;
}

.sk-how {
    background: linear-gradient(180deg, #f5f1ea 0%, #fbf9f5 100%);
}

/* Dark stitched frame for the loops: they fade in and out of the ground colour */
.sk-loop-frame {
    position: relative;
    isolation: isolate;
    padding: 10px;
    border-radius: 18px;
    background: var(--sk-ground);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.sk-loop-frame::before {
    content: '';
    position: absolute;
    inset: 5px;
    border: 2px dashed rgba(250, 231, 205, 0.32);
    border-radius: 14px;
    pointer-events: none;
    z-index: 2;
}

.sk-loop-frame video {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 720 / 768;
    border-radius: 10px;
    background: var(--sk-ground);
}

/* With a mouse the loops wait to be hovered, so a small play badge says they
   move. Touch screens play them on their own and do without it. */
.sk-loop-play {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .sk-loop-play {
        position: absolute;
        right: 20px;
        bottom: 20px;
        z-index: 3;
        width: 30px;
        height: 30px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--sk-green);
        color: var(--sk-ground);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
        pointer-events: none;
        transition: opacity 0.2s ease;
        animation: skPlayPulse 2.4s ease-out infinite;
    }

    .sk-loop-play svg {
        margin-left: 2px;
    }

    .sk-loop-frame.is-playing .sk-loop-play {
        opacity: 0;
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sk-post-play,
    .sk-loop-play {
        animation: none;
    }
}

.sk-steps {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 80px;
    margin-top: 64px;
}

.sk-step {
    display: grid;
    grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
    align-items: center;
    gap: 64px;
}

.sk-step:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
}

.sk-step:nth-child(even) .sk-step-media {
    order: 2;
}

.sk-step-num {
    display: block;
    font-weight: 900;
    font-size: 15px;
    letter-spacing: 3px;
    color: var(--sk-orange);
}

.sk-step-text h3 {
    font-weight: 900;
    font-size: clamp(28px, 3.4vw, 40px);
    letter-spacing: -0.8px;
    line-height: 1.1;
    color: var(--sk-ground);
    margin: 8px 0 14px;
}

.sk-step-text p {
    font-size: 19px;
    line-height: 1.7;
    color: #555;
    max-width: 460px;
}

/* ---------- Built around your brand ---------- */

.sk-brand {
    text-align: center;
    color: var(--sk-cream);
    background: var(--sk-ground);
    padding: 70px 0 100px;
}

/* The rebrand loop: the kit changing brands, in the same stitched frame as the
   How it works loops. It is 4:5, where those are close to square. */
.sk-rebrand {
    max-width: 420px;
    margin: 0 auto;
}

.sk-rebrand .sk-loop-frame video {
    aspect-ratio: 4 / 5;
}

/* Try the kit, under the rebrand loop */
.sk-try {
    margin: 36px auto 40px;
}

.sk-try-note {
    margin-top: 14px;
    font-size: 15px;
    color: rgba(250, 231, 205, 0.6);
}

.sk-brand-line {
    font-size: 20px;
    line-height: 1.7;
    max-width: 640px;
    margin: 8px auto 64px;
    color: rgba(250, 231, 205, 0.85);
}

.sk-gallery-label {
    margin: 0 0 22px;
}

/* The line under "Five common templates": the rest of a kit is the client's choice */
.sk-gallery-note {
    font-size: 17px;
    line-height: 1.6;
    max-width: 680px;
    margin: -8px auto 30px;
    color: rgba(250, 231, 205, 0.75);
    text-wrap: balance;
}

.sk-gallery {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 28px;
    flex-wrap: wrap;
    margin-bottom: 64px;
}

.sk-gallery:last-child {
    margin-bottom: 0;
}

.sk-post {
    margin: 0;
    width: 250px;
}

.sk-post--story {
    width: 180px;
}

.sk-post--square {
    width: 250px;
}

/* The four feed templates share a row; the landscape lower third gets its own.
   Same-shaped posts line up by their tops, so a caption that wraps to two
   lines does not push its post out of line. */
.sk-gallery--templates {
    margin-bottom: 28px;
    align-items: flex-start;
}

.sk-gallery--templates .sk-post--feed {
    width: 220px;
}

.sk-post--landscape {
    width: 480px;
}

.sk-post-btn {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 8px;
}

.sk-post-btn:focus-visible {
    outline: 3px solid var(--sk-gold);
    outline-offset: 4px;
}

.sk-post video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    background: #2a2622;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
}

.sk-post--feed video { aspect-ratio: 4 / 5; }
.sk-post--story video { aspect-ratio: 9 / 16; }
.sk-post--square video { aspect-ratio: 1 / 1; }
.sk-post--landscape video { aspect-ratio: 16 / 9; }

/* A small play badge says the post can move; it steps aside while it plays */
.sk-post-play {
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sk-green);
    color: var(--sk-ground);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: opacity 0.2s ease;
}

.sk-post-play svg {
    margin-left: 2px;
}

.sk-post.is-playing .sk-post-play {
    opacity: 0;
    animation: none;
}

/* The play badges pulse softly, like WATCH SHOWREEL on the home page */
@keyframes skPlayPulse {
    0% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(125, 173, 110, 0.6);
    }
    70% {
        transform: scale(1.08);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 0 10px rgba(125, 173, 110, 0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35), 0 0 0 0 rgba(125, 173, 110, 0);
    }
}

.sk-post-play {
    animation: skPlayPulse 2.4s ease-out infinite;
}

.sk-post figcaption {
    margin-top: 14px;
    font-weight: 800;
    font-size: 15px;
    color: var(--sk-cream);
}

.sk-post figcaption span {
    display: block;
    margin-top: 2px;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 1px;
    color: rgba(250, 231, 205, 0.55);
}

/* ---------- What your team gets ---------- */

.sk-features {
    background: #ffffff;
}

.sk-feature-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-top: 56px;
}

.sk-feature {
    position: relative;
    isolation: isolate;
    padding: 30px 24px 28px;
    border-radius: 12px;
    background: #fdf5ea;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
}

.sk-feature::before {
    content: '';
    position: absolute;
    inset: 7px;
    border: 2px dashed rgba(215, 107, 43, 0.32);
    border-radius: 8px;
    pointer-events: none;
}

.sk-feature-icon {
    position: relative;
    width: 46px;
    height: 46px;
    margin-bottom: 18px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sk-orange);
    color: #ffffff;
    /* Parts that travel out of the icon are clipped by the circle */
    overflow: hidden;
    transition: transform 0.32s cubic-bezier(0.34, 1.32, 0.5, 1), box-shadow 0.32s ease;
}

.sk-feature-icon::after {
    content: '';
    position: absolute;
    inset: 3px;
    border: 1px dashed rgba(255, 255, 255, 0.75);
    border-radius: 50%;
}

.sk-feature-icon svg {
    width: 20px;
    height: 20px;
    overflow: visible;
}

/* ---------- Feature icons come alive ----------
   The pitch decks' technique: CSS keyframes on the parts of each inline SVG,
   transform and opacity only, looping while the card is hovered. Touch
   screens have no hover, so the script marks the card fully on screen and
   nearest the middle as .is-active instead. Origins are in the icons' own
   24-unit space. House timing: 1.3 to 1.6s loops, 0.18s staggers, and the
   circle pops on the deck's overshoot curve. */

.sk-feature:hover .sk-feature-icon,
.sk-feature.is-active .sk-feature-icon {
    transform: scale(1.14);
    box-shadow: 0 8px 20px rgba(140, 80, 25, 0.2);
}

/* Pre-built animations: a ripple rings out from the play button */
.ic-play .pr {
    opacity: 0;
    transform-box: view-box;
    transform-origin: 12px 12px;
}
.sk-feature:hover .ic-play .pr,
.sk-feature.is-active .ic-play .pr {
    animation: skRing 1.4s ease-out infinite;
}
@keyframes skRing {
    0% { opacity: 0.55; transform: scale(0.55); }
    70%, 100% { opacity: 0; transform: scale(1.5); }
}

/* Every size: the three frames pop in turn */
.ic-sizes .fs {
    transform-box: fill-box;
    transform-origin: center;
}
.sk-feature:hover .ic-sizes .fs,
.sk-feature.is-active .ic-sizes .fs {
    animation: skPop 1.5s ease-in-out infinite;
}
.sk-feature:hover .ic-sizes .fs2,
.sk-feature.is-active .ic-sizes .fs2 { animation-delay: 0.18s; }
.sk-feature:hover .ic-sizes .fs3,
.sk-feature.is-active .ic-sizes .fs3 { animation-delay: 0.36s; }
@keyframes skPop {
    0%, 70%, 100% { transform: scale(1); }
    35% { transform: scale(1.14); }
}

/* Pieces that move: the four arrowheads breathe outward */
.ic-move polyline {
    transform-box: view-box;
    transform-origin: 12px 12px;
}
.sk-feature:hover .ic-move .mv-l,
.sk-feature.is-active .ic-move .mv-l { animation: skOutL 1.5s ease-in-out infinite; }
.sk-feature:hover .ic-move .mv-r,
.sk-feature.is-active .ic-move .mv-r { animation: skOutR 1.5s ease-in-out infinite; }
.sk-feature:hover .ic-move .mv-t,
.sk-feature.is-active .ic-move .mv-t { animation: skOutT 1.5s ease-in-out infinite; }
.sk-feature:hover .ic-move .mv-b,
.sk-feature.is-active .ic-move .mv-b { animation: skOutB 1.5s ease-in-out infinite; }
@keyframes skOutL { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-2.5px); } }
@keyframes skOutR { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(2.5px); } }
@keyframes skOutT { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2.5px); } }
@keyframes skOutB { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(2.5px); } }

/* An export queue: the layers lift one after another */
.ic-queue .ly {
    transform-box: view-box;
    transform-origin: 12px 12px;
}
.sk-feature:hover .ic-queue .ly,
.sk-feature.is-active .ic-queue .ly {
    animation: skLift 1.5s ease-in-out infinite;
}
.sk-feature:hover .ic-queue .ly2,
.sk-feature.is-active .ic-queue .ly2 { animation-delay: 0.18s; }
.sk-feature:hover .ic-queue .ly3,
.sk-feature.is-active .ic-queue .ly3 { animation-delay: 0.36s; }
@keyframes skLift {
    0%, 70%, 100% { transform: translateY(0); }
    35% { transform: translateY(-2.5px); }
}

/* Its own editor: the scissors snip, pivoting where the blades cross */
.ic-cut .sc-a,
.ic-cut .sc-b {
    transform-box: view-box;
    transform-origin: 12px 12px;
}
.sk-feature:hover .ic-cut .sc-a,
.sk-feature.is-active .ic-cut .sc-a { animation: skSnipA 1.3s ease-in-out infinite; }
.sk-feature:hover .ic-cut .sc-b,
.sk-feature.is-active .ic-cut .sc-b { animation: skSnipB 1.3s ease-in-out infinite; }
@keyframes skSnipA { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-18deg); } }
@keyframes skSnipB { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(18deg); } }

/* Animated stickers: the face wobbles like a sticker being placed */
.ic-sticker .st {
    transform-box: view-box;
    transform-origin: 12px 12px;
}
.sk-feature:hover .ic-sticker .st,
.sk-feature.is-active .ic-sticker .st {
    animation: skWobble 1.5s ease-in-out infinite;
}
@keyframes skWobble {
    0%, 50%, 100% { transform: rotate(0deg) scale(1); }
    25% { transform: rotate(-10deg) scale(1.06); }
    75% { transform: rotate(10deg) scale(1.06); }
}

/* Lower thirds: the bar slips out, then slides back in from the left
   (the deck's teleport trick: it jumps while invisible) */
.ic-lower .lt {
    transform-box: view-box;
    transform-origin: 12px 12px;
}
.sk-feature:hover .ic-lower .lt,
.sk-feature.is-active .ic-lower .lt {
    animation: skLower 1.6s cubic-bezier(0.45, 0, 0.25, 1) infinite;
}
@keyframes skLower {
    0% { opacity: 1; transform: translateX(0); }
    22% { opacity: 0; transform: translateX(3px); }
    22.01% { opacity: 0; transform: translateX(-5px); }
    55%, 100% { opacity: 1; transform: translateX(0); }
}

/* Still posts too: the little sun glows */
.ic-still .sun {
    transform-box: fill-box;
    transform-origin: center;
}
.sk-feature:hover .ic-still .sun,
.sk-feature.is-active .ic-still .sun {
    animation: skGlow 1.5s ease-in-out infinite;
}
@keyframes skGlow {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.6); }
}

@media (prefers-reduced-motion: reduce) {
    .sk-feature-icon,
    .sk-feature-icon * {
        animation: none !important;
        transition: none !important;
    }
    .sk-feature:hover .sk-feature-icon,
    .sk-feature.is-active .sk-feature-icon {
        transform: none;
    }
}

.sk-feature h3 {
    font-weight: 900;
    font-size: 19px;
    color: var(--sk-ground);
    margin-bottom: 8px;
}

.sk-feature p {
    font-size: 15px;
    line-height: 1.6;
    color: #555;
}

/* ---------- Also included: branded stickers ---------- */

.sk-stickers {
    text-align: center;
    background: linear-gradient(180deg, #f5f1ea 0%, #f1e8da 100%);
}

/* Gold reads on the dark sections; on cream the eyebrow takes the orange */
.sk-stickers-eyebrow {
    color: var(--sk-orange);
}

.sk-stickers-line {
    font-size: 18px;
    line-height: 1.7;
    max-width: 600px;
    margin: 24px auto 0;
    color: #555;
}

/* A loose row: each sticker stuck on at its own slight angle. The boil is
   inside the SVGs; this only places them. */
.sk-sticker-row {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 22px;
    max-width: 980px;
    margin: 52px auto 0;
    padding: 0;
}

.sk-sticker-row li {
    transform: translateY(var(--lift, 0)) rotate(var(--tilt, 0deg));
    transition: transform 0.35s cubic-bezier(.34, 1.32, .5, 1);
}

.sk-sticker-row li:nth-child(1) { --tilt: -6deg; --lift: 4px; }
.sk-sticker-row li:nth-child(2) { --tilt: 4deg; --lift: -6px; }
.sk-sticker-row li:nth-child(3) { --tilt: -3deg; --lift: 2px; }
.sk-sticker-row li:nth-child(4) { --tilt: 6deg; --lift: -4px; }
.sk-sticker-row li:nth-child(5) { --tilt: -4deg; --lift: 5px; }
.sk-sticker-row li:nth-child(6) { --tilt: 3deg; --lift: -5px; }
.sk-sticker-row li:nth-child(7) { --tilt: -5deg; --lift: 3px; }
.sk-sticker-row li:nth-child(8) { --tilt: 5deg; --lift: -3px; }

/* The sticker files leave room around the art for its dressing, so each image
   runs a little past its cell and the art reads bigger */
.sk-sticker-row img {
    display: block;
    width: 130%;
    max-width: none;
    height: auto;
    margin: -15%;
    filter: drop-shadow(0 6px 10px rgba(70, 45, 20, 0.18));
}

@media (hover: hover) and (pointer: fine) {
    .sk-sticker-row li:hover {
        transform: translateY(var(--lift, 0)) rotate(0deg) scale(1.12);
    }
}

@media (prefers-reduced-motion: reduce) {
    .sk-sticker-row li {
        transition: none;
    }
}

/* Two rows of four once eight would get small */
@media (max-width: 860px) {
    .sk-sticker-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px 24px;
        max-width: 520px;
    }
}

@media (max-width: 480px) {
    .sk-stickers-line {
        font-size: 17px;
    }

    .sk-sticker-row {
        gap: 14px;
        margin-top: 40px;
    }
}

/* ---------- Book a demo ---------- */

.sk-demo {
    text-align: center;
    color: var(--sk-cream);
    padding: 100px 0 110px;
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%, rgba(215, 107, 43, 0.14), transparent 70%),
        var(--sk-ground);
}

.sk-demo-title {
    font-weight: 900;
    font-size: clamp(34px, 5vw, 56px);
    letter-spacing: -1px;
    line-height: 1.08;
}

.sk-demo-line {
    font-size: 20px;
    margin: 16px 0 44px;
    color: rgba(250, 231, 205, 0.85);
}

.sk-demo-card {
    position: relative;
    isolation: isolate;
    max-width: 620px;
    margin: 0 auto;
    padding: 44px 40px 40px;
    border-radius: 14px;
    text-align: left;
    background: #ffffff;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.sk-demo-card::before {
    content: '';
    position: absolute;
    inset: 8px;
    border: 2px dashed rgba(215, 107, 43, 0.4);
    border-radius: 9px;
    pointer-events: none;
}

.sk-demo-card .form-group input:focus,
.sk-demo-card .form-group textarea:focus {
    border-color: var(--sk-orange);
}

.sk-gotcha {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.sk-submit {
    width: 100%;
    margin-top: 4px;
}

.sk-demo-fallback {
    margin-top: 28px;
    font-size: 16px;
    color: rgba(250, 231, 205, 0.8);
}

.sk-demo-fallback a {
    color: var(--sk-gold);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px dashed rgba(246, 198, 84, 0.6);
}

.sk-demo-fallback a:hover {
    border-bottom-style: solid;
}

/* The footer is the site's .cta-section, used here as a real footer */
.sk-page footer.cta-section {
    padding-top: 70px;
    padding-bottom: 60px;
}

/* ---------- Smaller screens ---------- */

@media (max-width: 1024px) {
    .sk-feature-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .sk-wrap {
        padding: 0 20px;
    }

    .sk-hero {
        padding: 60px 0 70px;
    }

    .sk-title {
        letter-spacing: -1px;
    }

    .sk-video {
        margin-top: 44px;
    }

    .sk-patch-frame {
        padding: 8px;
        border-radius: 12px;
    }

    .sk-patch-frame::before {
        inset: 3px;
        border-width: 1.5px;
        border-radius: 9px;
    }

    .sk-patch-frame::after {
        border-radius: 12px;
    }

    .sk-section,
    .sk-demo {
        padding: 70px 0;
    }

    .sk-brand {
        padding: 50px 0 70px;
    }

    .sk-steps {
        gap: 56px;
        margin-top: 44px;
    }

    .sk-step,
    .sk-step:nth-child(even) {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }

    .sk-step:nth-child(even) .sk-step-media {
        order: 0;
    }

    .sk-step-media {
        width: 100%;
        max-width: 340px;
        margin: 0 auto;
    }

    .sk-step-text {
        text-align: center;
    }

    .sk-step-text p {
        margin: 0 auto;
        font-size: 17px;
    }

    .sk-brand-line {
        font-size: 18px;
        margin-bottom: 48px;
    }

    .sk-gallery-note {
        font-size: 16px;
        margin-bottom: 24px;
    }

    .sk-gallery {
        gap: 18px;
        margin-bottom: 48px;
    }

    .sk-post {
        width: calc(50% - 9px);
        max-width: 250px;
    }

    .sk-post--story {
        width: calc(36% - 9px);
    }

    .sk-gallery--templates {
        margin-bottom: 18px;
    }

    .sk-gallery--templates .sk-post--feed {
        width: calc(50% - 9px);
    }

    .sk-post--landscape {
        width: 100%;
        max-width: 480px;
    }

    .sk-demo-card {
        padding: 34px 22px 26px;
    }
}

@media (max-width: 560px) {
    .sk-feature-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .sk-btn {
        padding: 14px 24px;
        font-size: 15px;
    }
}