@font-face {
    font-family: "MyReels Nunito";
    src: url("../../fonts/Nunito-ExtraBold.ttf") format("truetype");
    font-style: normal;
    font-weight: 800;
    font-display: swap;
}

:root {
    --blue-900: #1757a6;
    --blue-800: #176cc0;
    --blue-700: #128ed1;
    --ink: #183f68;
    --muted: #51728d;
    --green: rgb(178 238 109 / 82%);
    --green-strong: #20c91c;
    --yellow: rgb(255 203 5 / 82%);
    --pink: rgb(255 163 236 / 72%);
    --violet: rgb(197 168 255 / 72%);
    --surface: rgb(255 255 255 / 72%);
    --border: rgb(182 213 255 / 78%);
    --shadow: 0 1px 2px rgb(0 0 0 / 20%);
    --scrollbar-track: rgb(220 243 255 / 72%);
    --scrollbar-thumb: #31b6f3;
    --scrollbar-thumb-hover: #128ed1;
    --header-height: 70px;
}

* {
    box-sizing: border-box;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
    scrollbar-width: thin;
}

[hidden] {
    display: none !important;
}

*::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

*::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #55c8f7 0%, var(--scrollbar-thumb) 100%);
    background-clip: padding-box;
    border: 2px solid transparent;
    border-radius: 999px;
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
    background-clip: padding-box;
}

*::-webkit-scrollbar-corner {
    background: transparent;
}

html {
    min-width: 320px;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    background: #eaf6ff;
    color: var(--ink);
    font-family: "Nunito", "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.45;
}

body,
button,
input,
textarea {
    font-family: "Nunito", "Segoe UI", Arial, sans-serif;
}

button,
input,
textarea {
    font-size: inherit;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg {
    display: block;
    max-width: 100%;
}

h1,
h2,
h3,
p {
    margin-top: 0;
}

h1,
h2,
h3 {
    font-family: "MyReels Nunito", "Nunito", sans-serif;
    font-weight: 800;
}

h1 {
    font-size: clamp(2.6rem, 6vw, 4.8rem);
    line-height: 1.01;
    letter-spacing: -0.045em;
}

h2 {
    font-size: clamp(1.8rem, 4vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.035em;
}

.page-shell {
    width: min(100%, 1200px);
    margin: 0 auto;
    background: #42bdea url("../../img/bg-social-pattern.svg") repeat;
    background-attachment: fixed;
    background-position: center top;
    background-size: 520px auto;
    box-shadow: 0 0 15px rgb(0 0 0 / 12%);
}

.site-shell,
.plain-shell {
    min-height: 100vh;
}

.site-shell {
    display: flex;
    flex-direction: column;
}

.site-content {
    flex: 1;
}

.section-container {
    width: min(100% - 36px, 1080px);
    margin-inline: auto;
}

.site-header,
.auth-header,
.plain-header {
    min-height: var(--header-height);
    padding: 9px clamp(16px, 3.5vw, 40px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2px solid rgb(255 255 255 / 54%);
    background: linear-gradient(90deg, #31b6f3 0%, #6fd0fc 100%);
    position: relative;
    z-index: 20;
}

.site-header {
    position: sticky;
    top: 0;
}

.brand {
    display: inline-flex;
    align-items: center;
}

.site-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.brand-lockup {
    min-width: 0;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    line-height: normal;
}

.brand-lockup-name {
    display: block;
    color: #8E24AA;
    font-family: "Oswald", "Sofia Sans Extra Condensed", sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -0.035em;
    line-height: 1.08;
    white-space: nowrap;
}

.brand-lockup-subtitle {
    align-self: flex-end;
    margin-top: 2px;
    color: #fff;
    font-family: "Nunito", "Segoe UI", Arial, sans-serif;
    font-size: 0.58rem;
    font-weight: 900;
    letter-spacing: 0.035em;
    line-height: 1;
    text-align: right;
    white-space: nowrap;
}

.header-back-button {
    width: 41px;
    height: 41px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgb(255 255 255 / 68%);
    border-radius: 13px;
    background: rgb(255 255 255 / 50%);
    transition: filter 80ms ease, transform 80ms ease;
}

.header-back-button:active {
    filter: brightness(0.96);
    transform: translateY(1px) scale(0.97);
}

.header-back-button:focus-visible {
    outline: 3px solid rgb(255 255 255 / 45%);
    outline-offset: 2px;
}

.header-back-button img {
    width: 29px;
    height: 29px;
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 29px;
    padding: 5px 11px;
    border: 1px solid rgb(255 255 255 / 74%);
    border-radius: 999px;
    background: rgb(255 255 255 / 70%);
    color: var(--blue-800);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.notice {
    margin-bottom: 12px;
    padding: 10px 12px;
    border: 1px solid;
    border-radius: 12px;
    font-size: 0.82rem;
    font-weight: 800;
}

.notice--error {
    border-color: #f5a6a6;
    background: rgb(255 239 239 / 94%);
    color: #9d3030;
}

.notice--success {
    border-color: #8fd05d;
    background: rgb(238 255 225 / 94%);
    color: #3f7d20;
}

.landing-page {
    padding-block: clamp(34px, 5vw, 58px) clamp(64px, 8vw, 92px);
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(54px, 6vw, 74px);
}

.hero,
.landing-section,
.landing-final {
    padding-block: 0;
}

.landing-card {
    border: 2px solid rgb(255 255 255 / 72%);
    box-shadow: 0 8px 20px rgb(23 87 166 / 13%);
}

.hero-panel {
    min-height: 520px;
    padding: clamp(24px, 5vw, 54px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.86fr);
    align-items: center;
    gap: clamp(30px, 5vw, 64px);
}

.hero-copy h1 {
    margin: 0 0 18px;
    color: var(--blue-900);
    text-wrap: balance;
}

.hero-copy p {
    max-width: 620px;
    margin-bottom: 25px;
    color: #315e72;
    font-size: clamp(1.02rem, 2vw, 1.18rem);
    font-weight: 700;
}

.idea-demo {
    padding: 18px;
    border: 2px solid rgb(119 199 255 / 52%);
    background: rgb(248 253 255 / 84%);
    box-shadow: 0 8px 20px rgb(23 87 166 / 12%);
}

.idea-demo-topline {
    margin-bottom: 11px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: var(--blue-900);
    font-size: 0.8rem;
    font-weight: 900;
}

.idea-demo-status {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #388517;
    font-size: 0.68rem;
}

.idea-demo-status i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--green-strong);
    box-shadow: 0 0 0 4px rgb(32 201 28 / 13%);
}

.idea-demo-input {
    min-height: 150px;
    padding: 15px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 14px;
    border: 2px solid rgb(119 199 255 / 55%);
    border-radius: 17px;
    background: rgb(255 255 255 / 76%);
}

.idea-demo-input p {
    margin: 0;
    align-self: flex-start;
    color: var(--ink);
    font-size: 0.95rem;
    font-weight: 750;
}

.idea-demo-formats {
    margin: 11px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.idea-demo-formats span {
    padding: 5px 9px;
    border: 1px solid rgb(255 255 255 / 72%);
    border-radius: 999px;
    color: var(--blue-900);
    font-size: 0.68rem;
    font-weight: 900;
}

.idea-demo-formats span:nth-child(1) {
    background: var(--yellow);
}

.idea-demo-formats span:nth-child(2) {
    background: var(--green);
}

.idea-demo-formats span:nth-child(3) {
    background: rgb(111 208 252 / 70%);
}

.idea-demo-result {
    padding: 11px;
    display: grid;
    grid-template-columns: 35px 1fr;
    align-items: center;
    gap: 10px;
    border: 2px solid rgb(117 207 58 / 68%);
    border-radius: 15px;
    background: rgb(241 255 231 / 85%);
}

.idea-demo-result > img {
    width: 31px;
    height: 31px;
}

.idea-demo-result strong,
.idea-demo-result small {
    display: block;
}

.idea-demo-result strong {
    color: #408421;
    font-size: 0.8rem;
}

.idea-demo-result small {
    color: var(--muted);
    font-size: 0.67rem;
}

.section-heading {
    max-width: 800px;
    margin: 0 auto 28px;
    text-align: center;
}

.section-heading h1,
.section-heading h2 {
    margin: 0 0 10px;
    color: #fff;
    text-shadow: 0 3px 9px rgb(23 87 166 / 20%);
    text-wrap: balance;
}

.section-heading .eyebrow + h1,
.section-heading .eyebrow + h2 {
    margin-top: 14px;
}

.section-heading p {
    max-width: 700px;
    margin: 0 auto;
    color: rgb(255 255 255 / 94%);
    font-weight: 800;
    line-height: 1.55;
}

.section-heading h2::after {
    width: 106px;
    height: 3px;
    margin: 13px auto 0;
    display: block;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgb(255 255 255 / 92%) 25%, rgb(207 245 255 / 96%) 75%, transparent);
    content: "";
}

.showcase-gallery {
    position: relative;
}

.showcase-control {
    position: absolute;
    top: 50%;
    z-index: 3;
    width: 46px;
    height: 46px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
    border: 2px solid rgb(255 255 255 / 80%);
    border-radius: 14px;
    background: rgb(255 255 255 / 80%);
    box-shadow: 0 6px 18px rgb(18 74 128 / 20%);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: background-color 120ms ease, transform 120ms ease, opacity 120ms ease;
}

.showcase-control:hover:not(:disabled) {
    background: #fff;
}

.showcase-control:active:not(:disabled) {
    transform: translateY(-50%) scale(0.96);
}

.showcase-control:focus-visible {
    outline: 3px solid rgb(255 255 255 / 72%);
    outline-offset: 3px;
}

.showcase-control:disabled {
    opacity: 0.28;
    cursor: default;
}

.showcase-control span {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: var(--blue-800);
    font-family: Arial, sans-serif;
    font-size: 38px;
    font-weight: 700;
    line-height: 0;
}

.showcase-control--previous {
    left: -18px;
}

.showcase-control--previous span {
    transform: translate(-1px, -3px);
}

.showcase-control--next {
    right: -18px;
}

.showcase-control--next span {
    transform: translate(1px, -3px);
}

.showcase-track {
    padding: 2px 2px 13px;
    display: grid;
    grid-auto-columns: minmax(238px, 268px);
    grid-auto-flow: column;
    gap: 14px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: inline mandatory;
    scrollbar-width: none;
}

.showcase-track::-webkit-scrollbar {
    display: none;
}

.showcase-card {
    --showcase-copy-left: 6%;
    --showcase-copy-top: 6%;
    --showcase-copy-width: 50%;
    --showcase-title-color: #083a67;
    --showcase-body-color: #153b5a;
    --showcase-accent-color: #ff4d3e;
    --showcase-badge-background: #083a67;
    --showcase-badge-color: #fff;
    --showcase-body-background: rgb(234 251 255 / 90%);
    --showcase-footer-color: #083a67;
    --showcase-title-size: clamp(20px, 8.8cqi, 24px);
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 2px solid rgb(255 255 255 / 82%);
    border-radius: 23px;
    box-shadow: 0 3px 8px rgb(23 87 166 / 18%);
    container-type: inline-size;
    scroll-snap-align: start;
}

.showcase-card > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.showcase-card-copy {
    position: absolute;
    top: var(--showcase-copy-top);
    left: var(--showcase-copy-left);
    z-index: 1;
    width: var(--showcase-copy-width);
    color: var(--showcase-title-color);
}

.showcase-card-badge {
    min-height: clamp(22px, 9cqi, 25px);
    padding: 0 clamp(9px, 4cqi, 12px) 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--showcase-badge-background);
    color: var(--showcase-badge-color);
    font-size: clamp(10px, 4cqi, 11.5px);
    font-weight: 900;
    line-height: 1;
    text-transform: uppercase;
}

.showcase-card-copy h3 {
    margin: clamp(9px, 4cqi, 12px) 0 0;
    color: var(--showcase-title-color);
    font-family: var(--showcase-title-font, "MyReels Nunito", "Nunito", sans-serif);
    font-size: var(--showcase-title-size);
    font-weight: 900;
    line-height: 1.02;
    overflow-wrap: normal;
    text-wrap: balance;
    word-break: normal;
}

.showcase-card-accent {
    width: min(34%, 54px);
    height: clamp(4px, 1.8cqi, 5px);
    margin-top: clamp(7px, 3cqi, 9px);
    display: block;
    border-radius: 999px;
    background: var(--showcase-accent-color);
}

.showcase-card-copy p {
    margin: clamp(7px, 3cqi, 9px) 0 0;
    padding: clamp(7px, 3.2cqi, 9px) clamp(8px, 3.7cqi, 11px);
    border-radius: clamp(10px, 4.5cqi, 13px);
    background: var(--showcase-body-background);
    color: var(--showcase-body-color);
    font-size: clamp(11px, 4.35cqi, 12.5px);
    font-weight: 900;
    line-height: 1.16;
    overflow-wrap: normal;
    word-break: normal;
}

.showcase-card-footer {
    position: absolute;
    right: 5.7%;
    bottom: 3.8%;
    left: 5.7%;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--showcase-footer-color);
    font-size: clamp(8px, 3.25cqi, 9.5px);
    font-weight: 900;
    line-height: 1;
}

.showcase-card--01 {
    --showcase-copy-left: 6.3%;
    --showcase-copy-top: 5.5%;
    --showcase-copy-width: 59%;
    --showcase-title-color: #5b1930;
    --showcase-body-color: #4a2933;
    --showcase-accent-color: #e94d6f;
    --showcase-badge-background: #f6ced9;
    --showcase-badge-color: #6e1934;
    --showcase-body-background: rgb(255 247 243 / 90%);
    --showcase-footer-color: #6e1934;
    --showcase-title-size: clamp(21px, 9.15cqi, 25px);
}

.showcase-card--02 {
    --showcase-copy-left: 40%;
    --showcase-copy-top: 5.5%;
    --showcase-copy-width: 56%;
    --showcase-title-color: #0c3f91;
    --showcase-body-color: #152d50;
    --showcase-accent-color: #8ccb20;
    --showcase-badge-background: #0c3f91;
    --showcase-badge-color: #fff;
    --showcase-body-background: rgb(247 242 232 / 91%);
    --showcase-footer-color: #0c3f91;
    --showcase-title-size: clamp(20px, 8.2cqi, 22px);
    --showcase-title-font: "Arial Narrow", "MyReels Nunito", sans-serif;
}

.showcase-card--03 {
    --showcase-copy-left: 6.3%;
    --showcase-copy-top: 5.2%;
    --showcase-copy-width: 61%;
    --showcase-title-color: #143c78;
    --showcase-body-color: #202f45;
    --showcase-accent-color: #e83a2d;
    --showcase-badge-background: #ffd04f;
    --showcase-badge-color: #143c78;
    --showcase-body-background: rgb(255 253 244 / 91%);
    --showcase-footer-color: #143c78;
    --showcase-title-size: clamp(21px, 8.65cqi, 24px);
    --showcase-title-font: Georgia, "Times New Roman", serif;
}

.showcase-card--04 {
    --showcase-copy-left: 34%;
    --showcase-copy-top: 6.8%;
    --showcase-copy-width: 62%;
    --showcase-title-color: #a73d2a;
    --showcase-body-color: #4a322e;
    --showcase-accent-color: #0d8ea0;
    --showcase-badge-background: #0d8ea0;
    --showcase-badge-color: #fff;
    --showcase-body-background: rgb(255 249 237 / 90%);
    --showcase-footer-color: #8c3b2c;
    --showcase-title-size: clamp(19px, 7.85cqi, 21px);
    --showcase-title-font: Georgia, "Times New Roman", serif;
}

.showcase-card--05 {
    --showcase-copy-left: 39%;
    --showcase-copy-top: 5.2%;
    --showcase-copy-width: 57%;
    --showcase-title-color: #fff;
    --showcase-body-color: #fce7f3;
    --showcase-accent-color: #ff7435;
    --showcase-badge-background: #ff7435;
    --showcase-badge-color: #2a071a;
    --showcase-body-background: rgb(42 7 26 / 82%);
    --showcase-footer-color: #fff;
    --showcase-title-size: clamp(20px, 8.4cqi, 23px);
    --showcase-title-font: "Arial Narrow", "MyReels Nunito", sans-serif;
}

.showcase-card--06 {
    --showcase-copy-left: 5.9%;
    --showcase-copy-top: 7%;
    --showcase-copy-width: 59%;
    --showcase-title-color: #083a67;
    --showcase-body-color: #153b5a;
    --showcase-accent-color: #ff4d3e;
    --showcase-badge-background: #083a67;
    --showcase-badge-color: #fff;
    --showcase-body-background: rgb(234 251 255 / 90%);
    --showcase-footer-color: #083a67;
    --showcase-title-size: clamp(20px, 8.3cqi, 23px);
}

.showcase-card--07 {
    --showcase-copy-left: 6.1%;
    --showcase-copy-top: 6.1%;
    --showcase-copy-width: 60%;
    --showcase-title-color: #ecfff4;
    --showcase-body-color: #d0f5df;
    --showcase-accent-color: #5fe08e;
    --showcase-badge-background: #5fe08e;
    --showcase-badge-color: #062e1d;
    --showcase-body-background: rgb(7 31 22 / 85%);
    --showcase-footer-color: #bdebcc;
    --showcase-title-size: clamp(20px, 8.2cqi, 23px);
}

.showcase-card--08 {
    --showcase-copy-left: 5.9%;
    --showcase-copy-top: 5.8%;
    --showcase-copy-width: 84%;
    --showcase-title-color: #fff;
    --showcase-body-color: #d6eeff;
    --showcase-accent-color: #62e5ff;
    --showcase-badge-background: #6d4cff;
    --showcase-badge-color: #fff;
    --showcase-body-background: rgb(6 27 73 / 84%);
    --showcase-footer-color: #9eebff;
    --showcase-title-size: clamp(21px, 8.65cqi, 24px);
    --showcase-title-font: "Arial Narrow", "MyReels Nunito", sans-serif;
}

.showcase-card--09 {
    --showcase-copy-left: 38%;
    --showcase-copy-top: 5.8%;
    --showcase-copy-width: 58%;
    --showcase-title-color: #0a3a8a;
    --showcase-body-color: #173d68;
    --showcase-accent-color: #e5362d;
    --showcase-badge-background: #e5362d;
    --showcase-badge-color: #fff;
    --showcase-body-background: rgb(255 242 172 / 88%);
    --showcase-footer-color: #0a3a8a;
    --showcase-title-size: clamp(19px, 8.05cqi, 22px);
}

.showcase-card--10 {
    --showcase-copy-left: 5.9%;
    --showcase-copy-top: 6.1%;
    --showcase-copy-width: 60%;
    --showcase-title-color: #fff0dd;
    --showcase-body-color: #f9d9cc;
    --showcase-accent-color: #f07045;
    --showcase-badge-background: #f07045;
    --showcase-badge-color: #351321;
    --showcase-body-background: rgb(53 19 33 / 85%);
    --showcase-footer-color: #f9d9cc;
    --showcase-title-size: clamp(20px, 8.05cqi, 22px);
    --showcase-title-font: Georgia, "Times New Roman", serif;
}

.content-formats-card {
    position: relative;
    padding: clamp(22px, 4vw, 36px);
    overflow: hidden;
    background: linear-gradient(135deg, rgb(239 250 255 / 95%), rgb(217 244 255 / 92%));
}

.content-formats-card::after {
    position: absolute;
    top: -78px;
    right: -64px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: rgb(255 255 255 / 34%);
    content: "";
    pointer-events: none;
}

.content-formats-heading,
.content-format-grid {
    position: relative;
    z-index: 1;
}

.content-formats-heading {
    margin-bottom: 16px;
}

.content-formats-heading h2 {
    margin: 0 0 7px;
    color: var(--blue-900);
    font-size: clamp(1.55rem, 3.4vw, 2.2rem);
    line-height: 1.08;
    text-wrap: balance;
}

.content-formats-heading p {
    max-width: 760px;
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 750;
}

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

.content-format-item {
    padding: 14px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
        "icon title badge"
        "icon text text";
    align-items: center;
    gap: 3px 10px;
    border: 1px solid rgb(119 199 255 / 38%);
    border-radius: 16px;
    background: rgb(255 255 255 / 58%);
}

.content-format-item .landing-icon {
    grid-area: icon;
}

.content-format-item h3 {
    grid-area: title;
    margin: 0;
    color: var(--blue-900);
    font-size: 1rem;
}

.content-format-item p {
    grid-area: text;
    margin: 0;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 750;
}

.content-format-item b {
    grid-area: badge;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgb(220 244 255 / 90%);
    color: var(--blue-900);
    font-size: 0.62rem;
    white-space: nowrap;
}

.landing-icon {
    width: 48px;
    height: 48px;
    padding: 9px;
    display: grid;
    place-items: center;
    border: 2px solid rgb(119 199 255 / 62%);
    border-radius: 14px;
    background: rgb(220 244 255 / 88%);
}

.landing-icon img {
    width: 26px;
    height: 26px;
    display: block;
    object-fit: contain;
}

.landing-page .landing-icon img,
.landing-page .editor-preview-tools img {
    filter: brightness(0) saturate(100%) invert(34%) sepia(84%) saturate(1223%) hue-rotate(178deg) brightness(88%) contrast(96%);
}

.landing-icon--yellow {
    background: rgb(255 232 132 / 82%);
    border-color: rgb(255 203 5 / 72%);
}

.landing-icon--green {
    background: rgb(202 246 153 / 86%);
    border-color: rgb(139 195 74 / 70%);
}

.landing-icon--pink {
    background: rgb(255 202 244 / 84%);
    border-color: rgb(255 126 224 / 64%);
}

.visual-source-card h3 {
    margin: 16px 0 7px;
    color: var(--blue-900);
    font-size: 1.08rem;
}

.visual-source-card p {
    margin: 0;
    color: #365f75;
    font-size: 0.86rem;
    font-weight: 750;
}

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

.landing-path-card {
    min-height: 260px;
    padding: 22px;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    grid-template-areas:
        "icon title"
        "text text"
        "button button";
    grid-template-rows: auto 1fr auto;
    align-items: center;
    gap: 14px 12px;
}

.landing-path-card .landing-icon {
    grid-area: icon;
}

.landing-path-card--ai {
    background: rgb(237 255 218 / 90%);
}

.landing-path-card--ideas {
    background: rgb(255 248 211 / 90%);
}

.landing-path-card--manual {
    background: rgb(225 246 255 / 90%);
}

.landing-path-card h3 {
    grid-area: title;
    margin: 0;
    color: var(--blue-900);
    font-size: clamp(1.3rem, 2.6vw, 1.7rem);
    line-height: 1.1;
    text-wrap: balance;
}

.landing-path-card p {
    grid-area: text;
    align-self: start;
    margin: 0;
    color: var(--muted);
    font-size: 0.86rem;
    font-weight: 750;
}

.landing-path-card .button {
    grid-area: button;
    width: 100%;
}

.landing-path-button--ai {
    background: #20c91c;
}

.landing-path-button--ideas {
    background: #f3b900;
    color: var(--blue-900);
}

.landing-path-button--manual {
    background: #13aee7;
}

.visual-source-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.visual-source-card {
    min-height: 178px;
    padding: 19px;
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    grid-template-areas:
        "icon title"
        "text text";
    grid-template-rows: auto 1fr;
    align-items: center;
    gap: 13px 11px;
}

.visual-source-card .landing-icon {
    grid-area: icon;
}

.visual-source-card h3 {
    grid-area: title;
    margin: 0;
}

.visual-source-card p {
    grid-area: text;
    align-self: start;
}

.visual-source-card--upload {
    background: rgb(237 255 218 / 88%);
}

.visual-source-card--photo {
    background: rgb(225 246 255 / 90%);
}

.visual-source-card--video {
    background: rgb(255 248 211 / 90%);
}

.visual-source-card--ai {
    background: rgb(255 231 249 / 88%);
}

.editor-landing-card {
    padding: clamp(22px, 5vw, 42px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.8fr);
    align-items: center;
    gap: clamp(28px, 6vw, 64px);
    background: linear-gradient(135deg, rgb(240 251 255 / 92%), rgb(216 244 255 / 88%));
}

.editor-landing-copy h2 {
    margin: 0 0 11px;
    color: var(--blue-900);
    font-size: clamp(1.75rem, 4vw, 2.6rem);
    line-height: 1.08;
    text-wrap: balance;
}

.editor-landing-copy > p {
    margin: 0;
    color: var(--muted);
    font-weight: 750;
}

.editor-benefits {
    margin-top: 20px;
    display: grid;
    gap: 9px;
}

.editor-benefit {
    padding: 12px 14px;
    border: 0;
    border-radius: 14px;
    background: rgb(255 255 255 / 52%);
    box-shadow: inset 4px 0 0 rgb(41 182 246 / 56%);
}

.editor-benefit h3 {
    margin: 0 0 3px;
    color: var(--blue-900);
    font-size: 0.9rem;
}

.editor-benefit p {
    margin: 0;
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 750;
}

.editor-preview {
    width: min(100%, 360px);
    margin-inline: auto;
    padding: 10px;
    border: 2px solid rgb(119 199 255 / 62%);
    border-radius: 22px;
    background: rgb(220 244 255 / 82%);
}

.editor-preview-canvas {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: 17px;
    background: #f3ede2;
    color: var(--blue-900);
}

.editor-preview-canvas > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.editor-preview-kicker,
.editor-preview-selection,
.editor-preview-canvas > p,
.editor-preview-canvas > small {
    position: absolute;
    z-index: 1;
}

.editor-preview-kicker {
    top: 22px;
    left: 22px;
    padding: 5px 8px;
    border-radius: 999px;
    background: #174a97;
    color: #fff;
    font-size: 0.58rem;
    font-weight: 950;
    letter-spacing: 0.05em;
}

.editor-preview-selection {
    top: 76px;
    left: 20px;
    width: 74%;
    min-height: 126px;
    padding: 12px 12px 10px;
    border: 2px dashed #29b6f6;
    border-radius: 8px;
    background: rgb(255 255 255 / 38%);
    box-shadow: 0 5px 16px rgb(8 88 146 / 12%);
}

.editor-preview-selection::before {
    position: absolute;
    top: -13px;
    left: 12px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #29b6f6;
    color: #fff;
    content: attr(data-label);
    font-size: 0.52rem;
    font-weight: 950;
    letter-spacing: 0.05em;
}

.editor-preview-selection strong {
    display: block;
    color: #174a97;
    font-family: "MyReels Nunito", sans-serif;
    font-size: clamp(1.48rem, 2.7vw, 1.78rem);
    font-weight: 950;
    line-height: 1.01;
    text-wrap: balance;
}

.editor-preview-handle {
    position: absolute;
    width: 10px;
    height: 10px;
    border: 2px solid #29b6f6;
    border-radius: 3px;
    background: #fff;
    box-shadow: 0 1px 3px rgb(8 88 146 / 22%);
}

.editor-preview-handle--top-left {
    top: -6px;
    left: -6px;
}

.editor-preview-handle--top-right {
    top: -6px;
    right: -6px;
}

.editor-preview-handle--bottom-left {
    bottom: -6px;
    left: -6px;
}

.editor-preview-handle--bottom-right {
    right: -6px;
    bottom: -6px;
}

.editor-preview-canvas > p {
    top: 54%;
    left: 24px;
    width: 53%;
    margin: 0;
    color: #173f70;
    font-size: 0.78rem;
    font-weight: 900;
    line-height: 1.25;
}

.editor-preview-canvas > small {
    bottom: 16px;
    left: 22px;
    color: #174a97;
    font-size: 0.55rem;
    font-weight: 950;
    letter-spacing: 0.02em;
}

.editor-preview-tools {
    padding-top: 9px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 7px;
}

.editor-preview-tools span {
    height: 45px;
    display: grid;
    place-items: center;
    border: 2px solid rgb(119 199 255 / 62%);
    border-radius: 12px;
    background: rgb(255 255 255 / 72%);
}

.editor-preview-tools img {
    width: 24px;
    height: 24px;
    display: block;
    object-fit: contain;
}

.landing-final {
    padding-block: 0;
}

.landing-final-card {
    min-height: 330px;
    padding: clamp(28px, 6vw, 58px);
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 14px;
    overflow: hidden;
    border-color: rgb(139 195 74 / 68%);
    background:
        radial-gradient(circle at 8% 18%, rgb(255 255 255 / 58%) 0 48px, transparent 49px),
        radial-gradient(circle at 92% 84%, rgb(255 232 132 / 55%) 0 72px, transparent 73px),
        linear-gradient(135deg, rgb(235 255 217 / 94%), rgb(211 245 255 / 94%));
    text-align: center;
}

.landing-final-card h2 {
    max-width: 760px;
    margin: 0;
    color: var(--blue-900);
    font-size: clamp(2rem, 5vw, 3.45rem);
    line-height: 1.05;
    text-wrap: balance;
}

.landing-final-card p {
    max-width: 680px;
    margin: 0;
    color: #365f75;
    font-size: clamp(0.94rem, 2vw, 1.08rem);
    font-weight: 800;
}

.landing-final-card .button {
    width: min(100%, 360px);
    min-height: 57px;
    margin-top: 8px;
    border-radius: 17px;
    font-size: 0.95rem;
}

.landing-final-card small {
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 850;
}

.site-footer {
    padding: 26px clamp(16px, 4vw, 42px) 20px;
    border-top: 2px solid rgb(255 255 255 / 54%);
    background: linear-gradient(90deg, #31b6f3 0%, #6fd0fc 100%);
    color: #fff;
}

.site-footer-inner {
    width: min(100%, 1120px);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(250px, 1.05fr) minmax(0, 2fr);
    gap: 14px 18px;
    align-items: stretch;
}

.site-footer-brand,
.site-footer-group {
    border: 1px solid rgb(255 255 255 / 38%);
    background: rgb(255 255 255 / 13%);
    box-shadow: 0 8px 22px rgb(0 92 153 / 9%);
}

.site-footer-brand {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 18px;
    border-radius: 18px;
}

.site-footer-brand .brand-lockup {
    align-self: flex-start;
    width: fit-content;
}

.site-footer-brand .brand-lockup-name {
    font-size: 1.55rem;
}

.site-footer-brand .brand-lockup-subtitle {
    font-size: 0.62rem;
}

.site-footer-tagline,
.site-footer small {
    color: rgb(255 255 255 / 82%);
    font-size: 0.78rem;
}

.site-footer-navigation {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.site-footer-group {
    min-width: 0;
    padding: 14px 15px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    border-radius: 16px;
}

.site-footer-group h2 {
    margin: 0 0 2px;
    color: rgb(255 255 255 / 74%);
    font-size: 0.69rem;
    font-weight: 950;
    letter-spacing: 0.06em;
    line-height: 1.2;
    text-transform: uppercase;
}

.site-footer-group a {
    color: #fff;
    font-size: 0.8rem;
    font-weight: 900;
    line-height: 1.35;
}

.site-footer-group a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.site-footer-language {
    overflow-wrap: anywhere;
}

.site-footer-bottom {
    grid-column: 1 / -1;
    padding-top: 5px;
    border-top: 1px solid rgb(255 255 255 / 30%);
}

.site-footer-bottom small {
    display: block;
}

.plain-shell {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
}

.plain-content {
    flex: 1;
    display: grid;
    place-items: center;
    padding: 28px 14px;
}

.language-card {
    width: min(100%, 520px);
    padding: 28px;
}

.language-card h1 {
    margin: 14px 0 7px;
    color: var(--blue-900);
    font-size: clamp(2rem, 7vw, 3rem);
}

.language-card > p {
    color: var(--muted);
    font-weight: 700;
}

.language-list {
    display: grid;
    gap: 8px;
}

.language-list a {
    min-height: 58px;
    padding: 10px 12px;
    display: grid;
    grid-template-columns: 44px 1fr 23px;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--border);
    border-radius: 14px;
    background: rgb(255 255 255 / 72%);
}

.language-list a > span {
    width: 42px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: rgb(111 208 252 / 70%);
    color: var(--blue-900);
    font-size: 0.7rem;
    font-weight: 900;
}

.language-list a img {
    width: 22px;
}

.premium-page {
    padding-block: clamp(20px, 5vw, 52px);
}

.premium-page-title {
    margin: 0 0 18px;
    color: #fff;
    font-size: clamp(2.2rem, 4.5vw, 3.4rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    text-align: center;
    text-shadow: 0 2px 5px rgb(16 94 154 / 22%);
}

.premium-plans {
    max-width: 780px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.premium-plan {
    padding: 42px 23px 23px;
    display: flex;
    flex-direction: column;
}

.premium-plan--current {
    border-color: #42a5f5;
}

.premium-plan-heading {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.premium-plan h2 {
    margin: 0;
    color: var(--blue-900);
    font-size: 1.2rem;
    line-height: 1;
    text-transform: uppercase;
}

.premium-plan-old-price {
    color: tomato;
    font-size: 1.2rem;
    font-weight: 900;
    line-height: 1;
    text-decoration-thickness: 2px;
}

.premium-plan-price {
    margin-top: 5px;
    padding-bottom: 12px;
    display: flex;
    align-items: baseline;
    gap: 7px;
    position: relative;
}

.premium-plan-price::after {
    width: min(70%, 220px);
    height: 3px;
    position: absolute;
    bottom: 0;
    left: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #29b6f6 0%, rgb(41 182 246 / 14%) 100%);
    content: "";
}

.premium-plan-price strong {
    color: #113c70;
    font-family: "MyReels Nunito", sans-serif;
    font-size: 2.5rem;
}

.premium-plan-price small {
    color: var(--muted);
    font-weight: 800;
}

.premium-plan-saving {
    padding: 8px 11px;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 18px 0 12px 0;
    background: #ff8500;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 900;
    line-height: 1;
}

.premium-plan--yearly .premium-plan-saving {
    background: #42b84a;
}

.premium-plan ul {
    margin: 12px 0 22px;
    padding: 0;
    display: grid;
    gap: 9px;
    list-style: none;
}

.premium-plan li {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 800;
}

.premium-plan li img {
    width: 20px;
}

.premium-plan .button {
    height: 48px;
    margin-top: auto;
    font-size: 17px;
}

.premium-plan-form {
    margin-top: auto;
}

.premium-current-button:disabled {
    background: #9ddcf8;
    color: var(--blue-900);
    opacity: 1;
}

.premium-status,
.premium-management {
    width: min(100%, 780px);
    margin: 0 auto 16px;
    padding: 18px 20px;
    color: var(--blue-900);
}

.premium-status {
    display: grid;
    gap: 4px;
    text-align: center;
}

.premium-status strong {
    font-size: 1.2rem;
}

.premium-status span,
.premium-status small,
.premium-management p {
    font-weight: 800;
}

.premium-status small,
.premium-management p {
    color: var(--muted);
}

.premium-management {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.premium-management p {
    margin: 0;
}

.premium-management form {
    flex: 0 0 auto;
}

.premium-management-button,
.premium-cancel-button {
    min-width: 190px;
}

.premium-cancel-button {
    background: #ff8e87;
}

.affiliate-hero {
    padding-block: clamp(32px, 6vw, 68px);
}

.affiliate-hero-card {
    min-height: 520px;
    padding: clamp(24px, 5vw, 52px);
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.72fr);
    align-items: center;
    gap: clamp(28px, 6vw, 70px);
}

.affiliate-hero-copy h1 {
    margin: 16px 0 18px;
    color: var(--blue-900);
    font-size: clamp(2.45rem, 5.7vw, 4.55rem);
}

.affiliate-hero-copy > p {
    max-width: 650px;
    margin-bottom: 25px;
    color: #315e72;
    font-size: clamp(1rem, 2vw, 1.16rem);
    font-weight: 750;
}

.affiliate-hero-actions {
    width: min(100%, 650px);
}

.affiliate-hero-actions .button {
    width: 100%;
    min-height: 60px;
    border-radius: 18px;
    font-size: clamp(0.92rem, 1.5vw, 1.08rem);
    letter-spacing: 0.025em;
    box-shadow: 0 9px 18px rgb(49 137 34 / 22%);
}

.affiliate-referral-bonus {
    width: min(100%, 650px);
    margin-top: 12px;
    display: block;
    color: var(--blue-800);
    font-size: 0.82rem;
    font-weight: 850;
    line-height: 1.35;
    text-align: center;
}

.affiliate-earning-preview {
    padding: clamp(20px, 4vw, 30px);
    display: grid;
    gap: 13px;
    overflow: hidden;
    border: 2px solid rgb(126 190 61 / 78%);
    border-radius: 27px;
    background:
        radial-gradient(circle at 92% 7%, rgb(255 255 255 / 72%) 0 52px, transparent 53px),
        linear-gradient(145deg, rgb(240 255 220 / 96%), rgb(219 249 183 / 92%));
    box-shadow:
        0 14px 28px rgb(23 87 166 / 17%),
        inset 0 1px 0 rgb(255 255 255 / 90%);
}

.affiliate-earning-preview > span {
    color: #467f29;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
}

.affiliate-earning-preview > strong {
    color: #258c20;
    font-family: "MyReels Nunito", sans-serif;
    font-size: clamp(4.7rem, 10vw, 7.3rem);
    line-height: 0.9;
    letter-spacing: -0.06em;
}

.affiliate-commission-plan {
    min-height: 96px;
    padding: 12px 15px;
    display: grid;
    grid-template-columns: minmax(96px, 0.7fr) minmax(0, 1.3fr);
    align-items: center;
    gap: 14px;
    border: 2px solid;
    border-radius: 17px;
    box-shadow:
        0 7px 14px rgb(31 105 55 / 10%),
        inset 0 1px 0 rgb(255 255 255 / 92%);
}

.affiliate-commission-plan--monthly {
    border-color: rgb(105 202 94 / 52%);
    background: linear-gradient(135deg, rgb(255 255 255 / 94%), rgb(235 255 226 / 94%));
}

.affiliate-commission-plan--yearly {
    border-color: rgb(245 185 65 / 54%);
    background: linear-gradient(135deg, rgb(255 255 255 / 94%), rgb(255 245 211 / 96%));
}

.affiliate-commission-value {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.affiliate-commission-value:first-child {
    padding-right: 14px;
    border-right: 2px solid rgb(114 178 70 / 22%);
}

.affiliate-commission-value:last-child {
    align-items: flex-end;
    text-align: right;
}

.affiliate-commission-label {
    width: min-content;
    min-height: 2.3em;
    color: #477057;
    font-size: 0.62rem;
    font-weight: 950;
    line-height: 1.15;
    text-transform: uppercase;
}

.affiliate-commission-value:last-child .affiliate-commission-label {
    color: #258c20;
}

.affiliate-commission-value b {
    color: var(--blue-900);
    font-family: "MyReels Nunito", sans-serif;
    font-size: clamp(1.35rem, 2.4vw, 1.65rem);
    font-weight: 950;
    line-height: 1;
}

.affiliate-commission-value:last-child b {
    color: #258c20;
}

.affiliate-commission-value small {
    color: var(--muted);
    font-size: 0.68rem;
    font-weight: 850;
    line-height: 1.2;
}

.affiliate-earning-preview p {
    margin: 2px 0 0;
    color: #4c7250;
    font-size: 0.7rem;
    font-weight: 800;
}

.affiliate-section {
    padding-block: clamp(42px, 7vw, 74px);
}

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

.affiliate-step {
    min-height: 235px;
    padding: 22px;
}

.affiliate-step > span {
    width: 47px;
    height: 39px;
    display: grid;
    place-items: center;
    border: 2px solid rgb(41 182 246 / 52%);
    border-radius: 12px;
    background: rgb(209 242 255 / 88%);
    color: var(--blue-800);
    font-size: 0.78rem;
    font-weight: 900;
}

.affiliate-step:nth-child(2) > span {
    border-color: rgb(255 203 5 / 64%);
    background: rgb(255 239 168 / 88%);
}

.affiliate-step:nth-child(3) > span {
    border-color: rgb(139 195 74 / 66%);
    background: rgb(216 249 178 / 90%);
}

.affiliate-step h3 {
    margin: 19px 0 8px;
    color: var(--blue-900);
    font-size: 1.16rem;
}

.affiliate-step p {
    margin: 0;
    color: #365f75;
    font-size: 0.85rem;
    font-weight: 750;
}

.affiliate-calculator {
    width: min(100%, 860px);
    margin-inline: auto;
    padding: clamp(20px, 4vw, 34px);
    display: grid;
    gap: 20px;
    border: 2px solid rgb(41 182 246 / 48%);
    background: rgb(235 249 255 / 90%);
}

.affiliate-calculator-control {
    display: grid;
    gap: 13px;
}

.affiliate-calculator-control > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.affiliate-calculator-control label {
    color: var(--blue-900);
    font-size: 0.9rem;
    font-weight: 900;
}

.affiliate-calculator-control output {
    min-width: 118px;
    padding: 8px 11px;
    border: 2px solid rgb(41 182 246 / 58%);
    border-radius: 11px;
    background: rgb(196 237 255 / 90%);
    color: var(--blue-800);
    font-size: 0.76rem;
    font-weight: 900;
    text-align: center;
}

.affiliate-calculator-control input {
    width: 100%;
    height: 30px;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

.affiliate-calculator-control input::-webkit-slider-runnable-track {
    height: 7px;
    border-radius: 999px;
    background: #b8e8fc;
}

.affiliate-calculator-control input::-webkit-slider-thumb {
    width: 23px;
    height: 23px;
    margin-top: -8px;
    appearance: none;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #159ddc;
    box-shadow: 0 2px 6px rgb(9 95 148 / 24%);
}

.affiliate-calculator-control input::-moz-range-track {
    height: 7px;
    border-radius: 999px;
    background: #b8e8fc;
}

.affiliate-calculator-control input::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 3px solid #fff;
    border-radius: 50%;
    background: #159ddc;
    box-shadow: 0 2px 6px rgb(9 95 148 / 24%);
}

.affiliate-calculator-results {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.affiliate-calculator-results > div {
    min-height: 124px;
    padding: 17px;
    display: grid;
    align-content: center;
    gap: 7px;
    border: 2px solid rgb(139 195 74 / 58%);
    border-radius: 17px;
    background: rgb(226 250 203 / 88%);
}

.affiliate-calculator-results > div:last-child {
    border-color: rgb(255 183 77 / 58%);
    background: rgb(255 237 199 / 88%);
}

.affiliate-calculator-results span {
    color: #4d7450;
    font-size: 0.72rem;
    font-weight: 900;
}

.affiliate-calculator-results > div:last-child span {
    color: #8f5b1c;
}

.affiliate-calculator-results strong {
    color: #258c20;
    font-family: "MyReels Nunito", sans-serif;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1;
}

.affiliate-calculator-results > div:last-child strong {
    color: #b66a0f;
}

.affiliate-calculator > p {
    margin: 0;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    text-align: center;
}

.affiliate-calculator-action {
    width: min(100%, 310px);
    margin-inline: auto;
}

.affiliate-terms-card {
    padding: clamp(21px, 4vw, 32px);
}

.affiliate-terms-card ul {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 22px;
    list-style: none;
}

.affiliate-terms-card li {
    min-height: 54px;
    padding: 9px 11px 9px 40px;
    display: flex;
    align-items: center;
    border: 1px solid rgb(119 199 255 / 42%);
    border-radius: 14px;
    background: rgb(255 255 255 / 52%);
    color: var(--ink);
    font-size: 0.8rem;
    font-weight: 800;
    position: relative;
}

.affiliate-terms-card li::before {
    position: absolute;
    left: 11px;
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: var(--green);
    color: #388517;
    content: "✓";
    font-size: 0.72rem;
    font-weight: 900;
}

.affiliate-faq {
    width: min(100%, 850px);
    margin-inline: auto;
    display: grid;
    gap: 9px;
}

.affiliate-faq-item {
    min-height: 0;
    padding: 0;
}

.affiliate-faq-item summary {
    min-height: 61px;
    padding: 15px 48px 15px 18px;
    display: flex;
    align-items: center;
    color: var(--blue-900);
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 900;
    list-style: none;
    position: relative;
}

.affiliate-faq-item summary::-webkit-details-marker {
    display: none;
}

.affiliate-faq-item summary::after {
    position: absolute;
    right: 16px;
    color: var(--blue-700);
    content: "+";
    font-size: 1.45rem;
}

.affiliate-faq-item[open] summary::after {
    content: "−";
}

.affiliate-faq-item p {
    margin: 0;
    padding: 0 18px 18px;
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 750;
}

.affiliate-final-card {
    padding: clamp(28px, 5vw, 48px);
    display: grid;
    justify-items: center;
    gap: 13px;
    border: 2px solid rgb(139 195 74 / 64%);
    background: rgb(230 251 210 / 90%);
    text-align: center;
}

.affiliate-final-card h2,
.affiliate-final-card p {
    margin: 0;
}

.affiliate-final-card h2 {
    color: var(--blue-900);
    font-size: clamp(1.65rem, 4vw, 2.5rem);
}

.affiliate-final-card p {
    color: #365f75;
    font-size: 0.92rem;
    font-weight: 800;
}

.affiliate-final-card .button {
    width: min(100%, 310px);
}

.affiliate-final-card small {
    color: var(--muted);
    font-size: 0.7rem;
    font-weight: 800;
}

@media (max-width: 900px) {
    .hero-panel {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .hero-copy {
        text-align: center;
    }

    .idea-demo {
        width: min(100%, 520px);
        margin: 0 auto;
    }
}

@media (max-width: 820px) {
    .page-shell {
        background-attachment: scroll;
    }

    .showcase-control {
        display: none;
    }

    .editor-landing-card {
        grid-template-columns: 1fr;
    }

    .content-format-grid {
        grid-template-columns: 1fr;
    }

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

    .editor-landing-copy {
        text-align: center;
    }

    .editor-benefit {
        text-align: left;
    }

    .affiliate-hero-card {
        grid-template-columns: 1fr;
    }

    .affiliate-hero-copy {
        text-align: center;
    }

    .affiliate-earning-preview {
        width: min(100%, 470px);
        margin-inline: auto;
    }

}

@media (max-width: 760px) {
    .site-footer--desktop-only {
        display: none;
    }

    .landing-path-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 600px) {
    :root {
        --header-height: 62px;
    }

    .site-header,
    .auth-header,
    .plain-header {
        padding: 8px 12px;
    }

    .brand-lockup-name {
        font-size: 1.27rem;
    }

    .brand-lockup-subtitle {
        margin-top: 3px;
        font-size: 0.52rem;
    }

    .section-container {
        width: min(100% - 20px, 1080px);
    }

    .landing-page {
        padding-block: 22px 58px;
        gap: 42px;
    }

    .hero,
    .landing-section,
    .landing-final {
        padding-block: 0;
    }

    .hero-panel {
        padding: 18px 14px;
        border-radius: 24px;
    }

    .hero-copy h1 {
        font-size: clamp(2.3rem, 12vw, 3.25rem);
    }

    .hero-copy .button {
        width: 100%;
    }

    .section-heading {
        margin-bottom: 21px;
    }

    .section-heading h2 {
        font-size: clamp(1.75rem, 9vw, 2.25rem);
    }

    .showcase-track {
        grid-auto-columns: min(76vw, 285px);
    }

    .landing-path-grid,
    .visual-source-grid {
        grid-template-columns: 1fr;
    }

    .landing-path-card,
    .visual-source-card {
        min-height: 0;
    }

    .content-formats-card {
        padding: 20px 14px;
    }

    .content-formats-heading {
        text-align: center;
    }

    .editor-landing-card {
        padding: 20px 14px;
    }

    .editor-preview {
        width: min(100%, 330px);
    }

    .landing-final-card {
        min-height: 300px;
        padding-inline: 18px;
    }

    .site-footer {
        padding: 20px 12px 16px;
    }

    .site-footer-inner {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .site-footer-brand {
        padding: 16px;
    }

    .site-footer-navigation {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .site-footer-group--language {
        grid-column: 1 / -1;
    }

    .site-footer-bottom {
        grid-column: auto;
        text-align: center;
    }

    .premium-plans {
        grid-template-columns: 1fr;
    }

    .premium-management {
        align-items: stretch;
        flex-direction: column;
        text-align: center;
    }

    .premium-management-button,
    .premium-cancel-button {
        width: 100%;
    }

    .premium-page {
        padding-block: 16px 72px;
    }

    .affiliate-hero {
        padding-block: 20px 38px;
    }

    .affiliate-hero-card {
        padding: 20px 14px;
        border-radius: 24px;
    }

    .affiliate-hero-copy h1 {
        font-size: clamp(2.25rem, 11vw, 3.15rem);
    }

    .affiliate-hero-actions,
    .affiliate-hero-actions .button {
        width: 100%;
    }

    .affiliate-hero-actions .button {
        min-height: 58px;
    }

    .affiliate-commission-plan {
        grid-template-columns: minmax(86px, 0.72fr) minmax(0, 1.28fr);
        gap: 10px;
        padding-inline: 12px;
    }

    .affiliate-section {
        padding-block: 38px;
    }

    .affiliate-steps,
    .affiliate-terms-card ul {
        grid-template-columns: 1fr;
    }

    .affiliate-step {
        min-height: 0;
    }

    .affiliate-calculator-control > div {
        align-items: stretch;
        flex-direction: column;
        gap: 8px;
    }

    .affiliate-calculator-control output {
        width: 100%;
    }

    .affiliate-calculator-results {
        grid-template-columns: 1fr;
    }

    .language-card {
        padding: 19px;
        border-radius: 21px;
    }

}

@media (max-width: 380px) {
    .site-footer-navigation {
        grid-template-columns: 1fr;
    }

    .site-footer-group--language {
        grid-column: auto;
    }
}