.smartlady-card {
    --sl-ink: #281923;
    --sl-muted: #654957;
    --sl-accent: #8c194d;
    --sl-border: #e6d7d9;
    max-width: 48rem;
    box-sizing: border-box;
    margin: 2rem auto;
    padding: clamp(1.25rem, 5vw, 3rem);
    border: 1px solid var(--sl-border);
    border-radius: 1.5rem;
    background: #fffdfa;
    box-shadow: 0 1rem 3rem #3d15300d;
    color: var(--sl-ink);
    font-family: "DM Sans", system-ui, sans-serif;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.smartlady-card h2, .smartlady-card h3 { margin: 0 0 .65rem; color: inherit; line-height: 1.2; }
.smartlady-card h2 { font-size: clamp(1.65rem, 4vw, 2.7rem); }
.smartlady-card h3 { font-size: 1.15rem; }
.smartlady-card p { margin: 0 0 1rem; color: var(--sl-muted); }
.smartlady-card a { color: var(--sl-accent); }
.smartlady-card .smartlady-label {
    color: var(--sl-accent);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .11em;
    text-transform: uppercase;
}
.smartlady-card .smartlady-primary,
.smartlady-card input[type="submit"] {
    display: inline-block;
    box-sizing: border-box;
    min-height: 44px;
    padding: .75rem 1.2rem;
    border: 0;
    border-radius: .7rem;
    background: #a51d57;
    color: #fff;
    font: inherit;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}
.smartlady-card .smartlady-primary:hover,
.smartlady-card input[type="submit"]:hover { background: #801440; }
.smartlady-card :focus-visible { outline: 3px solid #8c194d; outline-offset: 4px; }
.smartlady-card > a.smartlady-primary + p { margin-top: 1rem; }
.smartlady-fields, .smartlady-panel-grid, .smartlady-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: 1rem;
    margin: 0 0 1.25rem;
}
.smartlady-fields label, .smartlady-card .login-username label, .smartlady-card .login-password label {
    display: grid;
    gap: .35rem;
}
.smartlady-fields input, .smartlady-card .login-username input, .smartlady-card .login-password input {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
    padding: .6rem;
    border: 1px solid var(--sl-border);
    border-radius: .55rem;
    background: #fff;
    color: var(--sl-ink);
    font: inherit;
}
.smartlady-hub { max-width: 64rem; }
.smartlady-panel {
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--sl-border);
    border-radius: .85rem;
    background: #fcf6f4;
}
details.smartlady-panel { margin-bottom: .75rem; }
.smartlady-panel summary { cursor: pointer; }
.smartlady-panel summary span + span { margin-inline-start: .75rem; }
.smartlady-card .smartlady-status { color: var(--sl-accent); font-weight: 700; }
.smartlady-details { margin: 1rem 0; padding: 1rem 0; border-block: 1px solid var(--sl-border); }
.smartlady-details dt { color: var(--sl-muted); font-size: .85rem; }
.smartlady-details dd { margin: .25rem 0 0; font-weight: 600; }
.smartlady-page-link { display: inline-block; padding: .6rem; }
@media (max-width: 35rem) {
    .smartlady-card { margin: 1rem auto; }
    .smartlady-card .smartlady-primary { width: 100%; text-align: center; }
}

/* Membership pages have their own layout, independent of the article theme. */
body.sl-membership {
    margin: 0;
    background: #f9f6f2;
    color: #281923;
    font: 1rem/1.6 "DM Sans", system-ui, sans-serif;
}
.sl-member-header, .sl-member-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem clamp(1rem, 5vw, 5rem);
    background: #fffdfa;
    border-bottom: 1px solid #eadedb;
}
.sl-brand, .sl-offer h1 {
    font-family: "Playfair Display", Georgia, serif;
}
.sl-member-header .sl-brand { color: #811744; font-size: clamp(1.15rem, 4vw, 1.8rem); font-weight: 700; text-decoration: none; }
.sl-member-nav {
    display: flex;
    align-items: center;
    gap: .35rem;
    font: 700 .9rem/1.3 "DM Sans", system-ui, sans-serif;
}
.sl-member-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    box-sizing: border-box;
    padding: .55rem .85rem;
    border-radius: .5rem;
    color: #72133d;
    background: #fffdfa;
    text-decoration: none;
}
.sl-member-nav a.sl-nav-primary { color: #fff; background: #a51d57; }
body:not(.sl-membership) .sl-member-nav {
    position: fixed;
    z-index: 9990;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    padding: .25rem;
    border: 1px solid #eadedb;
    border-radius: .7rem;
    background: #fffdfa;
    box-shadow: 0 .35rem 1.5rem #3d153027;
}
.sl-member-main {
    max-width: 72rem;
    min-height: 65vh;
    margin: auto;
    padding: clamp(1.25rem, 5vw, 4rem);
}
.sl-checkout-view:has(.sl-offer) {
    display: grid;
    grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr);
    gap: clamp(1rem, 4vw, 3rem);
    align-items: start;
}
.sl-member-content { min-width: 0; }
.sl-offer {
    padding: clamp(1.5rem, 4vw, 3rem);
    border-radius: 1rem;
    background: radial-gradient(ellipse at top right, #63294a, transparent 80%), #2a1626;
    color: #fff3ee;
}
body.sl-membership .sl-offer h1 {
    margin: .65rem 0 1rem;
    color: #fff7f2;
    font: 500 clamp(2.25rem, 4vw, 3.6rem)/1.04 "Playfair Display", Georgia, serif;
    letter-spacing: -.035em;
    text-wrap: balance;
}
body.sl-membership .sl-offer p { margin: 0 0 .75rem; color: #f5e2e9; }
body.sl-membership .sl-offer-price { color: #fff7f2; }
body.sl-membership .smartlady-card :is(h2, h3) { color: #281923; }
body.sl-membership .smartlady-card h2 {
    font: 600 clamp(1.5rem, 2.6vw, 2.15rem)/1.18 "DM Sans", system-ui, sans-serif;
    letter-spacing: -.025em;
}
body.sl-membership .smartlady-card p { color: #654957; }
.sl-member-nav a:focus-visible { outline: 3px solid #a51d57; outline-offset: 3px; }
.sl-checkout-view .smartlady-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.smartlady-fields .sl-field-wide { grid-column: 1 / -1; }
.smartlady-fields label { font-size: .9rem; font-weight: 600; }
.smartlady-fields input { font-weight: 400; }
.smartlady-card [role="alert"] {
    padding: .65rem .85rem;
    border-inline-start: 3px solid #a51d57;
    background: #fff0f4;
}
@media (max-width: 32rem) {
    .sl-checkout-view .smartlady-fields { grid-template-columns: minmax(0, 1fr); }
}
.sl-offer-price { margin-top: 2rem; font-size: 1.6rem; font-weight: 700; }
.sl-member-footer { border-top: 1px solid #eadedb; border-bottom: 0; }
.sl-member-footer a { color: #72133d; }
.sl-membership .smartlady-card { margin: 0 auto; }
.sl-membership .smartlady-panel { background: #fcf6f4; }
@media (max-width: 48rem) {
    .sl-checkout-view:has(.sl-offer) { grid-template-columns: minmax(0, 1fr); }
    .sl-offer h1 br { display: none; }
}