/* OH卡 (2026-08-07). Reuses every component class from styles.css — only the
   shared color tokens are overridden, per docs/wp-e-design-system-2026-08-06.md
   §10's "one static page per route, share tokens, don't rebuild the framework"
   decision. Do not duplicate component rules here; add only what's genuinely
   new (the flip-card interaction has no equivalent in styles.css). */
:root{
  --paper:#f6ede0;
  --sage:#8a7255;
  --moss:#a15a3c;
  --line:#e6d7c3;
  --muted:#6e5d45;
  --brass:#a9843e;
  --ink:#2e2418;
}

/* No OH Card photography exists yet — do not reuse the Singing Bowl hero
   photo (wrong content). Gradient placeholder until real photography exists. */
.hero{background:linear-gradient(120deg,var(--moss),#c98a5e 60%,var(--sage))}

.offer-list{display:grid;gap:16px;margin-top:35px}
.offer-card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:26px;display:flex;justify-content:space-between;gap:24px}
.offer-card h3{font-size:22px;margin:2px 0 8px}
.offer-card .offer-note{margin:0;color:var(--muted);font-size:14px;max-width:520px}
.offer-card .offer-price{margin:0 0 4px;font:600 28px/1 "Playfair Display";color:var(--moss)}
.offer-card .offer-price small{display:block;font:600 12px "DM Sans";color:var(--muted);margin-top:4px}
.offer-action{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:12px;flex:0 0 auto}
.primary-button[aria-disabled="true"]{background:var(--line);border-color:var(--line);color:var(--muted);cursor:not-allowed;pointer-events:none}

.method-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:35px}
.method-card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:22px}
.method-card span{display:block;font:700 12px "DM Sans";color:var(--moss);margin-bottom:8px}
.method-card h4{margin:0 0 8px;font-size:17px}
.method-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
@media(max-width:650px){.method-grid{grid-template-columns:1fr}.offer-card{flex-direction:column}.offer-action{align-items:flex-start;text-align:left}}

.flip-scene{width:min(70vw,260px);height:min(92vw,360px);margin:32px auto 0;perspective:1400px}
.flip-card{position:relative;width:100%;height:100%;transition:transform .6s cubic-bezier(.4,.1,.2,1);transform-style:preserve-3d;cursor:pointer;border-radius:10px}
.flip-card:focus-visible,.flip-card.flipped{transform:rotateY(180deg)}
.flip-face{position:absolute;inset:0;backface-visibility:hidden;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:28px;box-shadow:0 16px 36px rgba(46,36,24,.2)}
.flip-front{background:#fff;border:1px solid var(--line)}
.flip-front p{margin:0;font:600 20px/1.6 "Playfair Display";color:var(--ink);text-align:center}
.flip-back{background:linear-gradient(160deg,var(--moss),var(--sage));transform:rotateY(180deg)}
.flip-back .mark{width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.2);display:flex;align-items:center;justify-content:center;color:#fff;font:600 12px "DM Sans"}
.flip-hint{margin:14px 0 0;text-align:center;font-size:13px;color:var(--muted)}

.facilitator-card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:24px;display:flex;gap:20px;align-items:center;margin-top:30px}
.facilitator-card .portrait{width:72px;height:72px;border-radius:50%;flex:0 0 auto;background:linear-gradient(135deg,var(--moss),var(--sage))}
.facilitator-card h4{margin:0 0 4px;font-size:17px}
.facilitator-card p{margin:0;color:var(--muted);font-size:14px;line-height:1.6}
.facilitator-card .admin-note{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);font-size:12.5px;font-style:italic}

.faq-list{display:grid;gap:22px;margin-top:35px;max-width:650px}
.faq-list h4{margin:0 0 6px;font-size:16px}
.faq-list p{margin:0;color:var(--muted);font-size:14.5px;line-height:1.6}
@media (prefers-reduced-motion:reduce){.flip-card{transition:none}}