/* StudioBlur 2.0 */
.studioblur-page {
    --sb2-bg: #02050a;
    --sb2-bg-soft: #07101d;
    --sb2-panel: #0b1422;
    --sb2-panel-strong: #0d1b2d;
    --sb2-text: #f5f8ff;
    --sb2-muted: #98a8bc;
    --sb2-line: rgba(154, 188, 228, 0.18);
    --sb2-cyan: #2edcff;
    --sb2-blue: #2680ff;
    --sb2-violet: #8b5cff;
    --sb2-amber: #ffb347;
    overflow: hidden;
    color: var(--sb2-text);
    background: var(--sb2-bg);
}

.studioblur-page *,
.studioblur-page *::before,
.studioblur-page *::after {
    box-sizing: border-box;
}

.studioblur-page h1,
.studioblur-page h2,
.studioblur-page h3,
.studioblur-page p {
    letter-spacing: -0.01em;
}

.studioblur-page a {
    text-decoration: none;
}

.sb2-hero {
    position: relative;
    isolation: isolate;
    min-height: 900px;
    border-bottom: 1px solid var(--sb2-line);
    background:
        linear-gradient(90deg, rgba(2, 5, 10, 0.98) 0%, rgba(2, 5, 10, 0.91) 37%, rgba(2, 5, 10, 0.45) 73%, rgba(2, 5, 10, 0.82) 100%),
        url('/s3-images/studioblur-v2-cobalt-lens.jpg') center / cover no-repeat,
        var(--sb2-bg);
}

.sb2-hero::after {
    position: absolute;
    z-index: -1;
    inset: auto 0 0;
    height: 260px;
    background: linear-gradient(180deg, transparent, var(--sb2-bg));
    content: "";
    pointer-events: none;
}

.sb2-hero-light {
    position: absolute;
    z-index: -1;
    top: 9%;
    right: 17%;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: rgba(36, 126, 255, 0.14);
    filter: blur(90px);
    pointer-events: none;
}

.sb2-product-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 86px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sb2-product-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #ffffff;
    font-size: 1.1rem;
    font-weight: 760;
    letter-spacing: -0.03em;
}

.sb2-product-brand img {
    width: 42px;
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 11px;
    object-fit: cover;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38);
}

.sb2-product-brand span span,
.sb2-product-brand small {
    color: var(--sb2-cyan);
}

.sb2-product-brand small {
    margin-left: 3px;
    font-size: 0.7em;
    font-weight: 720;
}

.sb2-product-links {
    display: flex;
    align-items: center;
    gap: 34px;
}

.sb2-product-links a {
    color: #c4cfdd;
    font-size: 0.88rem;
    font-weight: 620;
    transition: color 160ms ease;
}

.sb2-product-links a:hover {
    color: var(--sb2-cyan);
}

.sb2-hero-grid {
    display: grid;
    grid-template-columns: minmax(480px, 0.9fr) minmax(570px, 1.1fr);
    align-items: center;
    gap: 54px;
    min-height: 690px;
    padding-top: 62px;
    padding-bottom: 64px;
}

.sb2-hero-copy {
    position: relative;
    z-index: 5;
}

.sb2-hero-copy h1 {
    max-width: 670px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(4.35rem, 6vw, 5rem);
    font-weight: 780;
    line-height: 0.92;
    letter-spacing: -0.065em;
}

.sb2-hero-copy h1 span {
    display: block;
    color: var(--sb2-cyan);
    text-shadow: 0 0 44px rgba(46, 220, 255, 0.16);
}

.sb2-hero-copy > p {
    max-width: 580px;
    margin: 30px 0 0;
    color: #b5c0cf;
    font-size: 1.22rem;
    line-height: 1.65;
}

.sb2-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 38px;
}

.sb2-button {
    display: inline-flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    gap: 11px;
    padding: 0 24px;
    border: 1px solid transparent;
    border-radius: 12px;
    font-size: 0.93rem;
    font-weight: 720;
    letter-spacing: -0.01em;
    transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}

.sb2-button:hover {
    transform: translateY(-2px);
}

.sb2-button-primary {
    color: #00111d;
    background: linear-gradient(110deg, #2df1d0, var(--sb2-cyan));
    box-shadow: 0 16px 44px rgba(46, 220, 255, 0.18);
}

.sb2-button-primary:hover {
    color: #00111d;
    box-shadow: 0 18px 54px rgba(46, 220, 255, 0.28);
}

.sb2-button-secondary {
    border-color: rgba(146, 194, 245, 0.42);
    color: #eef6ff;
    background: rgba(5, 13, 24, 0.62);
    backdrop-filter: blur(16px);
}

.sb2-button-secondary:hover {
    border-color: var(--sb2-cyan);
    color: #ffffff;
    background: rgba(18, 41, 66, 0.72);
}

.sb2-hero-media {
    position: relative;
    min-height: 645px;
    perspective: 1300px;
}

.sb2-screen {
    position: absolute;
    top: 50%;
    width: 35%;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(173, 211, 255, 0.26);
    border-radius: 30px;
    background: #000;
    box-shadow: 0 42px 80px rgba(0, 0, 0, 0.58);
}

.sb2-screen img {
    display: block;
    width: 100%;
    height: auto;
}

.sb2-screen-left {
    z-index: 1;
    left: 0;
    transform: translateY(-46%) rotateY(11deg) rotateZ(-1.5deg) scale(0.9);
}

.sb2-screen-main {
    z-index: 3;
    left: 32.5%;
    border-color: rgba(46, 220, 255, 0.62);
    transform: translateY(-50%);
    box-shadow: 0 48px 100px rgba(0, 0, 0, 0.66), 0 0 44px rgba(38, 128, 255, 0.13);
}

.sb2-screen-right {
    z-index: 2;
    right: 0;
    transform: translateY(-46%) rotateY(-11deg) rotateZ(1.5deg) scale(0.9);
}

.sb2-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: 1px solid var(--sb2-line);
}

.sb2-proof > div {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    padding: 25px 34px;
    border-left: 1px solid var(--sb2-line);
}

.sb2-proof > div:first-child {
    border-left: 0;
}

.sb2-proof i {
    color: var(--sb2-cyan);
    font-size: 1.5rem;
}

.sb2-proof p,
.sb2-proof strong,
.sb2-proof span {
    display: block;
    margin: 0;
}

.sb2-proof strong {
    color: #f7fbff;
    font-size: 0.94rem;
}

.sb2-proof span {
    margin-top: 4px;
    color: var(--sb2-muted);
    font-size: 0.78rem;
    line-height: 1.45;
}

.sb2-workflow,
.sb2-backgrounds,
.sb2-creator-tools,
.sb2-present,
.sb2-export,
.sb2-pricing,
.sb2-privacy,
.sb2-faq {
    position: relative;
    padding: 118px 0;
}

.sb2-section-heading {
    display: grid;
    grid-template-columns: minmax(340px, 1fr) minmax(280px, 0.62fr);
    align-items: end;
    gap: 72px;
    margin-bottom: 62px;
}

.sb2-section-heading-left {
    grid-template-columns: minmax(340px, 0.85fr) minmax(300px, 0.65fr);
    justify-content: start;
}

.sb2-section-heading h2,
.sb2-feature-copy h2,
.sb2-present h2,
.sb2-pricing-heading h2,
.sb2-privacy h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.7rem, 4.5vw, 5.1rem);
    font-weight: 760;
    line-height: 0.98;
    letter-spacing: -0.055em;
}

.sb2-section-heading > p,
.sb2-feature-copy > p,
.sb2-present-grid > div:first-child > p:last-child,
.sb2-pricing-heading > p,
.sb2-privacy p {
    margin: 0;
    color: var(--sb2-muted);
    font-size: 1.03rem;
    line-height: 1.72;
}

.sb2-workflow {
    background: linear-gradient(180deg, #02050a, #050b13);
}

.sb2-workflow-steps {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--sb2-line);
    border-bottom: 1px solid var(--sb2-line);
    list-style: none;
}

.sb2-workflow-steps li {
    position: relative;
    min-height: 286px;
    padding: 30px 28px 34px;
    border-left: 1px solid var(--sb2-line);
}

.sb2-workflow-steps li:first-child {
    border-left: 0;
}

.sb2-workflow-steps li > span {
    position: absolute;
    top: 30px;
    right: 28px;
    color: #5d708a;
    font-size: 0.74rem;
    font-weight: 750;
}

.sb2-workflow-steps i {
    display: grid;
    width: 44px;
    height: 44px;
    margin-bottom: 58px;
    place-items: center;
    border: 1px solid rgba(46, 220, 255, 0.32);
    border-radius: 12px;
    color: var(--sb2-cyan);
    background: rgba(46, 220, 255, 0.08);
}

.sb2-workflow-steps h3 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 1.25rem;
}

.sb2-workflow-steps p {
    margin: 0;
    color: var(--sb2-muted);
    font-size: 0.89rem;
    line-height: 1.66;
}

.sb2-backgrounds {
    background:
        radial-gradient(circle at 74% 42%, rgba(46, 220, 255, 0.12), transparent 30%),
        #07101a;
}

.sb2-feature-split {
    display: grid;
    grid-template-columns: minmax(320px, 0.72fr) minmax(600px, 1.28fr);
    align-items: center;
    gap: 92px;
}

.sb2-label,
.sb2-feature-copy .sb2-label,
.sb2-present .sb2-label {
    margin: 0 0 22px;
    color: var(--sb2-cyan);
    font-size: 0.78rem;
    font-weight: 780;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.sb2-feature-copy > p:not(.sb2-label) {
    margin-top: 28px;
}

.sb2-check-list {
    display: grid;
    gap: 15px;
    margin: 34px 0 0;
    padding: 0;
    list-style: none;
}

.sb2-check-list li {
    display: flex;
    align-items: center;
    gap: 13px;
    color: #cbd6e4;
    font-size: 0.92rem;
}

.sb2-check-list i {
    color: var(--sb2-cyan);
    font-size: 0.7rem;
}

.sb2-background-media {
    position: relative;
    min-height: 660px;
}

.sb2-wide-shot,
.sb2-floating-shot,
.sb2-story img,
.sb2-present-media img,
.sb2-export-detail img {
    display: block;
    height: auto;
    border: 1px solid rgba(173, 211, 255, 0.24);
    background: #000;
    object-fit: cover;
    box-shadow: 0 40px 85px rgba(0, 0, 0, 0.46);
}

.sb2-wide-shot {
    position: absolute;
    top: 4%;
    right: 0;
    width: 64%;
    border-radius: 28px;
}

.sb2-floating-shot {
    position: absolute;
    z-index: 2;
    bottom: 2%;
    left: 3%;
    width: 37%;
    border-radius: 25px;
    transform: rotate(-2deg);
}

.sb2-creator-tools {
    background: #03070d;
}

.sb2-story {
    display: grid;
    grid-template-columns: minmax(320px, 0.83fr) minmax(420px, 1.17fr);
    align-items: center;
    gap: 80px;
    min-height: 560px;
    padding: 64px 76px;
    border-top: 1px solid var(--sb2-line);
}

.sb2-story:last-child {
    border-bottom: 1px solid var(--sb2-line);
}

.sb2-story > img {
    justify-self: center;
    width: min(100%, 330px);
    max-height: 510px;
    border-radius: 25px;
    object-position: top;
}

.sb2-story-teleprompter {
    grid-template-columns: minmax(420px, 1.17fr) minmax(320px, 0.83fr);
}

.sb2-story-teleprompter > img {
    order: 0;
}

.sb2-story-copy > span:first-child {
    display: block;
    margin-bottom: 18px;
    color: var(--sb2-cyan);
    font-size: 0.78rem;
    font-weight: 780;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.sb2-story-copy h3 {
    max-width: 560px;
    margin: 0;
    color: #ffffff;
    font-size: clamp(2.3rem, 4vw, 4.4rem);
    font-weight: 750;
    line-height: 1;
    letter-spacing: -0.05em;
}

.sb2-story-copy > p {
    max-width: 590px;
    margin: 24px 0 0;
    color: var(--sb2-muted);
    font-size: 1rem;
    line-height: 1.75;
}

.sb2-inline-features,
.sb2-format-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 28px;
}

.sb2-inline-features span,
.sb2-format-row span {
    padding: 9px 12px;
    border: 1px solid var(--sb2-line);
    border-radius: 8px;
    color: #c9d5e5;
    background: rgba(16, 29, 47, 0.48);
    font-size: 0.78rem;
    font-weight: 650;
}

.sb2-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    color: var(--sb2-cyan);
    font-size: 0.9rem;
    font-weight: 730;
}

.sb2-text-link:hover {
    color: #8debff;
}

.sb2-present {
    background:
        linear-gradient(110deg, rgba(10, 19, 31, 0.98), rgba(13, 11, 31, 0.96)),
        url('/s3-images/studioblur-v2-violet-energy.jpg') center / cover no-repeat;
}

.sb2-present-grid {
    display: grid;
    grid-template-columns: minmax(320px, 0.66fr) minmax(640px, 1.34fr);
    align-items: center;
    gap: 80px;
}

.sb2-present-grid > div:first-child > p:last-child {
    margin-top: 28px;
}

.sb2-present-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 590px;
}

.sb2-present-media img:first-child {
    z-index: 2;
    width: 32%;
    border-radius: 24px;
    transform: rotate(-2deg);
}

.sb2-present-media img:last-child {
    width: 52%;
    border-radius: 26px;
    transform: rotate(1.5deg);
}

.sb2-sync-line {
    z-index: 3;
    display: grid;
    width: 64px;
    height: 64px;
    margin: 0 -12px;
    place-items: center;
    border: 1px solid rgba(46, 220, 255, 0.54);
    border-radius: 50%;
    color: var(--sb2-cyan);
    background: #07101b;
    box-shadow: 0 0 34px rgba(46, 220, 255, 0.18);
}

.sb2-export {
    background: #03070d;
}

.sb2-export-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    border-top: 1px solid var(--sb2-line);
    border-bottom: 1px solid var(--sb2-line);
}

.sb2-export-strip article {
    padding: 18px 18px 28px;
    border-left: 1px solid var(--sb2-line);
}

.sb2-export-strip article:first-child {
    border-left: 0;
}

.sb2-export-visual {
    display: grid;
    min-height: 178px;
    margin-bottom: 20px;
    place-items: center;
    border-radius: 16px;
    color: rgba(255, 255, 255, 0.88);
    font-size: 2rem;
}

.sb2-export-original {
    background: linear-gradient(135deg, #303c49, #151c24);
}

.sb2-export-background {
    background: linear-gradient(135deg, #123d5e, #146f7b);
}

.sb2-export-clipped {
    background: linear-gradient(135deg, #3a276c, #171a37);
}

.sb2-export-enhanced {
    background: linear-gradient(135deg, #8b4b13, #37200d);
}

.sb2-export-strip h3 {
    margin: 0;
    color: #ffffff;
    font-size: 1rem;
}

.sb2-export-strip p {
    margin: 7px 0 0;
    color: var(--sb2-muted);
    font-size: 0.8rem;
    line-height: 1.5;
}

.sb2-export-detail {
    display: grid;
    grid-template-columns: minmax(230px, 0.38fr) minmax(400px, 1fr);
    align-items: center;
    gap: 72px;
    max-width: 980px;
    margin: 82px auto 0;
}

.sb2-export-detail img {
    width: 100%;
    max-height: 470px;
    border-radius: 24px;
    object-position: top;
}

.sb2-export-detail h3 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(2rem, 3.2vw, 3.45rem);
    line-height: 1.05;
}

.sb2-export-detail p {
    margin: 22px 0 0;
    color: var(--sb2-muted);
    line-height: 1.75;
}

.sb2-pricing {
    isolation: isolate;
    background:
        linear-gradient(180deg, rgba(3, 7, 13, 0.88), rgba(4, 5, 15, 0.94)),
        url('/s3-images/studioblur-v2-violet-energy.jpg') center / cover no-repeat;
}

.sb2-pricing-glow {
    position: absolute;
    z-index: -1;
    top: 29%;
    left: 50%;
    width: 640px;
    height: 430px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(80, 60, 255, 0.18);
    filter: blur(100px);
}

.sb2-pricing-heading {
    max-width: 780px;
    margin: 0 auto 68px;
    text-align: center;
}

.sb2-pricing-heading > p {
    margin-top: 24px;
}

.sb2-pricing-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.12fr) minmax(0, 0.9fr);
    align-items: center;
    gap: 20px;
    max-width: 1120px;
    margin: 0 auto;
}

.sb2-plan {
    position: relative;
    min-height: 490px;
    padding: 34px 32px;
    border: 1px solid rgba(169, 198, 234, 0.22);
    border-radius: 22px;
    background: rgba(10, 18, 31, 0.84);
    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.33);
    backdrop-filter: blur(24px);
}

.sb2-plan-lifetime {
    min-height: 570px;
    padding-top: 52px;
    border-color: rgba(46, 220, 255, 0.82);
    background: linear-gradient(155deg, rgba(17, 45, 73, 0.96), rgba(22, 13, 55, 0.94));
    box-shadow: 0 38px 90px rgba(0, 0, 0, 0.47), 0 0 42px rgba(46, 220, 255, 0.13);
}

.sb2-offer-label {
    position: absolute;
    top: 0;
    left: 50%;
    display: flex;
    min-width: 180px;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transform: translate(-50%, -50%);
    border-radius: 17px;
    color: #161000;
    background: linear-gradient(90deg, #ffd23d, var(--sb2-amber));
    font-size: 0.72rem;
    font-weight: 830;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.sb2-plan-name {
    margin: 0;
    color: #dce7f5;
    font-size: 0.9rem;
    font-weight: 730;
}

.sb2-plan h3 {
    margin: 24px 0 0;
    color: #ffffff;
    font-size: 2.35rem;
    line-height: 1;
}

.sb2-price {
    margin-top: 20px;
    color: #ffffff;
    font-size: clamp(3.1rem, 5vw, 4.85rem);
    font-weight: 780;
    line-height: 1;
    letter-spacing: -0.055em;
}

.sb2-price span {
    margin-right: 4px;
    color: var(--sb2-cyan);
    font-size: 0.42em;
    vertical-align: top;
}

.sb2-plan-subtitle {
    margin: 11px 0 0;
    color: var(--sb2-muted);
    font-size: 0.82rem;
}

.sb2-plan-subtitle s {
    margin-right: 5px;
    color: #c6d0dd;
}

.sb2-save {
    display: inline-block;
    margin: 18px 0 0;
    color: #ffd34c;
    font-size: 0.86rem;
    font-weight: 800;
}

.sb2-plan ul {
    display: grid;
    gap: 13px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.sb2-plan li {
    display: flex;
    gap: 11px;
    color: #c0ccdc;
    font-size: 0.84rem;
    line-height: 1.5;
}

.sb2-plan li i {
    margin-top: 5px;
    color: var(--sb2-cyan);
    font-size: 0.66rem;
}

.sb2-plan .sb2-button {
    width: 100%;
    margin-top: 30px;
}

.sb2-plan small {
    display: block;
    margin-top: 14px;
    color: #8495aa;
    font-size: 0.7rem;
    line-height: 1.5;
    text-align: center;
}

.sb2-privacy {
    padding-top: 86px;
    padding-bottom: 86px;
    border-top: 1px solid var(--sb2-line);
    border-bottom: 1px solid var(--sb2-line);
    background: #050b13;
}

.sb2-privacy-grid {
    display: grid;
    grid-template-columns: 110px minmax(0, 1fr);
    align-items: start;
    gap: 46px;
}

.sb2-privacy-icon {
    display: grid;
    width: 92px;
    height: 92px;
    place-items: center;
    border: 1px solid rgba(46, 220, 255, 0.42);
    border-radius: 28px;
    color: var(--sb2-cyan);
    background: rgba(46, 220, 255, 0.07);
    font-size: 2rem;
}

.sb2-privacy h2 {
    max-width: 740px;
    font-size: clamp(2.35rem, 3.8vw, 4.25rem);
}

.sb2-privacy p {
    max-width: 920px;
    margin-top: 24px;
}

.sb2-faq {
    background: #03070d;
}

.sb2-faq-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 56px;
    border-top: 1px solid var(--sb2-line);
}

.sb2-faq-list details {
    border-bottom: 1px solid var(--sb2-line);
}

.sb2-faq-list summary {
    position: relative;
    padding: 25px 44px 25px 0;
    color: #eef5ff;
    font-size: 0.96rem;
    font-weight: 690;
    line-height: 1.5;
    cursor: pointer;
    list-style: none;
}

.sb2-faq-list summary::-webkit-details-marker {
    display: none;
}

.sb2-faq-list summary::after {
    position: absolute;
    top: 24px;
    right: 5px;
    color: var(--sb2-cyan);
    content: "+";
    font-size: 1.2rem;
}

.sb2-faq-list details[open] summary::after {
    content: "−";
}

.sb2-faq-list details p {
    margin: -4px 44px 26px 0;
    color: var(--sb2-muted);
    font-size: 0.88rem;
    line-height: 1.68;
}

.sb2-final-cta {
    padding: 84px 0 36px;
    background:
        linear-gradient(90deg, rgba(4, 12, 27, 0.93), rgba(10, 9, 37, 0.9)),
        url('/s3-images/studioblur-v2-cobalt-lens.jpg') center / cover no-repeat;
}

.sb2-final-inner {
    display: grid;
    grid-template-columns: 80px minmax(0, 1fr) auto;
    align-items: center;
    gap: 28px;
    padding: 48px;
    border: 1px solid rgba(102, 151, 222, 0.26);
    border-radius: 26px;
    background: rgba(3, 8, 18, 0.65);
    backdrop-filter: blur(20px);
}

.sb2-final-inner > img {
    width: 80px;
    height: 80px;
    border-radius: 19px;
    object-fit: cover;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.38);
}

.sb2-final-inner h2 {
    margin: 0;
    color: #ffffff;
    font-size: 2.4rem;
    line-height: 1.08;
}

.sb2-final-inner p {
    margin: 10px 0 0;
    color: var(--sb2-muted);
}

.sb2-resource-links {
    display: flex;
    gap: 28px;
    padding-top: 28px;
}

.sb2-resource-links a {
    color: #8799af;
    font-size: 0.82rem;
    font-weight: 650;
}

.sb2-resource-links a:hover {
    color: var(--sb2-cyan);
}

.studioblur-page a:focus-visible,
.studioblur-page summary:focus-visible {
    outline: 3px solid var(--sb2-cyan);
    outline-offset: 4px;
}

@media (max-width: 1180px) {
    .sb2-hero-grid {
        grid-template-columns: minmax(330px, 0.78fr) minmax(520px, 1.22fr);
        gap: 28px;
    }

    .sb2-hero-copy h1 {
        font-size: clamp(4rem, 7vw, 6rem);
    }

    .sb2-feature-split,
    .sb2-present-grid {
        gap: 52px;
    }

    .sb2-story {
        padding-right: 42px;
        padding-left: 42px;
    }
}

@media (max-width: 940px) {
    .sb2-hero {
        min-height: 0;
    }

    .sb2-hero-grid {
        grid-template-columns: 1fr;
        padding-top: 74px;
    }

    .sb2-hero-copy {
        max-width: 700px;
    }

    .sb2-hero-media {
        width: min(100%, 720px);
        min-height: 620px;
        margin: 10px auto 0;
    }

    .sb2-workflow-steps {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sb2-workflow-steps li:nth-child(3) {
        border-top: 1px solid var(--sb2-line);
        border-left: 0;
    }

    .sb2-workflow-steps li:nth-child(4) {
        border-top: 1px solid var(--sb2-line);
    }

    .sb2-feature-split,
    .sb2-present-grid {
        grid-template-columns: 1fr;
    }

    .sb2-feature-copy,
    .sb2-present-grid > div:first-child {
        max-width: 720px;
    }

    .sb2-background-media {
        min-height: 700px;
    }

    .sb2-story,
    .sb2-story-teleprompter {
        grid-template-columns: minmax(260px, 0.72fr) minmax(340px, 1fr);
        gap: 48px;
        padding-right: 18px;
        padding-left: 18px;
    }

    .sb2-story-teleprompter > img {
        order: 0;
    }

    .sb2-present-media {
        min-height: 600px;
    }

    .sb2-pricing-grid {
        grid-template-columns: 1fr 1fr;
        align-items: stretch;
    }

    .sb2-plan-lifetime {
        grid-column: 1 / -1;
        grid-row: 1;
        width: min(100%, 580px);
        justify-self: center;
    }
}

@media (max-width: 700px) {
    .sb2-product-nav {
        min-height: 72px;
    }

    .sb2-product-links {
        display: none;
    }

    .sb2-hero-grid {
        padding-top: 56px;
        padding-bottom: 36px;
    }

    .sb2-hero-copy h1 {
        font-size: clamp(3.35rem, 15vw, 5.15rem);
    }

    .sb2-hero-copy > p {
        margin-top: 24px;
        font-size: 1rem;
    }

    .sb2-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .sb2-button {
        width: 100%;
    }

    .sb2-hero-media {
        width: calc(100% + 24px);
        min-height: 430px;
        margin-left: -12px;
    }

    .sb2-screen {
        width: 39%;
        border-radius: 18px;
    }

    .sb2-screen-left {
        left: -5%;
    }

    .sb2-screen-main {
        left: 30.5%;
    }

    .sb2-screen-right {
        right: -5%;
    }

    .sb2-proof {
        grid-template-columns: 1fr;
    }

    .sb2-proof > div {
        padding-right: 0;
        padding-left: 0;
        border-top: 1px solid var(--sb2-line);
        border-left: 0;
    }

    .sb2-proof > div:first-child {
        border-top: 0;
    }

    .sb2-workflow,
    .sb2-backgrounds,
    .sb2-creator-tools,
    .sb2-present,
    .sb2-export,
    .sb2-pricing,
    .sb2-privacy,
    .sb2-faq {
        padding: 82px 0;
    }

    .sb2-section-heading,
    .sb2-section-heading-left {
        grid-template-columns: 1fr;
        gap: 24px;
        margin-bottom: 44px;
    }

    .sb2-section-heading h2,
    .sb2-feature-copy h2,
    .sb2-present h2,
    .sb2-pricing-heading h2,
    .sb2-privacy h2 {
        font-size: clamp(2.55rem, 12vw, 4rem);
    }

    .sb2-workflow-steps {
        grid-template-columns: 1fr;
    }

    .sb2-workflow-steps li,
    .sb2-workflow-steps li:nth-child(2),
    .sb2-workflow-steps li:nth-child(4) {
        min-height: 230px;
        border-top: 1px solid var(--sb2-line);
        border-left: 0;
    }

    .sb2-workflow-steps li:first-child {
        border-top: 0;
    }

    .sb2-workflow-steps i {
        margin-bottom: 36px;
    }

    .sb2-feature-split,
    .sb2-present-grid {
        gap: 44px;
    }

    .sb2-background-media {
        min-height: 500px;
    }

    .sb2-wide-shot {
        width: 76%;
    }

    .sb2-floating-shot {
        width: 43%;
    }

    .sb2-story,
    .sb2-story-teleprompter {
        grid-template-columns: 1fr;
        gap: 36px;
        min-height: 0;
        padding: 54px 0;
    }

    .sb2-story-teleprompter > img {
        order: 2;
    }

    .sb2-story > img {
        width: min(86%, 330px);
        max-height: 520px;
    }

    .sb2-story-copy h3 {
        font-size: clamp(2.3rem, 11vw, 3.4rem);
    }

    .sb2-present-media {
        min-height: 430px;
    }

    .sb2-present-media img:first-child {
        width: 42%;
    }

    .sb2-present-media img:last-child {
        width: 58%;
    }

    .sb2-sync-line {
        width: 48px;
        height: 48px;
        flex: 0 0 48px;
    }

    .sb2-export-strip {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sb2-export-strip article:nth-child(3) {
        border-top: 1px solid var(--sb2-line);
        border-left: 0;
    }

    .sb2-export-strip article:nth-child(4) {
        border-top: 1px solid var(--sb2-line);
    }

    .sb2-export-visual {
        min-height: 130px;
    }

    .sb2-export-detail {
        grid-template-columns: 1fr;
        gap: 36px;
        margin-top: 58px;
    }

    .sb2-export-detail img {
        width: min(84%, 330px);
        justify-self: center;
    }

    .sb2-pricing-grid {
        grid-template-columns: 1fr;
    }

    .sb2-plan-lifetime {
        grid-column: auto;
        width: 100%;
    }

    .sb2-plan {
        min-height: 0;
    }

    .sb2-privacy-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .sb2-faq-list {
        grid-template-columns: 1fr;
    }

    .sb2-final-cta {
        padding-top: 58px;
    }

    .sb2-final-inner {
        grid-template-columns: 1fr;
        padding: 30px;
    }

    .sb2-final-inner h2 {
        font-size: 2rem;
    }

    .sb2-resource-links {
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sb2-button,
    .sb2-product-links a {
        transition: none;
    }
}