/* Single plan spotlight + native FAQ. Load after existing presentation styles. */
.pricing-refined .pricing-heading { margin-bottom: 34px; }
.pricing-refined .pricing-heading > p { font-size: 17px; margin-top: 20px; }
.pricing-refined .pricing-selection { font-size: 12px; padding: 11px 16px; gap: 10px; }
.pricing-refined .pricing-selection a { min-height: 28px; }
.pricing-stage { max-width: 940px; margin-inline: auto; }
.period-tabs { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)) minmax(0,1.35fr); gap: 6px; padding: 7px; background: #dae8ef; border: 1px solid #c1d5df; border-radius: 24px; margin: 0 auto 22px; max-width: 760px; }
.period-tabs button { position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 3px 9px; min-width: 0; min-height: 56px; padding: 9px 13px; color: #294b60; background: transparent; border: 1px solid transparent; border-radius: 18px; font-size: 14px; font-weight: 750; transition: background-color .16s ease,color .16s ease,border-color .16s ease; }
.period-tabs button[aria-selected="true"] { background: #fff; border-color: #809ead; color: #102f43; box-shadow: inset 0 -3px 0 #007d9f; }
.period-tabs button[data-period="anual"] { color: #163e51; }
.period-tabs button[data-period="anual"][aria-selected="true"] { background: #fff; box-shadow: inset 0 -3px 0 #075b74; border-color: #075b74; }
.period-best { display: block; font-size: 9px; font-weight: 800; line-height: 1.25; padding: 3px 6px; border-radius: 6px; background: #bceef8; color:#075469; }
.period-tabs button:focus-visible,.period-tabs button:active { background: #3dd3f3; color: #052b3c; border-color: #087a99; }
.price-spotlight { border: 1px solid #bed2de; border-radius: 30px; background: radial-gradient(ellipse at 100% 0%,#8ee5f329,transparent 55%),#fff; padding: 30px 40px; color: #102f43; box-shadow: 0 28px 70px -48px #164b6d75,inset 0 1px 0 #fff; transition: border-color .3s,box-shadow .3s; }
.price-spotlight[data-plan-card="anual"] { border-color: #1399b8; box-shadow: 0 28px 70px -45px #078caf80,inset 0 0 0 1px #3dd3f340; }
.price-spotlight-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 25px; border-bottom: 1px solid #dae6ed; }
.price-brand { display: flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 800; letter-spacing: -.04em; }
.price-brand img { object-fit: contain; }
.price-card-tag { border: 1px solid #c8dce5; background: #f1f8fb; color: #315b71; padding: 7px 10px; font-size: 9px; font-weight: 800; letter-spacing: .08em; border-radius: 999px; }
.price-spotlight[data-plan-card="anual"] .price-card-tag { border-color: #a1ddeb; background: #d6f5fc; color: #075a71; }
.price-spotlight-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; padding-block: 30px; }
.price-main { min-width: 0; }
.price-main h3 { font-size: 24px; letter-spacing: -.04em; line-height: 1.3; }
.price-description { font-size: 13px; color: #4a677b; line-height: 1.65; min-height: 2em; margin-top: 5px; }
.price-total-label { font-size: 9px; font-weight: 800; letter-spacing: .09em; color: #4e6d7f; margin-top: 26px; }
.spotlight-amount { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; color: #102f43; margin-top: 10px; font-variant-numeric: tabular-nums; }
.price-currency { font-size: 25px; font-weight: 600; letter-spacing: -.04em; }
.spotlight-amount strong { font-size: clamp(76px,7vw,100px); font-weight: 800; letter-spacing: -.075em; line-height: .98; }
.price-cents { font-size: 34px; font-weight: 700; letter-spacing: -.06em; }
.spotlight-period { font-size: 15px; font-weight: 600; color: #3c6177; margin-top: 9px; }
.price-comparison { min-height: 53px; margin-top: 20px; display: grid; align-content: start; gap: 4px; }
.price-comparison p { color: #46677a; font-size: 12px; line-height: 1.7; }
.price-comparison p:last-child { color: #006c89; font-weight: 700; }
.price-benefits-label { display: block; font-size: 9px; font-weight: 800; letter-spacing: .11em; color: #4c7085; margin-bottom: 20px; }
.price-benefits ul { display: grid; gap: 18px; }
.price-benefits li { display: flex; align-items: start; gap: 10px; color: #23485f; font-size: 14px; line-height: 1.55; }
.price-benefits li svg { width: 20px; height: 20px; flex-shrink: 0; padding: 3px; background: #dcf4fa; border-radius: 50%; stroke: #007a98; fill: none; stroke-width: 2; margin-top: 1px; }
.price-checkout-note { padding-top: 20px; margin-top: 22px; border-top: 1px solid #dce7ee; }
.price-checkout-note strong { font-size: 12px; color: #214a62; }
.price-checkout-note p { font-size: 12px; line-height: 1.8; color: #4e6c7e; margin-top: 6px; }
.price-spotlight-bottom { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; border-top: 1px solid #dae6ed; padding-top: 25px; }
.pricing-refined .price-choose.button { width: 100%; min-height: 56px; font-size: 14px; padding: 14px 20px; color: #163c52; background: #f0f6f9; border: 1px solid #9ebccf; box-shadow: none; transform: none; transition: background-color .16s ease,color .16s ease,border-color .16s ease; }
.pricing-refined .price-choose.button { position:relative; isolation:isolate; overflow:hidden; }
.pricing-refined .price-choose.button::before { content:''; display:block; position:absolute; inset:0; border:0; border-radius:inherit; background:linear-gradient(110deg,#42d8f3,#10b4de); opacity:1; mix-blend-mode:normal; transform:scaleX(0); transform-origin:left; transition:transform .2s cubic-bezier(.2,.75,.25,1); pointer-events:none; z-index:0; }
.pricing-refined .price-choose.button::after { display:none; }
.pricing-refined .price-choose.button>* { position:relative; z-index:1; }
.pricing-refined .price-choose.button svg { width: 18px; height: 18px; transform: none; }
.pricing-refined .price-choose.button[data-plan="anual"],.pricing-refined .price-choose.button:focus-visible,.pricing-refined .price-choose.button:active,.pricing-refined .price-choose.button.is-engaged { color: #052b3c; border-color: #0a8daf; transform: none; box-shadow: none; }
.pricing-refined .price-choose.button[data-plan="anual"]::before,.pricing-refined .price-choose.button:focus-visible::before,.pricing-refined .price-choose.button:active::before,.pricing-refined .price-choose.button.is-engaged::before { transform:scaleX(1); }
.reduce-motion .pricing-refined .price-choose.button::before { transition:none; }
.price-spotlight-bottom > p { font-size: 11px; line-height: 1.75; color: #345b72; }
.price-spotlight-bottom > p span { color: #5b7484; }
.pricing-conditions { max-width: 940px; margin: 25px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.pricing-conditions p,.pricing-nojs { font-size: 11px; line-height: 1.85; color: #49677c; }
.pricing-conditions strong { color: #264d65; }
.pricing-nojs { text-align: center; margin-top: 16px; }
.pricing-nojs a { text-decoration: underline; }
.pricing-refined .pricing-trial { margin-top: 30px; }
.pricing-refined .pricing-trial > span,.pricing-refined .pricing-trial .text-link { font-size: 12px; }
.pricing-status.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

.faq-refined { grid-template-columns: .8fr 1.4fr; gap: clamp(40px,7vw,100px); padding-block: 140px 90px; }
.faq-refined .faq-intro { position: relative; align-self: start; }
.faq-refined .faq-intro > p { font-size: 16px; max-width: 290px; line-height: 1.75; }
.faq-refined .faq-intro .text-link { font-size: 12px; line-height: 1.6; }
.faq-outline-mark { display: block; font-size: 220px; font-weight: 800; line-height: .95; letter-spacing: -.08em; -webkit-text-stroke: 1px #2e6075; color: transparent; opacity: .45; margin-top: 36px; user-select: none; }
.faq-refined .faq-list { display: grid; align-content: start; gap: 12px; min-width: 0; }
.faq-refined .faq-list details,.faq-refined .faq-list details:first-child { border: 1px solid #234052; border-radius: 21px; background: #0b1925; overflow: hidden; transition: background-color .25s,border-color .25s,box-shadow .3s; }
.faq-refined .faq-list details[open] { border-color: #2589a7; background: #0d2130; box-shadow: 0 20px 40px -30px #0b92b94a; }
.faq-refined .faq-list summary { display: flex; align-items: center; gap: 20px; min-height: 94px; padding: 19px 22px; border-radius: 20px; color: #e2f0f7; }
.faq-refined .faq-list summary > span:first-child { display: grid; gap: 6px; min-width: 0; }
.faq-refined .faq-list summary small { font-size: 9px; line-height: 1.3; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; color: #74cfe6; }
.faq-refined .faq-list summary strong { font-size: clamp(16px,1.45vw,19px); font-weight: 700; line-height: 1.4; letter-spacing: -.025em; }
.faq-refined .faq-list .faq-plus { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border: 1px solid #416072; border-radius: 50%; transition: background-color .25s,border-color .25s,transform .35s cubic-bezier(.2,.8,.2,1); }
.faq-refined .faq-list .faq-plus svg { width: 17px; height: 17px; stroke: #d4eaf4; transition: none; transform: none; }
.faq-refined .faq-list details[open] .faq-plus { transform: rotate(45deg); background: #3dd3f3; border-color: #3dd3f3; }
.faq-refined .faq-list details[open] .faq-plus svg { stroke: #052b3c; }
.faq-refined .faq-list summary:focus-visible { outline: 3px solid #5cddf7; outline-offset: -4px; }
.faq-refined .faq-list details > .faq-answer { padding: 0 76px 22px 22px; }
.faq-refined .faq-list p { font-size: 14px; line-height: 1.85; color: #afc8d8; }
.faq-refined .faq-list a { color: #6bdaef; text-decoration: underline; text-underline-offset: 3px; }
/* Native disclosure remains functional without JS. Supporting browsers animate both directions. */
@supports (interpolate-size: allow-keywords) {
  .faq-refined .faq-list details { interpolate-size: allow-keywords; }
  .faq-refined .faq-list details::details-content { block-size: 0; opacity: 0; overflow: clip; transition: block-size .38s cubic-bezier(.2,.8,.2,1),opacity .24s,content-visibility .38s allow-discrete; }
  .faq-refined .faq-list details[open]::details-content { block-size: auto; opacity: 1; }
}
@supports not (interpolate-size: allow-keywords) {
  .faq-refined .faq-list details[open] .faq-answer { animation: faq-answer-in .28s ease both; }
}
@keyframes faq-answer-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
@media (hover:hover) and (pointer:fine) {
  .period-tabs button:hover { color: #052b3c; background: #3dd3f3; border-color: #087a99; box-shadow: none; transform: none; }
  .pricing-refined .price-choose.button:hover { color:#052b3c; border-color:#087a99; box-shadow:none; transform:none; }
  .pricing-refined .price-choose.button:hover::before { transform:scaleX(1); }
  .pricing-refined .price-choose.button:hover svg { transform: none; }
  .faq-refined .faq-list details:hover { border-color: #39778d; }
  .faq-refined .faq-list summary:hover .faq-plus { border-color: #65bdd2; }
}
@media (max-width:800px) {
  .price-spotlight { padding: 25px 28px; }
  .price-spotlight-grid,.price-spotlight-bottom { gap: 28px; }
  .price-benefits li { font-size: 12px; }
  .faq-refined { grid-template-columns: 1fr; gap: 35px; padding-top: 120px; }
  .faq-outline-mark { display: none; }
  .faq-refined .faq-intro > p { max-width: 430px; }
}
@media (max-width:600px) {
  .pricing-refined .pricing-heading { margin-bottom: 26px; }
  .pricing-refined .pricing-selection { font-size: 11px; padding: 10px 12px; }
  .period-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); border-radius: 23px; gap: 5px; padding: 6px; margin-bottom: 16px; }
  .period-tabs button { min-height: 52px; border-radius: 16px; font-size: 12px; padding: 8px; }
  .period-best { font-size: 8px; }
  .price-spotlight { padding: 22px; border-radius: 25px; }
  .price-spotlight-top { gap: 8px; padding-bottom: 20px; }
  .price-brand { font-size: 19px; gap: 6px; }
  .price-brand img { width: 24px; height: 19px; }
  .price-card-tag { font-size: 7px; padding: 7px 8px; letter-spacing: .04em; }
  .price-spotlight-grid { grid-template-columns: 1fr; gap: 25px; padding-block: 25px; }
  .price-main h3 { font-size: 24px; }
  .price-description { font-size: 12px; }
  .spotlight-amount strong { font-size: 86px; }
  .price-currency { font-size: 23px; }.price-cents { font-size: 31px; }
  .price-total-label { font-size: 8px; margin-top: 22px; }
  .spotlight-period { font-size: 14px; }
  .price-comparison { min-height: 50px; margin-top: 17px; }
  .price-comparison p { font-size: 11px; }
  .price-benefits { padding-top: 23px; border-top: 1px solid #dae6ed; }
  .price-benefits-label { margin-bottom: 15px; }
  .price-benefits ul { gap: 13px; }.price-benefits li { font-size: 12px; }
  .price-checkout-note { margin-top: 16px; padding-top: 15px; }
  .price-spotlight-bottom { grid-template-columns: 1fr; gap: 14px; padding-top: 22px; }
  .price-spotlight-bottom > p { text-align: center; font-size: 10px; }
  .pricing-conditions { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; padding-inline: 4px; }
  .pricing-conditions p { font-size: 10px; }
  .pricing-refined .pricing-trial { flex-wrap: wrap; gap: 9px; margin-top: 24px; }
  .pricing-refined .pricing-trial .text-link { margin-left: 0; }
  .faq-refined { padding-block: 100px 60px; }
  .faq-refined .faq-list summary { min-height: 90px; padding: 17px; gap: 12px; }
  .faq-refined .faq-list summary strong { font-size: 16px; }
  .faq-refined .faq-list summary small { font-size: 8px; }
  .faq-refined .faq-list .faq-plus { width: 34px; height: 34px; flex-basis: 34px; }
  .faq-refined .faq-list details > .faq-answer { padding: 0 17px 20px; }
  .faq-refined .faq-list p { font-size: 13px; }
}
@media (max-width:360px) {
  .price-spotlight { padding: 20px 17px; }
  .spotlight-amount strong { font-size: 77px; }
  .price-currency { font-size: 20px; }.price-cents { font-size: 28px; }
  .price-card-tag { max-width: 105px; text-align: center; }
}
@media (prefers-reduced-motion:reduce) {
  .pricing-refined *,.faq-refined *,.faq-refined details::details-content { transition: none!important; animation: none!important; }
}
.reduce-motion .pricing-refined *,.reduce-motion .faq-refined *,.reduce-motion .faq-refined details::details-content { transition: none!important; animation: none!important; }