@font-face {
     font-family: 'Arial';
     src: url('../fonts/ArialMT.woff2') format('woff2'),
       url('../fonts/ArialMT.woff') format('woff');
     font-weight: normal;
   }

   @font-face {
     font-family: 'Arial';
     src: url('../fonts/Arial-BoldMT.woff2') format('woff2'),
       url('../fonts/Arial-BoldMT.woff') format('woff');
     font-weight: bold;
   }

   a {
    text-decoration: none;
   }

   body {
     padding: 0px !important;
     margin: 0px !important;
     font-family: 'Arial';

   }

   .ph-cloud-pricing {
     --ph-navy: #0B1B3A;
     --ph-navy-deep: #071230;
     --ph-violet: #6D28D9;
     --ph-violet-bright: #8B5CF6;
     --ph-violet-soft: #EFE9FB;
     --ph-ink: #1F2A44;
     --ph-slate: #5B6478;
     --ph-line: #E3E7EF;
     --ph-mist: #F5F7FB;
     --ph-sky: #F1F4FF;
     --ph-white: #FFFFFF;
     --ph-grad: linear-gradient(115deg, #071230 0%, #0B1B3A 35%, #3B2A8F 70%, #6D28D9 100%);
     --ph-grad-text: linear-gradient(90deg, #0B1B3A 0%, #6D28D9 100%);
     font-family: 'Arial';;
     color: var(--ph-ink);
     line-height: 1.6;
     font-size: 1.05rem;
     -webkit-font-smoothing: antialiased
   }

   .ph-cloud-pricing * {
     box-sizing: border-box;
     margin: 0;
     padding: 0
   }

   .ph-cloud-pricing .ph-wrap {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 24px
   }

   .ph-cloud-pricing h1,
   .ph-cloud-pricing h2,
   .ph-cloud-pricing h3 {
     font-family: 'Arial';
     color: var(--ph-navy);
     letter-spacing: -0.025em;
     line-height: 1.12
   }

   .ph-cloud-pricing h1 {
     font-size: clamp(2.4rem, 5vw, 3.9rem);
     font-weight: 800;
     color: var(--ph-white);
     max-width: 16ch
   }

   .ph-cloud-pricing h2 {
     font-size: clamp(1.9rem, 3.4vw, 3rem);
     font-weight: 800;
     max-width: 24ch
   }

   .ph-cloud-pricing h2.ph-grad-heading {
     background: var(--ph-grad-text);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     display: inline-block;
     padding-bottom: .08em
   }

   .ph-cloud-pricing h3 {
     font-size: 1.25rem;
     font-weight: 700
   }

   .ph-cloud-pricing p {
     max-width: 62ch
   }

   .ph-cloud-pricing .ph-mono {
     font-family: 'Arial';
   }

   .ph-cloud-pricing a:focus-visible,
   .ph-cloud-pricing summary:focus-visible {
     outline: 3px solid #B794F4;
     outline-offset: 3px
   }

   /* Buttons */
   .ph-cloud-pricing .ph-btn {
     display: inline-block;
     font-weight: 700;
     font-size: 1rem;
     text-decoration: none;
     border-radius: 8px;
     padding: 15px 28px;
     transition: background .18s, color .18s, border-color .18s, box-shadow .18s
   }

   .ph-cloud-pricing .ph-btn-primary {
     background: linear-gradient(90deg, #4C1D95 0%, #6D28D9 100%);
     color: var(--ph-white);
     border: 2px solid transparent;
     box-shadow: 0 8px 20px rgba(109, 40, 217, .28)
   }

   .ph-cloud-pricing .ph-btn-primary:hover {
     background: linear-gradient(90deg, #3B1478 0%, #5B21B6 100%);
     color: var(--ph-white);
     box-shadow: 0 10px 24px rgba(109, 40, 217, .36)
   }

   .ph-cloud-pricing .ph-btn-outline {
     background: transparent;
     color: var(--ph-navy);
     border: 2px solid var(--ph-navy)
   }

   .ph-cloud-pricing .ph-btn-outline:hover {
     background: var(--ph-navy);
     color: var(--ph-white)
   }

   .ph-cloud-pricing .ph-btn-light {
     background: var(--ph-white);
     color: var(--ph-navy);
     border: 2px solid var(--ph-white)
   }

   .ph-cloud-pricing .ph-btn-light:hover {
     background: transparent;
     color: var(--ph-white)
   }

   /* CTA row + Trustpilot */
   .ph-cloud-pricing .ph-cta-row {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
     gap: 22px 32px;
     margin-top: 32px
   }

   .ph-cloud-pricing .ph-cta-row-center {
     justify-content: center
   }

   .ph-cloud-pricing .ph-btn-pill {
     background: var(--ph-white);
     color: #2D3BD6;
     border: 2px solid var(--ph-white);
     border-radius: 999px;
     padding: 16px 30px;
     font-size: 1.02rem;
     font-weight: 600;
     box-shadow: 0 10px 26px rgba(11, 27, 58, .25)
   }

   .ph-cloud-pricing .ph-btn-pill:hover {
     background: #EFE9FB;
     color: #1E2AA8;
     border-color: #EFE9FB
   }

   .ph-cloud-pricing .ph-trust {
     display: inline-flex;
     align-items: center;
     gap: 12px;
     text-decoration: none;
     color: var(--ph-white);
     font-weight: 700
   }

   .ph-cloud-pricing .ph-trust-word {
     font-size: 1.15rem;
     text-decoration: underline;
     text-underline-offset: 4px;
     text-decoration-thickness: 2px
   }

   .ph-cloud-pricing .ph-trust-stars {
     display: inline-flex;
     gap: 3px
   }

   .ph-cloud-pricing .ph-trust-stars svg {
     width: 22px;
     height: 22px
   }

   .ph-cloud-pricing .ph-trust-brand {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     font-size: 1rem;
     font-weight: 600
   }

   .ph-cloud-pricing .ph-trust-brand svg {
     width: 20px;
     height: 20px
   }

   .ph-cloud-pricing .ph-trust:hover .ph-trust-word {
     text-decoration-color: #C4B5FD
   }

   .ph-cloud-pricing .ph-cta .ph-cta-row {
     margin-top: 0
   }

   /* Hero */
   .ph-cloud-pricing .ph-hero {
     position: relative;
     color: var(--ph-white);
     padding: 110px 0 90px;
     overflow: hidden;
     background-color: #1b1044
   }

   .ph-cloud-pricing .ph-hero .ph-hero-img {
     position: absolute;
     inset: 0;
     z-index: 0;
     background-image: url("../images/counterpoint-cloud-pricing-hero.jpg");
     background-size: cover;
     background-position: right center;
     background-repeat: no-repeat;
     filter: brightness(1.22) saturate(1.08)
   }

   .ph-cloud-pricing .ph-hero::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg, rgba(20, 9, 57, .97) 0%, rgba(32, 13, 83, .87) 38%, rgba(38, 17, 91, .18) 66%, rgba(14, 8, 45, .06) 100%), linear-gradient(0deg, rgba(18, 8, 45, .8), transparent 45%);
     pointer-events: none;
     z-index: 1
   }

   .ph-cloud-pricing .ph-hero::after {
     content: "";
     position: absolute;
     width: 700px;
     height: 700px;
     left: -260px;
     bottom: -340px;
     border-radius: 50%;
     background: radial-gradient(circle, rgba(69, 202, 255, .4), rgba(112, 38, 244, .25) 40%, transparent 70%);
     filter: blur(15px);
     pointer-events: none;
     z-index: 1
   }

   .ph-cloud-pricing .ph-hero .ph-wrap {
     position: relative;
     z-index: 2;
     max-width: 1200px;
     padding: 0 24px
   }

   .ph-cloud-pricing .ph-hero h1 {
     color: var(--ph-white);
     max-width: 15ch;
     font-size: clamp(2.3rem, 4.6vw, 5rem);
     text-shadow: 0 2px 24px rgba(11, 27, 58, .35)
   }

   .ph-cloud-pricing .ph-hero h1 span {
     background: linear-gradient(90deg, #8EE3FF 0%, #C4B5FD 50%, #F9A8D4 100%);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent
   }

   .ph-cloud-pricing .ph-hero p {
     color: rgba(255, 255, 255, .92);
     font-size: 1.1rem;
     line-height: 1.6;
     margin-top: 20px;
     max-width: 62ch;
     text-shadow: 0 1px 12px rgba(11, 27, 58, .4)
   }

   .ph-cloud-pricing .ph-hero p+p {
     margin-top: 10px
   }

   .ph-cloud-pricing .ph-hero .ph-kicker {
     color: #C4B5FD;
     font-weight: 700;
     font-size: .9rem;
     letter-spacing: .12em;
     text-transform: uppercase;
     margin: 0 0 20px;
     max-width: none
   }

   .ph-cloud-pricing .ph-promise {
     margin-top: 48px;
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 0;
     border: 1px solid rgba(255, 255, 255, .22);
     border-radius: 14px;
     overflow: hidden;
     background: rgba(11, 27, 58, .42);
     -webkit-backdrop-filter: blur(12px);
     backdrop-filter: blur(12px);
     box-shadow: 0 16px 40px rgba(11, 27, 58, .25);
     max-width: 1440px;
   }

   .ph-cloud-pricing .ph-promise div {
     padding: 24px 24px;
     border-right: 1px solid rgba(255, 255, 255, .18)
   }

   .ph-cloud-pricing .ph-promise div:last-child {
     border-right: 0
   }

   .ph-cloud-pricing .ph-promise strong {
     display: block;
     color: var(--ph-white);
     font-size: 1.08rem;
     font-weight: 800;
     margin-bottom: 6px
   }

   .ph-cloud-pricing .ph-promise span {
     color: rgba(255, 255, 255, .84);
     font-size: .97rem;
     line-height: 1.5
   }

   /* Plans */
   .ph-cloud-pricing .ph-plans {
     position: relative;
     padding: 110px 0 110px;
     overflow: hidden;
     background: #F7F6FF;
     background-image: radial-gradient(60% 50% at 8% 0%, rgba(139, 92, 246, .22) 0%, rgba(139, 92, 246, 0) 60%), radial-gradient(50% 45% at 95% 15%, rgba(11, 27, 58, .14) 0%, rgba(11, 27, 58, 0) 60%), radial-gradient(60% 40% at 50% 110%, rgba(109, 40, 217, .16) 0%, rgba(109, 40, 217, 0) 60%)
   }

   .ph-cloud-pricing .ph-plans .ph-wrap {
     position: relative;
     z-index: 1
   }

   .ph-cloud-pricing .ph-plans-head {
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center
   }

   .ph-cloud-pricing .ph-plans-head h2 {
     margin: 0 auto
   }

   .ph-cloud-pricing .ph-plans-panel {
     margin: 36px auto 0;
     max-width: 900px;
     display: grid;
     grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
     gap: 0;
     background: var(--ph-white);
     border: 1px solid rgba(109, 40, 217, .14);
     border-radius: 20px;
     box-shadow: 0 18px 44px rgba(11, 27, 58, .10);
     overflow: hidden
   }

   .ph-cloud-pricing .ph-panel-includes {
     padding: 28px 32px;
     border-right: 1px solid var(--ph-line);
     display: flex;
     flex-direction: column;
     justify-content: center
   }

   .ph-cloud-pricing .ph-panel-billing .ph-toggle-btn {
     padding: 12px 20px;
     font-size: 1.05rem;
     line-height: normal;
   }

   .ph-cloud-pricing .ph-panel-billing .ph-save {
     white-space: nowrap
   }

   .ph-cloud-pricing .ph-panel-billing {
     padding: 28px 32px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
     background: linear-gradient(160deg, #F3EEFF 0%, #FBF7FF 100%)
   }

   .ph-cloud-pricing .ph-panel-label {
     color: var(--ph-violet);
     font-weight: 700;
     font-size: .78rem;
     letter-spacing: .12em;
     text-transform: uppercase;
     margin-bottom: 14px;
     max-width: none
   }

   .ph-cloud-pricing .ph-includes-list {
     list-style: none;
     display: grid;
     grid-template-columns: minmax(0, 1fr);
     gap: 11px 24px
   }

   .ph-cloud-pricing .ph-includes-list li {
     display: flex;
     align-items: center;
     gap: 10px;
     font-weight: 600;
     font-size: 1rem;
     color: var(--ph-ink);
     line-height: 1.3
   }

   .ph-cloud-pricing .ph-includes-list li svg {
     flex: 0 0 18px
   }

   .ph-cloud-pricing .ph-term-note {
     margin-top: 14px;
     color: var(--ph-slate);
     font-size: .88rem;
     font-weight: 600;
     max-width: none;
     text-align: center
   }

   .ph-cloud-pricing .ph-plan-grid {
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: 24px;
     margin-top: 52px;
     align-items: stretch
   }

   .ph-cloud-pricing .ph-plan {
     --pc-a: #2563EB;
     --pc-b: #7C3AED;
     --pc-bg: linear-gradient(165deg, #EEF4FF 0%, #FFFFFF 60%);
     --pc-pill: #DCE8FF;
     position: relative;
     background: var(--pc-bg);
     border: 1px solid rgba(11, 27, 58, .08);
     border-radius: 12px;
     padding: 38px 30px 32px;
     display: flex;
     flex-direction: column;
     box-shadow: 0 12px 32px rgba(11, 27, 58, .07), 0 1px 0 rgba(255, 255, 255, .9) inset;
     transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
   }

   .ph-cloud-pricing .ph-plan:hover {
     transform: translateY(-8px);
     box-shadow: 0 28px 56px rgba(11, 27, 58, .14);
     border-color: transparent
   }

   .ph-cloud-pricing .ph-plan::before {
     content: "";
     position: absolute;
     left: 0;
     right: 0;
     top: 0;
     height: 6px;
     border-radius: 22px 22px 0 0;
     background: linear-gradient(90deg, var(--pc-a), var(--pc-b))
   }

   .ph-cloud-pricing .ph-plan>* {
     position: relative;
     z-index: 1
   }

   .ph-cloud-pricing .ph-plan h3 {
     font-size: 1.45rem;
     font-weight: 800;
     margin-bottom: 12px;
     letter-spacing: -0.02em;
     color: var(--ph-navy)
   }

   .ph-cloud-pricing .ph-plan .ph-users {
     display: inline-block;
     align-self: flex-start;
     background: var(--pc-pill);
     color: var(--pc-b);
     font-weight: 700;
     font-size: .82rem;
     letter-spacing: .02em;
     padding: 6px 12px;
     border-radius: 999px;
     margin-bottom: 18px;
     white-space: nowrap
   }

   .ph-cloud-pricing .ph-plan .ph-from {
     color: var(--ph-slate);
     font-size: .74rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: .12em
   }

   .ph-cloud-pricing .ph-plan .ph-price {
     display: flex;
     align-items: flex-start;
     gap: 3px;
     margin: 4px 0 0
   }

   .ph-cloud-pricing .ph-plan .ph-price .ph-cur {
     font-size: 1.6rem;
     font-weight: 700;
     margin-top: 6px;
     color: var(--pc-b)
   }

   .ph-cloud-pricing .ph-plan .ph-price .ph-amt {
     font-size: 4rem;
     font-weight: 700;
     line-height: 1;
     letter-spacing: -0.04em;
     background: linear-gradient(90deg, var(--pc-a), var(--pc-b));
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent
   }

   .ph-cloud-pricing .ph-plan .ph-price .ph-custom {
     font-family: 'Arial';
     font-size: clamp(1.6rem, 1.4vw + .8rem, 2.1rem);
     font-weight: 800;
     line-height: 1.2;
     letter-spacing: -0.02em;
     margin-top: 8px;
     padding-bottom: .12em;
     min-width: 0;
     overflow-wrap: anywhere;
     background: linear-gradient(90deg, var(--pc-a), var(--pc-b));
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent
   }

   .ph-cloud-pricing .ph-plan .ph-per {
     color: var(--ph-slate);
     font-size: .95rem;
     font-weight: 600;
     margin-top: 2px
   }

   .ph-cloud-pricing .ph-plan p {
     font-size: 1rem;
     line-height: 1.6;
     color: var(--ph-ink);
     margin-bottom: 22px
   }

   /* POS Highway add-ons included per tier */
   .ph-cloud-pricing .ph-addons {
     flex: 1;
     margin-bottom: 28px;
     padding: 18px 16px 14px;
     border-radius: 14px;
     background: rgba(255, 255, 255, .62);
     border: 1px solid rgba(11, 27, 58, .08)
   }

   .ph-cloud-pricing .ph-addons-title {
     display: block;
     font-size: .76rem;
     font-weight: 700;
     color: var(--ph-navy);
     margin-bottom: 8px;
     line-height: 1.35
   }

   .ph-cloud-pricing .ph-addons-title em {
     font-style: normal;
     background: linear-gradient(90deg, var(--pc-a), var(--pc-b));
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent
   }

   .ph-cloud-pricing .ph-addons ul {
     list-style: none;
     margin: 0;
     padding: 0
   }

   .ph-cloud-pricing .ph-addons li {
     display: flex;
     align-items: flex-start;
     gap: 8px;
     padding: 7px 0;
     font-size: .86rem;
     font-weight: 600;
     color: var(--ph-ink);
     line-height: 1.3;
     border-top: 1px solid rgba(11, 27, 58, .07)
   }

   .ph-cloud-pricing .ph-addons li:first-child {
     border-top: 0
   }

   .ph-cloud-pricing .ph-addons li svg {
     flex: 0 0 17px;
     width: 17px;
     height: 17px;
     margin-top: 2px
   }

   .ph-cloud-pricing .ph-addons li .ph-addon-icon {
     fill: var(--pc-b)
   }

   .ph-cloud-pricing .ph-addons li small {
     display: block;
     font-weight: 500;
     font-size: .72rem;
     color: var(--ph-slate);
     margin-top: 2px;
     line-height: 1.3
   }

   .ph-cloud-pricing .ph-addons li.ph-off {
     color: #6B7280;
     font-weight: 500
   }

   .ph-cloud-pricing .ph-addons li.ph-off .ph-addon-icon {
     fill: #C4CAD6
   }

   .ph-cloud-pricing .ph-addons li.ph-off small {
     color: #6B7280
   }

   .ph-cloud-pricing .ph-plan .ph-btn {
     text-align: center;
     width: 100%;
     padding: 16px 20px;
     border-radius: 12px;
     font-size: 1.02rem
   }

   .ph-cloud-pricing .ph-plan .ph-btn-plan {
     background: linear-gradient(90deg, var(--pc-a), var(--pc-b));
     color: var(--ph-white);
     border: 2px solid transparent;
     box-shadow: 0 12px 26px rgba(109, 40, 217, .32);
     box-shadow: 0 12px 26px color-mix(in srgb, var(--pc-b) 32%, transparent);
     font-weight: 700
   }

   .ph-cloud-pricing .ph-plan .ph-btn-plan:hover {
     filter: brightness(1.08);
     transform: translateY(-2px);
     box-shadow: 0 16px 32px rgba(109, 40, 217, .42);
     box-shadow: 0 16px 32px color-mix(in srgb, var(--pc-b) 42%, transparent);
     color: var(--ph-white)
   }

   .ph-cloud-pricing .ph-plan .ph-btn-plan {
     transition: filter .18s, transform .18s, box-shadow .18s;
     font-size: .92rem;
     padding: 14px 10px;
     line-height: 1.35;
     letter-spacing: -0.005em
   }

   .ph-cloud-pricing .ph-plan .ph-btn-outline {
     border: 2px solid var(--ph-navy);
     background: rgba(255, 255, 255, .7)
   }

   .ph-cloud-pricing .ph-plan .ph-btn-outline:hover {
     background: linear-gradient(90deg, var(--pc-a), var(--pc-b));
     border-color: transparent;
     color: var(--ph-white)
   }

   /* Row alignment across cards: every section (name, price, description, add-ons, button) shares the same row height */
   @supports (grid-template-rows:subgrid) {
     .ph-cloud-pricing .ph-plan {
       display: grid;
       grid-template-rows: subgrid;
       grid-row: span 9;
       align-content: start;
       row-gap: 0
     }

     .ph-cloud-pricing .ph-plan .ph-users {
       align-self: start;
       justify-self: start
     }

     .ph-cloud-pricing .ph-plan p {
       align-self: start
     }

     .ph-cloud-pricing .ph-plan .ph-addons {
       align-self: stretch
     }

     .ph-cloud-pricing .ph-plan .ph-btn {
       align-self: end
     }
   }

   /* Fallback for browsers without subgrid: reserve three lines for the description */
   @supports not (grid-template-rows:subgrid) {
     .ph-cloud-pricing .ph-plan p {
       min-height: 4.8rem
     }

     .ph-cloud-pricing .ph-plan .ph-addons {
       flex: 1
     }
   }

   /* Card palettes */
   .ph-cloud-pricing .ph-plan-sky {
     --pc-a: #0369A1;
     --pc-b: #2563EB;
     --pc-bg: radial-gradient(60% 45% at 100% 0%, rgba(37, 99, 235, .16) 0%, transparent 70%), linear-gradient(165deg, #E6F3FF 0%, #F6FAFF 55%, #FFFFFF 100%);
     --pc-pill: #DBEDFF
   }

   .ph-cloud-pricing .ph-plan-violet {
     --pc-a: #6D28D9;
     --pc-b: #A21CAF;
     --pc-bg: radial-gradient(60% 45% at 100% 0%, rgba(162, 28, 175, .14) 0%, transparent 70%), linear-gradient(165deg, #EFE6FF 0%, #F8F3FF 55%, #FFFFFF 100%);
     --pc-pill: #E6DAFF
   }

   .ph-cloud-pricing .ph-plan-rose {
     --pc-a: #BE185D;
     --pc-b: #7C3AED;
     --pc-bg: radial-gradient(60% 45% at 100% 0%, rgba(124, 58, 237, .14) 0%, transparent 70%), linear-gradient(165deg, #FFE7F2 0%, #FFF4F9 55%, #FFFFFF 100%);
     --pc-pill: #FFDCEB
   }

   .ph-cloud-pricing .ph-plan-indigo {
     --pc-a: #0B1B3A;
     --pc-b: #4F46E5;
     --pc-bg: radial-gradient(60% 45% at 100% 0%, rgba(79, 70, 229, .16) 0%, transparent 70%), linear-gradient(165deg, #E7EAFF 0%, #F4F5FF 55%, #FFFFFF 100%);
     --pc-pill: #DEE1FF
   }

   /* Featured card */
   .ph-cloud-pricing .ph-plan.ph-featured {
     border: 2px solid transparent;
     background: var(--pc-bg) padding-box, linear-gradient(135deg, #6D28D9, #DB2777) border-box;
     box-shadow: 0 30px 60px rgba(109, 40, 217, .22), 0 0 0 8px rgba(109, 40, 217, .07);
     transform: translateY(-14px)
   }

   .ph-cloud-pricing .ph-plan.ph-featured:hover {
     transform: translateY(-20px);
     box-shadow: 0 40px 70px rgba(109, 40, 217, .28), 0 0 0 8px rgba(109, 40, 217, .1)
   }

   .ph-cloud-pricing .ph-plan.ph-featured::before {
     display: none
   }

   .ph-cloud-pricing .ph-plan.ph-featured .ph-btn-primary {
     background: linear-gradient(90deg, #6D28D9, #A21CAF);
     border-color: transparent;
     color: var(--ph-white);
     box-shadow: 0 12px 26px rgba(109, 40, 217, .35)
   }

   .ph-cloud-pricing .ph-plan.ph-featured .ph-btn-primary:hover {
     background: linear-gradient(90deg, #5B21B6, #86198F);
     color: var(--ph-white)
   }

   .ph-cloud-pricing .ph-plan .ph-tag {
     position: absolute;
     top: -16px;
     left: 50%;
     transform: translateX(-50%);
     white-space: nowrap;
     background: linear-gradient(90deg, #6D28D9, #DB2777);
     color: var(--ph-white);
     font-size: .78rem;
     font-weight: 800;
     letter-spacing: .08em;
     text-transform: uppercase;
     padding: 8px 18px;
     border-radius: 999px;
     box-shadow: 0 8px 20px rgba(109, 40, 217, .35)
   }

   .ph-cloud-pricing .ph-plan-note {
     margin: 40px auto 0;
     color: var(--ph-slate);
     font-size: .95rem;
     line-height: 1.6;
     max-width: 120ch;
     text-align: center
   }

   /* Billing toggle */
   .ph-cloud-pricing .ph-billing-toggle {
     display: inline-flex;
     margin-top: 0;
     padding: 6px;
     border: 2px solid transparent;
     background: linear-gradient(var(--ph-white), var(--ph-white)) padding-box, linear-gradient(90deg, #0B1B3A, #6D28D9, #DB2777) border-box;
     border-radius: 999px;
     box-shadow: 0 14px 34px rgba(109, 40, 217, .18);
     gap: 6px
   }

   .ph-cloud-pricing .ph-toggle-btn {
     appearance: none;
     border: 0;
     background: transparent;
     color: var(--ph-navy);
     font-family: inherit;
     font-weight: 800;
     font-size: 1.15rem;
     letter-spacing: -0.01em;
     padding: 14px 30px;
     border-radius: 999px;
     cursor: pointer;
     display: inline-flex;
     align-items: center;
     gap: 10px;
     transition: background .18s, color .18s, box-shadow .18s, transform .18s
   }

   .ph-cloud-pricing .ph-toggle-btn:hover {
     background: var(--ph-violet-soft)
   }

   .ph-cloud-pricing .ph-toggle-btn.ph-active {
     background: linear-gradient(90deg, #0B1B3A 0%, #4C1D95 55%, #6D28D9 100%);
     color: var(--ph-white);
     box-shadow: 0 10px 24px rgba(109, 40, 217, .38)
   }

   .ph-cloud-pricing .ph-toggle-btn.ph-active:hover {
     background: linear-gradient(90deg, #0B1B3A 0%, #4C1D95 55%, #6D28D9 100%);
     transform: translateY(-1px)
   }

   .ph-cloud-pricing .ph-toggle-btn:focus-visible {
     outline: 3px solid #B794F4;
     outline-offset: 3px
   }

   .ph-cloud-pricing .ph-save {
     font-size: .78rem;
     font-weight: 800;
     letter-spacing: .08em;
     text-transform: uppercase;
     padding: 5px 11px;
     border-radius: 999px;
     background: linear-gradient(90deg, #047857, #065F46);
     color: var(--ph-white);
     box-shadow: 0 4px 12px rgba(4, 120, 87, .35);
     line-height: normal;
   }

   .ph-cloud-pricing .ph-plan .ph-was {
     font-size: 1.05rem;
     font-weight: 600;
     color: var(--ph-slate);
     text-decoration: line-through;
     margin-left: 10px;
     margin-top: 14px;
     align-self: flex-start
   }

   .ph-cloud-pricing .ph-plans[data-billing="monthly"] .ph-was {
     display: none
   }

   .ph-cloud-pricing .ph-plan .ph-billing {
     font-size: .86rem;
     font-weight: 600;
     color: var(--pc-b);
     margin-top: 6px;
     padding-bottom: 20px;
     margin-bottom: 24px;
     min-height: 1.3em;
     border-bottom: 1px solid rgba(11, 27, 58, .1)
   }

   .ph-cloud-pricing .ph-plan .ph-billing-empty {
     color: transparent
   }

   @supports not (grid-template-rows:subgrid) {
     .ph-cloud-pricing .ph-plan {
       display: flex;
       flex-direction: column
     }

     .ph-cloud-pricing .ph-plan p {
       flex: 1
     }
   }

   /* Grow strip */
   .ph-cloud-pricing .ph-grow {
     padding: 32px 0 24px;
     background: var(--ph-white)
   }

   .ph-cloud-pricing .ph-grow-card {
     position: relative;
     overflow: hidden;
     background: var(--ph-grad);
     color: var(--ph-white);
     border-radius: 24px;
     padding: 56px 56px;
     display: grid;
     grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
     gap: 56px;
     align-items: center;
     box-shadow: 0 30px 70px rgba(11, 27, 58, .28)
   }

   .ph-cloud-pricing .ph-grow-card::before {
     content: "";
     position: absolute;
     inset: 0;
     background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
     background-size: 40px 40px;
     mask-image: radial-gradient(70% 80% at 80% 50%, #000 30%, transparent 100%);
     -webkit-mask-image: radial-gradient(70% 80% at 80% 50%, #000 30%, transparent 100%);
     pointer-events: none
   }

   .ph-cloud-pricing .ph-grow-card::after {
     content: "";
     position: absolute;
     right: -8%;
     top: -50%;
     width: 55%;
     height: 200%;
     background: radial-gradient(closest-side, rgba(139, 92, 246, .5), rgba(139, 92, 246, 0));
     pointer-events: none
   }

   .ph-cloud-pricing .ph-grow-card>* {
     position: relative;
     z-index: 1;
     min-width: 0
   }

   .ph-cloud-pricing .ph-grow-copy h2 {
     font-size: clamp(1.7rem, 2.6vw, 2.2rem);
     margin-bottom: 18px;
     color: var(--ph-white)
   }

   .ph-cloud-pricing .ph-grow-copy p {
     color: rgba(255, 255, 255, .88);
     font-size: 1.05rem;
     line-height: 1.65
   }

   .ph-cloud-pricing .ph-grow-visual {
     background: rgba(255, 255, 255, .07);
     border: 1px solid rgba(255, 255, 255, .18);
     border-radius: 18px;
     padding: 28px 24px 22px;
     -webkit-backdrop-filter: blur(6px);
     backdrop-filter: blur(6px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, .18) inset, 0 1px 0 rgba(255, 255, 255, .12)
   }

   .ph-cloud-pricing .ph-ladder {
     position: relative;
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: 12px;
     align-items: end;
     height: 200px
   }

   .ph-cloud-pricing .ph-ladder-line {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     pointer-events: none;
     z-index: 0
   }

   .ph-cloud-pricing .ph-rung {
     position: relative;
     z-index: 1;
     text-align: center;
     background: linear-gradient(160deg, rgba(30, 36, 90, .96), rgba(43, 30, 110, .96));
     border: 1px solid rgba(255, 255, 255, .22);
     border-radius: 14px;
     padding: 14px 6px 12px;
     transition: transform .25s ease, background .25s ease
   }

   .ph-cloud-pricing .ph-rung:hover {
     transform: translateY(-4px);
     border-color: rgba(255, 255, 255, .45)
   }

   .ph-cloud-pricing .ph-rung b {
     display: block;
     color: var(--ph-white);
     font-size: 2rem;
     font-weight: 600;
     line-height: 1;
     letter-spacing: -0.02em
   }

   .ph-cloud-pricing .ph-rung small {
     display: block;
     color: #C4B5FD;
     font-size: .68rem;
     font-weight: 700;
     letter-spacing: .08em;
     text-transform: uppercase;
     margin-top: 8px
   }

   .ph-cloud-pricing .ph-rung-1 {
     margin-bottom: 0
   }

   .ph-cloud-pricing .ph-rung-2 {
     margin-bottom: 34px
   }

   .ph-cloud-pricing .ph-rung-3 {
     margin-bottom: 68px
   }

   .ph-cloud-pricing .ph-rung-4 {
     margin-bottom: 102px
   }

   .ph-cloud-pricing .ph-rung-top {
     background: linear-gradient(135deg, #7C3AED, #A78BFA);
     border-color: rgba(255, 255, 255, .45);
     box-shadow: 0 12px 28px rgba(109, 40, 217, .35)
   }

   .ph-cloud-pricing .ph-path-caption {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     color: var(--ph-white);
     font-weight: 700;
     font-size: .95rem;
     margin-top: 18px;
     padding-top: 16px;
     border-top: 1px solid rgba(255, 255, 255, .16);
     max-width: none
   }

   /* AI Dashboard */
   .ph-cloud-pricing .ph-ai {
     padding: 110px 0 60px;
     background: var(--ph-white)
   }

   .ph-cloud-pricing .ph-ai-head {
     max-width: 900px
   }

   .ph-cloud-pricing .ph-ai .ph-ai-kicker {
     color: var(--ph-violet);
     font-weight: 700;
     font-size: .82rem;
     letter-spacing: .12em;
     text-transform: uppercase;
     margin-bottom: 12px;
     max-width: none;
     margin-top: 0;
     line-height: 1.6;
   }

   .ph-cloud-pricing .ph-ai-lead,
   .ph-cloud-pricing .ph-ai p {
     color: var(--ph-slate);
     font-size: 1rem;
     line-height: 1.7;
     margin-top: 14px;
     max-width: 80ch
   }

   .ph-cloud-pricing .ph-ai-lead+.ph-ai-lead,
   .ph-cloud-pricing .ph-ai p+p {
     margin-top: 8px
   }

   .ph-cloud-pricing .ph-ai-link {
     display: inline-block;
     margin-top: 18px;
     color: var(--ph-violet);
     font-weight: 700;
     text-decoration: none;
     border-bottom: 2px solid rgba(109, 40, 217, .35);
     padding-bottom: 2px
   }

   .ph-cloud-pricing .ph-ai-link:hover {
     border-bottom-color: var(--ph-violet)
   }

   .ph-cloud-pricing .ph-ai-details {
     margin-top: 36px;
     border: 1px solid var(--ph-line);
     border-radius: 16px;
     background: var(--ph-mist);
     padding: 0 24px
   }

   .ph-cloud-pricing .ph-ai-details summary {
     cursor: pointer;
     list-style: none;
     font-weight: 800;
     color: var(--ph-navy);
     font-size: 1.1rem;
     padding: 20px 40px 20px 0;
     position: relative
   }

   .ph-cloud-pricing .ph-ai-details summary::-webkit-details-marker {
     display: none
   }

   .ph-cloud-pricing .ph-ai-details summary::after {
     content: "+";
     position: absolute;
     right: 0;
     top: 32px;
     color: var(--ph-violet);
     font-size: 1.7rem;
     font-weight: 600;
     line-height: 1
   }

   .ph-cloud-pricing .ph-ai-details[open] summary::after {
     content: "\2013"
   }

   .ph-cloud-pricing .ph-ai-details[open] summary {
     border-bottom: 1px solid var(--ph-line)
   }

   .ph-cloud-pricing .ph-ai-lists {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 0 28px;
     padding: 20px 0 24px
   }

   .ph-cloud-pricing .ph-dm-details {
     margin-top: 16px
   }

   .ph-cloud-pricing .ph-dm-body {
     padding: 20px 0 24px
   }

   .ph-cloud-pricing .ph-dm-body p {
     padding: 0
   }

   .ph-cloud-pricing .ph-ai .ph-dm-lead {
     color: var(--ph-slate);
     font-size: 1rem;
     max-width: none;
     margin-top: 0;
     line-height: 1.6;
   }

   .ph-cloud-pricing .ph-dm-lists {
     grid-template-columns: repeat(2, minmax(0, 1fr));
     padding: 14px 0 8px
   }

   .ph-cloud-pricing .ph-ai .ph-dm-foot {
     color: var(--ph-ink);
     font-size: .97rem;
     margin-top: 14px;
     max-width: none;
     line-height: 1.6;
   }

   .ph-cloud-pricing .ph-ai-list,
   .ph-cloud-pricing ul {
     list-style: none
   }

   .ph-cloud-pricing .ph-ai-list li,
   .ph-cloud-pricing .ph-ai ul li {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     padding: 10px 0;
     border-bottom: 1px solid var(--ph-line);
     font-weight: 600;
     font-size: .9rem;
     color: var(--ph-ink);
     line-height: 1.35
   }
   .ph-cloud-pricing .ph-ai ul li {
    position: relative;
    padding-left: 28px;
   }
   .ph-cloud-pricing .ph-ai ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 10px;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%236D28D9'/%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.6' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
   }
   .ph-cloud-pricing .ph-ai-list li svg,
   .ph-cloud-pricing .ph-ai ul li svg {
     flex: 0 0 18px;
     width: 18px;
     height: 18px;
     margin-top: 1px
   }

   /* Modules */
   .ph-cloud-pricing .ph-modules {
     background: var(--ph-mist);
     padding: 110px 0
   }

   .ph-cloud-pricing .ph-modules p {
     color: var(--ph-slate);
     font-size: 1rem;
     line-height: 1.7;
     margin-top: 14px;
     max-width: 80ch
   }

   .ph-cloud-pricing .ph-modules p+p {
     margin-top: 8px
   }

   .ph-cloud-pricing .ph-module-cols {
     display: grid;
     grid-template-columns: repeat(3, minmax(0, 1fr));
     gap: 0 28px;
     margin-top: 40px
   }

   .ph-cloud-pricing .ph-module-grid,
   .ph-cloud-pricing .ph-module-cols ul {
     display: block;
     list-style: none
   }

   .ph-cloud-pricing .ph-module-grid li,
   .ph-cloud-pricing .ph-module-cols ul li {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     padding: 12px 0;
     border-bottom: 1px solid var(--ph-line);
     font-weight: 600;
     font-size: .9rem;
     color: var(--ph-ink);
     letter-spacing: -0.01em
   }
   .ph-cloud-pricing .ph-module-cols ul li {
    position: relative;
    padding-left: 28px;
   }
   .ph-cloud-pricing .ph-module-cols ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 14px;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Ccircle cx='9' cy='9' r='9' fill='%236D28D9'/%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.6' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
   }

   .ph-cloud-pricing .ph-module-grid li svg,
   .ph-cloud-pricing .ph-module-cols ul li svg {
     flex: 0 0 18px;
     margin-top: 4px
   }

   .ph-cloud-pricing .ph-module-grid li .ph-opt,
   .ph-cloud-pricing .ph-module-cols ul li .ph-opt {
     color: var(--ph-violet);
     font-weight: 700;
     margin-left: 2px
   }

   .ph-cloud-pricing .ph-modules .ph-foot {
     margin-top: 26px;
     color: var(--ph-slate);
     font-size: .92rem;
     max-width: none
   }

   .ph-cloud-pricing .ph-modules .ph-foot .ph-opt {
     color: var(--ph-violet);
     font-weight: 700
   }

   /* Steps */
   .ph-cloud-pricing .ph-steps {
     padding: 110px 0;
     background: var(--ph-white)
   }

   .ph-cloud-pricing .ph-step-grid {
     display: grid;
     grid-template-columns: repeat(4, minmax(0, 1fr));
     gap: 24px;
     margin-top: 40px
   }

   .ph-cloud-pricing .ph-step {
     background: var(--ph-sky);
     border-radius: 14px;
     padding: 26px 24px 28px;
     position: relative;
     overflow: hidden
   }

   .ph-cloud-pricing .ph-step::before {
     content: "";
     position: absolute;
     left: 0;
     top: 0;
     bottom: 0;
     width: 4px;
     background: var(--ph-grad-text)
   }

   .ph-cloud-pricing .ph-step .ph-num {
     background: var(--ph-grad-text);
     -webkit-background-clip: text;
     background-clip: text;
     color: transparent;
     font-weight: 600;
     font-size: 1.05rem;
     display: inline-block;
     margin-bottom: 12px
   }

   .ph-cloud-pricing .ph-step h3 {
     font-size: 1.15rem;
     margin-bottom: 10px
   }

   .ph-cloud-pricing .ph-step p {
     color: var(--ph-slate);
     font-size: .97rem
   }

   /* FAQ */
   .ph-cloud-pricing .ph-faq {
     background: linear-gradient(180deg, var(--ph-mist) 0%, var(--ph-violet-soft) 100%);
     padding: 110px 0;
     border-top: 1px solid var(--ph-line)
   }

   .ph-cloud-pricing .ph-faq-list {
     margin-top: 0;
     max-width: none
   }

   .ph-cloud-pricing .ph-faq-layout {
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
     gap: 56px;
     align-items: stretch
   }

   .ph-cloud-pricing .ph-faq-intro {
     display: flex;
     flex-direction: column
   }

   .ph-cloud-pricing .ph-faq-sub {
     color: var(--ph-slate);
     font-size: 1.08rem;
     margin-top: 14px;
     max-width: none
   }

   .ph-cloud-pricing .ph-faq-img {
     display: block;
     width: 100%;
     flex: 1 1 auto;
     min-height: 0;
     height: 100%;
     object-fit: cover;
     object-position: center;
     border-radius: 22px;
     margin-top: 28px;
     box-shadow: 0 24px 50px rgba(11, 27, 58, .14)
   }

   .ph-cloud-pricing .ph-faq-img-placeholder {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     gap: 10px;
     background: linear-gradient(160deg, #EFE9FB, #F6F4FF);
     border: 2px dashed rgba(109, 40, 217, .35);
     color: var(--ph-violet);
     font-weight: 700;
     font-size: .9rem;
     box-shadow: none
   }

   .ph-cloud-pricing .ph-faq-cta {
     --pc-a: #0B1B3A;
     --pc-b: #6D28D9;
     display: inline-block;
     margin-top: 22px;
     background: linear-gradient(90deg, var(--pc-a), var(--pc-b));
     color: var(--ph-white);
     border: 2px solid transparent;
     border-radius: 12px;
     padding: 15px 24px;
     font-size: 1rem;
     font-weight: 700;
     box-shadow: 0 12px 26px rgba(109, 40, 217, .28);
     transition: filter .18s, transform .18s
   }

   .ph-cloud-pricing .ph-faq-cta:hover {
     filter: brightness(1.08);
     transform: translateY(-2px);
     color: var(--ph-white)
   }

   .ph-cloud-pricing .ph-faq-img {
     margin-top: 28px
   }

   .ph-cloud-pricing .ph-faq-q {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 26px;
     height: 26px;
     border-radius: 50%;
     background: linear-gradient(135deg, #6D28D9, #A21CAF);
     color: var(--ph-white);
     font-weight: 700;
     font-size: .82rem;
     margin-right: 14px;
     flex: 0 0 26px;
     vertical-align: middle
   }

   .ph-cloud-pricing .ph-faq summary {
     display: flex;
     align-items: center
   }

   .ph-cloud-pricing details {
     background: var(--ph-white);
     border: 1px solid var(--ph-line);
     border-radius: 14px;
     padding: 4px 22px;
     margin-bottom: 12px;
     box-shadow: 0 4px 14px rgba(11, 27, 58, .04)
   }

   .ph-cloud-pricing details[open] {
     border-color: #C4B5FD;
     box-shadow: 0 8px 24px rgba(109, 40, 217, .08)
   }

   .ph-cloud-pricing summary {
     cursor: pointer;
     list-style: none;
     font-weight: 600;
     color: var(--ph-navy);
     font-size: 1rem;
     line-height: 1.4;
     padding: 18px 40px 18px 0;
     position: relative
   }

   .ph-cloud-pricing summary::-webkit-details-marker {
     display: none
   }

   .ph-cloud-pricing summary::after {
     content: "+";
     position: absolute;
     right: 0;
     top: 50%;
     transform: translateY(-50%);
     color: var(--ph-violet);
     font-size: 1.5rem;
     font-weight: 500;
     line-height: 1
   }

   .ph-cloud-pricing details[open] summary::after {
     content: "\2013"
   }

   .ph-cloud-pricing details p {
     color: var(--ph-ink);
     padding: 0 0 18px 40px;
     font-size: .97rem;
     line-height: 1.65;
     max-width: 70ch
   }

   .ph-cloud-pricing details p+p {
     margin-top: -6px
   }

   /* Final CTA */
   .ph-cloud-pricing .ph-cta {
     position: relative;
     overflow: hidden;
     background: var(--ph-grad);
     color: var(--ph-white);
     padding: 110px 0;
     text-align: center
   }

   .ph-cloud-pricing .ph-cta::before {
     content: "";
     position: absolute;
     left: 50%;
     top: -80%;
     width: 70%;
     height: 220%;
     transform: translateX(-50%);
     background: radial-gradient(closest-side, rgba(139, 92, 246, .4), rgba(139, 92, 246, 0));
     pointer-events: none
   }

   .ph-cloud-pricing .ph-cta .ph-wrap {
     position: relative;
     z-index: 1
   }
   .ph-cloud-pricing .ph-cta .ph-contact {
    margin-bottom: 0px;
   }

   .ph-cloud-pricing .ph-cta h2 {
     color: var(--ph-white);
     margin: 0 auto 16px
   }

   .ph-cloud-pricing .ph-cta p {
     color: rgba(255, 255, 255, .88);
     margin: 0 auto 32px;
     font-size: 1.12rem
   }

   .ph-cloud-pricing .ph-cta .ph-contact {
     margin-top: 28px;
     color: rgba(255, 255, 255, .82);
     font-size: .97rem;
     max-width: none
   }

   .ph-cloud-pricing .ph-cta .ph-contact a {
     color: var(--ph-white);
     font-weight: 700;
     text-decoration: none
   }

   .ph-cloud-pricing .ph-cta .ph-contact a:hover {
     text-decoration: underline
   }