/* Pricing — page-specific styles (converted from pricing.html <style>) */

@keyframes tsInfinityBorder { to { stroke-dashoffset: 0; } }

/* Currency toggle */
.dsmt-currency-toggle { display: inline-flex; gap: 4px; padding: 4px; background: var(--dsmt-dark-3); border-radius: 100px; margin-top: 24px; }
.dsmt-currency-toggle button { padding: 7px 18px; border: none; background: transparent; font-family: var(--dsmt-font-mono); font-size: 0.72rem; color: rgba(255,255,255,0.45); cursor: pointer; border-radius: 100px; letter-spacing: 0.06em; transition: all 0.15s; }
.dsmt-currency-toggle button.dsmt-on { background: var(--dsmt-blue); color: #fff; }

/* Tier grid */
.dsmt-tier-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border: 1px solid var(--dsmt-line); border-radius: var(--dsmt-radius-xl); overflow: hidden; background: var(--dsmt-line); margin-top: 52px; }
@media(max-width:900px){ .dsmt-tier-grid { grid-template-columns: 1fr; } }
.dsmt-tier { background: var(--dsmt-bg); padding: 32px 28px 36px; display: flex; flex-direction: column; gap: 20px; transition: background 0.15s; }
.dsmt-tier:hover { background: var(--dsmt-bg-2); }
.dsmt-tier.dsmt-featured { background: var(--dsmt-dark); }
.dsmt-tier.dsmt-featured:hover { background: var(--dsmt-dark-2); }
.dsmt-tier-top { display: flex; justify-content: space-between; align-items: flex-start; }
.dsmt-tier-name { font-family: var(--dsmt-font-head); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.025em; color: var(--dsmt-ink); }
.dsmt-tier.dsmt-featured .dsmt-tier-name { color: #fff; }
.dsmt-tier-rib { font-family: var(--dsmt-font-mono); font-size: 0.62rem; letter-spacing: 0.08em; padding: 4px 10px; background: var(--dsmt-bg-2); color: var(--dsmt-ink-3); border-radius: 4px; }
.dsmt-tier.dsmt-featured .dsmt-tier-rib { background: var(--dsmt-blue); color: #fff; }
.dsmt-tier-sub { font-size: 0.875rem; color: var(--dsmt-ink-2); line-height: 1.6; max-width: 32ch; margin: 0; }
.dsmt-tier.dsmt-featured .dsmt-tier-sub { color: rgba(255,255,255,0.55); }
.dsmt-tier-price { padding-top: 20px; border-top: 1px solid var(--dsmt-line); }
.dsmt-tier.dsmt-featured .dsmt-tier-price { border-top-color: var(--dsmt-dark-line); }
.dsmt-tier-price-val { font-family: var(--dsmt-font-head); font-weight: 800; font-size: clamp(2rem,3.5vw,3rem); letter-spacing: -0.04em; line-height: 1; color: var(--dsmt-ink); }
.dsmt-tier.dsmt-featured .dsmt-tier-price-val { color: #fff; }
.dsmt-tier-price-val span { color: var(--dsmt-blue); }
.dsmt-tier-price-unit { font-family: var(--dsmt-font-mono); font-size: 0.67rem; letter-spacing: 0.08em; color: var(--dsmt-ink-3); text-transform: uppercase; margin-top: 8px; display: block; }
.dsmt-tier.dsmt-featured .dsmt-tier-price-unit { color: rgba(255,255,255,0.35); }
.dsmt-tier ul { list-style: none; display: grid; gap: 10px; flex: 1; }
.dsmt-tier li { display: grid; grid-template-columns: 14px 1fr; gap: 10px; font-size: 0.875rem; color: var(--dsmt-ink-2); line-height: 1.5; }
.dsmt-tier.dsmt-featured li { color: rgba(255,255,255,0.65); }
.dsmt-tier li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dsmt-blue); margin-top: 8px; }

/* Comparison table */
.dsmt-cmp-table { width: 100%; border-collapse: collapse; border: 1px solid var(--dsmt-line); border-radius: var(--dsmt-radius-xl); overflow: hidden; margin-top: 48px; }
.dsmt-cmp-table th, .dsmt-cmp-table td { padding: 14px 18px; text-align: left; font-size: 0.875rem; border-bottom: 1px solid var(--dsmt-line); }
.dsmt-cmp-table thead th { background: var(--dsmt-dark); color: rgba(255,255,255,0.9); font-family: var(--dsmt-font-mono); font-size: 0.67rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.dsmt-cmp-table tbody tr:last-child td { border-bottom: none; }
.dsmt-cmp-table tbody tr:nth-child(even) td { background: var(--dsmt-bg-2); }
.dsmt-cmp-table td:first-child { font-weight: 600; color: var(--dsmt-ink); }
.dsmt-cmp-table .dsmt-yes { color: var(--dsmt-blue); font-weight: 700; }
.dsmt-cmp-table .dsmt-no { color: var(--dsmt-ink-3); }

/* Plan enquiry modal — opened by each tier's "Start a brief" / "Talk about
   care" button; form markup is [fluentform id="4"], reskinned via the same
   .dsmt-contact-fluentform rules as the Contact page (contact.css). */
.dsmt-plan-modal { position: fixed; inset: 0; z-index: 200; display: none; }
.dsmt-plan-modal.dsmt-open { display: block; }
.dsmt-plan-modal-overlay { position: absolute; inset: 0; background: rgba(10,10,14,0.6); backdrop-filter: blur(4px); }
.dsmt-plan-modal-dialog {
  position: relative; z-index: 1; width: calc(100% - 32px); max-width: 620px;
  margin: clamp(24px,6vh,80px) auto; max-height: calc(100vh - 48px);
  background: var(--dsmt-bg); border: 1px solid var(--dsmt-line); border-radius: var(--dsmt-radius-xl);
  box-shadow: 0 24px 60px rgba(0,0,0,0.28);
  display: flex; flex-direction: column; overflow: hidden; /* clips the scroll pane below to these rounded corners */
}
.dsmt-plan-modal-scroll { overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.dsmt-plan-modal-close {
  position: absolute; top: 16px; right: 16px; z-index: 2; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--dsmt-line-2); background: var(--dsmt-bg); color: var(--dsmt-ink-2);
  font-size: 1.15rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
}
.dsmt-plan-modal-close:hover { border-color: var(--dsmt-blue); color: var(--dsmt-blue); }
.dsmt-plan-modal-head { padding: 30px 52px 6px 28px; }
.dsmt-plan-modal-head h3 { font-family: var(--dsmt-font-head); font-weight: 700; font-size: clamp(1.25rem,3vw,1.6rem); letter-spacing: -0.03em; margin: 8px 0 0; color: var(--dsmt-ink); }
.dsmt-plan-modal-form.dsmt-contact-fluentform { display: block; }
/* contact.css's Fluent Forms reskin (loaded above) fully applies once a
   field's Advanced → Container Class is set to dsmt-form-section /
   dsmt-form-cell in the Fluent Forms builder, same as Form 1 on the
   Contact page. Until Form 4's fields are set up that way, this fallback
   still gives every field group the same 24/28px rhythm and a divider
   line, so the modal doesn't fall back to Fluent Forms' unstyled default
   boxes. Safe to leave in place even after Container Class is set — the
   values match .dsmt-form-section exactly, so there's no visible double-up.
*/
.dsmt-plan-modal-form .ff-el-group { padding: 24px 28px; margin: 0; display: grid; gap: 8px; border-bottom: 1px solid var(--dsmt-line); }
.dsmt-plan-modal-form .ff-el-group:last-of-type { border-bottom: none; }
@media (max-width: 560px) { .dsmt-plan-modal-head { padding: 26px 46px 4px 20px; } }

/* Compact layout — the modal is a popup, not a full page, so every field
   gets less breathing room than the same form gets on the Contact page.
   These override contact.css's .dsmt-form-cell/.dsmt-form-section AND the
   .ff-el-group fallback above at equal specificity — pricing.css loads
   after contact.css, so these win regardless of which rule matched. */
.dsmt-plan-modal-form .ff-el-group,
.dsmt-plan-modal-form .dsmt-form-cell,
.dsmt-plan-modal-form .dsmt-form-section {
  padding: 13px 28px; gap: 3px;
}
.dsmt-plan-modal-form .ff-el-input--label label { font-size: 0.6rem; }
.dsmt-plan-modal-form .ff-el-form-control { font-size: 0.875rem; }
.dsmt-plan-modal-form textarea.ff-el-form-control { min-height: 64px; }
.dsmt-plan-modal-form .ff_submit_btn_wrapper { padding: 14px 28px; }

/* Scrollbar — the dialog scrolls internally on shorter viewports; style it
   to match the theme instead of leaving the browser's default grey bar. */
.dsmt-plan-modal-scroll { scrollbar-width: thin; scrollbar-color: var(--dsmt-line-2) transparent; }
.dsmt-plan-modal-scroll::-webkit-scrollbar { width: 8px; }
.dsmt-plan-modal-scroll::-webkit-scrollbar-track { background: transparent; }
.dsmt-plan-modal-scroll::-webkit-scrollbar-thumb { background: var(--dsmt-line-2); border-radius: 100px; }
.dsmt-plan-modal-scroll::-webkit-scrollbar-thumb:hover { background: var(--dsmt-ink-3); }

body.dsmt-modal-open { overflow: hidden; }