.plan-copy .plan-price-usd { display:block; font-size:13px; font-weight:400; color:#686e62; margin-top:4px; }

/* Shared card layout, approved on the Self plan. */
.plan-self-content { display: none; }
.plan-details.plan-details--self { width: min(520px, calc(100% - 20px)); padding: 24px; background: #eeebe5; border-color: #ffffffc9; border-radius: 28px; }
.plan-details--self .plan-details__header { gap: 16px; }
.plan-details--self .plan-details__header h2::before { content: "MM FIT / ТВІЙ ТАРИФ"; display: block; margin-bottom: 12px; color: #52775d; font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.plan-details.plan-details--self h2 { font-size: 30px; }
.plan-details--self .plan-details__subtitle { font-size: 14px; line-height: 1.5; }
.plan-details--self .plan-details__close { background: #ffffffbd; border-color: #fff; box-shadow: 0 4px 14px #413f2810; }
.plan-details--self .plan-details__price { position: relative; padding: 22px; margin: 24px 0; border: 1px solid #ffffffd9; border-radius: 22px; background: linear-gradient(130deg, #f8fbf5, #e1ebdd); box-shadow: 0 8px 22px #5263430b; }
.plan-details--self .plan-details__price::before { content: attr(data-caption); display: block; font-size: 13px; color: #536b52; margin-bottom: 12px; }
.plan-details--self .plan-details__uah { font-size: clamp(30px, 8.5vw, 42px); letter-spacing: -.04em; color: #257b4d; }
.plan-details--self .plan-details__period { display: inline-block; margin-top: 5px; }
.plan-details--self .plan-details__usd { margin-top: 7px; font-size: 14px; }
.plan-details--self .plan-details__summary,
.plan-details--self .plan-details__description,
.plan-details--self .plan-details__features { display: none; }
.plan-details--self .plan-self-content { display: block; }
.plan-self-intro { margin: 0 0 24px; font-size: 15px; line-height: 1.6; color: #62665d; }
.plan-self-intro strong { display: block; color: #20251e; font-size: 21px; line-height: 1.3; letter-spacing: -.025em; margin-bottom: 8px; }
.plan-self-heading { margin: 0 0 12px; font-size: 17px; letter-spacing: -.02em; }
.plan-self-groups { display: grid; gap: 12px; }
.plan-self-group { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 12px; padding: 18px; border: 1px solid #fff; border-radius: 20px; background: #ffffffad; box-shadow: 0 6px 20px #514c3606; }
.plan-self-group > i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: #eaf2e7; color: #278953; font-size: 19px; }
.plan-self-group h4 { margin: 0 0 8px; font-size: 16px; line-height: 1.35; }
.plan-self-group ul { padding: 0; margin: 0; list-style: none; display: grid; gap: 8px; }
.plan-self-group li { position: relative; padding-left: 12px; font-size: 14px; line-height: 1.5; color: #62665d; }
.plan-self-group li::before { content: ""; position: absolute; top: .65em; left: 0; width: 4px; height: 4px; border-radius: 50%; background: #83a18a; }
.plan-self-note { margin: 18px 0 22px; padding: 0 4px 0 14px; border-left: 2px solid #b4c5af; color: #62665d; font-size: 13px; line-height: 1.6; }
.plan-self-note strong { display: block; color: #434e3e; margin-bottom: 3px; }
.plan-details--self .plan-details__cta { border-radius: 17px; min-height: 54px; box-shadow: 0 6px 18px #087dbb1a; }
@media (max-width: 359px) {
  .plan-details.plan-details--self { padding: 18px; }
  .plan-self-group { padding: 14px; gap: 10px; grid-template-columns: 32px minmax(0,1fr); }
  .plan-self-group > i { width: 32px; height: 32px; font-size: 17px; }
}
.plan-copy .plan-price-uah { white-space:nowrap; }
.plan-copy .plan-price-period { font-size:13px; }
html.plan-details-open,html.plan-details-open body { overflow:hidden; }
.plan-details { position:fixed; inset:0; margin:auto; width:min(560px,calc(100% - 24px)); max-width:none; max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); padding:24px; border:1px solid #d9e1d2; border-radius:24px; background:#fcfaf6; color:#20251e; box-shadow:0 20px 70px #202a2933; overflow-y:auto; overscroll-behavior:contain; font-family:Arial,Helvetica,sans-serif; font-size:16px; line-height:1.5; }
.plan-details::backdrop { background:#16231bb3; backdrop-filter:blur(4px); }
.plan-details[open] { animation:plan-details-in 180ms ease-out; }
.plan-details__header { display:grid; grid-template-columns:minmax(0,1fr) 44px; gap:12px; align-items:start; }
.plan-details h2 { margin:0; font-size:25px; line-height:1.15; letter-spacing:-.035em; }
.plan-details__subtitle { margin:8px 0 0; color:#686e62; font-size:14px; }
.plan-details__close { display:flex; justify-content:center; align-items:center; width:44px; height:44px; padding:0; appearance:none; -webkit-appearance:none; background:#eef2e9; color:#3d634a; border:1px solid #dde3d7; border-radius:50%; font-size:20px; line-height:1; }
.plan-details__close i { display:flex; align-items:center; justify-content:center; width:20px; height:20px; line-height:1; }
.plan-details__price { margin:24px 0; }
.plan-details__uah { display:block; font-size:clamp(27px,7vw,36px); font-weight:750; color:#278953; line-height:1.15; }
.plan-details__period { font-size:14px; color:#686e62; }
.plan-details__usd { display:block; margin-top:6px; font-size:17px; color:#686e62; }
.plan-details__summary { padding:16px; border:1px solid #d7e4d3; border-radius:14px; background:#edf3e8; }
.plan-details__lead { margin:0; font-weight:600; }
.plan-details__extra { margin:12px 0 0; color:#4f5c49; }
.plan-details__description { margin:20px 0; }
.plan-details__features { list-style:none; padding:0; margin:0 0 24px; display:grid; gap:12px; }
.plan-details__features li { display:grid; grid-template-columns:19px minmax(0,1fr); gap:10px; font-size:15px; line-height:1.45; }
.plan-details__features i { color:#278953; font-size:18px; margin-top:2px; }
.plan-details__cta { display:flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:12px 16px; background:#087dbb; color:white; border-radius:14px; font-size:16px; font-weight:600; text-align:center; }
.plan-details__cta:hover { background:#066ba2; }
@keyframes plan-details-in { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@media(max-width:359px) { .plan-details { padding:18px; } .plan-details h2 { font-size:22px; } .plan-copy .plan-price-uah { font-size:18px; } }
@media(prefers-reduced-motion:reduce) { .plan-details[open] { animation:none; } }
.positioning-note { margin: 0 0 24px; color: #62665d; font-size: 16px; line-height: 1.6; }
.plan--featured { animation: premium-pulse 3s ease-in-out infinite; }
.plan-hint { grid-column: 1 / -1; font-size: 12px; line-height: 1.4; font-weight: 400; color: #50765b; text-align: center; }
.plan--featured:hover, .plan--featured:focus-visible, .plan--featured:active,
.plan-details-open .plan--featured, .menu-open .plan--featured { animation-play-state: paused; }
@keyframes premium-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 4px 12px #41734720, 0 0 0 0 #27895300, inset 0 0 6px #fff; }
  50% { transform: scale(1.012); box-shadow: 0 9px 25px #41734745, 0 0 0 7px #2789531f, inset 0 0 8px #fff; }
}
@media (prefers-reduced-motion: reduce) { .plan--featured { animation: none; } }

/* The plan details keep their compact reading flow on phones, but use the
   available canvas for a scannable overview on desktop. */
@media (min-width: 761px) {
  .plan-details[open],
  .plan-details.plan-details--self[open] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 340px);
    column-gap: 32px;
    row-gap: 24px;
    align-items: start;
    width: min(1080px, calc(100vw - 64px));
    max-height: calc(100vh - 64px);
    max-height: calc(100dvh - 64px);
    padding: 38px 42px;
    border-radius: 28px;
    scrollbar-color: #416e5b #0b1211;
    scrollbar-width: thin;
  }
  .plan-details__header { grid-column: 1; align-self: start; }
  .plan-details h2,
  .plan-details.plan-details--self h2 { font-size: clamp(30px, 2.8vw, 40px); }
  .plan-details__subtitle { font-size: 16px; }
  .plan-details--self .plan-details__header h2::before { margin-bottom: 14px; }
  .plan-details__price,
  .plan-details--self .plan-details__price {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    margin: 0;
    padding: 20px 24px;
  }
  .plan-details__summary,
  .plan-details__description,
  .plan-details__features,
  .plan-self-content,
  .plan-details__cta { grid-column: 1 / -1; }
  .plan-self-content { min-width: 0; }
  .plan-self-intro { max-width: 760px; margin: 0 0 24px; font-size: 16px; }
  .plan-self-intro strong { font-size: 24px; }
  .plan-self-heading { margin-bottom: 16px; font-size: 18px; }
  .plan-self-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .plan-self-group { min-width: 0; padding: 20px; }
  .plan-self-group h4 { font-size: 17px; }
  .plan-self-group li { font-size: 14px; }
  .plan-self-note { max-width: 760px; margin: 20px 0 0; }
  .plan-details__cta { width: min(100%, 420px); justify-self: center; }
}

@media (min-width: 761px) and (max-width: 900px) {
  .plan-details[open],
  .plan-details.plan-details--self[open] { grid-template-columns: minmax(0, 1fr); }
  .plan-details__price,
  .plan-details--self .plan-details__price { grid-column: 1; grid-row: auto; }
}

@media (min-width: 1200px) {
  .plan-self-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .plan-details[data-plan="MM FIT Premium"] .plan-self-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-details[data-plan="Персональне ведення"] .plan-self-groups { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .plan-details[data-plan="Персональне ведення"] .plan-self-group { grid-column: span 2; }
  .plan-details[data-plan="Персональне ведення"] .plan-self-group:nth-last-child(-n + 2) { grid-column: span 3; }
}