/* ==========================================================
   SEIRALUNE
   HOME PAGE STYLES
========================================================== */


/* ==========================================================
   ROOT VARIABLES
========================================================== */

:root {

    --ink: #261d22;
    --ink-medium: #493940;
    --ink-soft: #705c65;

    --cream: #fffaf8;
    --cream-deep: #f9f0ed;
    --paper: #fffdfc;
    --white: #ffffff;

    --blush-light: #fbf1f4;
    --blush: #f4dfe5;
    --blush-medium: #eac8d2;

    --rose: #c9899d;
    --rose-deep: #9c5d71;

    --champagne: #e8cfad;
    --champagne-light: #f7ead8;

    --sage: #dfe9df;
    --sage-deep: #718675;

    --dark-panel: #2c2127;
    --dark-panel-light: #43323a;

    --border: rgba(73, 48, 59, 0.12);

    --shadow-large:
        0 30px 80px rgba(72, 40, 54, 0.14);

    --shadow-medium:
        0 18px 45px rgba(72, 40, 54, 0.10);

    --shadow-small:
        0 8px 24px rgba(72, 40, 54, 0.08);

    --radius-xl: 32px;
    --radius-large: 25px;
    --radius-medium: 18px;
    --radius-small: 12px;

    --page-width: 1180px;
}


/* ==========================================================
   RESET
========================================================== */

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


html {
    scroll-behavior: smooth;
}


body {

    margin: 0;

    color: var(--ink);

    background:
        radial-gradient(
            circle at 8% 5%,
            rgba(244, 223, 229, 0.75),
            transparent 30rem
        ),
        radial-gradient(
            circle at 93% 13%,
            rgba(232, 207, 173, 0.28),
            transparent 26rem
        ),
        var(--cream);

    font-family:
        Inter,
        ui-sans-serif,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    line-height: 1.6;

    -webkit-font-smoothing: antialiased;
}


body.menu-open {
    overflow: hidden;
}


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


a {
    color: inherit;
}


button,
input {
    font: inherit;
}


button,
a {
    -webkit-tap-highlight-color: transparent;
}


button:focus-visible,
a:focus-visible {

    outline:
        3px solid
        rgba(156, 93, 113, 0.35);

    outline-offset: 3px;
}


/* ==========================================================
   GENERAL
========================================================== */

.container {

    width:
        min(
            calc(100% - 2rem),
            var(--page-width)
        );

    margin-inline: auto;
}


.section {

    padding:
        6.5rem
        0;
}


.eyebrow {

    display: block;

    margin-bottom: 0.9rem;

    color: var(--rose-deep);

    font-size: 0.75rem;
    font-weight: 850;

    letter-spacing: 0.17em;

    text-transform: uppercase;
}


.eyebrow--light {
    color: var(--champagne);
}


h1,
h2,
h3 {

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    letter-spacing: -0.03em;

    line-height: 1.08;
}


h1 {

    margin: 0;

    font-size:
        clamp(
            3.5rem,
            7vw,
            6.6rem
        );

    font-weight: 500;
}


h2 {

    margin: 0;

    font-size:
        clamp(
            2.4rem,
            4.8vw,
            4rem
        );

    font-weight: 500;
}


h2 em {

    color: var(--rose-deep);

    font-weight: inherit;
}


h3 {
    margin-top: 0;
}


p {
    color: var(--ink-soft);
}


.skip-link {

    position: fixed;

    z-index: 9999;

    left: 1rem;
    top: -100px;

    padding: 0.8rem 1rem;

    border-radius: 8px;

    background: var(--ink);

    color: white;

    text-decoration: none;
}


.skip-link:focus {
    top: 1rem;
}


/* ==========================================================
   ANNOUNCEMENT
========================================================== */

.announcement-bar {

    background:
        linear-gradient(
            90deg,
            #2b2026,
            #3c2c34
        );

    color: #fff9f5;
}


.announcement-bar__inner {

    min-height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 0.7rem;

    text-align: center;
}


.announcement-bar p {

    margin: 0;

    color:
        rgba(
            255,
            249,
            245,
            0.85
        );

    font-size: 0.75rem;

    letter-spacing: 0.025em;
}


.announcement-star {

    color: var(--champagne);

    font-size: 0.7rem;
}


/* ==========================================================
   HEADER
========================================================== */

.site-header {

    position: sticky;

    z-index: 1000;

    top: 0;

    background:
        rgba(
            255,
            250,
            248,
            0.88
        );

    border-bottom:
        1px solid
        rgba(
            73,
            48,
            59,
            0.08
        );

    backdrop-filter: blur(18px);
}


.navbar {

    min-height: 78px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 2rem;
}


.brand {

    display: inline-flex;

    align-items: center;

    gap: 0.75rem;

    text-decoration: none;
}


.brand-name {

    color: var(--ink);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 1.05rem;

    font-weight: 600;

    letter-spacing: 0.17em;

    text-transform: uppercase;
}


.brand-mark {

    position: relative;

    width: 43px;
    height: 43px;

    display: grid;

    place-items: center;

    overflow: hidden;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #392a31,
            #2a2026
        );

    box-shadow:
        0 7px 22px
        rgba(55, 36, 45, 0.16);
}


.brand-mark__letters {

    position: relative;

    z-index: 3;

    color: #edcfb4;

    font-family: Georgia, serif;

    font-size: 0.78rem;
    font-weight: 700;
}


.brand-mark__moon {

    position: absolute;

    width: 27px;
    height: 27px;

    right: 3px;
    top: 2px;

    border-radius: 50%;

    background: #d59aad;

    box-shadow:
        -7px 3px 0 #2d2228;
}


.desktop-nav {

    display: flex;

    align-items: center;

    gap: 1.75rem;
}


.desktop-nav a,
.support-link {

    position: relative;

    color: var(--ink-soft);

    font-size: 0.88rem;
    font-weight: 650;

    text-decoration: none;
}


.desktop-nav a::after {

    content: "";

    position: absolute;

    left: 0;
    bottom: -6px;

    width: 0;
    height: 1px;

    background: var(--rose-deep);

    transition: width 0.2s ease;
}


.desktop-nav a:hover {
    color: var(--rose-deep);
}


.desktop-nav a:hover::after {
    width: 100%;
}


.navbar-actions {

    display: flex;

    align-items: center;

    gap: 1rem;
}


.nav-shop-button {

    padding:
        0.65rem
        1.1rem;

    border-radius: 999px;

    background: var(--ink);

    color: white;

    font-size: 0.82rem;
    font-weight: 750;

    text-decoration: none;

    transition:
        transform 0.18s ease,
        background 0.18s ease;
}


.nav-shop-button:hover {

    transform: translateY(-1px);

    background: #3c2d34;
}


/* ==========================================================
   MOBILE MENU
========================================================== */

.mobile-menu-button {

    width: 44px;
    height: 44px;

    display: none;

    place-content: center;

    gap: 5px;

    padding: 0;

    border:
        1px solid
        var(--border);

    border-radius: 50%;

    background: white;

    cursor: pointer;
}


.mobile-menu-button span {

    width: 17px;
    height: 1.5px;

    display: block;

    background: var(--ink);

    transition:
        transform 0.2s ease,
        opacity 0.2s ease;
}


.mobile-menu-button[aria-expanded="true"]
span:nth-child(1) {

    transform:
        translateY(6.5px)
        rotate(45deg);
}


.mobile-menu-button[aria-expanded="true"]
span:nth-child(2) {

    opacity: 0;
}


.mobile-menu-button[aria-expanded="true"]
span:nth-child(3) {

    transform:
        translateY(-6.5px)
        rotate(-45deg);
}


.mobile-navigation {

    position: fixed;

    z-index: 999;

    inset:
        116px
        0
        auto;

    background:
        rgba(
            255,
            250,
            248,
            0.98
        );

    border-bottom:
        1px solid
        var(--border);

    box-shadow:
        var(--shadow-medium);
}


.mobile-navigation__inner {

    display: grid;

    padding:
        0.8rem
        0
        1rem;
}


.mobile-navigation a {

    padding:
        0.9rem
        1rem;

    border-radius: 12px;

    color: var(--ink);

    font-weight: 700;

    text-decoration: none;
}


.mobile-navigation a:hover {

    background: var(--blush-light);
}


/* ==========================================================
   HERO
========================================================== */

.hero {

    position: relative;

    overflow: hidden;

    padding:
        7rem
        0
        6.5rem;
}


.hero-grid {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 0.94fr)
        minmax(0, 1.06fr);

    align-items: center;

    gap: 4.5rem;
}


.hero-label {

    width: fit-content;

    display: flex;

    align-items: center;

    gap: 0.5rem;

    margin-bottom: 1.2rem;

    padding:
        0.48rem
        0.8rem;

    border:
        1px solid
        rgba(
            156,
            93,
            113,
            0.12
        );

    border-radius: 999px;

    background:
        rgba(
            255,
            255,
            255,
            0.55
        );

    color: var(--rose-deep);

    font-size: 0.74rem;
    font-weight: 750;
}


.hero-label span {
    color: var(--rose);
}


.hero-highlight {

    display: block;

    color: var(--rose-deep);

    font-style: italic;
}


.hero-description {

    max-width: 600px;

    margin:
        1.6rem
        0
        2rem;

    font-size: 1.06rem;
}


.hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 0.8rem;
}


.button {

    min-height: 50px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 0.55rem;

    padding:
        0.8rem
        1.35rem;

    border: none;

    border-radius: 999px;

    font-size: 0.86rem;
    font-weight: 800;

    text-decoration: none;

    cursor: pointer;

    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}


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


.button--primary {

    background: var(--ink);

    color: white;

    box-shadow:
        0 11px 26px
        rgba(
            38,
            29,
            34,
            0.17
        );
}


.button--primary:hover {

    background: #3b2c33;
}


.button--secondary {

    background: var(--blush);

    color: var(--ink);
}


.button--secondary:hover {

    background: var(--blush-medium);
}


.button--gold {

    background: var(--champagne);

    color: #30242a;
}


.hero-benefits {

    display: flex;

    flex-wrap: wrap;

    gap:
        0.6rem
        1.1rem;

    margin-top: 1.8rem;

    color: var(--ink-soft);

    font-size: 0.8rem;
}


.hero-benefits span {

    display: flex;

    align-items: center;

    gap: 0.35rem;
}


.hero-benefits i {

    width: 18px;
    height: 18px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: var(--sage);

    color: var(--sage-deep);

    font-size: 0.62rem;

    font-style: normal;
}


/* ==========================================================
   HERO VISUAL
========================================================== */

.hero-visual {

    position: relative;
}


.dashboard-window {

    position: relative;

    overflow: hidden;

    padding: 0.65rem;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.88
        );

    border-radius: 30px;

    background:
        rgba(
            255,
            255,
            255,
            0.72
        );

    box-shadow: var(--shadow-large);

    transform: rotate(0.8deg);

    transition: transform 0.3s ease;
}


.dashboard-window:hover {

    transform:
        rotate(0deg)
        translateY(-3px);
}


.dashboard-window__top {

    min-height: 42px;

    display: grid;

    grid-template-columns:
        1fr
        auto
        1fr;

    align-items: center;

    padding:
        0
        0.45rem;

    color: #8e757e;

    font-size: 0.66rem;
}


.window-dots {

    display: flex;

    gap: 5px;
}


.window-dots span {

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #dcc4cb;
}


.window-title {

    font-weight: 650;
}


.window-icon {

    justify-self: end;
}


.dashboard-content {

    padding: 1.3rem;

    border-radius: 23px;

    background:
        linear-gradient(
            140deg,
            #fffafb,
            #f8e8ed
        );
}


.dashboard-heading {

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 1rem;

    padding-bottom: 1rem;

    border-bottom:
        1px solid
        rgba(
            117,
            78,
            92,
            0.1
        );
}


.dashboard-heading h3 {

    margin:
        0.15rem
        0
        0;

    font-size: 1.2rem;
}


.dashboard-small-label {

    color: #a17887;

    font-size: 0.58rem;
    font-weight: 800;

    letter-spacing: 0.1em;
}


.dashboard-focus {

    padding:
        0.55rem
        0.75rem;

    border-radius: 12px;

    background: white;

    text-align: right;

    box-shadow: var(--shadow-small);
}


.dashboard-focus span {

    display: block;

    color: #a07888;

    font-size: 0.55rem;
}


.dashboard-focus strong {

    display: block;

    margin-top: 0.05rem;

    font-size: 0.67rem;
}


.dashboard-stat-grid {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap: 0.65rem;

    margin-top: 1rem;
}


.dashboard-stat {

    padding:
        0.75rem;

    border-radius: 12px;

    background:
        rgba(
            255,
            255,
            255,
            0.86
        );

    box-shadow:
        0 4px 14px
        rgba(
            78,
            48,
            59,
            0.05
        );
}


.dashboard-stat span {

    display: block;

    color: #8f6e7a;

    font-size: 0.54rem;
}


.dashboard-stat strong {

    display: block;

    margin:
        0.15rem
        0;

    font-size: 0.82rem;
}


.dashboard-stat small {

    display: block;

    color: #a9959d;

    font-size: 0.48rem;
}


.dashboard-stat--green {

    background: #f0f6ef;
}


.dashboard-bottom-grid {

    display: grid;

    grid-template-columns:
        1.5fr
        0.8fr;

    gap: 0.8rem;

    margin-top: 0.8rem;
}


.dashboard-chart-card,
.dashboard-savings-card {

    padding: 0.85rem;

    border-radius: 14px;

    background:
        rgba(
            255,
            255,
            255,
            0.9
        );

    box-shadow:
        0 5px 18px
        rgba(
            78,
            48,
            59,
            0.05
        );
}


.dashboard-card-heading {

    display: flex;

    justify-content: space-between;

    gap: 1rem;

    margin-bottom: 0.8rem;
}


.dashboard-card-heading span {

    display: block;

    color: #9b7684;

    font-size: 0.52rem;
}


.dashboard-card-heading strong {

    display: block;

    font-size: 0.67rem;
}


.tiny-badge {

    height: fit-content;

    padding:
        0.2rem
        0.4rem;

    border-radius: 999px;

    background: var(--sage);

    color: var(--sage-deep) !important;

    font-size: 0.45rem !important;

    font-weight: 700;
}


.budget-row {

    margin-top: 0.6rem;
}


.budget-row__heading {

    display: flex;

    justify-content: space-between;

    margin-bottom: 0.25rem;

    color: #755c66;

    font-size: 0.52rem;
}


.progress-line {

    height: 6px;

    overflow: hidden;

    border-radius: 999px;

    background: #f0dce2;
}


.progress-line span {

    display: block;

    height: 100%;

    border-radius: inherit;

    background:
        linear-gradient(
            90deg,
            #ca899d,
            #dea8b8
        );
}


.dashboard-savings-card {

    text-align: center;
}


.savings-circle {

    width: 80px;
    height: 80px;

    display: grid;

    place-items: center;

    margin:
        0.7rem
        auto;

    border-radius: 50%;

    background:
        conic-gradient(
            var(--rose)
            0deg
            260deg,
            #f0dde3
            260deg
        );
}


.savings-circle > div {

    width: 62px;
    height: 62px;

    display: grid;

    place-content: center;

    border-radius: 50%;

    background: white;
}


.savings-circle strong {

    display: block;

    font-size: 0.78rem;
}


.savings-circle span {

    color: #987f88;

    font-size: 0.42rem;
}


.dashboard-savings-card p {

    margin:
        0.25rem
        0;

    color: #775f68;

    font-size: 0.53rem;
}


.savings-total {

    font-size: 0.62rem;
}


.floating-status-card,
.floating-savings-card {

    position: absolute;

    z-index: 5;

    padding:
        0.75rem
        0.9rem;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.8
        );

    border-radius: 16px;

    background:
        rgba(
            255,
            255,
            255,
            0.94
        );

    box-shadow: var(--shadow-medium);

    backdrop-filter: blur(12px);
}


.floating-status-card {

    right: -25px;
    top: 40px;

    display: flex;

    align-items: center;

    gap: 0.65rem;
}


.floating-status-icon {

    width: 34px;
    height: 34px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: var(--champagne-light);

    color: var(--rose-deep);
}


.floating-status-card span,
.floating-savings-card span {

    display: block;

    color: var(--ink-soft);

    font-size: 0.6rem;
}


.floating-status-card strong,
.floating-savings-card strong {

    display: block;

    color: var(--ink);

    font-size: 0.76rem;
}


.floating-savings-card {

    left: -25px;
    bottom: 28px;
}


.hero-decoration {

    position: absolute;

    border-radius: 50%;

    pointer-events: none;
}


.hero-decoration--one {

    width: 360px;
    height: 360px;

    right: -120px;
    top: 30px;

    border:
        1px solid
        rgba(
            201,
            137,
            157,
            0.16
        );
}


.hero-decoration--two {

    width: 140px;
    height: 140px;

    right: 110px;
    top: 80px;

    background:
        rgba(
            232,
            207,
            173,
            0.16
        );
}


/* ==========================================================
   TRUST STRIP
========================================================== */

.trust-strip {

    border-top:
        1px solid
        var(--border);

    border-bottom:
        1px solid
        var(--border);

    background:
        rgba(
            255,
            255,
            255,
            0.52
        );
}


.trust-grid {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );
}


.trust-item {

    min-height: 112px;

    display: flex;

    align-items: center;

    gap: 0.8rem;

    padding: 1.2rem;

    border-right:
        1px solid
        var(--border);
}


.trust-item:last-child {
    border-right: none;
}


.trust-icon {

    width: 42px;
    height: 42px;

    flex:
        0
        0
        auto;

    display: grid;

    place-items: center;

    border-radius: 14px;

    background: var(--blush);

    color: var(--rose-deep);
}


.trust-item strong {

    display: block;

    font-size: 0.78rem;
}


.trust-item div span {

    display: block;

    margin-top: 0.2rem;

    color: var(--ink-soft);

    font-size: 0.68rem;
}


/* ==========================================================
   SECTION HEADING
========================================================== */

.section-heading {

    max-width: 800px;

    margin-bottom: 2.8rem;
}


.section-heading--center {

    margin-inline: auto;

    text-align: center;
}


.section-heading p {

    max-width: 680px;

    margin:
        1rem
        auto
        0;
}


/* ==========================================================
   SHOP
========================================================== */

.shop-section {

    background:
        rgba(
            255,
            255,
            255,
            0.55
        );

    border-bottom:
        1px solid
        var(--border);
}


.product-grid {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                0,
                1fr
            )
        );

    gap: 1.5rem;
}


.product-card {

    overflow: hidden;

    border:
        1px solid
        var(--border);

    border-radius: var(--radius-large);

    background: white;

    box-shadow: var(--shadow-medium);

    transition:
        transform 0.22s ease,
        box-shadow 0.22s ease;
}


.product-card:hover {

    transform: translateY(-5px);

    box-shadow: var(--shadow-large);
}


.product-preview {

    position: relative;

    min-height: 330px;

    display: grid;

    place-items: center;

    padding: 2.7rem;
}


.product-preview--rose {

    background:
        linear-gradient(
            145deg,
            #edced7,
            #faeef2
        );
}


.product-preview--cream {

    background:
        linear-gradient(
            145deg,
            #f7ecdc,
            #fffaf5
        );
}


.product-preview--sage {

    background:
        linear-gradient(
            145deg,
            #dce9dc,
            #f4f9f3
        );
}


.product-preview--dark {

    background:
        linear-gradient(
            145deg,
            #241b20,
            #443139
        );
}


.product-badge {

    position: absolute;

    left: 1rem;
    top: 1rem;

    padding:
        0.4rem
        0.65rem;

    border-radius: 999px;

    background:
        rgba(
            38,
            29,
            34,
            0.9
        );

    color: white;

    font-size: 0.6rem;
    font-weight: 800;

    letter-spacing: 0.06em;
}


.product-badge--gold {

    background: var(--champagne);

    color: #2b2026;
}


.mini-sheet {

    width: min(
        100%,
        390px
    );

    padding: 0.85rem;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.8
        );

    border-radius: 18px;

    background:
        rgba(
            255,
            255,
            255,
            0.88
        );

    box-shadow:
        0 20px 45px
        rgba(
            77,
            48,
            59,
            0.14
        );

    transform: rotate(-1deg);
}


.mini-sheet__heading {

    padding:
        0.55rem;

    border-radius: 9px;

    background: #c78a9e;

    color: white;

    font-family: Georgia, serif;

    font-size: 0.72rem;

    text-align: center;
}


.mini-sheet__stats {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            1fr
        );

    gap: 0.5rem;

    margin-top: 0.55rem;
}


.mini-sheet__stats div {

    padding: 0.65rem;

    border-radius: 9px;

    background: #fff8fa;
}


.mini-sheet__stats span {

    display: block;

    color: #946d7b;

    font-size: 0.5rem;
}


.mini-sheet__stats strong {

    display: block;

    margin-top: 0.1rem;

    font-size: 0.7rem;
}


.mini-sheet__rows {

    display: grid;

    gap: 0.4rem;

    margin-top: 0.7rem;
}


.mini-sheet__rows span {

    height: 10px;

    border-radius: 4px;

    background:
        linear-gradient(
            90deg,
            #f0dbe2
            30%,
            #faf3f5
            30%
        );
}


.mini-circle-chart {

    width: 95px;
    height: 95px;

    display: grid;

    place-items: center;

    margin:
        1rem
        auto;

    border-radius: 50%;

    background:
        conic-gradient(
            #c99b71
            0deg
            230deg,
            #f2e4d4
            230deg
        );
}


.mini-circle-chart span {

    width: 72px;
    height: 72px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: white;

    color: #795e47;

    font-family: Georgia, serif;

    font-size: 1rem;
}


.student-preview-cards {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            1fr
        );

    gap: 0.5rem;

    margin-top: 0.8rem;
}


.student-preview-cards div {

    padding: 0.8rem;

    border-radius: 8px;

    background: #f2f7f1;

    color: #647267;

    font-size: 0.57rem;

    text-align: center;
}


.mini-sheet--dark {

    background:
        linear-gradient(
            145deg,
            #2f252a,
            #20191d
        );

    border-color:
        rgba(
            232,
            207,
            173,
            0.24
        );
}


.mini-sheet--dark
.mini-sheet__heading {

    background:
        linear-gradient(
            90deg,
            #b99169,
            #d5b28a
        );

    color: #261d22;
}


.mini-sheet--dark
.mini-sheet__rows span {

    background:
        linear-gradient(
            90deg,
            #bb956d
            30%,
            #44353c
            30%
        );
}


.luxury-stat {

    margin:
        0.8rem
        0;

    padding: 0.8rem;

    border:
        1px solid
        rgba(
            232,
            207,
            173,
            0.18
        );

    border-radius: 10px;

    text-align: center;
}


.luxury-stat span {

    display: block;

    color: #bda487;

    font-size: 0.5rem;
}


.luxury-stat strong {

    display: block;

    color: #efd6b5;

    font-size: 1rem;
}


.product-card__content {

    padding: 1.5rem;
}


.product-card__header {

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 1rem;
}


.product-type {

    display: block;

    margin-bottom: 0.35rem;

    color: var(--rose-deep);

    font-size: 0.58rem;
    font-weight: 850;

    letter-spacing: 0.12em;
}


.product-card h3 {

    margin:
        0;

    font-size: 1.5rem;
}


.product-price {

    flex:
        0
        0
        auto;

    color: var(--ink);

    font-size: 1rem;
}


.product-card__content > p {

    margin:
        0.9rem
        0;

    font-size: 0.86rem;
}


.product-features {

    display: flex;

    flex-wrap: wrap;

    gap: 0.45rem;

    margin:
        1rem
        0
        1.3rem;

    padding: 0;

    list-style: none;
}


.product-features li {

    padding:
        0.36rem
        0.6rem;

    border-radius: 999px;

    background: var(--blush-light);

    color: #795e68;

    font-size: 0.63rem;
}


.product-button {

    width: 100%;

    min-height: 48px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    padding:
        0.7rem
        1rem;

    border:
        1px solid
        var(--border);

    border-radius: 14px;

    background: white;

    color: var(--ink);

    font-weight: 750;

    cursor: pointer;

    transition:
        background 0.18s ease,
        transform 0.18s ease;
}


.product-button:hover {

    transform: translateY(-1px);

    background: var(--blush-light);
}


/* ==========================================================
   FEATURES
========================================================== */

.features-section {

    background:
        linear-gradient(
            180deg,
            var(--cream),
            #fffdfb
        );
}


.feature-grid {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap: 1rem;
}


.feature-card {

    padding: 1.7rem;

    border:
        1px solid
        var(--border);

    border-radius: var(--radius-large);

    background: white;

    box-shadow: var(--shadow-small);
}


.feature-icon {

    width: 48px;
    height: 48px;

    display: grid;

    place-items: center;

    margin-bottom: 1.15rem;

    border-radius: 15px;

    background: var(--blush);

    color: var(--rose-deep);

    font-size: 1.15rem;
}


.feature-card h3 {

    margin:
        0
        0
        0.45rem;

    font-size: 1.3rem;
}


.feature-card p {

    margin: 0;

    font-size: 0.86rem;
}


/* ==========================================================
   HOW IT WORKS
========================================================== */

.how-section {

    background:
        rgba(
            255,
            255,
            255,
            0.55
        );

    border-block:
        1px solid
        var(--border);
}


.how-grid {

    display: grid;

    grid-template-columns:
        0.9fr
        1.1fr;

    gap: 5rem;

    align-items: start;
}


.how-content {

    position: sticky;

    top: 130px;
}


.how-content p {

    max-width: 500px;

    margin-top: 1.2rem;
}


.steps {

    display: grid;
}


.step {

    display: grid;

    grid-template-columns:
        72px
        1fr;

    gap: 1.2rem;

    padding:
        1.6rem
        0;

    border-bottom:
        1px solid
        var(--border);
}


.step:first-child {

    padding-top: 0;
}


.step-number {

    color: #c59aae;

    font-family: Georgia, serif;

    font-size: 1.5rem;
}


.step h3 {

    margin:
        0
        0
        0.4rem;

    font-size: 1.35rem;
}


.step p {

    margin: 0;

    font-size: 0.86rem;
}


/* ==========================================================
   BRAND PANEL
========================================================== */

.brand-panel {

    position: relative;

    display: grid;

    grid-template-columns:
        0.75fr
        1.25fr;

    align-items: center;

    gap: 3rem;

    overflow: hidden;

    padding: 3rem;

    border-radius: var(--radius-xl);

    background:
        radial-gradient(
            circle at 15% 35%,
            rgba(
                201,
                137,
                157,
                0.19
            ),
            transparent 20rem
        ),
        linear-gradient(
            145deg,
            var(--dark-panel),
            var(--dark-panel-light)
        );

    color: #fff9f5;

    box-shadow: var(--shadow-large);
}


.brand-panel h2 {

    max-width: 630px;

    color: white;
}


.brand-panel p {

    max-width: 650px;

    color:
        rgba(
            255,
            249,
            245,
            0.72
        );
}


.large-brand-mark {

    position: relative;

    width: 250px;
    height: 250px;

    display: grid;

    place-items: center;

    margin: auto;

    border:
        1px solid
        rgba(
            232,
            207,
            173,
            0.22
        );

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            #3e2f37,
            #271e23
        );

    box-shadow:
        inset
        0
        0
        50px
        rgba(
            232,
            207,
            173,
            0.05
        );
}


.large-brand-mark > span:not(.large-brand-moon) {

    position: relative;

    z-index: 4;

    color: #e9c6a9;

    font-family: Georgia, serif;

    font-size: 3rem;

    letter-spacing: 0.08em;
}


.large-brand-moon {

    position: absolute;

    width: 135px;
    height: 135px;

    right: 20px;
    top: 25px;

    border-radius: 50%;

    background:
        linear-gradient(
            145deg,
            #c7889b,
            #d7a7b6
        );

    box-shadow:
        -36px 11px 0
        #2c2228;
}


.large-brand-mark i {

    position: absolute;

    right: 43px;
    top: 37px;

    color: var(--champagne);

    font-size: 1rem;

    font-style: normal;
}


/* ==========================================================
   FAQ
========================================================== */

.faq-container {

    max-width: 920px;
}


.faq-list {

    border-top:
        1px solid
        var(--border);
}


.faq-item {

    border-bottom:
        1px solid
        var(--border);
}


.faq-question {

    width: 100%;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding:
        1.4rem
        0;

    border: 0;

    background: transparent;

    color: var(--ink);

    font-weight: 800;

    text-align: left;

    cursor: pointer;
}


.faq-plus {

    color: var(--rose-deep);

    font-size: 1.5rem;

    transition: transform 0.2s ease;
}


.faq-question[aria-expanded="true"]
.faq-plus {

    transform: rotate(45deg);
}


.faq-answer {

    padding:
        0
        0
        1.3rem;
}


.faq-answer p {

    max-width: 750px;

    margin: 0;
}


/* ==========================================================
   FINAL CTA
========================================================== */

.final-cta-section {

    padding:
        0
        0
        6rem;
}


.final-cta {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    padding: 2.8rem;

    border:
        1px solid
        var(--border);

    border-radius: var(--radius-xl);

    background:
        linear-gradient(
            135deg,
            #f7e4ea,
            #fffaf7
        );

    box-shadow: var(--shadow-medium);
}


.final-cta h2 {

    font-size:
        clamp(
            2.2rem,
            4vw,
            3.3rem
        );
}


.final-cta p {

    max-width: 620px;

    margin-bottom: 0;
}


/* ==========================================================
   FOOTER
========================================================== */

.site-footer {

    padding:
        3.5rem
        0
        1.6rem;

    border-top:
        1px solid
        var(--border);

    background:
        rgba(
            255,
            253,
            251,
            0.65
        );
}


.footer-grid {

    display: flex;

    align-items: flex-start;
    justify-content: space-between;

    gap: 3rem;
}


.footer-brand {

    max-width: 480px;
}


.footer-brand p {

    margin-top: 1rem;

    font-size: 0.84rem;
}


.footer-links {

    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(
                110px,
                1fr
            )
        );

    gap: 3rem;
}


.footer-links div {

    display: grid;

    gap: 0.55rem;
}


.footer-links strong {

    margin-bottom: 0.25rem;

    font-size: 0.72rem;

    letter-spacing: 0.08em;

    text-transform: uppercase;
}


.footer-links a {

    color: var(--ink-soft);

    font-size: 0.8rem;

    text-decoration: none;
}


.footer-links a:hover {

    color: var(--rose-deep);
}


.footer-bottom {

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    margin-top: 3rem;

    padding-top: 1.3rem;

    border-top:
        1px solid
        var(--border);

    color: #927d86;

    font-size: 0.7rem;
}


.footer-bottom p {

    margin: 0;

    color: inherit;
}


/* ==========================================================
   TOAST
========================================================== */

.toast {

    position: fixed;

    z-index: 5000;

    right: 1.2rem;
    bottom: 1.2rem;

    width:
        min(
            calc(100% - 2.4rem),
            390px
        );

    align-items: center;
    justify-content: space-between;

    gap: 1rem;

    padding: 1rem;

    border:
        1px solid
        var(--border);

    border-radius: 17px;

    background:
        rgba(
            255,
            255,
            255,
            0.96
        );

    box-shadow: var(--shadow-large);

    backdrop-filter: blur(15px);
}


.toast:not([hidden]) {

    display: flex;
}


.toast > div {

    display: flex;

    align-items: center;

    gap: 0.8rem;
}


.toast-icon {

    width: 38px;
    height: 38px;

    flex:
        0
        0
        auto;

    display: grid;

    place-items: center;

    border-radius: 12px;

    background: var(--blush);

    color: var(--rose-deep);
}


.toast strong,
.toast span {

    display: block;
}


.toast strong {

    font-size: 0.78rem;
}


.toast div div span {

    margin-top: 0.1rem;

    color: var(--ink-soft);

    font-size: 0.67rem;
}


.toast button {

    border: none;

    background: transparent;

    color: #876f78;

    font-size: 1.2rem;

    cursor: pointer;
}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 950px) {

    .desktop-nav,
    .support-link,
    .nav-shop-button {

        display: none;
    }


    .mobile-menu-button {

        display: grid;
    }


    .hero-grid {

        grid-template-columns: 1fr;

        gap: 4rem;
    }


    .hero-content {

        max-width: 720px;
    }


    .hero-visual {

        max-width: 760px;
    }


    .trust-grid {

        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }


    .trust-item:nth-child(2) {

        border-right: none;
    }


    .trust-item:nth-child(-n + 2) {

        border-bottom:
            1px solid
            var(--border);
    }


    .product-grid {

        grid-template-columns: 1fr;
    }


    .feature-grid {

        grid-template-columns: 1fr;
    }


    .how-grid {

        grid-template-columns: 1fr;

        gap: 3rem;
    }


    .how-content {

        position: static;
    }


    .brand-panel {

        grid-template-columns: 1fr;

        text-align: center;
    }


    .brand-panel p {

        margin-inline: auto;
    }


    .footer-grid {

        flex-direction: column;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 680px) {

    :root {

        --radius-xl: 24px;
        --radius-large: 20px;
    }


    .container {

        width:
            min(
                calc(100% - 1.2rem),
                var(--page-width)
            );
    }


    .announcement-bar__inner {

        min-height: 42px;
    }


    .announcement-bar p {

        font-size: 0.66rem;
    }


    .navbar {

        min-height: 70px;
    }


    .mobile-navigation {

        inset:
            112px
            0
            auto;
    }


    .brand-name {

        font-size: 0.9rem;
    }


    .brand-mark {

        width: 38px;
        height: 38px;
    }


    .section {

        padding:
            4.5rem
            0;
    }


    .hero {

        padding:
            4.5rem
            0
            4.5rem;
    }


    h1 {

        font-size:
            clamp(
                3.1rem,
                14vw,
                4.3rem
            );
    }


    .hero-description {

        font-size: 0.96rem;
    }


    .hero-buttons {

        display: grid;
    }


    .hero-buttons .button {

        width: 100%;
    }


    .hero-benefits {

        display: grid;

        gap: 0.5rem;
    }


    .dashboard-content {

        padding: 0.75rem;
    }


    .dashboard-stat-grid {

        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }


    .dashboard-bottom-grid {

        grid-template-columns: 1fr;
    }


    .dashboard-savings-card {

        display: none;
    }


    .floating-status-card {

        right: 5px;
        top: -25px;

        transform: scale(0.88);
    }


    .floating-savings-card {

        left: 5px;
        bottom: -25px;

        transform: scale(0.88);
    }


    .trust-grid {

        grid-template-columns: 1fr;
    }


    .trust-item {

        min-height: auto;

        border-right: none;

        border-bottom:
            1px solid
            var(--border);
    }


    .trust-item:nth-child(2) {

        border-bottom:
            1px solid
            var(--border);
    }


    .trust-item:last-child {

        border-bottom: none;
    }


    .section-heading--center {

        text-align: left;
    }


    .section-heading--center p {

        margin-left: 0;
    }


    .product-preview {

        min-height: 260px;

        padding: 2rem 1.3rem;
    }


    .product-card__header {

        display: grid;
    }


    .product-features {

        display: grid;
    }


    .product-button {

        min-height: 52px;
    }


    .step {

        grid-template-columns:
            52px
            1fr;
    }


    .brand-panel {

        padding: 1.5rem;
    }


    .large-brand-mark {

        width: 190px;
        height: 190px;
    }


    .large-brand-moon {

        width: 103px;
        height: 103px;

        right: 17px;
        top: 19px;

        box-shadow:
            -27px 8px 0
            #2c2228;
    }


    .large-brand-mark
    > span:not(.large-brand-moon) {

        font-size: 2.3rem;
    }


    .final-cta {

        align-items: stretch;

        flex-direction: column;

        padding: 1.6rem;
    }


    .final-cta .button {

        width: 100%;
    }


    .footer-links {

        width: 100%;

        gap: 1.5rem;
    }


    .footer-bottom {

        align-items: flex-start;

        flex-direction: column;
    }

}


/* ==========================================================
   SMALL PHONE
========================================================== */

@media (max-width: 430px) {

    .hero-label {

        font-size: 0.65rem;
    }


    .dashboard-heading {

        display: grid;
    }


    .dashboard-focus {

        text-align: left;
    }


    .floating-status-card {

        display: none;
    }


    .floating-savings-card {

        bottom: -35px;
    }


    .product-preview {

        min-height: 235px;
    }


    .mini-sheet {

        width: 100%;
    }

}


/* ==========================================================
   REDUCED MOTION
========================================================== */

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior: auto;
    }


    *,
    *::before,
    *::after {

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;
    }

}

/* ==========================================================
   CREATOR STOREFRONT
========================================================== */

.creator-store-banner {

    background:
        linear-gradient(
            90deg,
            #2b2026,
            #3c2c34
        );

    color: white;
}


.creator-store-banner__inner {

    min-height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 0.7rem;

    text-align: center;

    font-size: 0.72rem;
}


.creator-store-banner strong {

    color: var(--champagne);
}


.creator-store-banner__inner
span:last-child {

    color:
        rgba(
            255,
            255,
            255,
            0.65
        );
}


/* ==========================================================
   PRODUCT PAGE
========================================================== */

.product-page-main {

    min-height: 75vh;

    padding:
        3rem
        0
        6rem;
}


.product-breadcrumb {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 0.45rem;

    margin-bottom: 2rem;

    color: var(--ink-soft);

    font-size: 0.75rem;
}


.product-breadcrumb a {

    font-weight: 700;
}


.product-page-grid {

    display: grid;

    grid-template-columns:
        minmax(0, 1.1fr)
        minmax(350px, 0.9fr);

    align-items: start;

    gap: 3.5rem;
}


.large-product-preview {

    position: relative;

    min-height: 570px;

    display: grid;

    place-items: center;

    padding: 3rem;

    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-medium);
}


.large-product-preview--rose {

    background:
        linear-gradient(
            145deg,
            #edced7,
            #faeef2
        );
}


.large-product-preview--cream {

    background:
        linear-gradient(
            145deg,
            #f3e5d5,
            #fffaf5
        );
}


.large-product-preview--sage {

    background:
        linear-gradient(
            145deg,
            #dce9dc,
            #f5faf4
        );
}


.large-product-preview--dark {

    background:
        linear-gradient(
            145deg,
            #241b20,
            #47333c
        );
}


.product-preview-badge {

    position: absolute;

    left: 1.4rem;
    top: 1.4rem;

    padding:
        0.42rem
        0.72rem;

    border-radius: 999px;

    background:
        rgba(
            38,
            29,
            34,
            0.9
        );

    color: white;

    font-size: 0.62rem;
    font-weight: 800;

    letter-spacing: 0.07em;
}


.large-sheet {

    width: min(
        100%,
        620px
    );

    padding: 1rem;

    border:
        1px solid
        rgba(
            255,
            255,
            255,
            0.8
        );

    border-radius: 23px;

    background:
        rgba(
            255,
            255,
            255,
            0.92
        );

    box-shadow:
        0 25px 60px
        rgba(
            71,
            43,
            54,
            0.15
        );
}


.large-product-preview--dark
.large-sheet {

    background:
        linear-gradient(
            145deg,
            #30252b,
            #211a1e
        );

    border-color:
        rgba(
            232,
            207,
            173,
            0.2
        );

    color: #f4ddc3;
}


.large-sheet__header {

    padding: 0.85rem;

    border-radius: 11px;

    background: #c9899d;

    color: white;

    font-family:
        Georgia,
        serif;

    text-align: center;
}


.large-product-preview--dark
.large-sheet__header {

    background:
        linear-gradient(
            90deg,
            #b78e65,
            #dfbc90
        );

    color: #2a2025;
}


.large-sheet__meta {

    display: flex;

    justify-content: space-between;

    margin-top: 0.8rem;

    color: #9a7483;

    font-size: 0.55rem;
    font-weight: 800;

    letter-spacing: 0.1em;
}


.large-sheet__money {

    display: grid;

    grid-template-columns:
        repeat(
            4,
            1fr
        );

    gap: 0.65rem;

    margin-top: 0.8rem;
}


.large-sheet__money div {

    padding: 0.8rem;

    border-radius: 11px;

    background: #fff7fa;
}


.large-product-preview--dark
.large-sheet__money div {

    background: #3a2d34;
}


.large-sheet__money span {

    display: block;

    color: #9a7483;

    font-size: 0.5rem;
}


.large-sheet__money strong {

    display: block;

    margin-top: 0.15rem;

    font-size: 0.82rem;
}


.large-sheet__bottom {

    display: grid;

    grid-template-columns:
        1.45fr
        0.55fr;

    gap: 0.8rem;

    margin-top: 0.8rem;
}


.large-budget-section,
.large-goal-card {

    padding: 0.9rem;

    border-radius: 12px;

    background: #fff8fa;
}


.large-product-preview--dark
.large-budget-section,
.large-product-preview--dark
.large-goal-card {

    background: #392c33;
}


.large-budget-title {

    display: flex;

    justify-content: space-between;

    margin-bottom: 0.7rem;

    font-size: 0.6rem;
}


.large-budget-title strong {

    color: #66816b;
}


.large-progress-row {

    margin-top: 0.55rem;
}


.large-progress-row > span {

    display: block;

    margin-bottom: 0.2rem;

    color: #8b6975;

    font-size: 0.52rem;
}


.large-progress-row > div {

    height: 7px;

    overflow: hidden;

    border-radius: 999px;

    background: #f0dbe2;
}


.large-progress-row i {

    height: 100%;

    display: block;

    border-radius: inherit;

    background: var(--rose);
}


.large-goal-card {

    text-align: center;
}


.large-goal-card > span {

    font-size: 0.55rem;
}


.large-goal-circle {

    width: 85px;
    height: 85px;

    display: grid;

    place-items: center;

    margin:
        0.7rem
        auto;

    border-radius: 50%;

    background:
        conic-gradient(
            var(--rose)
            0deg
            260deg,
            #f0dbe2
            260deg
        );
}


.large-goal-circle strong {

    width: 64px;
    height: 64px;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: white;

    color: var(--ink);
}


.large-goal-card small {

    font-size: 0.5rem;
}


.product-information-card {

    margin-top: 1.5rem;

    padding: 2rem;

    border:
        1px solid
        var(--border);

    border-radius: var(--radius-large);

    background: white;
}


.product-information-card h2 {

    font-size:
        clamp(
            2rem,
            4vw,
            2.8rem
        );
}


.product-detail-benefits {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap: 0.8rem;

    margin-top: 1.5rem;
}


.product-detail-benefits > div {

    padding: 1rem;

    border-radius: 15px;

    background: var(--blush-light);
}


.product-detail-benefits > div > span {

    color: var(--rose-deep);
}


.product-detail-benefits strong {

    display: block;

    margin-top: 0.4rem;

    font-size: 0.75rem;
}


.product-detail-benefits p {

    margin:
        0.2rem
        0
        0;

    font-size: 0.68rem;
}


/* ==========================================================
   PURCHASE PANEL
========================================================== */

.purchase-panel {

    position: sticky;

    top: 115px;

    padding: 2rem;

    border:
        1px solid
        var(--border);

    border-radius: var(--radius-xl);

    background:
        rgba(
            255,
            255,
            255,
            0.92
        );

    box-shadow: var(--shadow-large);

    backdrop-filter: blur(15px);
}


.purchase-panel h1 {

    margin: 0;

    font-size:
        clamp(
            2.4rem,
            4vw,
            3.7rem
        );
}


.purchase-subtitle {

    margin-top: 1rem;

    font-size: 0.9rem;
}


.purchase-price {

    margin:
        1.2rem
        0;

    color: var(--ink);

    font-size: 1.7rem;
    font-weight: 850;
}


.purchase-description {

    font-size: 0.86rem;
}


.product-creator-message {

    margin-bottom: 1rem;

    padding: 0.8rem;

    border-radius: 12px;

    background: var(--blush-light);

    color: var(--ink-soft);

    font-size: 0.72rem;
}


.product-creator-message strong {

    color: var(--rose-deep);
}


.purchase-meta {

    display: grid;

    grid-template-columns:
        repeat(
            3,
            1fr
        );

    gap: 0.5rem;

    margin:
        1.3rem
        0;

    padding:
        1rem
        0;

    border-block:
        1px solid
        var(--border);
}


.purchase-meta span {

    display: block;

    color: var(--ink-soft);

    font-size: 0.58rem;
}


.purchase-meta strong {

    display: block;

    margin-top: 0.15rem;

    font-size: 0.68rem;
}


.included-heading {

    margin:
        1.3rem
        0
        0.8rem;

    font-family:
        inherit;

    font-size: 0.84rem;

    letter-spacing: 0;
}


.included-list {

    display: grid;

    gap: 0.65rem;

    margin:
        0
        0
        1.5rem;

    padding: 0;

    list-style: none;
}


.included-list li {

    display: flex;

    align-items: flex-start;

    gap: 0.65rem;

    color: var(--ink-medium);

    font-size: 0.78rem;
}


.included-list li > span:first-child {

    width: 22px;
    height: 22px;

    flex:
        0
        0
        auto;

    display: grid;

    place-items: center;

    border-radius: 50%;

    background: var(--sage);

    color: var(--sage-deep);

    font-size: 0.65rem;
}


.purchase-button {

    width: 100%;
}


.purchase-button--disabled {

    opacity: 0.55;

    cursor: not-allowed;
}


.purchase-note {

    margin:
        0.7rem
        0
        0;

    text-align: center;

    font-size: 0.68rem;
}


.purchase-trust {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 0.5rem;

    margin-top: 1rem;

    color: #8f7982;

    font-size: 0.6rem;
}


.product-not-found {

    max-width: 650px;

    margin:
        5rem
        auto;

    text-align: center;
}


.product-not-found h1 {

    font-size:
        clamp(
            2.7rem,
            6vw,
            4.6rem
        );
}


/* ==========================================================
   PRODUCT RESPONSIVE
========================================================== */

@media (max-width: 950px) {

    .product-page-grid {

        grid-template-columns: 1fr;
    }


    .purchase-panel {

        position: static;
    }


    .product-detail-benefits {

        grid-template-columns: 1fr;
    }

}


@media (max-width: 680px) {

    .creator-store-banner__inner {

        min-height: 54px;

        flex-direction: column;

        gap: 0;

        padding:
            0.4rem
            0;

        line-height: 1.35;
    }


    .creator-store-banner__inner
    span:last-child {

        font-size: 0.6rem;
    }


    .product-page-main {

        padding:
            1.5rem
            0
            4rem;
    }


    .large-product-preview {

        min-height: 420px;

        padding:
            2.5rem
            0.7rem
            1rem;
    }


    .large-sheet__money {

        grid-template-columns:
            repeat(
                2,
                1fr
            );
    }


    .large-sheet__bottom {

        grid-template-columns: 1fr;
    }


    .large-goal-card {

        display: none;
    }


    .product-information-card {

        padding: 1.3rem;
    }


    .purchase-panel {

        padding: 1.4rem;
    }


    .purchase-meta {

        grid-template-columns: 1fr;
    }

}


/* Product links now use <a> instead of <button> */

.product-button {

    text-decoration: none;
}


/* ================= CREATOR + PRODUCT PAGE ================= */

.creator-store-banner{background:linear-gradient(90deg,#2b2026,#3c2c34);color:#fff}
.creator-store-banner__inner{min-height:42px;display:flex;align-items:center;justify-content:center;gap:.7rem;text-align:center;font-size:.72rem}
.creator-store-banner strong{color:var(--champagne)}
.creator-store-banner__inner>span:last-child{color:rgba(255,255,255,.65)}

.product-button{text-decoration:none}

.detail-page{min-height:75vh;padding:3rem 0 6rem}
.detail-breadcrumb{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-bottom:2rem;color:var(--ink-soft);font-size:.75rem}
.detail-breadcrumb a{font-weight:700}
.detail-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(350px,.9fr);gap:3.5rem;align-items:start}

.detail-preview{position:relative;min-height:570px;display:grid;place-items:center;padding:3rem;border-radius:var(--radius-xl);box-shadow:var(--shadow-medium)}
.detail-preview--rose{background:linear-gradient(145deg,#edced7,#faeef2)}
.detail-preview--cream{background:linear-gradient(145deg,#f3e5d5,#fffaf5)}
.detail-preview--sage{background:linear-gradient(145deg,#dce9dc,#f5faf4)}
.detail-preview--dark{background:linear-gradient(145deg,#241b20,#47333c)}

.detail-preview-badge{position:absolute;left:1.4rem;top:1.4rem;padding:.42rem .72rem;border-radius:999px;background:rgba(38,29,34,.9);color:#fff;font-size:.62rem;font-weight:800;letter-spacing:.07em}

.detail-sheet{width:min(100%,620px);padding:1rem;border:1px solid rgba(255,255,255,.8);border-radius:23px;background:rgba(255,255,255,.93);box-shadow:0 25px 60px rgba(71,43,54,.15)}
.detail-preview--dark .detail-sheet{background:linear-gradient(145deg,#30252b,#211a1e);border-color:rgba(232,207,173,.2);color:#f4ddc3}

.detail-sheet-header{padding:.85rem;border-radius:11px;background:#c9899d;color:#fff;font-family:Georgia,serif;text-align:center}
.detail-preview--dark .detail-sheet-header{background:linear-gradient(90deg,#b78e65,#dfbc90);color:#2a2025}

.detail-sheet-top{display:flex;justify-content:space-between;margin-top:.8rem;color:#9a7483;font-size:.55rem;font-weight:800;letter-spacing:.1em}
.detail-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:.65rem;margin-top:.8rem}
.detail-stats div{padding:.8rem;border-radius:11px;background:#fff7fa}
.detail-preview--dark .detail-stats div{background:#3a2d34}
.detail-stats span{display:block;color:#9a7483;font-size:.5rem}
.detail-stats strong{display:block;margin-top:.15rem;font-size:.82rem}

.detail-dashboard-bottom{display:grid;grid-template-columns:1.45fr .55fr;gap:.8rem;margin-top:.8rem}
.detail-spending,.detail-savings{padding:.9rem;border-radius:12px;background:#fff8fa}
.detail-preview--dark .detail-spending,.detail-preview--dark .detail-savings{background:#392c33}

.detail-spending-head{display:flex;justify-content:space-between;font-size:.6rem}
.detail-spending-head span{color:#66816b}
.detail-progress{margin-top:.65rem}
.detail-progress>div{display:flex;justify-content:space-between;color:#8b6975;font-size:.52rem}
.detail-progress>i{height:7px;display:block;overflow:hidden;margin-top:.2rem;border-radius:999px;background:#f0dbe2}
.detail-progress b{height:100%;display:block;border-radius:inherit;background:var(--rose)}

.detail-savings{text-align:center}
.detail-savings>span{font-size:.55rem}
.detail-circle{width:85px;height:85px;display:grid;place-items:center;margin:.7rem auto;border-radius:50%;background:conic-gradient(var(--rose) 0deg 260deg,#f0dbe2 260deg)}
.detail-circle strong{width:64px;height:64px;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--ink)}
.detail-savings small{font-size:.5rem}

.detail-info-card{margin-top:1.5rem;padding:2rem;border:1px solid var(--border);border-radius:var(--radius-large);background:#fff}
.detail-info-card h2{font-size:clamp(2rem,4vw,2.8rem)}
.detail-benefits{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:1.5rem}
.detail-benefits>div{padding:1rem;border-radius:15px;background:var(--blush-light)}
.detail-benefits>div>span{color:var(--rose-deep)}
.detail-benefits strong{display:block;margin-top:.4rem;font-size:.75rem}
.detail-benefits p{margin:.2rem 0 0;font-size:.68rem}

.detail-purchase{position:sticky;top:115px;padding:2rem;border:1px solid var(--border);border-radius:var(--radius-xl);background:rgba(255,255,255,.94);box-shadow:var(--shadow-large);backdrop-filter:blur(15px)}
.detail-purchase h1{margin:0;font-size:clamp(2.4rem,4vw,3.7rem)}
.detail-subtitle{margin-top:1rem;font-size:.9rem}
.detail-price{margin:1.2rem 0;color:var(--ink);font-size:1.7rem;font-weight:850}
.detail-purchase>p{font-size:.86rem}

.detail-creator-note{margin-bottom:1rem;padding:.8rem;border-radius:12px;background:var(--blush-light);color:var(--ink-soft);font-size:.72rem}
.detail-creator-note strong{color:var(--rose-deep)}

.detail-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin:1.3rem 0;padding:1rem 0;border-block:1px solid var(--border)}
.detail-meta span{display:block;color:var(--ink-soft);font-size:.58rem}
.detail-meta strong{display:block;margin-top:.15rem;font-size:.68rem}

.detail-included-title{margin:1.3rem 0 .8rem;font-family:inherit;font-size:.84rem;letter-spacing:0}
.detail-feature-list{display:grid;gap:.65rem;margin:0 0 1.5rem;padding:0;list-style:none}
.detail-feature-list li{display:flex;align-items:flex-start;gap:.65rem;color:var(--ink-medium);font-size:.78rem}
.detail-feature-list li>span:first-child{width:22px;height:22px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:var(--sage);color:var(--sage-deep);font-size:.65rem}

.detail-buy-button{width:100%;opacity:.55;cursor:not-allowed}
.detail-checkout-note{text-align:center!important;font-size:.68rem!important}
.detail-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1rem;color:#8f7982;font-size:.6rem}

.detail-error{max-width:650px;margin:5rem auto;text-align:center}
.detail-error h1{font-size:clamp(2.7rem,6vw,4.6rem)}

@media(max-width:950px){
    .detail-grid{grid-template-columns:1fr}
    .detail-purchase{position:static}
    .detail-benefits{grid-template-columns:1fr}
}

@media(max-width:680px){
    .creator-store-banner__inner{min-height:54px;flex-direction:column;gap:0;padding:.4rem 0;line-height:1.35}
    .creator-store-banner__inner>span:last-child{font-size:.6rem}
    .detail-page{padding:1.5rem 0 4rem}
    .detail-preview{min-height:420px;padding:2.5rem .7rem 1rem}
    .detail-stats{grid-template-columns:repeat(2,1fr)}
    .detail-dashboard-bottom{grid-template-columns:1fr}
    .detail-savings{display:none}
    .detail-info-card{padding:1.3rem}
    .detail-purchase{padding:1.4rem}
    .detail-meta{grid-template-columns:1fr}
}

/* =========================================================
   SEIRALUNE FINAL STORE PATCH
========================================================= */

.real-product-window{padding:.65rem;background:rgba(255,255,255,.78)}
.hero-real-image-wrap{overflow:hidden;border-radius:23px;background:#fff}
.hero-real-image{width:100%;max-height:505px;display:block;object-fit:contain;background:#fff}

.product-card--real{display:flex;flex-direction:column}
.product-card-photo-wrap{position:relative;min-height:320px;display:grid;place-items:center;overflow:hidden;padding:1rem;background:linear-gradient(145deg,#f6e8ed,#fffaf8)}
.product-card-photo{width:100%;height:300px;object-fit:contain;border-radius:15px;background:#fff;box-shadow:0 12px 30px rgba(72,40,54,.11)}
.product-card--real .product-card__content{display:flex;flex:1;flex-direction:column}
.product-card--real .product-button{margin-top:auto;text-decoration:none}

.detail-real-preview{position:relative;min-height:560px;display:grid;place-items:center;padding:3rem 2rem 2rem;border-radius:var(--radius-xl);background:linear-gradient(145deg,#f3dce3,#fff8f5);box-shadow:var(--shadow-medium)}
.detail-image-button{width:100%;padding:0;border:0;background:transparent;cursor:zoom-in}
.detail-product-image{width:100%;max-height:650px;display:block;object-fit:contain;border-radius:20px;background:#fff;box-shadow:0 24px 60px rgba(72,40,54,.16)}
.detail-image-hint{display:block;margin-top:.8rem;color:var(--ink-soft);font-size:.66rem}
.detail-preview-badge{z-index:2}

.creator-checkout-box{margin-bottom:1.4rem;padding:1rem;border:1px solid rgba(156,93,113,.14);border-radius:15px;background:var(--blush-light)}
.creator-checkout-label{display:block;margin-bottom:.45rem;color:var(--rose-deep);font-size:.58rem;font-weight:850;letter-spacing:.12em}
.creator-checkout-box p{margin:.2rem 0 .7rem;font-size:.78rem}
.creator-checkout-box small{display:block;margin-top:.5rem;color:var(--ink-soft);font-size:.63rem}
.creator-code-line{display:flex;align-items:center;gap:.6rem}
.creator-code{padding:.45rem .7rem;border-radius:8px;background:white;color:var(--ink);font-size:.78rem;font-weight:850;letter-spacing:.08em}
.copy-code-button{padding:.45rem .7rem;border:1px solid var(--border);border-radius:8px;background:white;color:var(--ink);font-size:.68rem;font-weight:750;cursor:pointer}
.copy-code-button:hover{background:var(--blush)}
.detail-policy-line{margin-top:1rem!important;text-align:center;font-size:.62rem!important}
.detail-policy-line a{color:var(--rose-deep);font-weight:750}

.image-dialog{width:min(94vw,1200px);max-height:94vh;padding:2.8rem 1rem 1rem;border:0;border-radius:20px;background:#fff;box-shadow:0 35px 100px rgba(0,0,0,.3)}
.image-dialog::backdrop{background:rgba(27,20,24,.78);backdrop-filter:blur(5px)}
.image-dialog img{width:100%;max-height:85vh;object-fit:contain}
.image-dialog-close{position:absolute;right:12px;top:10px;width:38px;height:38px;border:0;border-radius:50%;background:#2c2127;color:#fff;font-size:1.4rem;cursor:pointer}

.footer-mini-links{display:flex;flex-wrap:wrap;gap:1rem}
.footer-mini-links a{color:inherit;text-decoration:none}
.footer-mini-links a:hover{color:var(--rose-deep)}

.policy-page{padding:6rem 0}
.policy-wrap{max-width:850px}
.policy-wrap>h1{margin:0;font-size:clamp(3.1rem,7vw,5.4rem)}
.policy-lead{max-width:720px;margin:1.3rem 0 4rem;font-size:1.05rem}
.policy-wrap section{padding:2rem 0;border-top:1px solid var(--border)}
.policy-wrap section h2{font-size:1.8rem}
.policy-wrap section p{max-width:760px}
.policy-wrap section a{color:var(--rose-deep);font-weight:750}
.policy-updated{margin-top:3rem;color:#9a858d;font-size:.72rem}

.thank-page{min-height:75vh;display:grid;place-items:center;padding:5rem 0}
.thank-card{max-width:760px;margin:auto;padding:4rem;border:1px solid var(--border);border-radius:var(--radius-xl);background:linear-gradient(145deg,#fff,#fbecf1);box-shadow:var(--shadow-large);text-align:center}
.thank-icon{width:65px;height:65px;display:grid;place-items:center;margin:0 auto 1.3rem;border-radius:50%;background:var(--blush);color:var(--rose-deep);font-size:1.5rem}
.thank-card h1{font-size:clamp(2.8rem,6vw,4.6rem)}
.thank-card p{max-width:580px;margin:1rem auto}
.thank-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem;margin-top:2rem}

@media(max-width:680px){
    .creator-store-banner__inner{padding:.45rem 0}
    .product-card-photo-wrap{min-height:250px}
    .product-card-photo{height:230px}
    .detail-real-preview{min-height:360px;padding:2.5rem .7rem 1rem}
    .detail-product-image{max-height:470px}
    .thank-card{padding:2rem 1.3rem}
    .thank-actions{display:grid}
    .thank-actions .button{width:100%}
    .footer-mini-links{flex-direction:column}
}

/* =========================================================
   FINAL BUY BUTTON
========================================================= */

.detail-buy-button {
    background: var(--ink) !important;
    color: #ffffff !important;

    opacity: 1 !important;
    cursor: pointer !important;
    pointer-events: auto !important;

    box-shadow:
        0 12px 28px
        rgba(38, 29, 34, 0.18) !important;

    transition:
        background 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.detail-buy-button:hover {
    background: #3b2c33 !important;

    transform: translateY(-2px);

    box-shadow:
        0 16px 34px
        rgba(38, 29, 34, 0.24) !important;
}

.detail-buy-button:active {
    transform: translateY(0);
}

/* =========================================================
   REAL SEIRALUNE LOGO
========================================================= */

.seiralune-logo {
    width: 44px;
    height: 44px;

    display: block;

    object-fit: contain;

    border-radius: 50%;
}

@media (max-width: 680px) {
    .seiralune-logo {
        width: 38px;
        height: 38px;
    }
}


/* =========================================================
   PRODUCT CARD - VIEW PLANNER BUTTON
========================================================= */

.product-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;

    background: var(--ink);
    color: #ffffff !important;

    border: 1px solid var(--ink);
    border-radius: 999px;

    padding: 0.9rem 1.4rem;

    font-weight: 700;
    text-decoration: none;

    transition:
        transform 0.2s ease,
        background 0.2s ease,
        box-shadow 0.2s ease;
}

.product-button:hover {
    background: #3b2c33;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(38, 29, 34, 0.18);
}

.product-button:active {
    transform: translateY(0);
}

.product-button span {
    color: inherit;
}

/* =========================================================
   CREATOR STOREFRONT WELCOME
========================================================= */

.creator-welcome {
    padding: 1.4rem 0 0;
}

.creator-welcome-card {
    max-width: 1180px;
    margin: 0 auto;

    padding: 1.5rem 2rem;

    text-align: center;

    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.92),
        rgba(249,240,242,0.92)
    );

    border: 1px solid rgba(125, 93, 105, 0.16);
    border-radius: 22px;

    box-shadow: 0 12px 32px rgba(53, 39, 45, 0.07);
}

.creator-welcome-card h2 {
    margin: 0.5rem 0;
    font-family: Georgia, serif;
    font-size: clamp(1.6rem, 3vw, 2.3rem);
}

.creator-welcome-card p {
    margin: 0 auto;
    max-width: 650px;
    line-height: 1.7;
}

/* REAL FOOTER LOGO */

.site-footer .footer-logo {
    width: 48px;
    height: 48px;
    object-fit: contain;
    border-radius: 10px;
    flex-shrink: 0;
}

.site-footer .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
}

.site-footer .brand-name {
    font-family: Georgia, serif;
    font-size: 1.35rem;
    font-weight: 700;
}