/* Case controls stay separate from the sample's collectible content. */
.preview-toggle>span { pointer-events:none; }
.brand strong span { display:inline; }
.feature-preview.real-preview { display:flex; align-items:center; justify-content:center; gap:8px; padding:16px; background:#f4f4ef; }
.feature-preview.real-preview img { min-width:0; width:calc(33.33% - 6px); height:100%; object-fit:contain; border-radius:4px; }
.feature-preview.real-preview img:only-child { width:100%; object-fit:cover; }
.feature-preview.preview-reviews img { border-radius:50%; width:72px; height:72px; object-fit:cover; border:4px solid white; margin-inline:-8px; }
.feature-preview.preview-musics img { object-fit:cover; width:30%; aspect-ratio:1; height:auto; }
.feature-preview.preview-companies img { height:90px; padding:10px; background:white; }
.brand strong { font-size:21px; letter-spacing:-.5px; }.brand strong span { color:var(--ink); font-size:17px; font-weight:500; }
.case-summary { font-size:11px; color:#687771; }
.exercise-footer:empty { display:none; }.exercise-footer { flex-wrap:wrap; align-items:center; }
.experience-control { display:flex; align-items:center; flex-wrap:wrap; gap:14px; }
.experience-start { padding:12px 18px; background:#007b57; color:white; font-size:13px; font-weight:500; border-radius:7px; }
.experience-start span { margin-left:12px; }.experience-start:disabled { opacity:.6; cursor:wait; }
#experience-status { color:#687771; font-size:11px; max-width:470px; line-height:1.7; }
.technical-note { font-size:11px; color:#687771; max-width:440px; }.technical-note summary { cursor:pointer; }.technical-note p { margin-top:8px; line-height:1.8; }
.integration-soon { font-size:12px; color:#687771; line-height:1.8; }
.case-badge { font-size:10px; color:#6b725b; background:#edf0e4; border:1px solid #dbe2cd; border-radius:20px; padding:4px 9px; margin-right:8px; }
.menu-groups { grid-template-columns:1.5fr 1fr 1fr; }.menu-groups h2 { text-transform:none; letter-spacing:0; }.menu-pending { display:flex; align-items:center; gap:10px; padding:11px 9px; font-size:12px; color:#687771; }.menu-pending small { font-size:9px; white-space:nowrap; }
.feature-preview { position:relative; }.preview-badge { position:absolute; right:12px; top:12px; background:#fff; border:1px solid #d7ddce; padding:5px 9px; border-radius:20px; font-size:10px; }
.feature-copy h2 { display:flex; align-items:center; justify-content:space-between; font-size:16px; font-weight:500; gap:12px; }.feature-copy h2>span { color:#709387; font-size:13px; }.feature-summary { display:block; margin-top:8px; font-size:11px; color:#687771; }
.settings-previews { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.settings-preview { border:1px solid var(--line); border-radius:10px; scroll-margin-top:100px; }.settings-preview>summary { display:flex; justify-content:space-between; gap:16px; padding:24px; font-size:15px; cursor:pointer; list-style:none; }.settings-preview>summary::-webkit-details-marker { display:none; }.settings-preview[open]>summary { border-bottom:1px solid var(--line); }
.settings-preview-body { padding:24px; }.preview-disclosure { color:#7a806f; font-size:10px; }.preview-toggle { display:flex; align-items:center; justify-content:space-between; margin-block:20px; font-size:13px; cursor:pointer; position:relative; }.preview-toggle input { position:absolute; right:0; opacity:0; width:42px; height:24px; }.preview-toggle>span { display:block; width:42px; height:24px; border-radius:20px; background:#bdc9c0; padding:3px; }.preview-toggle>span:after { content:''; display:block; width:18px; height:18px; border-radius:50%; background:white; transition:transform .15s; }.preview-toggle input:checked+span { background:#007b57; }.preview-toggle input:checked+span:after { transform:translateX(18px); }.preview-toggle input:focus-visible+span { outline:3px solid #70b099; outline-offset:4px; }
.preview-result { background:#f6f8f4; border-radius:8px; padding:20px; font-size:12px; min-height:120px; }.preview-result strong { font-size:14px; font-weight:500; }.preview-result p { margin-top:10px; color:#687771; line-height:1.8; }.preview-result ul { margin-top:16px; }.preview-result li { display:flex; align-items:center; gap:12px; font-size:11px; padding:8px 0; }.preview-result li img { object-fit:contain; }.preview-result li b { margin-left:auto; font-weight:500; }.preview-next { margin-top:16px; font-size:10px; line-height:1.8; color:#687771; }
.preview-coupon { background:white; border:1px dashed #6f9b78; margin-top:16px; padding:18px; color:#007b57; font-size:10px; }.preview-coupon b { display:block; font-size:26px; margin:8px 0; }.preview-coupon span { font-size:12px; }
.upcoming-cases { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }.upcoming-cases>div { border-top:1px solid var(--line); padding-top:22px; }.upcoming-cases h3 { font-size:14px; font-weight:500; }.upcoming-cases p { font-size:12px; line-height:1.8; margin:10px 0; color:#687771; }.upcoming-cases span { color:#91998b; font-size:10px; }
.coming-soon-page { max-width:800px; padding:72px 28px 120px; margin:auto; text-align:center; }.coming-soon-page h2 { font-size:32px; margin:24px 0; }.coming-soon-page p { color:#687771; line-height:2; font-size:14px; }.coming-soon-page>a { display:inline-block; color:#007b57; margin-top:32px; font-size:14px; }
.embedded-store,.brand-store { max-width:1264px; margin:40px auto 64px; padding-inline:28px; }.store-product { display:flex; align-items:center; gap:40px; padding-bottom:36px; }.store-product>img { width:170px; height:190px; object-fit:contain; border-radius:8px; background:#f5f5ef; }.store-kicker { color:#687771; font-size:10px; letter-spacing:1.4px; }.store-product h2,.brand-store h2 { font-size:28px; margin:12px 0; }.store-product div>p:not(.store-kicker) { font-size:13px; color:#687771; line-height:1.8; margin-bottom:14px; }.store-product strong { display:block; font-size:18px; }.store-rating { display:block; font-size:12px; color:#9f7939; margin-top:12px; }.review-widget { border:1px solid var(--line); border-radius:12px; overflow:hidden; }.review-widget iframe { width:100%; border:0; display:block; min-height:760px; }.brand-store>header { margin-bottom:32px; }
.embedded-frame .compact-list { padding-inline:28px; margin:24px 0; }.embedded-frame .pagination-footer { top:0; }
@media(max-width:760px) { .experience-control { gap:10px; }#experience-status { width:100%; }.catalog-hero h1 { font-size:29px; line-height:1.5; }.feature-copy h2 { font-size:15px; }.settings-previews,.upcoming-cases { grid-template-columns:1fr; gap:16px; }.settings-preview>summary { padding:20px; }.settings-preview-body { padding:20px; }.menu-groups { grid-template-columns:1fr; }.store-product { gap:20px; align-items:flex-start; }.store-product>img { width:90px; height:120px; }.store-product h2,.brand-store h2 { font-size:22px; }.embedded-store,.brand-store { padding-inline:20px; }.store-kicker { letter-spacing:.5px; }.embedded-frame .compact-list { padding-inline:16px; } }

.exercise-switcher a { min-width:76px; padding:10px 14px; border:1px solid #dce3dd; border-radius:8px; text-align:center; font-size:12px; background:#fff; }
.exercise-switcher a:hover { border-color:#9cb4a6; background:#f4f8f4; }
.virtual-observer { position:sticky; top:var(--site-nav-height,69px); z-index:35; display:flex; flex-wrap:wrap; align-items:center; gap:10px 20px; padding:13px 18px; margin-bottom:28px; border:1px solid #dce5dc; border-radius:9px; background:#f8fbf7; font-size:12px; color:#637269; }
.virtual-observer strong { color:#263d30; font-size:15px; font-variant-numeric:tabular-nums; }
.virtual-hint { margin-left:auto; font-size:11px; }
.product-card { position:relative; }
.virtual-leaving { pointer-events:none; animation:virtual-card-exit .6s ease-in forwards; }
.virtual-leaving::after { content:attr(data-leaving-label); position:absolute; top:45%; right:12px; padding:6px 9px; background:#fff3ec; color:#924c32; border:1px solid #d69f80; border-radius:7px; text-align:center; font-size:12px; }
@keyframes virtual-card-exit { 0% { opacity:1; filter:saturate(1); } 35% { opacity:.75; filter:saturate(.2); transform:translateY(-4px); } 100% { opacity:0; filter:saturate(0); transform:translateY(-20px) scale(.97); } }
@media(prefers-reduced-motion:reduce) { .virtual-leaving { animation:none; opacity:.4; } }

.skin-store { padding-block:16px 80px; }.skin-hero { display:grid; grid-template-columns:1.4fr 1fr; background:#f6f2ed; border-radius:12px; overflow:hidden; }.skin-hero>img { width:100%; height:310px; object-fit:cover; }.skin-hero>div { align-self:center; padding:32px; }.skin-hero h2 { font-size:clamp(24px,3vw,42px); line-height:1.2; margin:16px 0; }.skin-hero p:last-child { font-size:13px; color:#737267; }.skin-products { margin-block:55px; }.skin-products h2,.mobile-offers h2 { font-size:24px; margin-bottom:26px; }.skin-products ul { display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }.skin-products img { width:100%; aspect-ratio:1; object-fit:contain; background:#f4f4f4; border-radius:6px; }.skin-products li p { font-size:10px; color:#7e827b; margin-block:15px 7px; }.skin-products h3 { font-size:14px; margin-bottom:12px; }.skin-products strong { font-size:14px; }.mobile-offers { margin-top:28px; padding:28px; border-radius:12px; background:#edf3ed; }.coupon-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }.coupon-grid article { border:1px dashed #a6baab; border-radius:8px; padding:22px; background:white; }.coupon-grid strong { font-size:26px; }.coupon-grid p { margin:8px 0 16px; font-size:12px; color:#687367; }.coupon-grid code { font-size:11px; color:#4f6e58; }.skin-stories { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }.skin-stories img { width:100%; height:210px; object-fit:cover; border-radius:8px; }.skin-stories h3 { font-size:16px; margin-top:16px; }
.practice-login { max-width:430px; margin:64px auto; padding:24px; }.practice-login>a { font-size:12px; color:#687769; }.practice-login>.store-kicker { margin-top:40px; }.practice-login h1 { font-size:36px; margin:14px 0; }.practice-login>p { font-size:13px; color:#758174; }.practice-login aside { background:#f3f6ef; padding:18px; margin:28px 0; border-radius:9px; }.practice-login aside>* { display:block; font-size:12px; line-height:1.8; }.practice-login aside small { margin-top:8px; font-size:11px; color:#687769; }.practice-login label { display:block; margin:18px 0 8px; font-size:12px; }.practice-login input { border:1px solid #ccd6cc; padding:13px; border-radius:7px; width:100%; box-sizing:border-box; }.practice-login button { margin-top:25px; padding:14px; width:100%; border-radius:7px; background:#1d644b; color:white; }
@media(max-width:760px) { .skin-hero { grid-template-columns:1fr; }.skin-hero>img { height:240px; }.skin-hero>div { padding:25px; }.skin-products ul { grid-template-columns:repeat(2,1fr); gap:28px 16px; }.coupon-grid { grid-template-columns:1fr; }.coupon-grid article { padding:18px; }.skin-stories { grid-template-columns:1fr; }.skin-stories img { height:auto; } }

/* Function labels and the primary action share one consistent hierarchy. */
.feature-tags { display:flex; flex-wrap:wrap; gap:6px; }
.feature-tags span { display:inline-flex; align-items:center; padding:5px 9px; border-radius:5px; background:#edf3ed; color:#476452; font-size:11px; line-height:1.4; font-weight:500; }
.feature-copy .feature-tags { margin-bottom:13px; }
.exercise-title { min-width:0; }
.exercise-title .feature-tags { margin-bottom:12px; }
.exercise-title h1 { margin-block:0 10px; }
.experience-control { flex-direction:column; align-items:flex-end; flex-wrap:nowrap; gap:10px; flex:0 0 230px; }
.experience-start { width:230px; padding:16px 20px; border:1px solid #096144; border-radius:10px; background:#087652; box-shadow:0 3px 8px #174c3420; font-size:15px; font-weight:600; white-space:nowrap; transition:background .15s,box-shadow .15s; }
.experience-start:hover { background:#065d40; box-shadow:0 5px 12px #174c342b; }
.experience-start:focus-visible { outline:3px solid #87bba7; outline-offset:4px; }
#experience-status { max-width:230px; text-align:right; font-size:11px; line-height:1.5; min-height:17px; }
.exercise-footer { align-items:center; margin-top:20px; }
.exercise-meta { display:flex; align-items:center; flex-wrap:wrap; gap:12px; flex:1; }
.case-summary { font-size:12px; }
.exercise-switcher { flex-shrink:0; }
.exercise-switcher a { padding:8px 12px; min-width:70px; font-size:11px; color:#67756b; }
.install-dialog { position:fixed; inset:0; margin:auto; width:min(410px,calc(100vw - 32px)); box-sizing:border-box; max-height:calc(100dvh - 32px); overflow:auto; padding:36px 32px 24px; border:0; border-radius:20px; background:#fff; color:#24392e; box-shadow:0 24px 90px #102f2840; text-align:center; }
.install-dialog::backdrop { background:#102a235c; backdrop-filter:blur(3px); }
.install-close { position:absolute; top:12px; right:14px; width:32px; height:32px; border:0; border-radius:50%; background:transparent; color:#829087; font-size:25px; line-height:1; }
.install-close:hover { background:#f0f4ef; }
.install-mark { display:grid; place-items:center; width:44px; height:44px; border-radius:12px; margin:0 auto 20px; background:#e8f3ec; color:#087652; font-size:27px; font-weight:700; }
.install-dialog h2 { font-size:22px; line-height:1.4; letter-spacing:-.6px; margin:0 0 12px; }
.install-dialog p { font-size:13px; line-height:1.8; color:#6b7a70; }
.install-store { display:block; margin-top:26px; padding:14px 18px; border-radius:9px; background:#087652; color:#fff; font-size:14px; font-weight:600; }
.install-dialog .install-return { font-size:11px; margin-top:11px; }
.install-reconnect { display:flex; justify-content:center; align-items:center; gap:10px; padding-top:22px; margin-top:24px; border-top:1px solid #ecf0eb; font-size:11px; color:#89948d; }
.install-reconnect button { color:#406650; font-size:11px; padding:4px 0; text-decoration:underline; text-underline-offset:3px; }
.install-dialog [data-install-status]:empty { display:none; }.install-dialog [data-install-status] { margin-top:14px; font-size:11px; }
@media(max-width:760px) {
 .exercise-heading { flex-direction:row; flex-wrap:wrap; gap:24px; }.exercise-title { flex:1 1 100%; }
 .experience-control { flex:1 1 100%; align-items:flex-end; }.experience-start { width:230px; padding:14px 18px; }
 #experience-status { max-width:100%; width:auto; }.exercise-footer { margin-top:18px; gap:14px; }.exercise-switcher { margin-left:auto; }
 .virtual-observer { top:var(--site-nav-height,65px); padding:12px; gap:8px 16px; }.virtual-hint { margin-left:0; width:100%; }
}

.install-dialog p { word-break:keep-all; }

.course-page { max-width:1344px; margin-inline:auto; padding-inline:40px; }
@media(max-width:1200px) { .course-page { padding-inline:28px; }.course-page .course-layout { grid-template-columns:1fr; gap:24px; }.course-page .course-layout>aside { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }.course-page .course-layout>aside>div { width:auto; padding:0 16px 0 0; }.course-page .course-layout>aside>hr { display:none; }.course-page .course-layout>aside>a { width:auto; padding:10px 14px; border:1px solid var(--line); border-radius:8px; } }
@media(max-width:760px) { .course-page { padding-inline:20px; }.course-page .course-layout>aside>div { width:100%; padding-bottom:8px; } }

.feature-tags span:first-child { font-weight:600; background:#e7f0e9; color:#285d42; }

/* Read a card as one case: subject image, case title, then how to collect it. */
.feature-copy { padding:22px 20px; }
.feature-copy h2 { font-size:17px; line-height:1.5; letter-spacing:-.35px; }
.feature-function { margin-top:10px; font-size:12px; line-height:1.7; color:#476452; word-break:keep-all; }
.feature-copy .feature-summary { margin-top:14px; color:#7e887f; font-size:11px; }
@media(max-width:760px) { .feature-copy { padding:18px 16px; }.feature-copy h2 { font-size:16px; } }

.feature-preview.preview-table { display:grid; place-items:center; }
.schedule-thumbnail { width:90%; max-width:340px; padding:16px; margin:auto; border:1px solid #dde3dc; border-radius:7px; background:#fff; box-shadow:0 4px 12px #203f2710; color:#495950; }
.schedule-thumbnail>strong { display:block; font-size:13px; font-weight:600; margin-bottom:10px; }
.schedule-thumbnail table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:9px; line-height:1.4; }
.schedule-thumbnail th,.schedule-thumbnail td { padding:7px 5px; border:1px solid #e2e8df; text-align:center; }
.schedule-thumbnail th { background:#edf2e9; font-weight:500; }
.schedule-thumbnail th:first-child,.schedule-thumbnail td:first-child { width:67%; text-align:left; }
.schedule-thumbnail td:first-child { background:#faf8f2; }
@media(max-width:760px) { .schedule-thumbnail { padding:10px; }.schedule-thumbnail>strong { font-size:11px; margin-bottom:6px; }.schedule-thumbnail th,.schedule-thumbnail td { padding:5px 4px; font-size:8px; } }