/* Client content of 24 Oct 2026 (inc/paul-content.php, premium-layout.js): hero copy, Why choose SpaDrop, Standards,
   Your SpaDrop journey, Relax Club, the FAQ page and the final contact channels. Mobile first; brand tokens from
   style.css, so dark.css remaps the colours. */

/* Hero (spadrop-hero-en-th-zh.pdf): bold two-line headline, wider pills, dark "Book now" pill, underlined menu link. */
.ref-center .ref-title--drop{font-weight:700;letter-spacing:-.035em;line-height:1.08}
html[lang=th] .ref-center .ref-title--drop{letter-spacing:-.01em;line-height:1.28}
html[lang=zh-Hans] .ref-center .ref-title--drop{letter-spacing:0;line-height:1.2}
/* Paul (2 Nov 2026): the headline 20% smaller than reference.css's centred titles (80 / 72 / 55 / 43 / 39 / 35px). */
.ref-center .ref-title--drop{font-size:64px}
@media(min-width:1200px) and (max-width:1399px){.ref-center .ref-title--drop{font-size:58px}}
@media(max-width:1199px){.ref-center .ref-title--drop{font-size:44px}}
@media(max-width:800px){.ref-center .ref-title--drop{font-size:34px}}
@media(max-width:540px){.ref-center .ref-title--drop{font-size:31px}}
@media(max-width:359px){.ref-center .ref-title--drop{font-size:28px}}
.ref-center--drop .ref-title [data-ref-word]{color:#1f5f5c}
.ref-center--drop .ref-controls{max-width:660px;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr) minmax(0,1fr)}
.ref-center--drop .ref-select-shell select{max-width:none;font-weight:600}
.ref-center--drop .ref-price-value strong{font-weight:600}
.ref-actions--drop .button{min-width:220px;font-weight:600}
.ref-actions--drop .button-primary{background:#0d4b4a;border-color:#0d4b4a}
.ref-menu-link{display:inline-block;margin-top:16px;color:var(--teal);font-weight:600;font-size:16px;text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1.5px}
.ref-menu-link:hover{color:#0a3a39}
@media(max-width:800px){.ref-menu-link{font-size:14px;margin-top:12px}.ref-actions--drop .button{min-width:180px}}
html[data-theme=dark] .ref-center--drop .ref-title [data-ref-word]{color:var(--sd-accent)}
html[data-theme=dark] .ref-menu-link{color:var(--sd-accent)}
/* Video hero (Paul, 2026-10-28): the floating side cards are gone; washed-out landscape clips fill the hero behind the
   copy and crossfade in turn (motion.js heroMedia). The veil keeps the copy readable over any frame. */
.ref-backdrop{position:absolute;inset:0;z-index:0;overflow:hidden;background:#eef2ef;pointer-events:none}
.ref-clip{position:absolute;inset:0}
.ref-clip :is(img,video){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--clip-x,62%) center}
.ref-backdrop::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 42% 46% at 50% 52%,rgba(255,255,255,.36),rgba(255,255,255,.12) 62%,rgba(255,255,255,0));pointer-events:none}
.ref-hero .ref-center--drop{width:min(860px,calc(100% - 48px))}
/* Clear video behind the copy: a tight glow keeps the smaller text readable over the clip. */
.ref-hero .ref-center--drop .ref-description{color:#1d2b29;text-shadow:0 0 6px rgba(255,255,255,.9)}
.ref-center--drop .ref-kicker{display:inline-flex;align-items:center;gap:9px;padding:7px 16px;border-radius:999px;background:rgba(255,255,255,.78);border:1px solid rgba(214,224,217,.9);color:#2f3d3a;font-size:14px;line-height:1.5;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ref-center--drop .ref-kicker::before{content:"";width:9px;height:9px;border-radius:50%;background:#7bb342;box-shadow:0 0 0 3px rgba(123,179,66,.22);flex-shrink:0}
.ref-center--drop .ref-description{color:#3f4b48}
.ref-hero .ref-center--drop .ref-controls{max-width:850px;gap:0;padding:0;background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.95);border-radius:24px;box-shadow:0 18px 44px rgba(20,52,48,.12);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);overflow:hidden}
.ref-hero .ref-center--drop .ref-control{background:transparent;border:0;border-radius:0;min-height:94px}
.ref-hero .ref-center--drop .ref-control+.ref-control{border-left:1px solid #e1e7e2}
.ref-hero .ref-center--drop .ref-select-shell select{width:auto;flex:0 1 auto;max-width:100%}
.ref-hero .ref-actions--drop .button-primary{min-height:60px;min-width:244px;box-shadow:0 12px 28px rgba(13,75,74,.22)}
html[data-theme=dark] .ref-backdrop{background:#0b1a1a}
html[data-theme=dark] .ref-backdrop::after{background:radial-gradient(ellipse 42% 46% at 50% 52%,rgba(9,24,24,.5),rgba(9,24,24,.22) 62%,rgba(9,24,24,.06))}
html[data-theme=dark] .ref-hero .ref-center--drop .ref-description{color:var(--sd-text);text-shadow:0 0 6px rgba(9,24,24,.9)}
html[data-theme=dark] .ref-center--drop .ref-kicker{background:rgba(18,40,40,.75);border-color:var(--sd-line);color:var(--sd-text)}
html[data-theme=dark] .ref-center--drop .ref-description{color:var(--sd-muted)}
html[data-theme=dark] .ref-hero .ref-center--drop .ref-controls{background:rgba(18,40,40,.82);border-color:var(--sd-line)}
html[data-theme=dark] .ref-hero .ref-center--drop .ref-control+.ref-control{border-color:var(--sd-line)}
@media(max-width:800px){.ref-center--drop .ref-kicker{font-size:12px;padding:6px 12px}.ref-hero .ref-center--drop .ref-control{min-height:78px}}
@media(max-width:540px){.ref-hero .ref-center--drop{width:calc(100% - 32px)}.ref-clip :is(img,video){object-position:var(--clip-x-m,68%) center}.ref-backdrop::after{background:linear-gradient(rgba(255,255,255,0),rgba(255,255,255,.26) 45%,rgba(255,255,255,0))}.ref-hero .ref-center--drop .ref-controls{border-radius:18px}.ref-hero .ref-actions--drop .button-primary{min-width:200px;min-height:54px}}
/* Hero entrance, once per page view after the brand loader: the two headline lines rise out of a mask, then the
   copy, booking bar and buttons follow, while the video settles from a slight zoom. Reduced motion never gets .motion-enabled. */
/* Flex column: the lines' negative margins must not collapse, or the gap between the two lines grows. */
.ref-center--drop .ref-title>[aria-hidden]{display:flex;flex-direction:column}
.ref-center--drop .ref-line{display:block;overflow:hidden;padding:.18em .08em .22em;margin:-.18em -.08em -.22em}
.ref-center--drop .ref-line>span{display:inline-block}
.reference-home.motion-enabled .ref-center--drop .ref-line>span{transform:translateY(120%);transition:transform 1000ms cubic-bezier(.19,1,.22,1) var(--line-delay,0ms)}
.reference-home.motion-entered .ref-center--drop .ref-line>span{transform:none}
.reference-home.motion-enabled .ref-center--drop [data-ref-enter]{translate:0 26px;transition:opacity 700ms cubic-bezier(.2,.7,.2,1),translate 1000ms cubic-bezier(.16,1,.3,1),scale 1000ms cubic-bezier(.16,1,.3,1);transition-delay:var(--copy-delay,400ms)}
.reference-home.motion-enabled .ref-center--drop .ref-controls[data-ref-enter]{translate:0 34px;scale:.97}
.reference-home.motion-entered .ref-center--drop [data-ref-enter],.reference-home.motion-entered .ref-center--drop .ref-controls[data-ref-enter]{translate:0 0;scale:1}
.reference-home.motion-enabled .ref-clip{transform:scale(1.07);transition:transform 2600ms cubic-bezier(.16,1,.3,1)}
.reference-home.motion-entered .ref-clip{transform:none}
@media(prefers-reduced-motion:reduce){.ref-clip{transition:none}.ref-center--drop .ref-line>span,.ref-clip{transform:none!important}}

/* Shared section frame */
:is(.sd-why,.sd-standards,.sd-journey,.sd-club){padding:56px 0;background:var(--cream)}
.sd-standards,.sd-club{background:var(--white)}
.sd-section-head{text-align:center;max-width:920px;margin:0 auto 32px}
.sd-eyebrow{margin:0 0 8px;font-size:14px;line-height:1.5;font-weight:500;color:var(--muted)}
:is(.sd-section-head,.sd-standards-copy) h2{margin:0;font-size:clamp(30px,6vw,56px);line-height:1.15;font-weight:700;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.sd-section-head h2+p{margin:12px 0 0;font-size:clamp(16px,2.2vw,20px);line-height:1.7;color:var(--muted)}
.sd-icon-badge{width:52px;height:52px;border-radius:50%;background:var(--mint);color:var(--teal);display:grid;place-items:center;flex-shrink:0}
.sd-icon-badge svg{width:24px;height:24px}

/* Why choose SpaDrop: 6 icon cards, 3 × 2 on desktop */
.sd-why-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.sd-why-card{background:var(--white);border:1px solid var(--line);border-radius:22px;padding:24px}
.sd-why-card h3{margin:18px 0 6px;font-size:20px;line-height:1.4;font-weight:600;color:var(--ink)}
.sd-why-card p{margin:0;font-size:15px;line-height:1.75;color:var(--muted)}
@media(min-width:640px){.sd-why-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:980px){.sd-why-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.sd-why-card{padding:30px}}

/* Standards you can trust: illustration left, copy right */
.sd-standards-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:center}
.sd-standards-figure{margin:0}
.sd-standards-art{display:block;width:100%;height:auto;border-radius:28px}
.sd-standards-copy>p:not(.sd-eyebrow){margin:18px 0 0;font-size:17px;line-height:1.85;color:var(--muted)}
.sd-checklist{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:14px}
.sd-checklist li{display:flex;align-items:center;gap:14px;font-size:17px;line-height:1.5;color:var(--ink)}
.sd-check{width:32px;height:32px;border-radius:50%;background:var(--lime);color:var(--teal);display:grid;place-items:center;flex-shrink:0}
.sd-check svg{width:17px;height:17px;stroke-width:2.4}
@media(min-width:900px){.sd-standards-grid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:64px}}

/* Your SpaDrop journey: 4 step cards, 01 highlighted lime */
.sd-journey-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
.sd-journey-card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:22px;padding:22px}
.sd-journey-card.is-highlight{background:var(--lime);border-color:var(--lime)}
.sd-journey-top{display:flex;align-items:center;justify-content:space-between}
.sd-journey-card.is-highlight .sd-icon-badge{background:var(--teal);color:#fff}
.sd-journey-number{font-size:30px;font-weight:700;line-height:1;color:#dfe5e1}
.sd-journey-card.is-highlight .sd-journey-number{color:var(--teal)}
.sd-journey-step{align-self:flex-start;margin:16px 0 0;padding:3px 11px;border-radius:999px;background:var(--mint);font-size:12px;font-weight:600;color:var(--ink)}
.sd-journey-card.is-highlight .sd-journey-step{background:#fff}
.sd-journey-name{margin:12px 0 2px;font-size:13px;font-weight:600;color:var(--teal)}
.sd-journey-card h3{margin:0;font-size:22px;line-height:1.3;font-weight:700;color:var(--ink)}
.sd-journey-body{margin:10px 0 0;font-size:14px;line-height:1.7;color:var(--muted)}
.sd-journey-card.is-highlight .sd-journey-body{color:#2c4a42}
.sd-code{align-self:flex-start;margin:16px 0 0;padding:5px 12px;border:1.5px dashed var(--teal);border-radius:9px;font-size:13px;font-weight:600;color:var(--teal);letter-spacing:.02em}
.sd-code strong{font-weight:700}.sd-code-label{font-weight:400;opacity:.8}
.sd-code a{color:inherit;text-decoration:none}.sd-code--link a::after{content:"";position:absolute;inset:0}.sd-code--link{position:relative}
.sd-code-how{margin:8px 0 0;font-size:13px;line-height:1.5}
.sd-code-how a{color:var(--teal);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.sd-journey-fine{margin:auto 0 0;padding-top:14px;font-size:12px;line-height:1.6;color:var(--muted)}
.sd-journey-card.is-highlight .sd-journey-fine{color:#36544c}
/* Three steps since the Drop Card moved to its own card (29 Oct 2026): one row from tablet width. */
@media(min-width:760px){.sd-journey-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media(min-width:1100px){.sd-journey-grid{gap:18px}}

/* Relax Club: two plan cards and the small print */
.sd-club-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;max-width:920px;margin:0 auto}
.sd-plan{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:24px;padding:26px;box-shadow:0 10px 40px #0b2e2d0d}
.sd-plan--relax{background:#0d4b4a;border-color:#0d4b4a;color:#fff}
.sd-plan-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.sd-plan h3{margin:0;font-size:26px;font-weight:700;color:var(--teal)}
.sd-plan--relax h3{color:var(--lime)}
.sd-plan-badge{padding:4px 12px;border-radius:999px;background:var(--lime);color:var(--ink);font-size:12px;font-weight:600;white-space:nowrap}
.sd-plan-meta{margin:10px 0 0;font-size:14px;color:var(--muted)}.sd-plan--relax .sd-plan-meta{color:#cfe0da}
.sd-plan-price{margin:12px 0 0;color:var(--ink)}.sd-plan--relax .sd-plan-price{color:#fff}
.sd-plan-price strong{font-size:38px;font-weight:700;letter-spacing:-.02em}.sd-plan-price span{font-size:15px;opacity:.75}
.sd-checklist--small{gap:10px;margin-top:16px}.sd-checklist--small li{font-size:15px;gap:10px}.sd-plan--relax .sd-checklist li{color:#fff}
.sd-checklist--small .sd-check{width:24px;height:24px}.sd-checklist--small .sd-check svg{width:14px;height:14px}
.sd-plan-cta{margin-top:22px;align-self:flex-start;min-height:46px}
.sd-club-fine{max-width:920px;margin:22px auto 0;text-align:center;font-size:13px;line-height:1.8;color:var(--muted)}
.sd-club-fine p{margin:6px 0 0}
@media(min-width:760px){.sd-club-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.sd-plan{padding:32px}}
@media(min-width:900px){:is(.sd-why,.sd-standards,.sd-journey,.sd-club){padding:88px 0}.sd-section-head{margin-bottom:44px}}

/* FAQ (SpaDrop-FAQ-EN-TH-ZH.pdf): topic links, sections, accessible disclosure rows */
.sd-faq-topics{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.sd-faq-topics a{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border:1px solid var(--line);border-radius:999px;font-size:14px;color:var(--ink);text-decoration:none;background:var(--white)}
.sd-faq-topics a:hover{border-color:var(--teal)}
.sd-faq-section{padding-top:26px;scroll-margin-top:110px}
.sd-faq-section h2{margin:0 0 6px;font-size:22px;font-weight:600;color:var(--ink)}
.sd-faq-list{border-top:1px solid var(--line)}
.sd-faq-item{border-bottom:1px solid var(--line)}
.sd-faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:52px;padding:12px 0;cursor:pointer;list-style:none;font-size:16px;line-height:1.55;color:var(--ink)}
.sd-faq-item summary::-webkit-details-marker{display:none}
.sd-faq-sign{flex-shrink:0;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--mint);color:var(--teal);font-size:18px;transition:transform 180ms ease}
.sd-faq-item[open] .sd-faq-sign{transform:rotate(45deg)}
.sd-faq-item p{margin:0 0 16px;font-size:15px;line-height:1.85;color:var(--muted);max-width:70ch}
.sd-faq-item summary:focus-visible{outline:2px solid var(--teal);outline-offset:4px}
@media(prefers-reduced-motion:reduce){.sd-faq-sign{transition:none}}

/* Final contact channels: contact page and the directory band above the footer */
.sd-channels{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.sd-channel-item{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:15px;line-height:1.6}
.sd-channel-name{min-width:84px;color:var(--muted);font-size:13px}
.sd-channel-item a{color:var(--teal);font-weight:500;overflow-wrap:anywhere}
.sd-directory-contact{margin-top:18px}
.sd-channels--directory{display:flex;flex-wrap:wrap;gap:8px 22px}
.sd-channels--directory .sd-channel-name{min-width:0}
html[data-theme=dark] :is(.sd-channel-item a,.sd-code-how a,.sd-journey-name){color:var(--sd-accent)}
/* Paul's final list has no email: the footer (app.js) keeps phone and LINE; the address is not shown. */
.footer-contact-email{display:none}

/* Dark mode details the tokens do not cover */
html[data-theme=dark] .sd-journey-number{color:#ffffff24}
html[data-theme=dark] .sd-journey-card.is-highlight{background:var(--sd-accent);border-color:var(--sd-accent)}
html[data-theme=dark] .sd-journey-card.is-highlight :is(h3,.sd-journey-name,.sd-journey-step,.sd-journey-number,.sd-code,.sd-code-how a){color:#0b2e2d}
html[data-theme=dark] .sd-journey-card.is-highlight :is(.sd-journey-body,.sd-journey-fine,.sd-code-how){color:#21423d}
html[data-theme=dark] .sd-journey-card.is-highlight .sd-code{border-color:#0b2e2d}
html[data-theme=dark] .sd-journey-card.is-highlight .sd-journey-step{background:#ffffffb3}
html[data-theme=dark] .sd-code{border-color:var(--sd-accent);color:var(--sd-accent)}
html[data-theme=dark] .sd-plan--relax{background:#0e4b4f;border-color:#2f6b68}
/* --ink turns cream in dark mode: the lime "Best value" badge keeps dark ink. */
html[data-theme=dark] .sd-plan-badge{color:#0b2e2d}
html[data-theme=dark] :is(.sd-icon-badge,.sd-faq-sign){background:var(--sd-raised);color:var(--sd-accent)}
html[data-theme=dark] .sd-check{background:var(--sd-accent);color:#0b2e2d}
html[data-theme=dark] .sd-standards-art{filter:saturate(.9)}
.contact-item .sd-channels a{font-size:17px;line-height:1.5;display:inline}
html[data-theme=dark] .sd-plan h3{color:var(--sd-accent)}
html[data-theme=dark] .sd-journey-step{background:var(--sd-raised)}

/* Paul's Drop Card homepage card (29 Oct 2026): white card, 3 / 6 / 10 tiles (10 dark), example track that starts at
   2 drops, lime button. Sits on the journey's cream band; two columns from 960px. */
.sd-dropcard{padding:0 0 56px;background:var(--cream)}
.sd-dropcard-card{max-width:1080px;margin:0 auto;display:grid;gap:22px;padding:24px;border:1px solid var(--line);border-radius:26px;background:var(--white);box-shadow:0 18px 40px -28px rgba(14,75,79,.35)}
.sd-dropcard-copy .sd-eyebrow{color:var(--teal);font-weight:600}
.sd-dropcard-copy h2{margin:0;font-size:clamp(26px,4.4vw,40px);line-height:1.15;font-weight:700;letter-spacing:-.02em;color:var(--ink);text-wrap:balance}
.sd-dropcard-copy h2+p{margin:10px 0 0;max-width:52ch;font-size:16px;line-height:1.65;color:var(--muted)}
.sd-dropcard-rewards{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.sd-dropcard-tile{display:grid;gap:4px;align-content:start;padding:14px 10px;border-radius:14px;background:#f1f4ee;text-align:center}
.sd-dropcard-tile strong{font-size:26px;line-height:1.1;color:var(--ink)}
.sd-dropcard-tile span{font-size:13px;line-height:1.4;color:var(--muted)}
.sd-dropcard-tile.is-top{background:#0e4b4f}
.sd-dropcard-tile.is-top strong{color:#b4de54}
.sd-dropcard-tile.is-top span{color:#e3efe9}
.sd-dropcard-side{display:grid;gap:14px;align-content:start}
.sd-dropcard-track{list-style:none;margin:0;padding:20px 14px 16px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px 6px;border-radius:18px;background:linear-gradient(160deg,#0e4b4f,#0b3b3e)}
.sd-dropcard-drop{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;color:rgba(255,255,255,.42)}
.sd-dropcard-shape{width:32px;height:38px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-dasharray:2.2 2.2}
.sd-dropcard-drop.is-on{color:#fff}
.sd-dropcard-drop.is-on .sd-dropcard-shape{fill:#fff;stroke:none}
.sd-dropcard-drop.is-on::after{content:"";position:absolute;top:23px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#b4de54}
.sd-dropcard-drop.is-reward{color:#b4de54}
.sd-dropcard-drop.is-reward .sd-dropcard-shape{stroke-dasharray:none;stroke-width:1.6}
.sd-dropcard-star{position:absolute;top:18px;left:0;right:0;text-align:center;font-size:12px;line-height:1;color:#b4de54}
.sd-dropcard-drop small{font-size:11px;line-height:1.25;text-align:center;color:#d6e9a0}
.sd-dropcard-cta{width:100%;justify-content:center}
.sd-dropcard-fine{margin:0;text-align:center;font-size:13px;line-height:1.5;color:var(--muted)}
@media(min-width:960px){.sd-dropcard{padding-bottom:88px}.sd-dropcard-card{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:36px;padding:36px;align-items:center}}
html[data-theme=dark] .sd-dropcard-card{background:var(--sd-surface,#103b3b);border-color:var(--sd-line,#2b5552);box-shadow:none}
html[data-theme=dark] .sd-dropcard-copy .sd-eyebrow{color:var(--sd-accent)}
html[data-theme=dark] .sd-dropcard-copy h2,html[data-theme=dark] .sd-dropcard-tile strong{color:var(--sd-text)}
html[data-theme=dark] .sd-dropcard-tile{background:rgba(255,255,255,.06)}
html[data-theme=dark] .sd-dropcard-tile.is-top{background:#0b2f31;box-shadow:inset 0 0 0 1px var(--sd-line,#2b5552)}
html[data-theme=dark] .sd-dropcard-tile.is-top strong{color:var(--sd-accent)}
html[data-theme=dark] .sd-dropcard-track{background:rgba(0,0,0,.22);box-shadow:inset 0 0 0 1px var(--sd-line,#2b5552)}
/* Drop Card as a stamp card (Manu, 29 Oct 2026: "prettier, add a gimmick"). The example card is the one bold object:
   punched notches, a faint drop watermark, an oil line that fills toward the next reward, and a tap-to-try demo
   (assets/dropcard.js). The copy and reward tiles stay quiet. */
.sd-dropcard-pass{position:relative;overflow:hidden;display:grid;gap:14px;padding:18px 18px 20px;border-radius:22px;color:#fff;cursor:pointer;background:radial-gradient(120% 90% at 100% 0%,rgba(180,222,84,.18),transparent 55%),radial-gradient(90% 70% at 0% 100%,rgba(120,200,190,.14),transparent 60%),linear-gradient(160deg,#105357,#0a3639);box-shadow:0 26px 44px -26px rgba(8,45,47,.75),inset 0 1px 0 rgba(255,255,255,.1);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;-webkit-tap-highlight-color:transparent}
.sd-dropcard-pass::before,.sd-dropcard-pass::after{content:"";position:absolute;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--white,#fff);box-shadow:inset 0 2px 4px rgba(8,45,47,.28)}
.sd-dropcard-pass::before{left:-11px}.sd-dropcard-pass::after{right:-11px}
.sd-dropcard-pass:hover{transform:translateY(-3px) rotate(-.4deg);box-shadow:0 34px 50px -26px rgba(8,45,47,.8),inset 0 1px 0 rgba(255,255,255,.12)}
.sd-dropcard-pass:active{transform:translateY(0) scale(.99)}
.sd-dropcard-pass:focus-visible{outline:3px solid #b4de54;outline-offset:4px}
.sd-dropcard-mark{position:absolute;right:-74px;bottom:-104px;width:230px;height:230px;fill:rgba(255,255,255,.03);pointer-events:none}
.sd-dropcard-sheen{position:absolute;inset:-40% auto -40% -60%;width:45%;transform:skewX(-18deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent);opacity:0;pointer-events:none}
.sd-dropcard-pass.is-live .sd-dropcard-sheen{animation:sd-dc-sheen 1.6s .2s cubic-bezier(.3,.6,.3,1) both}
.sd-dropcard-passhead{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 4px}
.sd-dropcard-brand{font-size:12px;font-weight:600;letter-spacing:.06em;color:#cfe6dc}
.sd-dropcard-count{font-size:13px;color:#9fc4b9}.sd-dropcard-count b{font-size:24px;font-weight:700;color:#b4de54;font-variant-numeric:tabular-nums}
.sd-dropcard-pass .sd-dropcard-track{position:relative;padding:4px 2px 0;background:none;box-shadow:none}
.sd-dropcard-drop.is-on .sd-dropcard-shape{filter:drop-shadow(0 6px 10px rgba(180,222,84,.28))}
.sd-dropcard-drop.is-reward.is-on .sd-dropcard-shape{fill:#b4de54;filter:drop-shadow(0 0 12px rgba(180,222,84,.6))}
.sd-dropcard-drop.is-reward.is-on .sd-dropcard-star{color:#0e4b4f}
.sd-dropcard-drop.is-reward.is-on small{color:#fff;font-weight:600}
.sd-dropcard-drop.is-next .sd-dropcard-shape{stroke:#b4de54;animation:sd-dc-next 1.8s ease-in-out infinite}
.sd-dropcard-drop.is-new .sd-dropcard-shape{animation:sd-dc-drip .62s cubic-bezier(.3,1.5,.5,1) both}
.sd-dropcard-drop.is-new::before{content:"";position:absolute;top:30px;left:50%;width:34px;height:10px;margin-left:-17px;border-radius:50%;border:1.5px solid rgba(180,222,84,.7);animation:sd-dc-ripple .7s .35s ease-out both}
.sd-dropcard-meter{position:relative;display:block;height:6px;margin:2px 6px 0;border-radius:6px;background:rgba(255,255,255,.12);overflow:hidden}
.sd-dropcard-meter i{position:absolute;inset:0 auto 0 0;width:calc(var(--p,.2)*100%);border-radius:inherit;background:linear-gradient(90deg,#d6f08b,#b4de54);box-shadow:0 0 12px rgba(180,222,84,.55);transition:width .5s cubic-bezier(.2,.8,.2,1)}
.sd-dropcard-meter::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent calc(30% - 1px),rgba(11,54,57,.9) calc(30% - 1px) 30%,transparent 30% calc(60% - 1px),rgba(11,54,57,.9) calc(60% - 1px) 60%,transparent 60%)}
.sd-dropcard-burst{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.sd-dropcard-burst i{position:absolute;width:10px;height:12px;margin:-6px 0 0 -5px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:#b4de54;animation:sd-dc-burst .9s cubic-bezier(.2,.7,.3,1) both}
.sd-dropcard-burst i:nth-child(even){background:#fff}
.sd-dropcard-hint{margin:-4px 0 0;display:flex;align-items:center;justify-content:center;gap:6px;font-size:13px;color:var(--teal,#0e4b4f)}
.sd-dropcard-hint::before{content:"";width:7px;height:7px;border-radius:50%;background:#b4de54;box-shadow:0 0 0 4px rgba(180,222,84,.25)}
.sd-dropcard-icon{width:22px;height:22px;margin:0 auto 2px;fill:none;stroke:var(--teal,#0e4b4f);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.sd-dropcard-tile{position:relative;transition:box-shadow .4s,transform .4s}
.sd-dropcard-tile.is-top .sd-dropcard-icon{stroke:#b4de54}
.sd-dropcard-tile.is-reached{box-shadow:0 0 0 2px #b4de54,0 10px 22px -14px rgba(14,75,79,.5);transform:translateY(-2px)}
.sd-dropcard-tile.is-reached::after{content:"✓";position:absolute;top:8px;right:9px;width:18px;height:18px;border-radius:50%;background:#b4de54;color:#0e4b4f;font-size:11px;font-weight:700;line-height:18px;text-align:center}
@keyframes sd-dc-sheen{0%{opacity:0;left:-60%}20%{opacity:1}100%{opacity:0;left:120%}}
@keyframes sd-dc-next{0%,100%{opacity:.55;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
@keyframes sd-dc-drip{0%{opacity:0;transform:translateY(-22px) scale(.7,1.25)}60%{opacity:1;transform:translateY(2px) scale(1.12,.86)}100%{transform:none}}
@keyframes sd-dc-ripple{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.6)}}
@keyframes sd-dc-burst{0%{opacity:1;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1)}}
html[data-theme=dark] .sd-dropcard-pass::before,html[data-theme=dark] .sd-dropcard-pass::after{background:var(--sd-surface,#103b3b)}
html[data-theme=dark] .sd-dropcard-hint{color:var(--sd-accent,#b4de54)}
html[data-theme=dark] .sd-dropcard-icon{stroke:var(--sd-accent,#b4de54)}
@media (prefers-reduced-motion: reduce){.sd-dropcard-pass,.sd-dropcard-pass .sd-dropcard-sheen,.sd-dropcard-drop .sd-dropcard-shape,.sd-dropcard-drop::before,.sd-dropcard-burst i,.sd-dropcard-meter i,.sd-dropcard-tile{animation:none!important;transition:none}.sd-dropcard-pass:hover{transform:none}}
/* Manu's Meta AI clips (31 Oct 2026) are darker with the therapist mid-frame: white copy over a soft dark scrim, like the page heroes (polish.css). */
.ref-hero .ref-backdrop::after{background:linear-gradient(180deg,rgba(9,40,39,.34),rgba(9,40,39,.5) 50%,rgba(9,40,39,.62))}
.ref-hero .ref-center .ref-title{color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.28)}
.ref-hero .ref-center .ref-title [data-ref-word]{color:#d4f36b}
.ref-hero .ref-center--drop .ref-description{color:#f2f6f3;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.ref-hero .ref-menu-link{color:#fff}
.ref-hero .ref-menu-link:hover{color:#d4f36b}
.ref-hero .ref-scroll{color:#e7f3ee}
.ref-hero--server .initial-title,.ref-hero--server .initial-description,.ref-hero--server .initial-eyebrow,.ref-hero--server .initial-breadcrumb,.ref-hero--server .initial-breadcrumb a{color:#fff}