/* ==========================================================================
   Promeo Compare Plans (2023/Promeo/pricing-production.jsp)
   Source: Marketing final mockup promeo-pricing-mockup-final-tracking.html
   (2026-10-08), whose CSS was copied from live DS pricing.css v1 + faq.css.
   Removed from the mockup: mock-flag, fake topbar / product-menu / footer.
   --sticky-top-space is recomputed by js/pricing.js from the real .product-menu
   height; the 44px below is only the no-JS fallback.
   改本檔要去 pricing-production.jsp 把 pricing.css?v= 往上加。
   ========================================================================== */
/* ===== Copied from live DS pricing.css (v1), trimmed of site-only RD resets; Promeo overrides at the end ===== */
:root {
  --pricing-section-max-width: 1000px;
  --main-content-padding: 30px;
  --bullet-point-size: 14px;
  --main-background-color: linear-gradient(90deg,#DCF3F5 0%,#E4EEF6 55%,#E8E2F4 100%); /* Promeo overview hero blue (rgb 223,238,240) */
  --card-row-one: 47px;
  --card-row-two: 30px;
  --card-row-last: 44px;
  --all-features-header: 50px;
  --sticky-gap: 40px;
  --sticky-top-space: calc(44px + var(--sticky-gap));
  --sticky-sec-height: calc(var(--sticky-top-space) + var(--all-features-header) - 1px);
}
html, body, div, section, article, aside, header, hgroup, footer, nav, h1, h2, h3, h4, h5, h6, p, blockquote, address, time, span, em, strong, img, ol, ul, li, figure, canvas, video, th, td, tr { margin:0; padding:0; border:0; }
*, *:before, *:after { box-sizing:border-box; }
ul { list-style-type:none; }
a { text-decoration:none; }
address, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, main span, img { display:block; }
main i { font-style:normal; }
html { scroll-behavior:smooth; }
html, body { max-width:100%; }
body { font-family:"Inter",-apple-system,system-ui,ui-sans-serif,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; background:#fff; -webkit-font-smoothing:antialiased; }

/* Fonts */
#main-content h2 { font-size:clamp(1.15rem,1.3vw,2.4rem); font-weight:600; padding:0; line-height:1.2; }
#main-content:is(h2,h3,p) { color:black; line-height:1.2; }
#main-content h3 { font-size:clamp(0.8rem,1vw,0.8125rem); font-weight:600; }
#main-content:is(p,ul) { font-size:clamp(1rem,2vw,1.1rem); font-family:'Inter',system-ui; font-weight:400; line-height:1.4; }
main a { font-family:'Inter',sans-serif; font-weight:600; color:white; }

/* Main */
#main-content { width:100%; background:var(--main-background-color); padding:6rem 0; padding-bottom:0; }
section:is(.cards,.comp-table) { width:90%; max-width:var(--pricing-section-max-width); margin:0 auto; }
section.cards { max-width:1100px; }
#main-content h1 { margin:0 auto; width:80%; margin-bottom:0.75rem; font-weight:700; font-family:'Inter'; font-size:clamp(1.4rem,2.2vw,2.2rem); line-height:1; text-align:center; max-width:800px; }
#main-content h1 .pro-label,
#main-content .card[data-product="DS-PRO"] h2 .pro-label,
#main-content .comp-table .all-features .pro-label { font-style:italic; display:inline-flex; background:-webkit-linear-gradient(45deg,#1b5aff,#00bafd 80%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; padding-right:2px; }
#main-content .page-description { width:85%; max-width:900px; margin:0 auto 1.75rem; text-wrap:balance; color:#3f4650; font-family:'Inter',sans-serif; font-size:clamp(0.95rem,1.25vw,1.15rem); line-height:1.45; text-align:center; }

/* Plan Switch */
label.choose-plan { display:flex; width:fit-content; margin:0 auto; background:white; box-shadow:2px 2px 10px 0px rgba(0,0,0,.149) inset; padding:0.4rem; border-radius:40px; align-items:center; position:relative; margin-bottom:3.75rem; }
input#planSwitch { appearance:none; opacity:0; display:none; }
label.choose-plan .marker { position:absolute; height:-webkit-fill-available; background:black; border-radius:30px; margin:0.4rem 0; transition:all 0.35s cubic-bezier(0.24,-0.52,0.76,1.42); }
label.choose-plan b { font-size:clamp(1rem,2vw,14px); font-weight:600; user-select:none; cursor:pointer; padding:0.65rem 1.5rem; border-radius:40px; transition:background .25s,color .25s; z-index:2; color:black; }
label.choose-plan b i { color:#FF0455; font-weight:700; transition:color cubic-bezier(0.04,0.55,0.54,0.99) .4s; }
label.choose-plan b#monthly { color:white; cursor:default; }
label.choose-plan:has(input:checked) b#monthly { color:black; cursor:pointer; }
label.choose-plan:has(input:checked) b#annual { color:white; cursor:default; }
label.choose-plan:has(input:checked) b i { color:#FFE500; transition:color cubic-bezier(0.42,0,0.26,1.07) 1s; }

/* Cards */
.cards { display:grid; grid-template-columns:repeat(2,minmax(0,470px)); justify-content:center; gap:3rem; z-index:7; position:relative; width:90% !important; box-sizing:border-box; }
.card { border-radius:20px; text-align:center; display:flex; flex-direction:column; position:relative; width:auto; max-width:470px; flex:1 1 0; min-width:0; transition:.5s all ease; }
.card > p:nth-of-type(2n+1) { background:#f4f4f4 !important; }
.card > p:nth-of-type(2n) { background:white; }
.card::before { content:''; position:absolute; top:-3px; left:-3px; width:calc(100% + 6px); height:calc(100% + 6px); border-radius:24px; z-index:-1; background:#cea86a; }
.card::after { content:''; background:white; position:absolute; z-index:-1; height:100%; width:100%; border-radius:20px; }
.card[data-product="PMO"]::before { background:linear-gradient(120deg,#00B2CB 0%,#018DE4 100%); }
.card[data-product="DS-PRO"]::before { background:#cea86a; }
.cards span { display:flex; align-items:center; justify-content:center; align-self:stretch; font-family:'Inter',system-ui; }
span.red-label { font-size:13px; height:24px; line-height:1; padding:0 21px 0 12px; position:absolute; left:-12px; top:-2%; color:white !important; background:linear-gradient(90deg,#FF0455 0%,#FF55DA 100%); border-radius:3px 0 0; z-index:3; font-weight:500; text-transform:uppercase; clip-path:polygon(0% 0%,100% 0%,calc(100% - 10px) 100%,14px 100%,12px 111%,10px 150%,0% 100%); box-shadow:0 15px #b81a35; align-content:center; }
.card .buying-header { background:white; display:grid; grid-template-rows:30px 40px 18px 14px 44px 6px 22px auto; position:relative; height:180px; }
span.product { border-radius:20px 20px 0 0; font-family:'Inter'; font-size:18px; font-weight:700; color:white; padding:30px; }
span.product > span { display:block; align-self:center; padding-left:1rem; text-align:left; min-width:0; }
span.product h2 { line-height:1.2; }
.card .bg-gradient, .card .product { grid-row:1; grid-column:1/-1; }
.card .bg-gradient { display:none; }
.card .product { z-index:1; display:flex; justify-content:flex-start; align-items:center; height:auto; min-height:112px; padding:22px 24px; }
.card .product p { padding:0; color:white; font-weight:400; font-size:.75rem; text-align:left; line-height:1.3; }
.card .product img { height:fit-content; }
.card[data-product="DS-PRO"] .product { background:linear-gradient(120deg,#271b3d,#3b1c76 55%,#03030e); }
.card[data-product="PMO"] .product { background:linear-gradient(90deg,#00B2CB 0%,#018DE4 100%); }
span.old-price { padding-right:4px; padding-bottom:3px; color:black; text-decoration:line-through; place-self:end; font-weight:400; font-size:.95rem; }
span.price { color:black; font-weight:600; flex-direction:column; font-size:clamp(1.7rem,2.5vw,2.5rem); position:relative; }
.pricing { display:grid; grid-template-columns:1fr auto 1fr; grid-row:2; }
i.per-month { font-weight:400; color:#8B8B8B; font-size:12px; font-family:'Inter',sans-serif; font-style:normal; margin-top:4px; grid-row:3; }
main .buy-now { width:fit-content; height:fit-content; padding:8px 55.2px; margin:0 auto; font-family:'Inter'; font-size:15px; font-weight:400; border-radius:8px; background:black; place-self:end; transition:all .2s; color:white; grid-row:5; border:none; min-height:44px; width:100%; max-width:200px; align-content:center; }
main .buy-now:hover { background:white; color:black; border:1px solid black; cursor:pointer; }
.card > p { padding:8px var(--main-content-padding); text-align:left; color:#000000e0; justify-content:flex-start; font-size:13px; font-family:'Inter',system-ui; line-height:1.3; column-gap:8px; font-weight:400; }
.card > p:not(p.not-included) { align-content:center; align-items:center; }
.card > p.ck-mark::before { content:"✔"; display:inline-block; margin-right:.5rem; }
.card p.to-overview { padding:0; height:33px; align-content:unset; }
.card p.to-overview a { padding:0; position:relative; height:100%; width:100%; align-content:unset; display:block; }
.card p.to-overview a span { color:#000; padding:0 var(--main-content-padding); position:absolute; width:100%; justify-content:start; height:100%; top:0; left:0; line-height:1; }
.card p.to-overview a span b { font-weight:700; margin-left:9px; text-decoration:underline; }
.card p.to-overview.promeo-overview a span:nth-of-type(2) b { margin-left:0; text-decoration:none; }
.card p.to-overview .product-description { min-width:0; margin-left:4px; font-weight:400; line-height:1.15; text-decoration:none; }
.card p.to-overview a span:first-of-type .product-description { color:#222; }
.card p.to-overview a span:nth-of-type(2) { clip-path:polygon(0 0,-5% 0,0% 50%,-5% 100%,0 100%); color:black; transition:.4s all ease-in-out; }
.card p.to-overview:hover a span:nth-of-type(2) { clip-path:polygon(0 0,93% 0,98% 50%,93% 100%,0 100%) !important; }
.card p.to-overview img { width:24px; height:auto; translate:-5px; transition:transform .5s ease-in-out; transform:rotateY(0.6turn); }
.card p.to-overview:hover img { transform:rotateY(1turn); }
.card[data-product="PMO"] > p:first-of-type, p.plan-summary { font-size:14px; }
.card p:last-of-type:not(.product p) { border-radius:0 0 20px 20px; }
.card > p.card-spacer { min-height:32px; padding:0; flex-shrink:0; }
#main-content .cards .card > p.card-spacer { background:transparent !important; }

/* Comparison grid */
.mask-underflow { height:0; position:sticky; top:0; background:var(--main-background-color); z-index:2; margin-top:3px; }
main .grid { display:grid; grid-template-columns:auto 0 repeat(2,18%); background:rgb(247,247,247); }
section.comp-table { background:none; margin-top:3.5rem; }
main .grid.all-features { height:50px; position:sticky; top:var(--sticky-top-space); color:white; border-radius:20px 20px 0 0; font-size:14px; font-family:'Inter',system-ui; font-weight:300; z-index:5; background:linear-gradient(100deg,#720def 0%,#60227a 55%,#271a54 90%); }
section.cards ~ section .grid.all-features .name:nth-of-type(2),
section.cards ~ section .grid.features > p + span + span { transition:color .5s ease; color:transparent; }
section.cards ~ section .grid.features > p + span + span circle { transition:fill .5s ease; fill:transparent; }
main .grid.all-features div:first-of-type { justify-content:start; padding-left:var(--main-content-padding); font-weight:600; font-size:16px; align-self:center; }
main .grid.all-features div:is(:nth-of-type(3),:nth-of-type(4)) { padding:0 1.2rem; }
.section:nth-of-type(4n+2) { background:linear-gradient(90deg,rgba(74,74,74,1) 0%,rgba(0,0,0,1) 100%); }
.section:nth-of-type(4n+4) { background:linear-gradient(90deg,rgb(50 50 50) 0%,rgb(62 62 62) 38%,rgb(24 24 24) 100%); }
main .grid.features svg { height:var(--bullet-point-size); width:var(--bullet-point-size); }
main .grid.features > span:nth-of-type(6n+2) circle { fill:#01B2FD; }
main .grid.features > span:nth-of-type(6n+5) circle { fill:#6f0df0; }
main .grid.features > span:nth-of-type(6n+6) circle { fill:#1865ff; }
main .grid.features p + span + span + span + span + span { color:#6f0df0; border:none; }
main .grid.features p + span + span + span + span + span + span { color:#1865ff; border:none; }
main .grid div, main .grid span { text-align:center; }
main .grid div { display:flex; align-items:center; justify-content:center; height:inherit; }
main .grid.section { position:sticky; top:var(--sticky-sec-height); z-index:1; }
main div#generative-ai { scroll-margin-top:var(--sticky-sec-height); }
.accordion { grid-column:1/-1; padding:12px var(--main-content-padding); font-size:14px; font-weight:600; text-decoration:none; background-image:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' style='enable-background:new 0 0 16 16%3B' xml:space='preserve'%3E%3Cpolyline fill='none' stroke='%23FFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' points='2.2 3.4 7.9 12.6 13.8 3.4 '/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center right 3%; background-size:15px; cursor:pointer; user-select:none; transition:all linear .15s; color:white; }
.accordion:hover { background-image:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' style='enable-background:new 0 0 16 16%3B' xml:space='preserve'%3E%3Cline fill='none' stroke='%23FFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='12.6' y1='8' x2='3.4' y2='8'/%3E%3C/svg%3E"); background-size:17px; }
.accordion.active, .accordion.active:hover { background-image:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' style='enable-background:new 0 0 16 16%3B' xml:space='preserve'%3E%3Cg fill='none' stroke='%23FFF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10'%3E%3Cline class='st0' x1='8' y1='3.4' x2='8' y2='12.6'/%3E%3Cline class='st0' x1='12.6' y1='8' x2='3.4' y2='8'/%3E%3C/g%3E%3C/svg%3E"); background-size:17px; }
main .grid.features { background-color:white; transition:height cubic-bezier(0,0.25,0.35,0.99) .6s; overflow:hidden; }
main .grid.features:last-of-type { border-radius:0 0 20px 20px; }
main .grid.features.active { height:0 !important; overflow:hidden; transition:height cubic-bezier(0.53,0,0.23,1) .5s; transition-delay:0s; }
main .grid.features p { grid-column:1; margin:0; font-size:13px; font-weight:400; padding:16px 10px 16px var(--main-content-padding); display:grid; align-items:center; font-family:'Inter',system-ui; justify-content:start; }
main .grid.features p:has(> span) { font-weight:700 !important; }
main .grid.features p:nth-child(even),
main .grid.features p:nth-child(even) + span + span,
main .grid.features p:nth-child(even) + span + span + span + span + span,
main .grid.features p:nth-child(even) + span + span + span + span + span + span { background:#f4f4f4; }
.features span i { font-weight:400; font-size:11px; color:#6b7280; }
.features span { display:flex; flex-direction:column; justify-content:center; align-items:center; color:#09c; font-size:13px; font-family:system-ui; line-height:1.2; padding:6px; font-weight:800; }
span.c_new { grid-column:2; background:#FF0455; color:white; width:auto; padding:3px 8px; border-radius:12px; white-space:nowrap; font-weight:700; margin-left:16px; font-size:11px; }
main .grid.features > p + span,
main .grid.features > p + span + span + span,
main .grid.features > p + span + span + span + span { display:none; }
.table-tail { display:none; }
@keyframes goldPlateShift { from { background-position:0% 50%; } to { background-position:100% 50%; } }
a.accordion:has(b.pro-plan) { display:flex; align-items:center; padding:8px var(--main-content-padding); background-color:#000039; }
b.pro-plan { overflow:hidden; padding:3px 1rem; border-radius:1rem; text-transform:uppercase; background:linear-gradient(122deg,rgba(214,154,60,1) 0%,rgba(239,192,125,1) 11%,rgba(255,216,166,1) 16%,rgba(255,227,191,1) 19%,rgba(248,206,149,1) 24%,rgba(241,195,130,1) 28%,rgba(231,179,103,1) 52%,rgba(255,198,112,1) 60%,rgba(228,175,95,1) 68%,rgba(214,154,60,1) 99%); font-size:.75rem; font-weight:600; display:block; height:fit-content; align-self:center; white-space:nowrap; border:solid 1px #ffcc68; background-size:200% 100%; animation:goldPlateShift 4s ease-in-out infinite alternate; color:black; width:fit-content; margin-left:1rem; height:26px; transition:padding .2s,height .2s; }
b.pro-plan.folded { height:0; padding:0; }

/* Responsive */
@media (max-width:1285px) { .cards { display:flex; flex-wrap:wrap; justify-content:center; padding:0 3rem; } }
@media (max-width:1250px) { .cards { gap:clamp(8px,3.7vw,3rem); } }
@media (max-width:1000px) {
  .cards { grid-template-columns:1fr 1fr; gap:3rem; }
  .card { width:100%; max-width:470px; min-width:320px; justify-self:center; }
  .cards > .card:last-of-type { grid-column:1/-1; width:calc(50% - 2rem); }
}
@media (max-width:840px) {
  main .grid { grid-template-columns:repeat(2,1fr); }
  main .grid.all-features { font-weight:500; font-size:15px; }
  main .grid.all-features div:first-of-type, main .grid.all-features div:nth-of-type(2) { display:none; }
  main .grid.all-features div.name { font-size:clamp(14px,4vw,1rem); }
  main .grid.features p { grid-column:1/-1; padding:8px var(--main-content-padding); grid-gap:14px; }
  .features span { padding:8px 10px; color:white !important; }
  .features span i { color:rgba(255,255,255,.85); }
  span.c_new { padding:5px 10px; margin-left:0; }
  main .grid.features > span circle { fill:#ffffff !important; }
  main .grid.features > span:nth-of-type(6n+2) { background:#01B2FD !important; display:none; }
  main .grid.features > span:nth-of-type(6n+5) { background:#580cbcb8 !important; }
  main .grid.features > span:nth-of-type(6n+6) { background:#3d64b3 !important; }
}
@media (max-width:780px) {
  main h2 { font-size:1rem; font-weight:400; }
  .cards { grid-template-columns:1fr; gap:3rem; max-width:380px; z-index:4; }
  .card { max-width:380px; flex:1 1 100%; }
  .cards > .card:last-of-type { width:100%; }
  main .grid.all-features { font-weight:600; font-size:12px; }
  .accordion { font-family:'Inter'; font-weight:500; }
  .features span { padding:5px 10px; }
}
@media (max-width:600px) { a.accordion:has(b.pro-plan) { flex-direction:column-reverse; gap:.4rem; } }
@media (max-width:455px) { .cards { padding:0 1rem; } .card { min-width:200px; } }

/* ===== Copied from live DS faq.css (pro-exclusive, plan-guide, FAQ) ===== */
@keyframes goldShine { 0% { transform:translateX(-100%); } 40% { transform:translateX(100%); } 60% { transform:translateX(100%); } 100% { transform:translateX(-100%); } }
section.pro-exclusive { width:90%; max-width:var(--pricing-section-max-width); min-height:105px; margin:5rem auto 3.25rem; padding:1.5rem 1.65rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; background-color:#000039; border-radius:15px; color:white; position:relative; z-index:2; }
span.promeo { padding-top:.8rem; display:inline-flex; gap:.6rem; background:none; -webkit-text-fill-color:unset !important; align-items:center; font-size:clamp(1.3rem,1.6vw,2rem); font-weight:400; }
span.promeo::before { content:""; background-image:url(https://dl-asset.cyberlink.com/web/stat/edms/product-version-images/icon/PMO.svg); background-size:contain; width:42px; height:42px; display:block; }
span.promeo.dspro::before { background-image:url(https://dl-asset.cyberlink.com/web/stat/edms/product-version-images/icon/DS-PRO.svg); }
span.promeo .pro-label { font-style:italic; background:-webkit-linear-gradient(45deg,#1b5aff,#00bafd 80%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent !important; padding-right:2px; margin-left:0; }
.pro-exclusive-copy { display:flex; flex-direction:column; align-items:flex-start; gap:.75rem; }
.pro-exclusive-label { position:absolute; overflow:hidden; background-image:linear-gradient(122deg,rgba(214,154,60,1) 0%,rgba(239,192,125,1) 11%,rgba(255,216,166,1) 16%,rgba(255,227,191,1) 19%,rgba(248,206,149,1) 24%,rgba(241,195,130,1) 28%,rgba(231,179,103,1) 52%,rgba(255,198,112,1) 60%,rgba(228,175,95,1) 68%,rgba(214,154,60,1) 99%) !important; border:solid 1px #c48f2887; padding:.5rem 1.2rem; color:black; border-radius:1.5rem; font-weight:600; text-transform:uppercase; width:max-content; display:inline-flex; align-items:center; background-size:200% 100% !important; animation:goldPlateShift 3s ease-in-out infinite alternate; -webkit-text-fill-color:unset !important; background-clip:border-box !important; -webkit-background-clip:border-box !important; top:-17px; left:-14px; font-size:.85rem; }
.pro-exclusive-label::before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(122deg,transparent 0%,transparent 35%,rgba(255,255,255,.45) 48%,rgba(255,255,255,.12) 55%,transparent 70%,transparent 100%); transform:translateX(-100%); animation:goldShine 6s cubic-bezier(0.65,0.2,0.32,1) 3s infinite alternate; pointer-events:none; }
.pro-exclusive-copy p { margin:0; color:white; font-family:"Poppins",sans-serif; font-size:1rem; font-weight:500; line-height:1.4; }
.pro-exclusive-copy p strong { color:#38b6e2; font-weight:700; }
section.pro-exclusive > a { min-height:48px; padding:.8rem 1.4rem; display:inline-flex; align-items:center; justify-content:center; gap:.4rem; flex-shrink:0; background:linear-gradient(100deg,#22f6f7 0%,#b294f7 86%); border-radius:10px; color:black; font-family:"Poppins",sans-serif; font-size:.9rem; font-weight:600; line-height:1.2; text-align:center; transition:transform .2s ease,box-shadow .2s ease; }
section.pro-exclusive > a:hover { transform:scale(1.05); box-shadow:0 6px 16px rgb(0 0 0 / 25%); }
#plan-guide { width:100%; padding:3.5rem 2rem 3.25rem; background:#f4f5f7; position:relative; z-index:2; }
#plan-guide .content { margin:0 auto; max-width:var(--pricing-section-max-width); }
#plan-guide .content > h2 { margin:0 0 2rem; padding:0; color:black; font-family:"Poppins"; font-size:clamp(1rem,2vw,1.8rem); font-weight:700; line-height:normal; text-align:center; }
#plan-guide .plan-options { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; }
#plan-guide .plan-option { min-height:246px; padding:1.75rem 1.8rem; background:#fff; border:3px solid #d8e0ef; border-radius:16px; }
#plan-guide .plan-option.director-suite-pro { border-color:#cea86a; }
#plan-guide .plan-option > span { display:block; margin-bottom:.55rem; color:#70798a; font-family:"Poppins",sans-serif; font-size:.8125rem; font-weight:700; line-height:1.2; text-transform:uppercase; }
#plan-guide .plan-option.promeo-plan > span { color:#009bb1; }
#plan-guide .plan-option.director-suite-pro > span { color:#12aee6; }
#plan-guide .plan-option h3 { margin:0 0 .75rem; padding:0; color:#171717; font-family:"Poppins",sans-serif; font-size:clamp(1.1rem,2vw,1.35rem); font-weight:700; line-height:1.25; }
#plan-guide .plan-option p { margin:0; color:#545862; font-family:"Poppins",sans-serif; font-size:.95rem; font-weight:400; line-height:1.5; }
@media (max-width:760px) {
  section.pro-exclusive { padding:1.5rem; flex-direction:column; align-items:flex-start; gap:1.25rem; }
  section.pro-exclusive > a { width:100%; }
  #plan-guide { padding:3rem 1.25rem; }
  #plan-guide .content { max-width:520px; }
  #plan-guide .plan-options { grid-template-columns:1fr; }
  #plan-guide .plan-option { min-height:0; }
}
#faq { width:100%; padding:5rem 0 5.5rem 0; background:white; position:relative; z-index:2; }
#faq .content { width:90%; max-width:var(--pricing-section-max-width); margin:0 auto; }
#faq .content > div { margin-top:2rem; border-bottom:solid #DFDFDF 1px; }
#faq label { display:block; }
#faq input { appearance:none; opacity:0; display:none; }
#faq :is(h2,label,p) { color:black; font-family:"Poppins"; }
#faq h2 { font-weight:700; font-size:clamp(1rem,2vw,1.8rem); text-align:center; line-height:normal; margin-bottom:2rem; }
#faq p { font-size:.8125rem; }
#faq a { color:black; text-decoration:underline; font-weight:500; white-space:nowrap; }
#faq a:hover { color:#1852ff; text-decoration:none; }
#faq label.question { border-top:solid #DFDFDF 1px; padding:1.2rem 2rem 1.2rem 1.5rem; font-size:clamp(14px,1vw,1rem); font-weight:600; cursor:pointer; user-select:none; background-image:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' style='enable-background:new 0 0 16 16%3B' xml:space='preserve'%3E%3Cg fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10'%3E%3Cline class='st0' x1='8' y1='3.4' x2='8' y2='12.6'/%3E%3Cline class='st0' x1='12.6' y1='8' x2='3.4' y2='8'/%3E%3C/g%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center right 2%; background-size:clamp(17px,2vw,20px); }
#faq .answer { display:grid; grid-template-rows:0fr; transition:grid-template-rows .25s; }
#faq .answer > p { overflow:hidden; margin:0; padding:0 1.5rem; opacity:0; transition:all .25s; }
#faq label.question:has(input:checked) { background:#DCFAFF; background-image:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 16 16' style='enable-background:new 0 0 16 16%3B' xml:space='preserve'%3E%3Cline fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' stroke-miterlimit='10' x1='12.6' y1='8' x2='3.4' y2='8'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center right 2%; background-size:clamp(17px,2vw,20px); }
#faq label.question:has(input:checked) + .answer { grid-template-rows:1fr; }
#faq label.question:has(input:checked) + .answer > p { padding:1rem 1.5rem; background:#F2FDFF; opacity:1; }

/* ===== Promeo page overrides ===== */
main .grid.all-features { background:none; }
main .grid.all-features::before { content:""; position:absolute; left:-4px; right:-4px; top:calc(-1 * var(--sticky-gap) - 2px); bottom:0; background:var(--main-background-color); background-attachment:fixed; z-index:-2; }
main .grid.all-features::after { content:""; position:absolute; inset:0; border-radius:20px 20px 0 0; background:linear-gradient(100deg,#00B2CB 0%,#0f5fc4 55%,#271a54 100%); z-index:-1; }
main .grid.features > span:nth-of-type(6n+5) circle { fill:#009bb1; }
main .grid.features p + span + span + span + span + span { color:#009bb1; }
@media (max-width:840px){ main .grid.features > span:nth-of-type(6n+5) { background:#009bb1 !important; } }
.card[data-product="PMO"] .plan-name, .card[data-product="DS-PRO"] .plan-name { display:inline; }


/* ===== Copied from live PDR faq.css: #security (trust section) ===== */
#security { width:100%; padding:5rem 0; background:#F4F4F4; margin-top:4rem; position:relative; z-index:2; }
#security .content { margin:0 auto; width:90%; max-width:var(--pricing-section-max-width); display:grid; grid-template-columns:1fr 1fr; gap:3rem; }
#security .content > div { display:grid; grid-template-columns:auto 1fr; column-gap:2rem; row-gap:.7rem; }
#security img { grid-row:1/3; width:56px; height:auto; }
/* Promeo: same PDR icons, recolored like the PhD page does (PDR blue ~217deg -> Promeo teal ~187deg) */
#security a:hover { color:#009BB1; }
#security h2 { font-weight:700; font-family:Poppins; font-size:clamp(1rem,2vw,1.6rem); padding:0; color:black; }
#security p { font-size:.8125rem; font-family:Poppins; color:black; }
#security a { color:black; text-decoration:underline; font-weight:500; white-space:nowrap; }
#security a:hover { color:#1852ff; text-decoration:none; }
@media (max-width:760px) { #security .content { max-width:500px; grid-template-columns:1fr; } }
@media (max-width:400px) { #security .content > div { grid-template-columns:1fr; justify-items:center; text-align:center; } }
section.pro-exclusive { margin-bottom:0; }

/* Promeo FAQ colors: sampled from the Promeo overview FAQ (#DCFAFF open question, #F2FDFF answer, #00B2CB icons) */
#faq label.question:has(input:checked) { background-color:#DCFAFF; }
#faq label.question:has(input:checked) + .answer > p { background:#F2FDFF; }
#faq a:hover { color:#009BB1; }
#faq label.question { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cg fill='none' stroke='%2300B2CB' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='8' y1='3.4' x2='8' y2='12.6'/%3E%3Cline x1='12.6' y1='8' x2='3.4' y2='8'/%3E%3C/g%3E%3C/svg%3E"); }
#faq label.question:has(input:checked) { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cline fill='none' stroke='%2300B2CB' stroke-width='3' stroke-linecap='round' x1='12.6' y1='8' x2='3.4' y2='8'/%3E%3C/svg%3E"); }

/* first line under the price: product-colored lead-in */
#main-content .card .buying-header + p.plan-summary, #main-content .card .buying-header + p.plan-summary b { font-weight:700; }
#main-content .card[data-product="DS-PRO"] .buying-header + p.plan-summary, #main-content .card[data-product="DS-PRO"] .buying-header + p b { color:#7A1FD6; }

#main-content .comp-table .all-features .pro-label { background:-webkit-linear-gradient(45deg,#7fc4ff,#b8f0ff 80%); -webkit-background-clip:text; background-clip:text; }

/* gradient lead-in text */
#main-content .card[data-product="DS-PRO"] .buying-header + p.plan-summary b { background:linear-gradient(166deg,#1CFEFF -43.24%,#5F11FF 16.82%,#A300C5 61.86%,#FF8D3D 106.91%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

/* value cells, PhD style: bold number in column color + small grey sub-line */
#main-content main .grid.features > span { font-family:'Inter',system-ui; font-weight:600; font-size:14px; }
#main-content main .grid.features > span i { font-style:normal; font-weight:400; font-size:12px; color:#8a8f98; margin-top:2px; }
#main-content main .grid.features > span:nth-of-type(6n+5) { color:#009bb1; }
#main-content main .grid.features > span:nth-of-type(6n+6) { color:#1865ff; }

#main-content .grid.features > span.app-note { display:flex; flex-direction:column; align-items:center; justify-content:center; }
#main-content .grid.features > span.app-note i { display:block; white-space:nowrap; margin-top:6px; line-height:1.2; }

#main-content .grid.features p i.app-desc { display:block; font-style:normal; font-weight:400; font-size:inherit; line-height:1.45; color:inherit; margin-top:0; }
#main-content .grid.features p:has(> i.app-desc) b { font-weight:700; line-height:1.45; }
#main-content .grid.features p:has(> i.app-desc) { align-content:center; row-gap:0; }

/* equal-height sticky section headers so a taller one never peeks out under the next */
main .grid.section > a.accordion { box-sizing:border-box; min-height:42px; display:flex; align-items:center; }
@media (max-width:380px) { main .grid.section > a.accordion { font-size:13px; } }

main a.buy-now { text-decoration:none; text-align:center; line-height:normal; box-sizing:border-box; display:flex; align-items:center; justify-content:center; }


/* trust icons: live PDR/PhD SVG turned into a black/white stencil (grayscale+contrast) and screened over a product gradient.
   Keeps the live icon artwork and its white details, swaps the blue for the product colors. */
#security .sec-badge { grid-row:1/3; display:block; width:56px; height:56px; border-radius:50%; isolation:isolate;
  background:var(--sec-badge-gradient, linear-gradient(135deg,#00B2CB 0%,#018DE4 100%)); }
#security .sec-badge img { display:block; width:56px; height:56px; filter:grayscale(1) brightness(.6) contrast(8); mix-blend-mode:screen; }

/* DS Pro card app rows (PowerDirector / PhotoDirector / AudioDirector), 2026-10-14 Anne:
   the span was a flex row, so on narrow cards "name" and ": description" wrapped as two columns.
   Now the row is one line of inline text that wraps as a paragraph, and the row grows with it;
   only the visible (1st) span sets the row height; the hover overlay (2nd span, has an extra logo) is laid over it. */
.card p.to-overview { height:auto; min-height:33px; }
.card p.to-overview a { display:block; position:relative; height:auto; }
.card p.to-overview a span { display:block; height:auto; min-height:33px; padding:8px var(--main-content-padding); text-align:left; line-height:1.3; align-content:center; }
.card p.to-overview a span:first-of-type { position:relative; }
.card p.to-overview a span:nth-of-type(2) { position:absolute; inset:0; overflow:hidden; }
.card p.to-overview a span b { margin-left:4px; }
.card p.to-overview .product-description { margin-left:0; line-height:inherit; }
.card p.to-overview a span img.logo { display:inline-block; vertical-align:middle; margin-right:4px; }

/* Product menu mobile buttons: the reset at the top of this file collapses them; same fix as live PhD pricing.css (<=780px) */
@media (max-width:780px) {
  .submenu_mbtns { padding:0 1rem; gap:1rem; }
  .submenu_mbtns .top_fn_all2 { width:100%; height:auto !important; padding:10px 0; }
}

/* Phones: sticky comparison header at 110px, same as live PhD / DS pricing.css (@media max-width:600px).
   js/pricing.js leaves --sticky-top-space alone at this width. */
@media (max-width:600px) { :root { --sticky-top-space:110px; } }