.elementor-2616 .elementor-element.elementor-element-72ab4d6{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:72px 72px;--row-gap:72px;--column-gap:72px;--flex-wrap:nowrap;--padding-top:40px;--padding-bottom:40px;--padding-left:0px;--padding-right:0px;}.elementor-2616 .elementor-element.elementor-element-72ab4d6:not(.elementor-motion-effects-element-type-background), .elementor-2616 .elementor-element.elementor-element-72ab4d6 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0e0e0e;}.elementor-2616 .elementor-element.elementor-element-d2da6e3{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2616 .elementor-element.elementor-element-6cb685d{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 30px) 0px;}.elementor-2616 .elementor-element.elementor-element-6cb685d .elementor-heading-title{font-family:"PPM", Sans-serif;font-size:51px;font-weight:600;line-height:1.1em;letter-spacing:-0.02em;color:#f7f9fb;}.elementor-2616 .elementor-element.elementor-element-962a1cd{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 38px) 0px;font-family:"PPM", Sans-serif;font-size:18px;font-weight:400;line-height:1.6em;color:#aab3bd;}.elementor-2616 .elementor-element.elementor-element-8de82c8{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2616 .elementor-element.elementor-element-7d44734 .elementor-button{background-color:#068FFE;font-family:"PPM", Sans-serif;font-size:15px;font-weight:600;fill:#06131d;color:#06131d;box-shadow:0px 6px 22px 0px rgba(6,143,254,0.26);border-style:solid;border-width:1px 1px 1px 1px;border-color:#068FFE;border-radius:10px 10px 10px 10px;padding:13px 22px 13px 22px;}.elementor-2616 .elementor-element.elementor-element-7d44734 .elementor-button:hover, .elementor-2616 .elementor-element.elementor-element-7d44734 .elementor-button:focus{background-color:#2699F7;color:#06131d;border-color:#2699F7;box-shadow:0px 10px 30px 0px rgba(6,143,254,0.36);}.elementor-2616 .elementor-element.elementor-element-7d44734 .elementor-button:hover svg, .elementor-2616 .elementor-element.elementor-element-7d44734 .elementor-button:focus svg{fill:#06131d;}.elementor-2616 .elementor-element.elementor-element-7fdbdfb .elementor-button{background-color:rgba(255,255,255,0.045);font-family:"PPM", Sans-serif;font-size:15px;font-weight:600;fill:#d1d6dc;color:#d1d6dc;border-style:solid;border-width:1px 1px 1px 1px;border-color:rgba(255,255,255,0.12);border-radius:10px 10px 10px 10px;padding:13px 22px 13px 22px;}.elementor-2616 .elementor-element.elementor-element-7fdbdfb .elementor-button:hover, .elementor-2616 .elementor-element.elementor-element-7fdbdfb .elementor-button:focus{background-color:rgba(255,255,255,0.09);color:#f7f9fb;border-color:rgba(255,255,255,0.2);}.elementor-2616 .elementor-element.elementor-element-7fdbdfb .elementor-button:hover svg, .elementor-2616 .elementor-element.elementor-element-7fdbdfb .elementor-button:focus svg{fill:#f7f9fb;}.elementor-2616 .elementor-element.elementor-element-ebaf556{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2616 .elementor-element.elementor-element-d14983f{--display:flex;--align-items:stretch;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2616 .elementor-element.elementor-element-d14983f:not(.elementor-motion-effects-element-type-background), .elementor-2616 .elementor-element.elementor-element-d14983f > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0e0e0e;}.elementor-2616 .elementor-element.elementor-element-8cbd624{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:flex-end;--align-items:flex-end;--padding-top:5%;--padding-bottom:5%;--padding-left:5%;--padding-right:5%;}.elementor-2616 .elementor-element.elementor-element-8cbd624:not(.elementor-motion-effects-element-type-background), .elementor-2616 .elementor-element.elementor-element-8cbd624 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0e0e0e;background-image:url("https://www.symbolicmusic.com/wp-content/uploads/2026/06/hero_image_3.png");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-2616 .elementor-element.elementor-element-a2cd241{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:10px;--padding-right:0px;}.elementor-2616 .elementor-element.elementor-element-ba42cbc{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:solid;--border-style:solid;border-width:1px 1px 1px 1px;--border-top-width:1px;--border-right-width:1px;--border-bottom-width:1px;--border-left-width:1px;border-color:var( --e-global-color-aeb054a );--border-color:var( --e-global-color-aeb054a );--border-radius:16px 16px 16px 16px;--padding-top:40px;--padding-bottom:40px;--padding-left:40px;--padding-right:40px;}.elementor-2616 .elementor-element.elementor-element-ba42cbc:not(.elementor-motion-effects-element-type-background), .elementor-2616 .elementor-element.elementor-element-ba42cbc > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(162deg, rgba(20,20,20,0) 0%, #0E0E0E 100%);}.elementor-2616 .elementor-element.elementor-element-af6187e{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -10px) 0px;font-family:"OTB", Sans-serif;font-size:11px;font-weight:500;text-transform:uppercase;line-height:16.5px;letter-spacing:1.76px;color:var( --e-global-color-secondary );}.elementor-2616 .elementor-element.elementor-element-daff4c9{font-family:"PPM", Sans-serif;font-size:55px;font-weight:500;color:var( --e-global-color-secondary );}.elementor-2616 .elementor-element.elementor-element-816a13e{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + -5px) 0px;font-family:"PPM", Sans-serif;font-size:13px;font-weight:400;line-height:19.5px;color:#9A958C;}.elementor-2616 .elementor-element.elementor-element-804c931{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-2616 .elementor-element.elementor-element-5f59875{width:auto;max-width:auto;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-2616 .elementor-element.elementor-element-5f59875.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-2616 .elementor-element.elementor-element-2c57792{width:auto;max-width:auto;padding:0px 0px 0px 0px;}.elementor-2616 .elementor-element.elementor-element-2c57792.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-2616 .elementor-element.elementor-element-08a89cc{padding:5px 0px 0px 0px;font-family:"OTB", Sans-serif;font-size:10.5px;font-weight:400;text-transform:uppercase;font-style:normal;letter-spacing:1.26px;color:#FFFBF4;}.elementor-2616 .elementor-element.elementor-element-09eb768{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--align-items:flex-start;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--padding-top:86px;--padding-bottom:86px;--padding-left:0px;--padding-right:0px;}.elementor-2616 .elementor-element.elementor-element-09eb768:not(.elementor-motion-effects-element-type-background), .elementor-2616 .elementor-element.elementor-element-09eb768 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0e0e0e;}.elementor-2616 .elementor-element.elementor-element-d28814a{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 21px) 0px;text-align:start;}.elementor-2616 .elementor-element.elementor-element-d28814a .elementor-heading-title{font-family:"OTB", Sans-serif;font-size:16px;font-weight:500;text-transform:uppercase;color:#d8d4d2;}.elementor-2616 .elementor-element.elementor-element-59c7616{width:var( --container-widget-width, 752px );max-width:752px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 20px) 0px;--container-widget-width:752px;--container-widget-flex-grow:0;text-align:start;}.elementor-2616 .elementor-element.elementor-element-59c7616 .elementor-heading-title{font-family:"PPM", Sans-serif;font-size:30px;font-weight:600;line-height:1.05em;letter-spacing:-0.02em;color:#efefef;}.elementor-2616 .elementor-element.elementor-element-29eb88c{width:var( --container-widget-width, 752px );max-width:752px;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;--container-widget-width:752px;--container-widget-flex-grow:0;text-align:start;font-family:"PPM", Sans-serif;font-size:17.4px;font-weight:400;line-height:1.55em;color:#aab3bd;}.elementor-2616 .elementor-element.elementor-element-bbb25af{margin:56px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;}.elementor-2616 .elementor-element.elementor-element-d8df2cb{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2616 .elementor-element.elementor-element-d8df2cb:not(.elementor-motion-effects-element-type-background), .elementor-2616 .elementor-element.elementor-element-d8df2cb > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0e0e0e;}.elementor-2616 .elementor-element.elementor-element-fb30c86{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-2616 .elementor-element.elementor-element-c9e63f7{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--flex-wrap:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2616 .elementor-element.elementor-element-c9e63f7:not(.elementor-motion-effects-element-type-background), .elementor-2616 .elementor-element.elementor-element-c9e63f7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0e0e0e;}.elementor-2616 .elementor-element.elementor-element-6577978{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2616 .elementor-element.elementor-element-bd2ee68{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2616 .elementor-element.elementor-element-bd2ee68:not(.elementor-motion-effects-element-type-background), .elementor-2616 .elementor-element.elementor-element-bd2ee68 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0e0e0e;}.elementor-2616 .elementor-element.elementor-element-d64ea1f{--display:flex;--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:10px;}.elementor-2616 .elementor-element.elementor-element-c631f4a{padding:0px 0px 0px 0px;}.elementor-2616 .elementor-element.elementor-element-c631f4a .elementor-heading-title{font-family:"OTB", Sans-serif;font-size:16px;font-weight:500;text-transform:uppercase;}.elementor-2616 .elementor-element.elementor-element-89fbcaa .elementor-heading-title{font-size:30px;font-weight:600;}.elementor-2616 .elementor-element.elementor-element-97775d2{text-align:start;color:var( --e-global-color-secondary );}.elementor-2616 .elementor-element.elementor-element-532951f{margin:36px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:22px 0px 0px 0px;border-style:solid;border-width:1px 0px 0px 0px;border-color:rgba(255,255,255,0.08);}.elementor-2616 .elementor-element.elementor-element-3c9e7d7{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2616 .elementor-element.elementor-element-3c9e7d7:not(.elementor-motion-effects-element-type-background), .elementor-2616 .elementor-element.elementor-element-3c9e7d7 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#0e0e0e;}.elementor-2616 .elementor-element.elementor-element-288b86e{--display:flex;--gap:5px 5px;--row-gap:5px;--column-gap:5px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2616 .elementor-element.elementor-element-0e095e6{text-align:start;}.elementor-2616 .elementor-element.elementor-element-bdb3282{margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 14px) 0px;text-align:start;}.elementor-2616 .elementor-element.elementor-element-bdb3282 .elementor-heading-title{font-family:"PPM", Sans-serif;font-size:36px;font-weight:600;line-height:1.08em;}.elementor-2616 .elementor-element.elementor-element-18732f4{width:var( --container-widget-width, 66% );max-width:66%;margin:0px 0px calc(var(--kit-widget-spacing, 0px) + 48px) 0px;--container-widget-width:66%;--container-widget-flex-grow:0;font-family:"PPM", Sans-serif;font-size:18px;font-weight:400;line-height:1.6em;}.elementor-2616 .elementor-element.elementor-element-06261a0 .elementor-field-group{padding-right:calc( 10px/2 );padding-left:calc( 10px/2 );margin-bottom:10px;}.elementor-2616 .elementor-element.elementor-element-06261a0 .elementor-form-fields-wrapper{margin-left:calc( -10px/2 );margin-right:calc( -10px/2 );margin-bottom:-10px;}.elementor-2616 .elementor-element.elementor-element-06261a0 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-2616 .elementor-element.elementor-element-06261a0 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-2616 .elementor-element.elementor-element-06261a0 .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-2616 .elementor-element.elementor-element-06261a0 .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-2616 .elementor-element.elementor-element-06261a0 .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-2616 .elementor-element.elementor-element-06261a0 .elementor-field-type-html{padding-bottom:0px;}.elementor-2616 .elementor-element.elementor-element-06261a0 .elementor-field-group .elementor-field{color:var( --e-global-color-text );}.elementor-2616 .elementor-element.elementor-element-06261a0 .elementor-field-group .elementor-field:not(.elementor-select-wrapper){border-color:var( --e-global-color-aeb054a );}.elementor-2616 .elementor-element.elementor-element-06261a0 .elementor-field-group .elementor-select-wrapper select{border-color:var( --e-global-color-aeb054a );}.elementor-2616 .elementor-element.elementor-element-06261a0 .elementor-field-group .elementor-select-wrapper::before{color:var( --e-global-color-aeb054a );}.elementor-2616 .elementor-element.elementor-element-06261a0 .elementor-button{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-2616 .elementor-element.elementor-element-06261a0 .e-form__buttons__wrapper__button-next{background-color:#068FFE;color:#ffffff;}.elementor-2616 .elementor-element.elementor-element-06261a0 .elementor-button[type="submit"]{background-color:#068FFE;color:#ffffff;}.elementor-2616 .elementor-element.elementor-element-06261a0 .elementor-button[type="submit"] svg *{fill:#ffffff;}.elementor-2616 .elementor-element.elementor-element-06261a0 .e-form__buttons__wrapper__button-previous{color:#ffffff;}.elementor-2616 .elementor-element.elementor-element-06261a0 .e-form__buttons__wrapper__button-next:hover{background-color:var( --e-global-color-primary );color:#000000;}.elementor-2616 .elementor-element.elementor-element-06261a0 .elementor-button[type="submit"]:hover{background-color:var( --e-global-color-primary );color:#000000;}.elementor-2616 .elementor-element.elementor-element-06261a0 .elementor-button[type="submit"]:hover svg *{fill:#000000;}.elementor-2616 .elementor-element.elementor-element-06261a0 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-2616 .elementor-element.elementor-element-06261a0{--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}.elementor-2616 .elementor-element.elementor-element-4d7dbcc{margin:14px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;font-family:"PPM", Sans-serif;font-size:13.5px;font-weight:400;}.elementor-2616 .elementor-element.elementor-element-afaef1d{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;}.elementor-2616 .elementor-element.elementor-element-c6c2215 img{width:50px;}@media(max-width:1024px){.elementor-2616 .elementor-element.elementor-element-6cb685d .elementor-heading-title{font-size:46px;}.elementor-2616 .elementor-element.elementor-element-ba42cbc{border-width:2px 2px 2px 2px;--border-top-width:2px;--border-right-width:2px;--border-bottom-width:2px;--border-left-width:2px;}.elementor-2616 .elementor-element.elementor-element-804c931{--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:flex-start;}.elementor-2616 .elementor-element.elementor-element-5f59875.elementor-element{--align-self:center;}.elementor-2616 .elementor-element.elementor-element-2c57792.elementor-element{--align-self:center;}.elementor-2616 .elementor-element.elementor-element-bd2ee68{--justify-content:center;}.elementor-2616 .elementor-element.elementor-element-89fbcaa .elementor-heading-title{font-size:30px;}.elementor-2616 .elementor-element.elementor-element-afaef1d{--align-items:flex-start;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );}.elementor-2616 .elementor-element.elementor-element-afaef1d.e-con{--align-self:flex-start;}.elementor-2616 .elementor-element.elementor-element-c6c2215.elementor-element{--align-self:flex-start;}.elementor-2616 .elementor-element.elementor-element-c6c2215{text-align:start;}}@media(min-width:768px){.elementor-2616 .elementor-element.elementor-element-72ab4d6{--content-width:1140px;}.elementor-2616 .elementor-element.elementor-element-d2da6e3{--width:42.16%;}.elementor-2616 .elementor-element.elementor-element-ebaf556{--width:51.53%;}.elementor-2616 .elementor-element.elementor-element-a2cd241{--width:33%;}.elementor-2616 .elementor-element.elementor-element-09eb768{--content-width:1140px;}.elementor-2616 .elementor-element.elementor-element-6577978{--width:100%;}.elementor-2616 .elementor-element.elementor-element-d64ea1f{--width:60%;}}@media(max-width:767px){.elementor-2616 .elementor-element.elementor-element-72ab4d6{--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:40px 40px;--row-gap:40px;--column-gap:40px;--padding-top:32px;--padding-bottom:48px;--padding-left:24px;--padding-right:24px;}.elementor-2616 .elementor-element.elementor-element-6cb685d .elementor-heading-title{font-size:34px;}.elementor-2616 .elementor-element.elementor-element-962a1cd{font-size:15px;line-height:1.55em;}.elementor-2616 .elementor-element.elementor-element-8cbd624{--padding-top:24px;--padding-bottom:24px;--padding-left:24px;--padding-right:24px;}.elementor-2616 .elementor-element.elementor-element-a2cd241{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-2616 .elementor-element.elementor-element-ba42cbc{--gap:0px 0px;--row-gap:0px;--column-gap:0px;}.elementor-2616 .elementor-element.elementor-element-09eb768{--padding-top:56px;--padding-bottom:56px;--padding-left:24px;--padding-right:24px;}.elementor-2616 .elementor-element.elementor-element-29eb88c{font-size:15px;line-height:1.55em;}.elementor-2616 .elementor-element.elementor-element-8c042d4{border-radius:8px 8px 8px 8px;}.elementor-2616 .elementor-element.elementor-element-c631f4a .elementor-heading-title{font-size:14px;}.elementor-2616 .elementor-element.elementor-element-89fbcaa .elementor-heading-title{font-size:30px;}}/* Start custom CSS for text-editor, class: .elementor-element-962a1cd */.elementor-2616 .elementor-element.elementor-element-962a1cd p { margin: 0; }/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-7d44734 *//* min-height alone does NOT centre the label: Elementor's button is inline-block, so the
   content sits at padding-top and the extra height falls below it. The draft's .v3-btn is
   inline-flex + align-items:center, which is what actually centres it. */
.elementor-2616 .elementor-element.elementor-element-7d44734 .elementor-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; line-height: 1;
}

/* Arrow vertical position, matched to the draft.
   The two are built differently and that is why they differed: the draft makes the arrow a
   FLEX SIBLING, so align-items:center puts it on the button box centre (24.00). Here it is
   an ::after inside the text run, so it is positioned off the BASELINE instead.

   The label baseline sits at 28.75 button-local and the arrow box is 15 tall, so
   `vertical-align: -N` lands the arrow centre at (28.75 + N) - 7.5. At -2px that gave 23.25,
   0.75px above the draft. -2.75px lands it on 24.00 exactly.

   The text itself was never the problem: it renders pixel-identically on both, ink rows
   17.50..32.00, optical centre 23.39. */
.elementor-2616 .elementor-element.elementor-element-7d44734 .elementor-button-text::after { vertical-align: -2.75px; }/* End custom CSS */
/* Start custom CSS for button, class: .elementor-element-7fdbdfb *//* See the primary button for both notes: min-height on an inline-block does not centre,
   and -2.75px is what puts the ::after arrow on the same centre as the draft's flex-sibling
   arrow (24.00 button-local) rather than 0.75px above it. */
.elementor-2616 .elementor-element.elementor-element-7fdbdfb .elementor-button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; line-height: 1;
}
.elementor-2616 .elementor-element.elementor-element-7fdbdfb .elementor-button-text::after { vertical-align: -2.75px; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-72ab4d6 */.elementor-2616 .elementor-element.elementor-element-72ab4d6, .elementor-2616 .elementor-element.elementor-element-72ab4d6 > .e-con-inner { min-height: calc(100dvh - 70px); }/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-d7e4bcb *//* The testimonial is a full-bleed BANNER, not a card: its hairlines and lifted ground run
   edge to edge and only the grid inside is capped at 1140. The parent container centres its
   children, which shrank this widget to its content width (1188) and inset the borders. */
.elementor-2616 .elementor-element.elementor-element-d7e4bcb { width: 100%; }/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-daff4c9 *//* Match the live front page's price pair exactly. The struck-through original is
   .strikeprice and the current price is .bolder; both are moonbase-rendered spans, so the
   widget's own typography control cannot reach them individually. 2616 had the current
   price at weight 900 in #EFEFEF; the live card uses 700 in #FFFBF4. */
.elementor-2616 .elementor-element.elementor-element-daff4c9 .bolder { font-weight: 700; color: #FFFBF4; }/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-08a89cc *//* The copy is wrapped in <em> from 2268, where the line was an italic aside. It is now
   OTB mono uppercase, and OTB has no italic, so the browser synthesises a slant on a
   monospace face. The draft normalises it; so does this. */
.elementor-2616 .elementor-element.elementor-element-08a89cc em { font-style: normal; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-ba42cbc *//* The pricing card, matching the live front page (2268) exactly.

   This block used to address every child by 2268's element ids, which apply-template does
   not preserve, so all of it was DEAD on arrival: the card had the right frame and no
   interior. The ids below are 2616's.

   Nothing here is !important any more. The card's padding, radius, direction, alignment
   and gap now live in its own container SETTINGS, and the two buttons carry their own
   width/flex/padding, so there is nothing left to override -- that alone removed sixteen
   !important declarations. The button appearance lives in the page CSS, which also carries
   this card's 12px radius exception.

   Background is stated here rather than left to the container's gradient setting, because
   the `background` shorthand resets background-image and the setting alone rendered flat.
   The setting's second colour stop was also bound to an unresolved global, which made the
   gradient invalid and computed it to none. */
.elementor-2616 .elementor-element.elementor-element-ba42cbc {
  background: linear-gradient(162deg, rgba(20, 20, 20, 0) 0%, #0E0E0E 100%);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.12);
  text-align: center;
  max-width: 380px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

/* Eyebrow */
.elementor-2616 .elementor-element.elementor-element-ba42cbc .elementor-element-af6187e { width: 100%; }
.elementor-2616 .elementor-element.elementor-element-ba42cbc .elementor-element-af6187e p {
  margin: 0;
  font-family: "OTB", monospace;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--e-global-color-secondary);
}

/* Price: struck-through original + current, baseline-aligned */
.elementor-2616 .elementor-element.elementor-element-ba42cbc .elementor-element-daff4c9 { margin-top: 14px; }
.elementor-2616 .elementor-element.elementor-element-ba42cbc .elementor-element-daff4c9 .elementor-widget-container {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  line-height: 1;
}
.elementor-2616 .elementor-element.elementor-element-ba42cbc .elementor-element-daff4c9 .strikeprice {
  font-size: 36px;
  font-weight: 600;
  color: #999999;
  text-decoration: line-through;
}
.elementor-2616 .elementor-element.elementor-element-ba42cbc .elementor-element-daff4c9 .bolder {
  font-weight: 700;
  color: #FFFBF4;
}

/* Reassurance line */
.elementor-2616 .elementor-element.elementor-element-ba42cbc .elementor-element-816a13e { margin-top: 10px; }
.elementor-2616 .elementor-element.elementor-element-ba42cbc .elementor-element-816a13e p {
  margin: 0;
  font-family: "PPM", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #9A958C;
}

/* Buttons row. The buttons themselves are styled in the page CSS, and their widths come
   from their own _element_width / _flex_size settings. */
.elementor-2616 .elementor-element.elementor-element-ba42cbc .elementor-element-804c931 {
  margin-top: 24px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
}

/* Deadline footnote. The copy is wrapped in <em> from 2268, where the line was an italic
   aside; it is now OTB mono uppercase, and OTB has no italic, so the browser would
   synthesise a slant on a monospace face. */
.elementor-2616 .elementor-element.elementor-element-ba42cbc .elementor-element-08a89cc { margin-top: 18px; }
.elementor-2616 .elementor-element.elementor-element-ba42cbc .elementor-element-08a89cc p {
  margin: 0;
  font-family: "OTB", monospace;
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFFBF4;
}
.elementor-2616 .elementor-element.elementor-element-ba42cbc .elementor-element-08a89cc em { font-style: normal; }/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-29eb88c */.elementor-2616 .elementor-element.elementor-element-29eb88c p { margin: 0; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-d8df2cb *//* No !important, and no override. Elementor drives container padding through its own
   --padding-* custom properties, so SETTING those is cooperating with the framework
   rather than fighting it -- the value simply becomes the one Elementor uses.

   The padding lives here rather than in the widget panel only because it is a clamp,
   which the panel's single-value control cannot express. min_height was cleared on the
   widget itself, so the `min-height: 0 !important` that used to sit here is gone too.

   One padding, not two: the 5% the panel used to carry landed on .e-con-inner and
   stacked on top of this, which is what made the inter-section gaps uneven.

   Phone vertical capped at 56, matching #interface/#features/#subscribe: adjacent
   sections stack top+bottom paddings, ~160px of empty ground otherwise. */
.elementor-2616 .elementor-element.elementor-element-d8df2cb {
  --padding-top: clamp(64px, 10vh, 128px);
  --padding-bottom: clamp(64px, 10vh, 128px);
  --padding-left: 24px;
  --padding-right: 24px;
}
@media (max-width: 767px) {
  .elementor-2616 .elementor-element.elementor-element-d8df2cb {
    --padding-top: 56px;
    --padding-bottom: 56px;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-c9e63f7 *//* See #alignment. Feeds Elementor's own --padding-* variables rather than overriding
   the padding it generates, so no !important is needed. min_height cleared on the
   widget.

   Sides 24px, not the old 5%: at 500px wide the two were indistinguishable (25 vs 24)
   but at 390 the percentage renders 19.5px against the site's 24px phone rhythm.
   #alignment made this same move first; this matches it.

   Phone vertical capped at 56: two adjacent sections stack top+bottom paddings, and
   at clamp floor ~80 each that is ~160px of empty ground between sections on a phone. */
.elementor-2616 .elementor-element.elementor-element-c9e63f7 {
  --padding-top: clamp(64px, 10vh, 128px);
  --padding-bottom: clamp(64px, 10vh, 128px);
  --padding-left: 24px;
  --padding-right: 24px;
}
@media (max-width: 767px) {
  .elementor-2616 .elementor-element.elementor-element-c9e63f7 {
    --padding-top: 56px;
    --padding-bottom: 56px;
  }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-bd2ee68 *//* See #alignment and #interface. Sides 24px, not 5%: at 390 the percentage renders
   19.5px against the 24px phone rhythm. Phone vertical capped at 56 so adjacent
   sections stop stacking ~160px of empty ground. */
.elementor-2616 .elementor-element.elementor-element-bd2ee68 {
  --padding-top: clamp(64px, 10vh, 128px);
  --padding-bottom: clamp(64px, 10vh, 128px);
  --padding-left: 24px;
  --padding-right: 24px;
}
@media (max-width: 767px) {
  .elementor-2616 .elementor-element.elementor-element-bd2ee68 {
    --padding-top: 56px;
    --padding-bottom: 56px;
  }
}/* End custom CSS */
/* Start custom CSS for text-editor, class: .elementor-element-18732f4 *//* The widget's own <p> carries a bottom margin that stacks on the widget margin, so the
   gap below the lead measured 64 against the draft's 50. Same trap as the hero lead. */
.elementor-2616 .elementor-element.elementor-element-18732f4 p { margin: 0; }/* End custom CSS */
/* Start custom CSS for form, class: .elementor-element-06261a0 *//* Elementor gives the submit `flex: 0 1 100%`, so `width: auto` alone does nothing: the
   flex-basis fills the row regardless. It has to be flex-basis that changes. Scoped to
   this widget rather than the page CSS so it stays with the thing it fixes. */
.elementor-2616 .elementor-element.elementor-element-06261a0 .elementor-field-type-submit .elementor-button { flex: 0 0 auto; width: auto; }
.elementor-2616 .elementor-element.elementor-element-06261a0 .elementor-field-type-submit { justify-content: flex-start; }

/* Optical inset for the field label (applies whenever labels are shown): the input's
   10px corner radius pulls its visible edge rightward exactly in the 8px band where
   the label sits, so a box-aligned label reads as overhanging left. +3px = 2px optical
   correction + 1px box offset. Labels are currently off — the prompt lives in the
   placeholder instead — but the rule stays for if they return. */
.elementor-2616 .elementor-element.elementor-element-06261a0 .elementor-field-group > label { margin-left: 3px; }

/* The in-field prompt steps aside on click, not first keypress: the field visibly
   readies itself the moment it has focus. */
.elementor-2616 .elementor-element.elementor-element-06261a0 input::placeholder { transition: color 120ms ease; }
.elementor-2616 .elementor-element.elementor-element-06261a0 input:focus::placeholder { color: transparent; }/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-3c9e7d7 *//* See #alignment and #interface. Sides 24px, not 5%: at 390 the percentage renders
   19.5px against the 24px phone rhythm. Phone vertical capped at 56 so adjacent
   sections stop stacking ~160px of empty ground. */
.elementor-2616 .elementor-element.elementor-element-3c9e7d7 {
  --padding-top: clamp(64px, 10vh, 128px);
  --padding-bottom: clamp(64px, 10vh, 128px);
  --padding-left: 24px;
  --padding-right: 24px;
}
@media (max-width: 767px) {
  .elementor-2616 .elementor-element.elementor-element-3c9e7d7 {
    --padding-top: 56px;
    --padding-bottom: 56px;
  }
}/* End custom CSS */
/* Start custom CSS *//* ============================================================================
   v3 front page. One block, one value per property.

   Almost every section here is COPIED from 2268 via save-as-template, so its widgets
   are the working live ones (moonbase pricing, the subscribe form, ni_guide_tabs).
   Only the hero and the four steps are native. What follows is the styling layer.

   Written at ELEMENTOR'S OWN generated specificity where it needs to beat widget CSS
   (`.elementor-2616 .elementor-element.elementor-element-XXXX`). That ties with the
   generated rule and wins on source order, since custom CSS is emitted after it, so
   almost nothing here needs !important. A bare `.elementor-element-XXXX` is one class
   against their three and quietly loses -- that mistake is what drives !important
   counts up.

   NOTE: Elementor's BACKGROUND rule is one step higher again, because it carries
   `:not(.elementor-motion-effects-element-type-background)` and that pseudo-class
   counts as a class. Backgrounds belong in the widget setting, not here.

   Add by EDITING this block, never by appending another.
   ============================================================================ */

/* The page canvas. Stated here rather than left to the background_color page setting,
   because add-custom-css rewrites the settings object and that setting does not
   survive it. The failure is misleading: every SECTION paints its own ground, so the
   page looks fine and the only white left showing is the strip behind the fixed
   header, which the nav's backdrop-filter then samples as a pale band. */
body.elementor-page-2616 { background-color: #0e0e0e; }

:root {
  --v3-ground: #0e0e0e;
  --v3-heading: #f7f9fb;
  --v3-lead: #aab3bd;
  --v3-label: #d1d6dc;
  --v3-hint: #8a939d;
  --v3-accent: #068FFE;
  --v3-accent-lift: #2699F7;
  --v3-accent-ink: #06131d;
}

.v3-ssy { font-feature-settings: "ss05"; }

/* ---- Hero eyebrow --------------------------------------------------------- */
/* Hairline separators, not middots: the taste rule rations the middle dot to one per
   metadata line and this has four tokens. A DRAWN rule rather than a pipe glyph -- a
   pipe keeps the mark density the rule guards against and inherits the face's full
   ascender-to-descender height, overshooting an all-caps line. Sized to the cap at
   0.696em (OTB's measured ratio) and aligned on the BASELINE, since `middle` centres
   on the x-height midpoint and reads as sagging.

   Alpha 0.75, not 0.66: at 0.66 this flattens to 6.14:1 on the #0e0e0e ground,
   which passes WCAG AA (4.5:1) but fails AAA (7:1) -- and at 12px it counts as
   normal text, not large. 0.7128 is the exact threshold; 0.75 gives 7.66:1 and
   real margin, where 0.72 would clear by only 1.7%. Still clearly quieter than
   the full-strength section eyebrow at 13.12, and matches the value already used
   by .sm-sub__aside p.sm-sub__eyebrow. */
.v3-meta {
  margin: 0 0 20px;
  font-family: "OTB", ui-monospace, monospace;
  font-size: 12px; font-weight: 500; line-height: 1;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(216,212,210,0.75);
}
.v3-meta__fmt + .v3-meta__fmt::before {
  content: ""; display: inline-block;
  width: 1px; height: 0.696em; margin: 0 8px;
  background: currentColor; opacity: 0.45;
  vertical-align: baseline;
}

/* ---- Hero button arrows --------------------------------------------------- */
/* Drawn from assets/icons/export_tempo.svg, reusing its construction rather than
   approximating it: a round-capped shaft for the soft tail, and a butt-capped
   two-segment chevron on a miter join for the sharp point. Data URIs rather than
   inline SVG so the buttons stay native widgets with editable labels; currentColor
   does not resolve inside a data URI, so each arrow carries its own ink.

   vertical-align: -2px is what centres the arrow, and it is measured, not guessed.
   Against the label's INK box the arrow reads 1.5px high, because the descenders in
   "Synchrony" drag that box down; against the cap-to-baseline span, which is what the
   eye reads as the line's centre, it lands within 0.14px. Do not "fix" it to the ink. */
.elementor-element-7d44734 .elementor-button-text::after,
.elementor-element-7fdbdfb .elementor-button-text::after {
  content: ""; display: inline-block;
  width: 15px; height: 15px; margin-left: 9px; vertical-align: -2px;
  background-repeat: no-repeat; background-position: center; background-size: contain;
}
.elementor-element-7d44734 .elementor-button-text::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M1.5 6H10' stroke='%2306131d' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M7.171 3.171L10 6L7.171 8.829' stroke='%2306131d' stroke-width='1.5'/%3E%3C/svg%3E");
}
.elementor-element-7fdbdfb .elementor-button-text::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M6 1.5V10' stroke='%23d1d6dc' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M3.171 7.171L6 10L8.829 7.171' stroke='%23d1d6dc' stroke-width='1.5'/%3E%3C/svg%3E");
}

/* ---- Section buttons ------------------------------------------------------ */
/* Buy now and its partner, in the pricing card and the closing block. These sections
   came from 2268, so their widgets still carry that page's button system (34 tall,
   weight 200) with colours bound to Elementor GLOBALS, which override any local value
   set in the widget panel. Rather than unbind each widget, the system lives here.

   Hue carries meaning: orange is buying, blue is trying. That is why the hero CTA is
   blue and these are not -- buying and trying are different KINDS of action, so they
   take different hues, while the pair within a row differ only in weight.

   ONE radius rule now applies to every button on the page: radius is keyed to control
   height at 0.208, so 38-tall buttons get 8 and the 48-tall hero pair get 10. The
   pricing pair used to be a 12px exception, inherited from 2268 along with the card it
   was copied from -- but the radius was never what was wrong with that card, and two
   button conventions on one page is exactly the inconsistency this page is trying to
   shed. Reverting is one number if it ever reads too tight. */
.elementor-2616 .elementor-element.elementor-element-5f59875 .elementor-button,
.elementor-2616 .elementor-element.elementor-element-25a38d1 .elementor-button,
.elementor-2616 .elementor-element.elementor-element-2c57792 .elementor-button,
.elementor-2616 .elementor-element.elementor-element-0badc47 .elementor-button {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 11px 22px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-family: "PPM", sans-serif; font-size: 14px; font-weight: 600; line-height: 1;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease;
}

/* The purchase action. Rest and hover both measured off the draft. */
.elementor-2616 .elementor-element.elementor-element-5f59875 .elementor-button,
.elementor-2616 .elementor-element.elementor-element-25a38d1 .elementor-button {
  color: #FFFBF4;
  background-color: #DE5C00;
  border-color: transparent;
  box-shadow: 0 6px 22px rgba(222,92,0,0.26);
}
.elementor-2616 .elementor-element.elementor-element-5f59875 .elementor-button:hover,
.elementor-2616 .elementor-element.elementor-element-25a38d1 .elementor-button:hover {
  color: #FFFBF4;
  background-color: #EF6A08;
  box-shadow: 0 10px 30px rgba(222,92,0,0.36);
}

/* Its partner: same weight, no fill, a 60% hairline. Rest is measured off the draft;
   the HOVER is not -- the draft has none on these, so it follows the hero ghost's
   pattern (lift the fill, take the border to full) rather than being invented. */
.elementor-2616 .elementor-element.elementor-element-2c57792 .elementor-button,
.elementor-2616 .elementor-element.elementor-element-0badc47 .elementor-button {
  color: #FFFBF4;
  background-color: transparent;
  border-color: rgba(255,255,255,0.6);
  box-shadow: none;
}
.elementor-2616 .elementor-element.elementor-element-2c57792 .elementor-button:hover,
.elementor-2616 .elementor-element.elementor-element-0badc47 .elementor-button:hover {
  color: #FFFBF4;
  background-color: rgba(255,255,255,0.09);
  border-color: #FFFBF4;
}

/* ---- Subscribe ------------------------------------------------------------ */
/* Two columns, the form leading. The live block ran the form full width at 1140, which
   made a 1140-wide email field and a 1140-wide submit: the row read as a banner rather
   than a form. */
.elementor-element-288b86e {
  display: grid;
  grid-template-columns: minmax(0, 0.56fr) minmax(0, 0.44fr);
  gap: 0 88px;
  align-items: start;
  align-content: start;
}
.elementor-element-288b86e > .elementor-element { grid-column: 1; }

/* The logo that floated below the form belonged to nothing. */
#subscribe .elementor-widget-image { display: none; }

/* Labels above, never a placeholder: a placeholder doubling as a label disappears
   exactly when the user needs it. show_labels is on and the placeholders are cleared,
   so this is only the styling. */
#subscribe .elementor-field-label {
  margin-bottom: 8px;
  font-family: "PPM", sans-serif; font-size: 14px; font-weight: 600; color: #d1d6dc;
}
#subscribe .elementor-field-textual {
  height: 50px; padding: 0 16px;
  font-family: "PPM", sans-serif; font-size: 16px; color: #f7f9fb;
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.12); border-radius: 10px;
  box-shadow: none;
  transition: border-color .18s ease, background-color .18s ease;
}
#subscribe .elementor-field-textual:hover { border-color: rgba(255,255,255,0.20); }
#subscribe .elementor-field-textual:focus {
  outline: none; border-color: #068FFE; background: rgba(255,255,255,0.09);
}
/* The rest of the site has no focus-visible state anywhere, so a keyboard user gets
   the browser default over custom-styled controls, which on this ground is close to
   invisible. */
#subscribe .elementor-field-textual:focus-visible,
#subscribe .elementor-form button:focus-visible {
  outline: 2px solid #068FFE; outline-offset: 2px;
}

/* The submit sized to its label rather than stretched across the row, so the block
   reads as three fields and an action rather than four fields. Elementor gives it
   `flex: 0 1 100%`, so `width: auto` alone does nothing. */
#subscribe .elementor-field-type-submit { justify-content: flex-start; }
#subscribe .elementor-form button[type="submit"] {
  width: auto; min-height: 50px; padding: 0 26px;
  font-family: "PPM", sans-serif; font-size: 15px; font-weight: 600;
  color: #06131d; background: #068FFE;
  border: 1px solid #068FFE; border-radius: 10px;
  box-shadow: 0 6px 22px rgba(6,143,254,0.26);
  transition: background-color .16s ease, box-shadow .16s ease;
}
#subscribe .elementor-form button[type="submit"]:hover {
  background: #2699F7; border-color: #2699F7;
  box-shadow: 0 10px 30px rgba(6,143,254,0.34);
}

/* ---- Interface shots ------------------------------------------------------ */
/* The radius here is DERIVED, and it is the one on this page that scales with display
   size: a screenshot depicts a real window whose corner is a constant physical size,
   so shrinking the picture shrinks the corner. At ratio 0.0159 the hero's 587px gives
   9.3 and these 628px shots give 10.0 -- same corner, one pixel apart, not an
   inconsistency.

   The !important here is the only one left on this page and it is deliberate: both
   shots sit inside copied HTML widgets carrying their own inline <style>, which sets
   the radius at equal specificity and wins on source order. A `body ` prefix would
   also win, but that is not more elegant, only quieter -- !important announces a
   deliberate override where `body #alignment` reads as an accident. */
.v3-shot img { border-radius: 9px; display: block; width: 100%; height: auto; }
#alignment .ni-sweep__stage,
#interface .ni-labelled-ui-image,
.ni-sweep__stage,
.ni-labelled-ui-image {
  border-radius: 10px !important;
  overflow: hidden !important;
}

/* The glow is three stacked shadows on the image itself, not an overlay: a 1px rim at
   6% white then two blue falloffs, taken from BackgroundGlow.h so the site and the app
   agree on how the surface lights. */
.v3-shot img {
  box-shadow:
    rgba(255,255,255,0.06) 0 0 0 1px,
    rgba(6,143,254,0.34)   0 0 56px 4px,
    rgba(6,143,254,0.18)   0 0 140px 30px;
}

/* ---- Section headings ----------------------------------------------------- */
/* The page shipped three heading colours, none of them a token: rgb(239,239,239) on
   "Four steps to a tempo map" and "Where Synchrony shines", rgb(244,246,248) on
   "Note-by-note precision", "A new kind of MIDI editor" and "Hear it first", and
   rgb(247,249,251) on the hero. Nothing was written down, so each section picked its own.

   Unified on the MIDDLE value, rgb(244,246,248). Contrast on the #0e0e0e ground is
   17.82:1 -- all three cleared WCAG AAA for large text by roughly 4x, so accessibility
   did not decide this. It was chosen because the brightest read as glary on the hero,
   and because it keeps the slight cool cast that suits a blue-accented palette, where
   rgb(239,239,239) is a pure neutral grey and the odd one in kind as well as value.

   Recorded in DESIGN.md as `web-on-surface` so it cannot drift again. */
#v3-hero h1,
#howitworks h2,
#alignment h2,
#ni-interface h2,
#features h2 {
  color: rgb(244, 246, 248) !important;
}
/* "Where Synchrony shines" also shipped at line-height 1.0 with no tracking, where the
   other section headings run 1.05 and -0.02em. Same drift, same cause. */
#features h2 { line-height: 1.05 !important; letter-spacing: -0.02em !important; }

/* ---- Mobile hero: image before buttons (max-width 767) ---------------------
   The user's call, execution per sol consult: on phones the product shot should
   be fully visible on first load, with the CTAs below it. The buttons container
   is NESTED in the text column while the shot is a sibling column, so flex
   order alone cannot interleave them: both columns become display:contents and
   their leaves join the hero's own column flex, ordered explicitly. Their boxes
   (padding, background, gap) vanish -- the hero container carries the 24px
   sides, and spacing is restated as leaf margins below, replacing the 40px
   container gap (gap: 0) which would otherwise apply between every leaf.

   Order goes on the WIDGET WRAPPERS; the buttons row stays a real flexbox and
   stacks full-width (174+189px of labels cannot share a 342px row at 390).
   Top-aligned, not centred: deterministic first paint, min-height retained
   for ground coverage. Known trade-off, accepted: on the shortest viewports
   the primary CTA can land below the fold. AT reading order still has the
   buttons before the image (CSS order is visual only). */
@media (max-width: 767px) {
  /* align-items: the hero centres its two columns on desktop; with the columns
     flattened that centres any shrink-wrapped leaf (eyebrow, h1). Left-align. */
  #v3-hero > .e-con-inner { justify-content: flex-start; align-items: flex-start; gap: 0; }
  #v3-hero > .e-con-inner > .e-con { display: contents; }
  #v3-hero .elementor-element-5d225c7 { order: 1; }
  #v3-hero .elementor-element-6cb685d { order: 2; margin: 10px 0 0 !important; }
  #v3-hero .elementor-element-962a1cd { order: 3; margin: 14px 0 0; }
  #v3-hero .elementor-element-956122f { order: 4; margin: 24px 0 0; width: 100%; }
  #v3-hero .elementor-element-8de82c8 {
    order: 5; margin: 20px 0 0;
    display: flex; flex-direction: column; gap: 12px; width: 100%;
  }
  #v3-hero .elementor-element-8de82c8 .elementor-widget-button,
  #v3-hero .elementor-element-8de82c8 .elementor-button-wrapper,
  #v3-hero .elementor-element-8de82c8 .elementor-button {
    width: 100%;
  }
}

/* Mobile hero, eyebrow proximity: overrides the 10px h1 margin in the mobile-hero
   block above. On desktop the eyebrow sits at 0.63x of the h1-to-lead gap (29.4 vs
   46.3 optical); the phone had it inverted (36.9 vs 25.2) because the eyebrow
   widget keeps ~21px of dead line-height space below its ink. The -11px pulls the
   h1 through that dead space: measured optical gap 15.9 = 0.63 x 25.2. */
@media (max-width: 767px) {
  #v3-hero .elementor-element-6cb685d { margin: -11px 0 0 !important; }
}
/* Appended override (12 Aug, hero mobile audit): the shot's flanking gaps
   were 24 above / 20 below; the CTA stack now matches the lead-to-shot 24.
   Consolidate into the mobile-hero block at the next full replace. */
@media (max-width: 767px) {
  #v3-hero .elementor-element-8de82c8 { margin-top: 24px !important; }
}/* End custom CSS */