.ss-page {
    --ss-card:    #fbf6ea;
    --ss-surface: #ffffff;
    --ss-ink:     #2a211c;
    --ss-muted:   #6b5d52;
    --ss-red:     #b8302a;
    --ss-red-hi:  #9e2823;
    --ss-green:   #1f6b47;
    --ss-green-hi:#185a3b;
    --ss-gold:    #e8b44a;
    --ss-line:    #e4d9c7;
    --ss-field:   #cbbfad;
    --ss-tint:    #f5eedf;
    --ss-stripe: repeating-linear-gradient(-45deg,
        var(--ss-red) 0 10px, #fff 10px 20px, var(--ss-green) 20px 30px, #fff 30px 40px);
    --animate-duration: .3s;
}

.sr-only {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* The dark band */
.ss-band {
    position: relative; isolation: isolate;
    padding-top: calc(var(--header-h) + env(safe-area-inset-top) + clamp(1.5rem, 4vw, 3rem));
    padding-bottom: clamp(3rem, 7vw, 5.5rem);
    background: var(--ink); color: var(--paper);
    overflow: hidden; overflow: clip;
}

.ss-band-inner {
    position: relative; z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-areas: "card panel" "art panel";
    gap: 0 clamp(2rem, 4vw, 4rem);
    align-items: start;
}

/* Postcard */
.ss-postcard {
    grid-area: card;
    position: relative; z-index: 2;
    padding: clamp(1.6rem, 3vw, 2.4rem);
    border: 10px solid transparent;
    border-radius: var(--radius);
    background: linear-gradient(var(--ss-card), var(--ss-card)) padding-box, var(--ss-stripe) border-box;
    color: var(--ss-ink);
    box-shadow: 0 30px 60px -28px rgba(4, 7, 11, .7);
    transform: rotate(-2deg);
}

.ss-badge {
    position: absolute; z-index: 1;
    display: grid; place-items: center;
    width: 56px; height: 56px; border-radius: 50%;
    background: var(--ss-surface);
    box-shadow: 0 8px 18px -8px rgba(4, 7, 11, .45);
}
.ss-postcard { transition: transform .3s var(--ease-out), box-shadow .3s ease; }
@media (hover: hover) and (min-width: 768px) {
    .ss-band-inner > .ss-postcard:hover { transform: rotate(0deg) scale(1.015); box-shadow: 0 40px 70px -26px rgba(4, 7, 11, .75); }
}
.ss-badge-tl { top: -26px; left: -26px; }
.ss-badge-br { right: -26px; bottom: -26px; }
.ss-badge-art { width: 44px; height: 44px; }
.ss-badge-tl .ss-badge-art { animation: ss-turn 26s linear infinite; }
.ss-badge-br .ss-badge-art { animation: ss-wiggle 5s ease-in-out infinite; transform-origin: 50% 70%; }
@keyframes ss-turn { to { transform: rotate(360deg); } }
@keyframes ss-wiggle {
    0%, 80%, 100% { transform: rotate(0); }
    84% { transform: rotate(-12deg) scale(1.06); }
    88% { transform: rotate(10deg) scale(1.06); }
    92% { transform: rotate(-6deg); }
    96% { transform: rotate(3deg); }
}

.ss-sparkles { position: absolute; inset: 0; pointer-events: none; }
.ss-sparkles i {
    position: absolute; width: 14px; height: 14px;
    background: var(--ss-gold);
    clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
    animation: ss-twinkle 2.6s ease-in-out infinite;
}
.ss-sparkles i:nth-child(1) { top: 14%; right: 9%; }
.ss-sparkles i:nth-child(2) { top: 46%; right: 4%; width: 9px; height: 9px; animation-delay: .7s; }
.ss-sparkles i:nth-child(3) { bottom: 12%; left: 42%; width: 11px; height: 11px; animation-delay: 1.3s; }
.ss-sparkles i:nth-child(4) { top: 5%; left: 46%; width: 8px; height: 8px; animation-delay: 1.9s; }
@keyframes ss-twinkle {
    0%, 100% { transform: scale(.3) rotate(0); opacity: .2; }
    50% { transform: scale(1) rotate(45deg); opacity: 1; }
}

/* Confetti (SS-Motion.js) */
.ss-confetti { position: fixed; inset: 0; z-index: 300; pointer-events: none; overflow: hidden; }
.ss-confetti span { position: absolute; width: 8px; height: 12px; margin: -6px 0 0 -4px; border-radius: 2px; will-change: transform, opacity; }
.ss-confetti .is-round { width: 9px; height: 9px; border-radius: 50%; }
.ss-confetti .is-long { width: 4px; height: 16px; }

.ss-swash { display: block; width: min(70%, 320px); height: 22px; margin: -.6rem auto .8rem; overflow: visible; }
.ss-swash path { fill: none; stroke: var(--ss-gold); stroke-width: 4; stroke-linecap: round; }
.ss-spoke  { stroke: #8a5a2b; stroke-width: 2.4; stroke-linecap: round; fill: none; }
.ss-wheel  { fill: none; stroke: #8a5a2b; stroke-width: 2.4; }
.ss-hub    { fill: #8a5a2b; }
.ss-leaf   { fill: var(--ss-green); }
.ss-berry  { fill: var(--ss-red); }
.ss-box    { fill: var(--ss-red); }
.ss-lid    { fill: var(--ss-red-hi); }
.ss-ribbon { stroke: var(--ss-gold); stroke-width: 3.2; fill: none; }
.ss-bow    { fill: none; stroke: var(--ss-gold); stroke-width: 2.4; stroke-linejoin: round; }

.ss-kicker {
    margin-bottom: .7rem;
    font: 400 .76rem/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase;
    color: var(--ss-red);
}
.ss-title {
    margin-bottom: 1rem;
    font: 400 clamp(2.2rem, 4.4vw, 3.4rem)/1.02 var(--serif);
    color: var(--ss-ink);
    text-wrap: balance;
}
.ss-intro { font-size: 1.05rem; line-height: 1.65; color: var(--ss-ink); }
.ss-second { margin-top: .8rem; line-height: 1.65; color: var(--ss-muted); }

/* Illustration under the postcard */
.ss-art {
    grid-area: art;
    position: relative; z-index: 1;
    margin-top: -2.5rem; padding: 0 1rem;
}
.ss-art img { width: 100%; height: auto; }

/* Snow */
.ss-snow { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.ss-snow span {
    position: absolute; left: 0; right: 0; top: -360px; bottom: 0;
    background-repeat: repeat;
    will-change: transform;
}
.ss-snow-a {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cg fill='%23f4f0e8' fill-opacity='.55'%3E%3Ccircle cx='20' cy='30' r='1.6'/%3E%3Ccircle cx='130' cy='70' r='1.2'/%3E%3Ccircle cx='200' cy='15' r='1.8'/%3E%3Ccircle cx='80' cy='150' r='1.4'/%3E%3Ccircle cx='170' cy='190' r='1.1'/%3E%3Ccircle cx='40' cy='220' r='1.5'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 240px 240px;
    animation: ss-snow-240 20s linear infinite;
}
.ss-snow-b {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360'%3E%3Cg fill='%23c8e8f5' fill-opacity='.35'%3E%3Ccircle cx='60' cy='40' r='2.4'/%3E%3Ccircle cx='250' cy='110' r='2'/%3E%3Ccircle cx='150' cy='250' r='2.6'/%3E%3Ccircle cx='320' cy='300' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 360px 360px;
    animation: ss-snow-360 30s linear infinite;
}
.ss-snow-c {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cg fill='%23f4f0e8' fill-opacity='.8'%3E%3Ccircle cx='30' cy='60' r='1'/%3E%3Ccircle cx='120' cy='20' r='.8'/%3E%3Ccircle cx='150' cy='140' r='1.1'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 180px 180px;
    animation: ss-snow-180 11s linear infinite;
}
@keyframes ss-snow-180 { to { transform: translate3d(-20px, 180px, 0); } }
@keyframes ss-snow-240 { to { transform: translate3d(-40px, 240px, 0); } }
@keyframes ss-snow-360 { to { transform: translate3d(30px, 360px, 0); } }

/* Planner panel */
.ss-panel {
    grid-area: panel;
    position: relative; z-index: 2;
    border-radius: var(--radius);
    background: var(--ss-surface); color: var(--ss-ink);
    box-shadow: 0 30px 60px -28px rgba(4, 7, 11, .75);
    overflow: hidden;
}
.ss-panel > noscript .ss-alert { margin: 1rem 1.25rem 0; }

.ss-acc + .ss-acc { border-top: 1px solid var(--ss-line); }
.ss-acc-head { position: relative; margin: 0; font: inherit; }
.ss-acc-head::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
    background: var(--ss-stripe);
    transform: scaleY(0); transform-origin: bottom;
    transition: transform .25s var(--ease-out);
}
.ss-acc.is-open .ss-acc-head::after { transform: scaleY(1); }

.ss-acc-btn {
    display: flex; align-items: center; gap: .7rem;
    width: 100%; min-height: 60px; padding: .9rem 1.25rem 1.1rem;
    border: 0; background: var(--ss-surface); color: var(--ss-ink);
    font: 700 1.05rem/1.2 var(--sans); text-align: left; cursor: pointer;
}
.ss-acc-btn:hover { background: #fbf8f2; }
.ss-acc-btn:focus-visible { outline-offset: -4px; }
.ss-acc-icon { width: 1.2rem; height: 1.2rem; color: var(--ss-green); }
.ss-acc-meta { font-variant-numeric: tabular-nums; margin-left: auto; font: 400 .78rem var(--mono); color: var(--ss-muted); }
.ss-acc-btn::after {
    content: ''; flex: none; width: .55rem; height: .55rem; margin: 0 .2rem 0 .4rem;
    border-right: 2px solid var(--ss-muted); border-bottom: 2px solid var(--ss-muted);
    transform: translateY(-2px) rotate(45deg);
    transition: transform .25s var(--ease-out);
}
.ss-acc.is-open .ss-acc-btn::after { transform: translateY(2px) rotate(-135deg); }

/* Height animates through grid rows (0fr to 1fr), never `height` itself. */
.ss-acc-body {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .25s ease-out;
}
.ss-acc.is-open .ss-acc-body { grid-template-rows: 1fr; }
.ss-acc-inner {
    min-height: 0; overflow: hidden;
    padding: 0 1.25rem;
    opacity: 0; visibility: hidden;
    transition: opacity .2s ease, visibility 0s linear .25s;
}
.ss-acc.is-open .ss-acc-inner { opacity: 1; visibility: visible; transition: opacity .25s ease .05s, visibility 0s; }
.ss-acc-inner::before, .ss-acc-inner::after { content: ''; display: block; height: 1.1rem; }

.ss-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; margin-bottom: .6rem; }
.ss-help { font-size: .86rem; line-height: 1.55; color: var(--ss-muted); }
.ss-help-split { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .2rem 1rem; margin-top: .4rem; }
.ss-counter { font: 400 .74rem/1.6 var(--mono); font-variant-numeric: tabular-nums; }

/* Rows */
.ss-rows { counter-reset: ss-row; display: grid; gap: .45rem; }
.ss-row {
    counter-increment: ss-row;
    display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto auto;
    align-items: center; gap: .1rem .35rem;
}
.ss-row::before { content: counter(ss-row); font: 400 .74rem var(--mono); color: var(--ss-muted); text-align: right; padding-right: .3rem; }
.ss-row.is-blank .ss-input { grid-column: 2 / -1; }
.ss-row-note { grid-column: 2 / -1; font-size: .8rem; font-weight: 600; color: var(--ss-red); }
.ss-row-note:empty { display: none; }
.ss-row.is-dup .ss-input { border-color: var(--ss-red); }
.ss-row.is-leaving { pointer-events: none; }
.ss-icon-btn .icon { transition: transform .35s var(--ease-out); }
.ss-icon-btn[data-rules]:hover .icon { transform: rotate(60deg); }
.ss-icon-remove:hover .icon { transform: rotate(90deg); }

.ss-input {
    width: 100%; min-height: 44px; padding: .55rem .8rem;
    border: 1.5px solid var(--ss-field); border-radius: 10px;
    background: #fff; color: var(--ss-ink);
    font: 400 1rem/1.4 var(--sans);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.ss-input::placeholder { color: #776a5f; }
.ss-input:hover { border-color: #b3a692; }
.ss-input:focus { border-color: var(--ss-green); box-shadow: 0 0 0 3px rgba(31, 107, 71, .18); outline: none; }
.ss-input:focus-visible { outline: 2px solid var(--copper); outline-offset: 2px; }
.ss-input[aria-invalid="true"] { border-color: var(--ss-red); }
.ss-textarea { resize: vertical; min-height: 7rem; }
#ss-text { font: 400 .92rem/1.6 var(--mono); }
.ss-select {
    appearance: none; -webkit-appearance: none;
    padding-right: 2.4rem;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%236b5d52' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right .9rem center;
}
.ss-label { display: block; margin-bottom: .35rem; font-size: .92rem; font-weight: 700; color: var(--ss-ink); }
.ss-field + .ss-field { margin-top: 1.2rem; }
.ss-field-error { margin-top: .4rem; font-size: .86rem; font-weight: 600; color: var(--ss-red); }
.ss-field-error:empty { display: none; }

/* Buttons */
.ss-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    min-height: 48px; padding: 0 1.4rem;
    border: 1.5px solid transparent; border-radius: 999px;
    font: 700 .95rem/1 var(--sans); text-decoration: none; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, transform .15s var(--ease-out), box-shadow .15s ease;
}
.ss-btn .icon { width: 1.15rem; height: 1.15rem; }
.ss-btn:hover:not(:disabled) { transform: translateY(-2px); }
.ss-btn:active { transform: scale(.97); }
.ss-btn:disabled { opacity: .6; cursor: progress; transform: none; }
.ss-btn-red   { background: var(--ss-red); color: #fff; }
.ss-btn-red:hover:not(:disabled) { background: var(--ss-red-hi); box-shadow: 0 10px 22px -10px rgba(184, 48, 42, .6); }
.ss-btn-green { background: var(--ss-green); color: #fff; }
.ss-btn-green:hover:not(:disabled) { background: var(--ss-green-hi); }
.ss-btn-plain { border-color: var(--ss-field); background: transparent; color: var(--ss-ink); }
.ss-btn-plain:hover { border-color: var(--ss-ink); }
.ss-btn-small { min-height: 44px; padding: 0 1rem; font-size: .86rem; }
.ss-btn.is-copied { background: var(--ss-ink); }

.ss-quiet {
    display: inline-flex; align-items: center; gap: .45rem;
    min-height: 44px; padding: 0 .2rem;
    border: 0; background: none; color: var(--ss-green);
    font: 700 .9rem/1.2 var(--sans); cursor: pointer; text-align: left;
}
.ss-quiet .icon { width: 1.1rem; height: 1.1rem; flex: none; }
.ss-quiet:hover span, .ss-quiet-small:hover { text-decoration: underline; text-underline-offset: 3px; }
.ss-quiet:disabled { color: #9b8f84; cursor: not-allowed; }
.ss-quiet:disabled:hover span { text-decoration: none; }
.ss-quiet-small { font-size: .84rem; color: var(--ss-muted); }

.ss-icon-btn {
    position: relative; transition: background-color .15s ease, color .15s ease, transform .15s var(--ease-out);
    display: inline-grid; place-items: center;
    width: 44px; height: 44px; border: 0; border-radius: 10px;
    background: transparent; color: var(--ss-muted); cursor: pointer;
}
.ss-icon-btn .icon { width: 1.2rem; height: 1.2rem; }
.ss-icon-btn:hover { background: var(--ss-tint); color: var(--ss-ink); }
.ss-icon-btn:active, .ss-quiet:active { transform: scale(.95); }
.ss-acc-btn:active { background: var(--ss-tint); }
.ss-icon-btn.has-rules { color: var(--ss-green); }
.ss-icon-remove:hover { color: var(--ss-red); }
.ss-dot { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--ss-red); box-shadow: 0 0 0 2px #fff; }

/* Draw, errors, footer */
.ss-actions { display: grid; gap: .8rem; padding: 1.1rem 1.25rem; border-top: 1px solid var(--ss-line); background: #fbf8f2; }
.ss-draw { width: 100%; font-size: 1.02rem; }

.ss-alert {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .75rem .9rem; border-radius: 10px;
    font-size: .9rem; line-height: 1.5; color: var(--ss-ink);
}
.ss-alert .icon { width: 1.2rem; height: 1.2rem; flex: none; margin-top: .05rem; }
.ss-alert[hidden] { display: none; }
.ss-alert-error { border: 1.5px solid var(--ss-red); background: #fcefed; }
.ss-alert-error .icon { color: var(--ss-red); }
.ss-alert-warn { flex-wrap: wrap; margin-bottom: 1rem; border: 1.5px solid #b07a12; background: #fdf5e1; }
.ss-alert-warn .icon { color: #8a5f0c; }
.ss-alert-warn p { flex: 1 1 14rem; }

.ss-foot {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .2rem 1rem;
    padding: .6rem 1.25rem .8rem;
    font-size: .82rem; color: var(--ss-muted);
}
.ss-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .6rem; width: 100%; padding: .6rem 0 .2rem; }
.ss-confirm[hidden] { display: none; }
.ss-confirm p { flex: 1 1 100%; font-weight: 600; color: var(--ss-ink); }

/* Links */
.ss-links { margin: .8rem 0 1rem; }
.ss-link {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1rem;
    padding: .45rem 0; border-bottom: 1px dashed var(--ss-line);
}
.ss-link-name { font-weight: 600; overflow-wrap: anywhere; }
.ss-link-url { flex: 1 1 100%; font: 400 .8rem var(--mono); }
.ss-export { display: grid; gap: .5rem; padding-top: .2rem; }
.ss-export .ss-label { display: flex; align-items: center; gap: .45rem; margin: 0; }
.ss-export .ss-label .icon { width: 1.1rem; height: 1.1rem; color: var(--ss-green); }
.ss-export-btns { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Rules dialog */
.ss-modal {
    width: min(100% - 2rem, 540px); max-height: calc(100% - 2rem);
    margin: auto; padding: 0; border: 0; border-radius: var(--radius);
    background: var(--ss-surface); color: var(--ss-ink);
    box-shadow: 0 40px 80px -30px rgba(4, 7, 11, .7);
}
.ss-modal[open]::backdrop { animation: ss-fade .25s ease both; }
@keyframes ss-fade { from { opacity: 0; } }
.ss-modal::backdrop { background: rgba(11, 15, 20, .62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ss-modal-inner { padding: 1.5rem 1.4rem 1.3rem; border-top: 6px solid transparent; border-image: var(--ss-stripe) 6; --animate-duration: .22s; }
.ss-modal-title { text-wrap: balance; margin-bottom: 1.2rem; font: 400 1.8rem/1.1 var(--serif); color: var(--ss-ink); overflow-wrap: anywhere; }
.ss-rule-group { margin-top: 1.3rem; padding: 0; border: 0; }
.ss-rule-list { display: grid; gap: .45rem; }
.ss-rule-list:not(:empty) { margin-bottom: .3rem; }
.ss-rule { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem; align-items: center; }
.ss-modal .ss-alert-error { margin-top: 1rem; }
.ss-modal-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .6rem; margin-top: 1.6rem; }

/* Sections below the band never scroll sideways, whatever a reveal animation starts from. */
.ss-page .section { overflow-x: clip; }

/* How it works */
.ss-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); counter-reset: none; }
.ss-step { padding-top: 1.4rem; border-top: 1px solid var(--line-light); }
.ss-step-num {
    display: inline-grid; place-items: center;
    width: 2.6rem; height: 2.6rem; margin-bottom: 1rem; border-radius: 50%;
    background: var(--ocean); color: var(--paper);
    font: 400 1.3rem/1 var(--serif);
}
.ss-step h3 { margin-bottom: .5rem; font-size: 1.45rem; color: var(--ocean); }
.ss-step p { line-height: 1.7; color: var(--muted); }

/* Privacy and FAQ */
.ss-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 5vw, 5rem); align-items: start; }
.ss-split .section-head { margin-bottom: 0; }
.ss-privacy-icon { width: 3rem; height: 3rem; margin-top: 1rem; color: var(--copper-ink); }
.ss-prose p { max-width: 62ch; margin-bottom: 1rem; line-height: 1.8; color: var(--muted); }
.ss-prose a { color: var(--ocean); font-weight: 600; text-underline-offset: 3px; }
.ss-owner { padding-top: 1rem; border-top: 1px solid var(--line-light); }

.ss-faq-item { border-bottom: 1px solid var(--line-light); }
.ss-faq-item:first-child { border-top: 1px solid var(--line-light); }
.ss-faq-item summary {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    min-height: 44px; padding: 1.1rem 0;
    list-style: none; cursor: pointer;
}
.ss-faq-item summary::-webkit-details-marker { display: none; }
.ss-faq-item summary h3 { font-size: 1.3rem; line-height: 1.25; color: var(--ocean); }
.ss-faq-icon { width: 1.3rem; height: 1.3rem; flex: none; color: var(--copper-ink); transition: transform .25s var(--ease-out); }
.ss-faq-item[open] .ss-faq-icon { transform: rotate(45deg); }
.ss-faq-item p { max-width: 62ch; padding-bottom: 1.2rem; line-height: 1.75; color: var(--muted); }

/* Reveal card */
.ss-band-reveal { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; }
.ss-reveal-inner { position: relative; z-index: 2; width: 100%; }
.ss-reveal {
    max-width: 620px; margin: 1.5rem auto;
    text-align: center;
    transform: rotate(2deg);
}
.ss-greeting { margin: .2rem auto 1rem; max-width: 38ch; text-wrap: balance; font: 600 1.15rem/1.5 var(--sans); color: var(--ss-ink); }
.ss-reveal .ss-title { margin-top: .4rem; }
.ss-name {
    font: 700 clamp(2rem, 7vw, 3.5rem)/1.05 'Caveat', cursive;
    color: var(--ss-red); overflow-wrap: anywhere;
}
.ss-name-one { display: inline-block; margin: .4rem 0 1rem; font-size: clamp(3rem, 12vw, 6rem); }
.ss-names { display: grid; gap: .6rem; margin: .4rem 0 1rem; counter-reset: ss-name; text-align: left; }
.ss-names-item {
    counter-increment: ss-name;
    display: grid; grid-template-columns: 2rem minmax(0, 1fr); column-gap: .5rem;
    padding-bottom: .55rem; border-bottom: 1px dashed var(--ss-line);
}
.ss-names-item::before { content: counter(ss-name); grid-row: 1 / span 2; padding-top: .9rem; font: 400 .8rem var(--mono); color: var(--ss-muted); text-align: right; }
.ss-names-hint { font-size: .88rem; line-height: 1.45; color: var(--ss-muted); }
.ss-note { margin-top: 1rem; padding: .8rem 1rem; border-radius: 12px; background: var(--ss-tint); text-align: left; font-size: .95rem; line-height: 1.55; }
.ss-note-label { margin-bottom: .15rem; font: 400 .72rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ss-muted); }
.ss-secret { margin-top: 1.2rem; font-size: .9rem; color: var(--ss-muted); }
.ss-reveal-cta { margin-top: 1.4rem; }

/* Responsive */
@media (max-width: 1023.98px) {
    .ss-band-inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "card" "panel" "art"; gap: 2.2rem; }
    .ss-postcard { max-width: 640px; }
    .ss-art { max-width: 460px; margin: 0 auto; }
    .ss-split { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 767.98px) {
    .ss-postcard, .ss-reveal { transform: none; }
    .ss-steps { grid-template-columns: minmax(0, 1fr); }
    .ss-badge { width: 44px; height: 44px; }
    .ss-badge-art { width: 34px; height: 34px; }
    /* On phones the badges swap corners so the wreath never covers the kicker. */
    .ss-badge-tl { top: -18px; left: auto; right: -12px; }
    .ss-badge-br { right: auto; left: -12px; bottom: -18px; }
}

@media (max-width: 560px) {
    .ss-band { padding-top: calc(var(--header-h) + env(safe-area-inset-top) + 1rem); }
    .ss-band-inner { gap: 1.4rem; }
    .ss-postcard { padding: 1.2rem 1.1rem 1.3rem; border-width: 8px; }
    .ss-title { font-size: clamp(1.9rem, 9vw, 2.4rem); margin-bottom: .6rem; }
    .ss-intro { font-size: .98rem; line-height: 1.55; }
    .ss-second { display: none; }
    .ss-acc-btn, .ss-actions, .ss-foot { padding-left: 1rem; padding-right: 1rem; }
    .ss-acc-inner { padding: 0 1rem; }
    .ss-row { grid-template-columns: 1.3rem minmax(0, 1fr) auto auto; gap: .1rem .15rem; }
    .ss-modal-inner { padding: 1.2rem 1rem 1rem; }
    .ss-reveal { padding: 1.3rem 1rem; }
    .ss-greeting { font-size: 1.02rem; }
}

/* Snow is off on the narrowest phones to save battery. */
@media (max-width: 389.98px) {
    .ss-snow { display: none; }
}

/* Snow stays as a still frame; POB-Stylesheet.css already cuts the other animations. */
@media (prefers-reduced-motion: reduce) {
    .ss-snow span, .ss-badge-art, .ss-sparkles i { animation: none; }
    .ss-sparkles i { opacity: .8; transform: none; }
    .ss-page { --animate-duration: 1ms; }
}