/* Taste-skill variation: native CSS on the existing Flask/Bootstrap stack.
   DESIGN_VARIANCE 6 / MOTION_INTENSITY 3 / VISUAL_DENSITY 4.
   Brand violet, light theme; controls 8px, grouped surfaces 16px. */
.wcm-taste { --home-accent:#6254ee; --home-ink:#202236; --home-muted:#686d7e; }
.wcm-taste .home-hero { background:#f8f9fc; background-blend-mode:normal; padding:0 0 22px; border-bottom:1px solid #e8e9f0; }
.wcm-taste .banner { display:grid; grid-template-columns:0.95fr 1.1fr; align-items:center; gap:32px; min-height:490px; padding:56px 0 44px; }
.wcm-taste .banner .left { width:auto; }
.wcm-taste .banner .left .title { font-size:60px; line-height:1.18; letter-spacing:-2px; margin-bottom:24px; }
.wcm-taste .banner .left .title span { color:#6254ee; }
.wcm-taste .banner .left .hero-description { font-size:16px; margin:0; line-height:1.8; }
.wcm-taste .banner .right { width:100%; margin:0; padding:26px 0; border-radius:16px; background:linear-gradient(130deg,#eeebfa,#fff 80%); }
.wcm-taste .banner .right img { width:100%; height:auto; display:block; filter:drop-shadow(0 18px 22px #36314d12); }
.wcm-taste .banner .left .wcm-btns { gap:10px; margin-top:28px; }
.wcm-taste .banner .left .wcm-btns .wcm-dl-btn { border-radius:8px; box-shadow:none; min-width:164px; }
.wcm-taste .wcm-index-notice-ctn .wcm-index-notice { background:#fff; border:1px solid #e6e6f0; border-radius:8px; color:#686d7e; }
.wcm-taste .taste-support { width:min(1200px,calc(100% - 80px)); margin:0 auto; display:flex; align-items:center; gap:26px; padding:24px 0; border-bottom:1px solid #e8e9f0; }
.wcm-taste .taste-support h2 { font-size:17px; margin:0 0 8px; font-weight:600; }
.wcm-taste .taste-support p { color:#686d7e; font-size:12px; margin:0; }
.wcm-taste .taste-support .contact { display:grid; grid-template-columns:54px 54px; gap:5px 18px; margin:0 0 0 auto; width:auto; }
.wcm-taste .taste-support .contact img { width:54px; height:54px; }
.wcm-taste .taste-support .contact p { text-align:center; font-size:10px; }
.wcm-taste .taste-support .home-contact-hours { max-width:165px; line-height:1.8; }
.wcm-taste .feature-box { padding:64px 0; }
.wcm-taste .feature-head,.wcm-taste .feature-intro { width:min(1200px,calc(100% - 80px)); margin-left:auto; margin-right:auto; text-align:left; }
.wcm-taste .feature-head { font-size:34px; }
.wcm-taste .feature-intro { margin-top:14px; margin-bottom:28px; }
.wcm-taste .feature-list { grid-template-columns:1.15fr 1fr 1fr; gap:16px; }
.wcm-taste .feature-list li { border:1px solid #e8e9f1; border-radius:16px; padding:26px; text-align:left; background:#fff; position:relative; }
.wcm-taste .feature-list li:first-child { grid-row:span 2; background:#f3f0fc; display:flex; flex-direction:column; justify-content:center; }
.wcm-taste .feature-list li:nth-child(3) { background:#f8f9fc; }
.wcm-taste .feature-list li:nth-child(5) { background:#faf8ff; border:1px solid #e8e9f1; }
.wcm-taste .span_bg { margin:0 0 16px; width:40px; height:40px; background:transparent; border-radius:8px; }
.wcm-taste .home-feature-icon { width:34px; height:34px; }
.wcm-taste .feature-list li:first-child .span_bg { width:64px; height:64px; }
.wcm-taste .feature-list li:first-child .home-feature-icon { width:60px; height:60px; }
.wcm-taste .feature-list h4 { font-size:19px; margin-bottom:12px; }
.wcm-taste .feature-list li:first-child h4 { font-size:26px; }
.wcm-taste .feature-list .c7 { min-height:0; font-size:13px; }
.wcm-taste .feature-list .btn-s { align-self:flex-start; background:transparent; border:0; padding:0; margin-top:18px; font-weight:600; }
.wcm-taste .feature-list .btn-s:hover { color:#4837c5; text-decoration:underline; }
.wcm-taste .transform-ctn { padding:64px 0; background:#f8f9fc; }
.wcm-taste .transform-ctn .content { gap:64px; }
.wcm-taste .feature-chapter { display:none; }
.wcm-taste .transform-ctn .content .text-content .detail-title { font-size:32px; }
.wcm-taste .transform-ctn .content .video-content { border-radius:16px; padding:8px; box-shadow:0 12px 32px #2621440a; }
.wcm-taste .transform-ctn:has(.video-content[data-type="no"]) .content { flex-direction:column-reverse; text-align:center; }
.wcm-taste .transform-ctn:has(.video-content[data-type="no"]) .text-content { width:100%; }
.wcm-taste .home-cta { background:#f3f0fc; padding:48px 24px; }
.wcm-taste a,.wcm-taste button { transition:background-color .16s,color .16s; }
@media(max-width:1000px) { .wcm-taste .banner .left .title { font-size:46px; } }
@media(max-width:720px) {
 .wcm-taste .banner { grid-template-columns:1fr; padding:28px 0; gap:24px; min-height:0; }
 .wcm-taste .banner .left .title { font-size:42px; }
 .wcm-taste .banner .right { display:block; }
 .wcm-taste .taste-support { width:calc(100% - 40px); flex-wrap:wrap; gap:16px; }
 .wcm-taste .taste-support .home-contact-hours { max-width:none; width:100%; }
 .wcm-taste .feature-head,.wcm-taste .feature-intro { width:calc(100% - 40px); }
 .wcm-taste .feature-head { font-size:27px; }
 .wcm-taste .feature-list { grid-template-columns:1fr; }
 .wcm-taste .feature-list li:first-child { grid-row:auto; }
 .wcm-taste .feature-box,.wcm-taste .transform-ctn { padding:36px 0; }
 .wcm-taste .transform-ctn .content { gap:24px; }
}
@media(prefers-reduced-motion:reduce) { .wcm-taste a,.wcm-taste button { transition:none; } }

/* Balanced feature weights and readable customer-support QR codes. */
.wcm-taste .feature-list { grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.wcm-taste .feature-list li,
.wcm-taste .feature-list li:first-child { grid-row:auto; align-items:flex-start; justify-content:flex-start; padding:24px 18px; background:#fff; text-align:left; }
.wcm-taste .feature-list li:nth-child(odd) { background:#faf9fe; }
.wcm-taste .feature-list li .span_bg,
.wcm-taste .feature-list li:first-child .span_bg { width:40px; height:40px; margin:0 0 18px; }
.wcm-taste .feature-list li .home-feature-icon,
.wcm-taste .feature-list li:first-child .home-feature-icon { width:34px; height:34px; }
.wcm-taste .feature-list li h4,
.wcm-taste .feature-list li:first-child h4 { font-size:18px; text-align:left; }
.wcm-taste .feature-list .c7 { text-align:left; line-height:1.8; }
.wcm-taste .taste-support { padding:24px 28px; margin-top:24px; border:1px solid #e8e9f0; border-radius:12px; background:#fff; }
.wcm-taste .taste-support h2 { font-size:21px; }
.wcm-taste .taste-support p { font-size:14px; }
.wcm-taste .taste-support .home-contact-hours { margin-top:10px; max-width:none; font-size:12px; }
.wcm-taste .taste-support .contact { display:flex; gap:20px; }
.wcm-taste .taste-support .contact img { width:120px; height:120px; }
@media(max-width:1000px) and (min-width:721px) { .wcm-taste .feature-list { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:720px) {
 .wcm-taste .feature-list { grid-template-columns:1fr; gap:12px; }
 .wcm-taste .feature-list li:last-child { grid-column:auto; }
 .wcm-taste .taste-support { padding:20px; }
 .wcm-taste .taste-support .contact { margin-left:0; flex-wrap:wrap; }
}
/* Keep support copy and QR codes together instead of across the full row. */
.wcm-taste .taste-support { width:fit-content; max-width:calc(100% - 80px); justify-content:center; gap:28px; padding:18px 24px; }
.wcm-taste .taste-support .contact { margin:0; gap:16px; flex-shrink:0; }
@media(max-width:720px) {
 .wcm-taste .taste-support { max-width:calc(100% - 40px); gap:16px; padding:18px; justify-content:flex-start; }
 .wcm-taste .taste-support .contact { flex-shrink:1; }
}

/* Inline support beneath the hero download actions. */
.wcm-taste .banner .left .taste-support { display:flex; width:fit-content; max-width:100%; margin:22px 0 0; padding:14px 18px; gap:22px; justify-content:flex-start; background:#fff; }
.wcm-taste .banner .left .taste-support h2 { font-size:17px; margin:0 0 7px; }
.wcm-taste .banner .left .taste-support p { font-size:12px; line-height:1.6; }
.wcm-taste .banner .left .taste-support .home-contact-hours { margin-top:7px; font-size:11px; }
.wcm-taste .banner .left .taste-support .contact { display:flex; width:auto; margin:0; gap:12px; }
.wcm-taste .banner .left .taste-support .contact img { width:120px; height:120px; margin:0; }
@media(max-width:720px) { .wcm-taste .banner .left .taste-support { gap:14px; padding:14px; } }
/* Blend hero support into the surrounding surface without shifting its content. */
.wcm-taste .banner .left .taste-support { background:transparent; border-color:transparent; box-shadow:none; }
/* Align support copy with the primary download action. */
.wcm-taste .banner .left .taste-support { padding-left:0; border-left-width:0; }
.wcm-taste .banner .left .taste-support h2 { color:#202236; }
.wcm-taste .banner .left .taste-support p { color:#505568; }
/* Compact hero spacing while preserving the full-size support QR. */
.wcm-taste .banner { padding-top:40px; padding-bottom:30px; }
.wcm-taste .banner .left .taste-support { margin-top:10px; padding-top:6px; padding-bottom:6px; }
@media(max-width:720px) { .wcm-taste .banner { padding-top:24px; padding-bottom:24px; } }
/* Taste download dialog: a focused download panel and three compact steps. */
.wcm-taste #tutorial .tutorial-main { width:min(960px,calc(100% - 48px)); border-radius:16px; border-color:#e5e7ef; overflow:auto; }
.wcm-taste #tutorial .modal-head { padding:22px 28px; border-bottom:1px solid #e9ebf2; }
.wcm-taste #tutorial .close { border-radius:8px; background:#f3f4f7; }
.wcm-taste #tutorial .tutorial-body { display:grid; grid-template-columns:310px minmax(0,1fr); }
.wcm-taste #tutorial .top-text { display:flex; flex-direction:column; align-items:stretch; justify-content:center; gap:24px; margin:0; padding:30px 26px; border:0; border-right:1px solid #e9ebf2; border-radius:0; background:#f8f9fc; }
.wcm-taste #tutorial .download-summary { flex-direction:column; align-items:flex-start; gap:18px; }
.wcm-taste #tutorial .download-symbol { width:56px; height:56px; border-radius:12px; background:#eeebff; }
.wcm-taste #tutorial .download-summary h3 { font-size:20px; line-height:1.5; }
.wcm-taste #tutorial .download-summary p { color:#686d7e; margin-top:8px; }
.wcm-taste #tutorial .download-actions { flex-direction:column; align-items:stretch; }
.wcm-taste #tutorial #download-btn { width:100%; min-width:0; padding:0 12px; height:56px; font-size:16px; box-shadow:0 5px 12px #6254ee1a; }
.wcm-taste #tutorial .download-privacy { color:#727789; line-height:1.8; }
.wcm-taste #tutorial .bottom-picture { padding:26px; }
.wcm-taste #tutorial .install-guide-heading { margin-bottom:18px; }
.wcm-taste #tutorial .install-guide-heading h3 { font-size:18px; }
.wcm-taste #tutorial .tutorial-link { font-size:12px; }
.wcm-taste #tutorial .install-steps { grid-template-columns:1fr; gap:0; }
.wcm-taste #tutorial .install-steps>li { display:grid; grid-template-columns:minmax(0,1fr) 166px; column-gap:16px; padding:16px 0; border:0; border-bottom:1px solid #eceef3; border-radius:0; background:transparent; }
.wcm-taste #tutorial .install-steps>li:first-child { padding-top:0; }
.wcm-taste #tutorial .step-heading { align-self:end; gap:10px; }
.wcm-taste #tutorial .step-number { width:26px; height:26px; flex-shrink:0; background:#f0edff; border-radius:7px; }
.wcm-taste #tutorial .step-heading h4 { font-size:14px; line-height:1.5; }
.wcm-taste #tutorial .install-steps p { min-height:0; margin:8px 0 0 36px; font-size:12px; line-height:1.8; color:#686d7e; }
.wcm-taste #tutorial .step-demo { grid-column:2; grid-row:1/3; height:112px; padding:8px; border-radius:8px; background:#f7f8fb; }
.wcm-taste #tutorial .demo-file { padding:10px 6px; gap:6px; }
.wcm-taste #tutorial .demo-file strong { font-size:10px; }
.wcm-taste #tutorial .demo-file small { font-size:9px; }
.wcm-taste #tutorial .demo-browser,.wcm-taste #tutorial .demo-install { padding:4px; font-size:10px; }
.wcm-taste #tutorial .demo-drop { padding:5px 2px; margin:3px 0; }
.wcm-taste #tutorial .demo-confirm { margin:3px auto; padding:3px; }
.wcm-taste #tutorial .install-note { margin-top:14px; color:#505568; }
@media(max-width:720px) {
 .wcm-taste #tutorial .tutorial-main { width:calc(100% - 24px); max-height:calc(100dvh - 24px); }
 .wcm-taste #tutorial .modal-head { padding:18px; }
 .wcm-taste #tutorial .tutorial-body { grid-template-columns:1fr; }
 .wcm-taste #tutorial .top-text { padding:20px; gap:16px; border-right:0; border-bottom:1px solid #e9ebf2; }
 .wcm-taste #tutorial .download-summary { flex-direction:row; align-items:center; gap:12px; }
 .wcm-taste #tutorial .download-summary h3 { font-size:17px; }
 .wcm-taste #tutorial .bottom-picture { padding:20px; }
 .wcm-taste #tutorial .install-guide-heading { flex-direction:row; align-items:center; }
 .wcm-taste #tutorial .install-steps>li { grid-template-columns:minmax(0,1fr) 130px; gap:8px; }
 .wcm-taste #tutorial .install-steps p { margin-left:0; }
}
.wcm-taste #tutorial .privacy_t { white-space:nowrap; }
/* Download is the primary task; installation stays a quiet secondary guide. */
.wcm-taste #tutorial .tutorial-main { width:min(800px,calc(100% - 48px)); }
.wcm-taste #tutorial .tutorial-body { display:block; }
.wcm-taste #tutorial .top-text { align-items:center; text-align:center; padding:28px 32px 26px; gap:18px; background:#fff; border:0; }
.wcm-taste #tutorial .download-summary { flex-direction:row; align-items:center; gap:14px; text-align:left; }
.wcm-taste #tutorial .download-symbol { width:48px; height:48px; }
.wcm-taste #tutorial .download-actions { width:320px; max-width:100%; }
.wcm-taste #tutorial #download-btn { height:60px; font-size:18px; }
.wcm-taste #tutorial .download-privacy { font-size:11px; margin:0; }
.wcm-taste #tutorial .bottom-picture { padding:22px 28px; background:#f8f9fc; border-top:1px solid #eceef3; }
.wcm-taste #tutorial .install-guide-heading { margin-bottom:18px; }
.wcm-taste #tutorial .install-guide-heading h3 { font-size:15px; color:#505568; }
.wcm-taste #tutorial .install-steps { grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.wcm-taste #tutorial .install-steps>li,
.wcm-taste #tutorial .install-steps>li:first-child { display:block; padding:0; border:0; }
.wcm-taste #tutorial .step-heading { gap:8px; }
.wcm-taste #tutorial .step-number { width:22px; height:22px; background:#e9ecf3; color:#686d7e; font-size:11px; border-radius:6px; }
.wcm-taste #tutorial .step-heading h4 { font-size:13px; color:#505568; }
.wcm-taste #tutorial .install-steps p { margin:8px 0 0; font-size:12px; color:#686d7e; }
.wcm-taste #tutorial .step-demo { display:none; }
.wcm-taste #tutorial .install-note { font-size:11px; color:#686d7e; margin-top:18px; }
@media(max-width:720px) {
 .wcm-taste #tutorial .tutorial-main { width:calc(100% - 24px); }
 .wcm-taste #tutorial .top-text { padding:24px 20px; }
 .wcm-taste #tutorial .bottom-picture { padding:20px; }
 .wcm-taste #tutorial .install-steps { grid-template-columns:1fr; gap:14px; }
 .wcm-taste #tutorial .install-steps p { margin-left:30px; }
}
/* Retain the three installation illustrations beneath the secondary guide. */
.wcm-taste #tutorial .install-steps>li { display:flex; flex-direction:column; }
.wcm-taste #tutorial .install-steps p { min-height:44px; margin-bottom:12px; }
.wcm-taste #tutorial .step-demo { display:flex; width:100%; height:112px; padding:8px; margin-top:auto; background:#f0f2f7; }
.wcm-taste #tutorial .demo-file { width:100%; }
@media(max-width:720px) {
 .wcm-taste #tutorial .install-steps p { min-height:0; }
 .wcm-taste #tutorial .step-demo { max-width:240px; margin:0 0 0 30px; width:calc(100% - 30px); }
}
.wcm-taste #tutorial .install-steps .step-heading { align-self:stretch; justify-content:flex-start; }
/* Tutorial library follows the restrained Taste homepage surfaces. */
.wcm-taste #wcm-video-ctn .modal-main { width:min(1120px,calc(100% - 48px)); border-radius:16px; border-color:#e5e7ef; background:#fff; }
.wcm-taste #wcm-video-ctn .modal-header { padding:20px 24px; border-bottom:1px solid #e9ebf2; }
.wcm-taste #wcm-video-ctn .modal-header h4 { font-size:21px; }
.wcm-taste #wcm-video-ctn .modal-header p { display:none; }
.wcm-taste #wcm-video-ctn .close-btn { border-radius:8px; background:#f3f4f7; color:#686d7e; }
.wcm-taste #wcm-video-ctn .modal-con { grid-template-columns:220px minmax(0,1fr); }
.wcm-taste #wcm-video-ctn .videos_list { padding:20px 12px; background:#f8f9fc; border-color:#e9ebf2; }
.wcm-taste #wcm-video-ctn .video-directory-title { color:#686d7e; margin:0 12px 12px; }
.wcm-taste #wcm-video-ctn .videos_list ul { max-height:430px; overflow-y:auto; }
.wcm-taste #wcm-video-ctn .videos_list button { min-height:39px; padding:10px 12px; gap:10px; border-radius:7px; color:#505568; }
.wcm-taste #wcm-video-ctn .videos_list button:hover { background:#eceef5; }
.wcm-taste #wcm-video-ctn .videos_list button.playing { color:#5948df; background:#eeebff; box-shadow:inset 3px 0 #6254ee; }
.wcm-taste #wcm-video-ctn .lesson-number { color:#858b9c; }
.wcm-taste #wcm-video-ctn .video-stage { padding:22px 24px 18px; }
.wcm-taste #wcm-video-ctn .video-now { display:flex; flex-direction:row-reverse; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px; }
.wcm-taste #wcm-video-ctn .video-now h3 { margin:0; font-size:19px; color:#202236; }
.wcm-taste #wcm-video-ctn .video-lesson-count { color:#858b9c; font-size:11px; letter-spacing:0; white-space:nowrap; }
.wcm-taste #wcm-video-ctn video { border-radius:8px; background:#202236; max-height:56vh; }
.wcm-taste #wcm-video-ctn .video-help { color:#686d7e; margin-top:12px; }
@media(max-width:720px) {
 .wcm-taste #wcm-video-ctn .modal-main { width:calc(100% - 24px); max-height:calc(100dvh - 24px); }
 .wcm-taste #wcm-video-ctn .modal-header { padding:16px 18px; }
 .wcm-taste #wcm-video-ctn .video-stage { padding:18px; }
 .wcm-taste #wcm-video-ctn .videos_list { padding:16px 12px; }
 .wcm-taste #wcm-video-ctn .videos_list ul { max-height:23vh; }
}