/* Built from normalize.css + main.css + scrapeit.css. Do not edit directly. */
@layer reset, legacy, tokens, base, components, utilities;

/* ===== assets/css/normalize.css ===== */
@layer reset {
  html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}
  body{margin:0}
  article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}
  audio,canvas,progress,video{display:inline-block;vertical-align:baseline}
  audio:not([controls]){display:none;height:0}
  [hidden],template{display:none}
  a{background-color:transparent}
  a:active,a:hover{outline:0}
  abbr[title]{border-bottom:1px dotted}
  b,strong{font-weight:700}
  dfn{font-style:italic}
  h1{font-size:2em;margin:.67em 0}
  mark{background:#ff0;color:#000}
  small{font-size:80%}
  sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
  sup{top:-.5em}
  sub{bottom:-.25em}
  img{border:0}
  svg:not(:root){overflow:hidden}
  figure{margin:1em 40px}
  hr{box-sizing:content-box;height:0}
  pre{overflow:auto}
  code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
  button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}
  button{overflow:visible}
  button,select{text-transform:none}
  button,html input[type=button],input[type=reset]{-webkit-appearance:button;cursor:pointer}
  button[disabled],html input[disabled]{cursor:default}
  button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}
  input{line-height:normal}
  input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}
  input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}
  input[type=search]{-webkit-appearance:none}
  input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}
  fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}
  legend{border:0;padding:0}
  textarea{overflow:auto}
  optgroup{font-weight:700}
  table{border-collapse:collapse;border-spacing:0}
  td,th{padding:0}
}

/* ===== assets/css/main.css ===== */
@layer legacy {
  @font-face{font-family:webflow-icons;src:url("data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMg8SBiUAAAC8AAAAYGNtYXDpP+a4AAABHAAAAFxnYXNwAAAAEAAAAXgAAAAIZ2x5ZmhS2XEAAAGAAAADHGhlYWQTFw3HAAAEnAAAADZoaGVhCXYFgQAABNQAAAAkaG10eCe4A1oAAAT4AAAAMGxvY2EDtALGAAAFKAAAABptYXhwABAAPgAABUQAAAAgbmFtZSoCsMsAAAVkAAABznBvc3QAAwAAAAAHNAAAACAAAwP4AZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAQAAAAAwACAACAAQAAQAg5gPpA//9//8AAAAAACDmAOkA//3//wAB/+MaBBcIAAMAAQAAAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEBIAAAAyADgAAFAAAJAQcJARcDIP5AQAGA/oBAAcABwED+gP6AQAABAOAAAALgA4AABQAAEwEXCQEH4AHAQP6AAYBAAcABwED+gP6AQAAAAwDAAOADQALAAA8AHwAvAAABISIGHQEUFjMhMjY9ATQmByEiBh0BFBYzITI2PQE0JgchIgYdARQWMyEyNj0BNCYDIP3ADRMTDQJADRMTDf3ADRMTDQJADRMTDf3ADRMTDQJADRMTAsATDSANExMNIA0TwBMNIA0TEw0gDRPAEw0gDRMTDSANEwAAAAABAJ0AtAOBApUABQAACQIHCQEDJP7r/upcAXEBcgKU/usBFVz+fAGEAAAAAAL//f+9BAMDwwAEAAkAABcBJwEXAwE3AQdpA5ps/GZsbAOabPxmbEMDmmz8ZmwDmvxmbAOabAAAAgAA/8AEAAPAAB0AOwAABSInLgEnJjU0Nz4BNzYzMTIXHgEXFhUUBw4BBwYjNTI3PgE3NjU0Jy4BJyYjMSIHDgEHBhUUFx4BFxYzAgBqXV6LKCgoKIteXWpqXV6LKCgoKIteXWpVSktvICEhIG9LSlVVSktvICEhIG9LSlVAKCiLXl1qal1eiygoKCiLXl1qal1eiygoZiEgb0tKVVVKS28gISEgb0tKVVVKS28gIQABAAABwAIAA8AAEgAAEzQ3PgE3NjMxFSIHDgEHBhUxIwAoKIteXWpVSktvICFmAcBqXV6LKChmISBvS0pVAAAAAgAA/8AFtgPAADIAOgAAARYXHgEXFhUUBw4BBwYHIxUhIicuAScmNTQ3PgE3NjMxOAExNDc+ATc2MzIXHgEXFhcVATMJATMVMzUEjD83NlAXFxYXTjU1PQL8kz01Nk8XFxcXTzY1PSIjd1BQWlJJSXInJw3+mdv+2/7c25MCUQYcHFg5OUA/ODlXHBwIAhcXTzY1PTw1Nk8XF1tQUHcjIhwcYUNDTgL+3QFt/pOTkwABAAAAAQAAmM7nP18PPPUACwQAAAAAANciZKUAAAAA1yJkpf/9/70FtgPDAAAACAACAAAAAAAAAAEAAAPA/8AAAAW3//3//QW2AAEAAAAAAAAAAAAAAAAAAAAMBAAAAAAAAAAAAAAAAgAAAAQAASAEAADgBAAAwAQAAJ0EAP/9BAAAAAQAAAAFtwAAAAAAAAAKABQAHgAyAEYAjACiAL4BFgE2AY4AAAABAAAADAA8AAMAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEADQAAAAEAAAAAAAIABwCWAAEAAAAAAAMADQBIAAEAAAAAAAQADQCrAAEAAAAAAAUACwAnAAEAAAAAAAYADQBvAAEAAAAAAAoAGgDSAAMAAQQJAAEAGgANAAMAAQQJAAIADgCdAAMAAQQJAAMAGgBVAAMAAQQJAAQAGgC4AAMAAQQJAAUAFgAyAAMAAQQJAAYAGgB8AAMAAQQJAAoANADsd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzUmVndWxhcgBSAGUAZwB1AGwAYQByd2ViZmxvdy1pY29ucwB3AGUAYgBmAGwAbwB3AC0AaQBjAG8AbgBzRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==") format('truetype');font-weight:400;font-style:normal}
  [class*=" w-icon-"],[class^=w-icon-]{font-family:webflow-icons!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
  .w-icon-dropdown-toggle:before{content:"\e603"}
  .w-icon-file-upload-remove:before{content:"\e900"}
  .w-icon-file-upload-icon:before{content:"\e903"}
  *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
  html{height:100%}
  body{margin:0;min-height:100%;background-color:#fff;font-family:Arial,sans-serif;font-size:14px;line-height:20px;color:#333}
  img{max-width:100%;vertical-align:middle;display:inline-block}
  .w-inline-block{max-width:100%;display:inline-block}
  .w-button{display:inline-block;padding:9px 15px;background-color:#3898ec;color:#fff;border:0;line-height:inherit;text-decoration:none;cursor:pointer;border-radius:0}
  input.w-button{-webkit-appearance:button}
  html[data-w-dynpage] [data-w-cloak]{color:transparent!important}
  .w-webflow-badge,.w-webflow-badge *{position:static;left:auto;top:auto;right:auto;bottom:auto;z-index:auto;display:block;visibility:visible;overflow:visible;overflow-x:visible;overflow-y:visible;box-sizing:border-box;width:auto;height:auto;max-height:none;max-width:none;min-height:0;min-width:0;margin:0;padding:0;float:none;clear:none;border:0 none transparent;border-radius:0;background:0 0;background-image:none;background-position:0 0;background-size:auto auto;background-repeat:repeat;background-origin:padding-box;background-clip:border-box;background-attachment:scroll;background-color:transparent;box-shadow:none;opacity:1;transform:none;transition:none;direction:ltr;font-family:inherit;font-weight:inherit;color:inherit;font-size:inherit;line-height:inherit;font-style:inherit;font-variant:inherit;text-align:inherit;letter-spacing:inherit;text-decoration:inherit;text-indent:0;text-transform:inherit;list-style-type:disc;text-shadow:none;font-smoothing:auto;vertical-align:baseline;cursor:inherit;white-space:inherit;word-break:normal;word-spacing:normal;word-wrap:normal}
  .w-webflow-badge{position:fixed!important;display:inline-block!important;visibility:visible!important;opacity:1!important;z-index:2147483647!important;top:auto!important;right:12px!important;bottom:12px!important;left:auto!important;color:#aaadb0!important;background-color:#fff!important;border-radius:3px!important;padding:6px 8px 6px 6px!important;font-size:12px!important;opacity:1!important;line-height:14px!important;text-decoration:none!important;transform:none!important;margin:0!important;width:auto!important;height:auto!important;overflow:visible!important;white-space:nowrap;box-shadow:0 0 0 1px rgba(0,0,0,.1),0 1px 3px rgba(0,0,0,.1);cursor:pointer}
  .w-webflow-badge>img{display:inline-block!important;visibility:visible!important;opacity:1!important;vertical-align:middle!important}
  h1,h2,h3,h4,h5,h6{font-weight:700;margin-bottom:10px}
  h1{font-size:38px;line-height:44px;margin-top:20px}
  h2{font-size:32px;line-height:36px;margin-top:20px}
  h3{font-size:24px;line-height:30px;margin-top:20px}
  h4{font-size:18px;line-height:24px;margin-top:10px}
  h5{font-size:14px;line-height:20px;margin-top:10px}
  h6{font-size:12px;line-height:18px;margin-top:10px}
  p{margin-top:0;margin-bottom:10px}
  blockquote{margin:0 0 10px 0;padding:10px 20px;border-left:5px solid #e2e2e2;font-size:18px;line-height:22px}
  figure{margin:0;margin-bottom:10px}
  figcaption{margin-top:5px;text-align:center}
  ol,ul{margin-top:0;margin-bottom:10px;padding-left:40px}
  .w-embed:after,.w-embed:before{content:" ";display:table;grid-column-start:1;grid-row-start:1;grid-column-end:2;grid-row-end:2}
  .w-embed:after{clear:both}
  fieldset{padding:0;margin:0;border:0}
  button,html input[type=button],input[type=reset]{border:0;cursor:pointer;-webkit-appearance:button}
  .wm-form{margin:0 0 15px}
  .wm-form-done{display:none;padding:20px;text-align:center;background-color:#ddd}
  .wm-form-fail{display:none;margin-top:10px;padding:10px;background-color:#ffdede}
  label{display:block;margin-bottom:5px;font-weight:700}
  .w-input{display:block;width:100%;height:38px;padding:8px 12px;margin-bottom:10px;font-size:14px;line-height:1.428571429;color:#333;vertical-align:middle;background-color:#fff;border:1px solid #ccc}
  .w-input:-moz-placeholder{color:#999}
  .w-input::-moz-placeholder{color:#999;opacity:1}
  .w-input:-ms-input-placeholder{color:#999}
  .w-input::-webkit-input-placeholder{color:#999}
  .w-input:focus{border-color:#3898ec;outline:0}
  .w-input[disabled],.w-input[readonly],fieldset[disabled] .w-input{cursor:not-allowed;background-color:#eee}
  textarea.w-input{height:auto}
  .w-radio-input{margin:4px 0 0;line-height:normal;float:left;margin-left:-20px}
  .w-radio-input{margin-top:3px}
  .w-file-upload{display:block;margin-bottom:10px}
  .w-file-upload-input{width:.1px;height:.1px;opacity:0;overflow:hidden;position:absolute;z-index:-100}
  .w-file-upload-file{display:flex;flex-grow:1;justify-content:space-between;margin:0;padding:8px 9px 8px 11px;border:1px solid #ccc;background-color:#fafafa}
  .w-file-upload-file-name{font-size:14px;font-weight:400;display:block}
  .w-file-remove-link{margin-top:3px;margin-left:10px;width:auto;height:auto;padding:3px;display:block;cursor:pointer}
  .w-icon-file-upload-remove{margin:auto;font-size:10px}
  .w-file-upload-error-msg{display:inline-block;color:#ea384c;padding:2px 0}
  .w-file-upload-label{display:inline-block;font-size:14px;font-weight:400;cursor:pointer;margin:0;padding:8px 12px;border:1px solid #ccc;background-color:#fafafa}
  .w-icon-file-upload-icon{display:inline-block;margin-right:8px;width:20px}
  .w-container{margin-left:auto;margin-right:auto;max-width:940px}
  .w-container:after,.w-container:before{content:" ";display:table;grid-column-start:1;grid-row-start:1;grid-column-end:2;grid-row-end:2}
  .w-container:after{clear:both}
  .w-container .w-row{margin-left:-10px;margin-right:-10px}
  .w-row:after,.w-row:before{content:" ";display:table;grid-column-start:1;grid-row-start:1;grid-column-end:2;grid-row-end:2}
  .w-row:after{clear:both}
  .w-row .w-row{margin-left:0;margin-right:0}
  .w-col{position:relative;float:left;width:100%;min-height:1px;padding-left:10px;padding-right:10px}
  .w-col .w-col{padding-left:0;padding-right:0}
  .w-col-4{width:33.33333333%}
  @media screen and (max-width:991px){
    .w-container{max-width:728px}
  }
  @media screen and (max-width:767px){
    .w-container .w-row,.w-row{margin-left:0;margin-right:0}
    .w-col{width:100%;left:auto;right:auto}
  }
  @media screen and (max-width:479px){
    .w-container{max-width:none}
    .w-col{width:100%}
  }
  .w-dropdown{display:inline-block;position:relative;text-align:left;margin-left:auto;margin-right:auto;z-index:900}
  .w-dropdown-link,.w-dropdown-toggle{position:relative;vertical-align:top;text-decoration:none;color:#222;padding:20px;text-align:left;margin-left:auto;margin-right:auto;white-space:nowrap}
  .w-dropdown-toggle{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:inline-block;cursor:pointer;padding-right:40px}
  .w-dropdown-toggle:focus{outline:0}
  .w-icon-dropdown-toggle{position:absolute;top:0;right:0;bottom:0;margin:auto;margin-right:20px;width:1em;height:1em}
  .w-dropdown-list{position:absolute;background:#ddd;display:none;min-width:100%}
  .w-dropdown-list.w--open{display:block}
  .w-dropdown-link{padding:10px 20px;display:block;color:#222}
  .w-dropdown-link.w--current{color:#0082f3}
  .w-dropdown-link:focus{outline:0}
  @media screen and (max-width:767px){
    .w-nav-brand{padding-left:10px}
  }
  .w-richtext:after,.w-richtext:before{content:" ";display:table;grid-column-start:1;grid-row-start:1;grid-column-end:2;grid-row-end:2}
  .w-richtext:after{clear:both}
  .w-richtext[contenteditable=true]:after,.w-richtext[contenteditable=true]:before{white-space:initial}
  .w-richtext ol,.w-richtext ul{overflow:hidden}
  .w-richtext figure[data-rt-type=video]>div:after{content:'';position:absolute;display:none;left:0;top:0;right:0;bottom:0}
  .w-richtext figure{position:relative;max-width:60%}
  .w-richtext figure>div:before{cursor:default!important}
  .w-richtext figure img{width:100%}
  .w-richtext figure div{font-size:0;color:transparent}
  .w-richtext figure.w-richtext-figure-type-image,.w-richtext figure[data-rt-type=image]{display:table}
  .w-richtext figure.w-richtext-figure-type-image>div,.w-richtext figure[data-rt-type=image]>div{display:inline-block}
  .w-richtext figure.w-richtext-figure-type-image>figcaption,.w-richtext figure[data-rt-type=image]>figcaption{display:table-caption;caption-side:bottom}
  .w-richtext figure[data-rt-type=video]{width:60%;height:0}
  .w-richtext figure[data-rt-type=video] iframe{position:absolute;top:0;left:0;width:100%;height:100%}
  .w-richtext figure[data-rt-type=video]>div{width:100%}
  .w-richtext figure.w-richtext-align-fullwidth{width:100%;max-width:100%;text-align:center;clear:both;display:block;margin-right:auto;margin-left:auto}
  .w-richtext figure.w-richtext-align-fullwidth>div{display:inline-block;padding-bottom:inherit}
  .w-richtext figure.w-richtext-align-fullwidth>figcaption{display:block}
  .w-nav{position:relative;background:#ddd;z-index:1000}
  .w-nav:after,.w-nav:before{content:" ";display:table;grid-column-start:1;grid-row-start:1;grid-column-end:2;grid-row-end:2}
  .w-nav:after{clear:both}
  .w-nav-brand{position:relative;float:left;text-decoration:none;color:#333}
  .w-nav-link{position:relative;display:inline-block;vertical-align:top;text-decoration:none;color:#222;padding:20px;text-align:left;margin-left:auto;margin-right:auto}
  .w-nav-link.w--current{color:#0082f3}
  .w-nav-menu{position:relative;float:right}
  [data-nav-menu-open]{display:block!important;position:absolute;top:100%;left:0;right:0;background:#c8c8c8;text-align:center;overflow:visible;min-width:200px}
  .w--nav-link-open{display:block;position:relative}
  .w-nav-overlay{position:absolute;overflow:hidden;display:none;top:100%;left:0;right:0;width:100%}
  .w-nav-overlay [data-nav-menu-open]{top:0}
  .w-nav[data-animation=over-left] .w-nav-overlay{width:auto}
  .w-nav[data-animation=over-left] .w-nav-overlay,.w-nav[data-animation=over-left] [data-nav-menu-open]{right:auto;z-index:1;top:0}
  .w-nav[data-animation=over-right] .w-nav-overlay{width:auto}
  .w-nav[data-animation=over-right] .w-nav-overlay,.w-nav[data-animation=over-right] [data-nav-menu-open]{left:auto;z-index:1;top:0}
  .w-nav-button{position:relative;float:right;padding:18px;font-size:24px;display:none;cursor:pointer;-webkit-tap-highlight-color:transparent;tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}
  .w-nav-button:focus{outline:0}
  .w-nav-button.w--open{background-color:#c8c8c8;color:#fff}
  .w-nav[data-collapse=all] .w-nav-menu{display:none}
  .w-nav[data-collapse=all] .w-nav-button{display:block}
  .w--nav-dropdown-open{display:block}
  .w--nav-dropdown-toggle-open{display:block}
  .w--nav-dropdown-list-open{position:static}
  @media screen and (max-width:991px){
    .w-nav[data-collapse=medium] .w-nav-menu{display:none}
    .w-nav[data-collapse=medium] .w-nav-button{display:block}
  }
  @media screen and (max-width:767px){
    .w-nav[data-collapse=small] .w-nav-menu{display:none}
    .w-nav[data-collapse=small] .w-nav-button{display:block}
    .w-nav-brand{padding-left:10px}
  }
  @media screen and (max-width:479px){
    .w-nav[data-collapse=tiny] .w-nav-menu{display:none}
    .w-nav[data-collapse=tiny] .w-nav-button{display:block}
  }
  .w-tabs{position:relative}
  .w-tabs:after,.w-tabs:before{content:" ";display:table;grid-column-start:1;grid-row-start:1;grid-column-end:2;grid-row-end:2}
  .w-tabs:after{clear:both}
  .w-tab-menu{position:relative}
  .w-tab-link{position:relative;display:inline-block;vertical-align:top;text-decoration:none;padding:9px 30px;text-align:left;cursor:pointer;color:#222;background-color:#ddd}
  .w-tab-link.w--current{background-color:#c8c8c8}
  .w-tab-link:focus{outline:0}
  .w-tab-content{position:relative;display:block;overflow:hidden}
  .w-tab-pane{position:relative;display:none}
  .w--tab-active{display:block}
  @media screen and (max-width:479px){
    .w-tab-link{display:block}
  }
  @keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
}

/* ===== assets/css/scrapeit.css ===== */
@layer legacy {
  body{color:#37446f}
  .h5,p{margin-bottom:0}
  .logo-icon{margin-right:10px}
  .rich-text figure,.w-layout-grid{-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr;-ms-grid-rows:auto auto;grid-template-rows:auto auto;grid-auto-columns:1fr}
  .form,.rich-text figure,.two-col-grid,.w-layout-grid{grid-auto-columns:1fr}
  .dollar,.price{font-family:Montserrat,sans-serif}
  .section-2.grey_grad.anim,.section.home-hero{background-size:contain,auto;background-repeat:no-repeat,repeat}
  .error-message,.feature-icon-top-v-2,.h2.center,.h3-2,.h3-2.not-margin,.h3-3,.h3-4,.heading,.primary-button.test,.team-member,.title-container{text-align:center}
  #Message-2.w-node-_6bdf86f3-629e-5109-6735-d79b5709c63f-5709c612,#w-node-_14d423a0-f31d-d4e9-caa4-ef71e9e0f2ac-5ae5ffcc,#w-node-_2f97fe99-6b17-77d7-4768-ad562081abc6-d9a31d37,#w-node-_6bdf86f3-629e-5109-6735-d79b5709c640-5709c612,#w-node-_839b41cc-0c65-b26d-811e-9948f90fafb5-3599922e,#w-node-_839b41cc-0c65-b26d-811e-9948f90fafb5-45e5ffc2,#w-node-_839b41cc-0c65-b26d-811e-9948f90fafb5-949f57d9,#w-node-_839b41cc-0c65-b26d-811e-9948f90fafb5-c367b424,#w-node-_839b41cc-0c65-b26d-811e-9948f90fafb5-ee235b9d,#w-node-c9faaf92-15e0-bd16-d6df-4b9e491e125f-491e1229,.recaptcha-item{-ms-grid-column:span 2;grid-column-start:span 2;grid-column-end:span 2;-ms-grid-row:span 1;grid-row-start:span 1;grid-row-end:span 1;-ms-grid-column-span:2;-ms-grid-row-span:1}
  ul.listwwcd,ul.store_scraper{list-style-image:url(/assets/images/check_icon_b.svg)}
  .burger-icon,.button-2,.link-block,.tooltip{cursor:pointer}
  .tooltip .tooltip-text,.tooltip .tooltip-text::after{transform:translateY(-50%);top:50%;position:absolute}
  .w-layout-grid{display:-ms-grid;display:grid;grid-row-gap:16px;grid-column-gap:16px}
  .navbar-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}
  body{font-family:"Nunito Sans",sans-serif;font-size:16px;line-height:24px}
  p{color:#8087a6;line-height:26px}
  .dropdown-link-2.medium:hover,.h5.white,.paragraph,.paragraph-2,.paragraph-3,.paragraph-4{color:#fff}
  .h5{margin-top:0;font-size:18px;line-height:24px;font-weight:600}
  .h5.white{margin-bottom:10px}
  .logo-icon{height:44px}
  .navbar-container{display:flex;width:100%;height:100%;max-width:1200px;margin-right:auto;margin-left:auto;padding-right:15px;padding-left:15px;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;background-color:#fff}
  .feature-icon-top-v-1,.link,.primary-medium-button.stretch,.rich-text figure,.small-container,.small-container-no-anim,.small-text.small-height,.testimonial-details-v-3,.title-container{-webkit-box-orient:vertical;-webkit-box-direction:normal}
  .buttons-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding-left:20px;border-radius:4px}
  .dropdown-link-2{-webkit-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
  .dropdown-link-2:hover,.link-2:hover,.primary-small-button.white:hover,.text-block-6:hover{background-color:#4e74ff;color:#fff}
  .dropdown.mob{display:none}
  .nav-menu-lbg{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
  .primary-small-button{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;font-size:14px;font-weight:600;text-decoration:none}
  .primary-small-button{display:flex;padding:10px 24px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;border:1.6px solid #4e74ff;border-radius:4px;background-color:#4e74ff;-webkit-transition:.2s;transition:.2s;color:#fff}
  .navigation,.section{background-color:transparent}
  .primary-small-button.light:hover,.primary-small-button:hover{border-color:#3762ff;background-color:#3762ff}
  .primary-small-button.white{border-style:solid;background-color:#fff;color:#4e74ff;font-size:16px;font-weight:700}
  .navigation.light{border-bottom:1px solid #4e74ff;position:fixed}
  .primary-small-button.white.sample{margin-top:30px;margin-left:40px}
  .h3.not-margin,.h4{margin-top:0}
  .navigation{position:absolute;width:100%;height:74px}
  .navigation.light{background-color:#fff}
  .navigation.dark{position:fixed;top:0;background-color:#dee2ef}
  .burger-icon{display:none}
  .h4{font-size:20px;line-height:26px;font-weight:600}
  .h2,.h3{font-weight:700}
  .h3{margin-bottom:53px;font-size:24px;line-height:32px}
  .small-text,.small-text-2{color:#8087a6;font-size:14px}
  .small-text.small-height{margin-top:20px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;line-height:24px}
  .h2.white{margin-top:0;margin-bottom:30px;color:#fff}
  .h2.margin{margin-top:40px;margin-bottom:20px}
  .h1{margin-top:0;margin-bottom:0;font-size:48px;line-height:50px;font-weight:800}
  .section-2._60,.section-2.bottomzero,.section.dark.down,.section.dark.statistics,.section.grey,.section.hero,.title-container.not-margin{margin-bottom:0}
  .link{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;margin-top:20px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;color:#4e74ff;line-height:28px;font-weight:600;text-decoration:none}
  .link:hover{text-decoration:underline}
  .link.breadcrumb{display:inline}
  .primary-medium-button,.section.home-hero,.title-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}
  .link.grey{color:#8087a6;font-size:14px;line-height:26px;font-weight:400}
  .link.grey:hover{color:#3762ff;text-decoration:none}
  .section{position:relative;overflow:hidden;margin-bottom:140px;padding-top:60px;padding-bottom:60px}
  .section.home-hero{display:flex;height:100vh;margin-bottom:0;padding-top:140px;padding-bottom:120px;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;background-image:url(/assets/images/hero-shape.svg),-webkit-gradient(linear,left top,left bottom,from(#eff3fb),to(#fff));background-image:url(/assets/images/hero-shape.svg),linear-gradient(180deg,#eff3fb,#fff);background-position:100% 0,0 0}
  .footer.dark,.section.dark{background-image:url(/assets/images/footer-shape.svg)}
  .footer.dark,.section.dark,.solutions.four,.solutions.one,.solutions.three,.solutions.two,.testimonial-v-1.four,.testimonial-v-1.one,.testimonial-v-1.three,.testimonial-v-1.two{background-size:contain;background-repeat:no-repeat}
  .section.dark{padding-top:80px;padding-bottom:80px;background-color:#253057;background-position:100% 100%}
  .section.hero{padding-top:140px;padding-bottom:120px}
  .section.hero.blog-post{padding-bottom:0}
  .section.grey{margin-top:0;padding-top:80px;padding-bottom:80px;background-color:#eff3fb}
  .title-container{display:flex;max-width:800px;margin:0 auto 60px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
  .container,.footer-bottom,.medium-container.center,.submit-button{margin-right:auto;margin-left:auto}
  .primary-medium-button,.submit-button{padding:12px 28px;-webkit-box-pack:center;border-radius:4px;background-color:#4e74ff;font-size:16px}
  .primary-medium-button{display:flex;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-transition:.2s;transition:.2s;color:#fff;font-weight:600;text-decoration:none}
  .primary-button,.submit-button{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;color:#fff;text-decoration:none}
  .primary-button:hover,.primary-medium-button:hover{background-color:#3762ff}
  .primary-medium-button.stretch{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch}
  .primary-medium-button.margin-top{margin-top:30px}
  .submit-button{position:static;display:flex;width:30%;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-transition:.2s;transition:.2s}
  .submit-button:hover{background-color:#37446f}
  .text-field{height:46px;min-width:280px;margin-bottom:0;padding:12px 24px;border:1px solid #eff3fb;border-radius:4px;background-color:#eff3fb;-webkit-transition:.2s;transition:.2s}
  .text-field:hover,.textarea:hover{border-style:solid;border-color:#dee2ef}
  .text-field:focus,.textarea:focus{border-style:solid;border-color:#c5cee4}
  .text-field::-webkit-input-placeholder{color:rgba(128,135,166,.6)}
  .text-field:-ms-input-placeholder{color:rgba(128,135,166,.6)}
  .text-field::-ms-input-placeholder{color:rgba(128,135,166,.6)}
  .text-field::placeholder{color:rgba(128,135,166,.6)}
  .text-field.contact{min-width:250px}
  .text-field.contact._450{min-width:450px}
  .form{display:-ms-grid;display:grid;margin-top:40px;grid-column-gap:20px;grid-row-gap:20px;-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr;-ms-grid-rows:auto auto auto;grid-template-rows:auto auto auto}
  .primary-button{display:flex;padding:14px 34px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;border-radius:4px;background-color:#4e74ff;-webkit-transition:.2s;transition:.2s;font-size:18px;font-weight:600}
  .footer-bottom,.social-link{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}
  .primary-button.test{display:inline-block;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
  .textarea{min-height:200px;min-width:380px;padding:16px 24px;border:1px solid #eff3fb;border-radius:4px;background-color:#eff3fb;-webkit-transition:.2s;transition:.2s}
  .textarea::-webkit-input-placeholder{color:rgba(128,135,166,.6)}
  .textarea:-ms-input-placeholder{color:rgba(128,135,166,.6)}
  .textarea::-ms-input-placeholder{color:rgba(128,135,166,.6)}
  .textarea::placeholder{color:rgba(128,135,166,.6)}
  .container{width:100%;max-width:1200px;padding-right:15px;padding-left:15px;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;background-color:transparent}
  .container.industries{margin-bottom:10px;padding-top:10px}
  .medium-container{width:100%;max-width:770px}
  .medium-container.center{max-width:100%}
  .contact-container.full_width,.footer-bottom{max-width:1200px}
  .rich-text{margin-top:20px;border-radius:8px}
  .rich-text ul{margin-top:20px;margin-bottom:20px;padding-left:60px}
  .rich-text h4{margin-top:40px;margin-bottom:14px;color:#37446f;font-size:20px;line-height:26px;font-weight:500;letter-spacing:-.4px}
  .link-4,.rich-text a{color:#4e74ff;text-decoration:none}
  .rich-text strong{color:#37446f;font-weight:700}
  .rich-text figure{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch}
  .rich-text p{margin-bottom:20px;color:#37446f;font-size:18px;line-height:32px;letter-spacing:.2px}
  .rich-text h2,.rich-text h3{letter-spacing:-.4px;font-weight:700}
  .rich-text blockquote{margin-top:30px;margin-bottom:30px;border-left-color:#c5cee4;font-size:18px;line-height:32px;font-style:italic;font-weight:400}
  .rich-text h2{margin-top:30px;color:#37446f;font-size:24px}
  .hiw,.rich-text img,.small-feature-2.margin-top{margin-top:20px}
  .rich-text h3{margin-top:40px;font-size:22px;line-height:32px}
  .rich-text li{padding-top:6px;padding-bottom:6px;font-size:18px;line-height:32px}
  .rich-text figcaption{margin-top:10px;margin-bottom:20px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
  .footer,.section-2.bottomzero.topzero{padding-top:0}
  .footer.dark{background-color:#253057;background-position:100% 100%}
  .social-link{display:flex;width:28px;height:28px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-transition:.2s;transition:.2s}
  .social-link:hover{opacity:.8}
  .footer-bottom{display:flex;padding:20px 15px;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;border-top:1px solid #dee2ef;color:#8087a6;font-size:14px}
  .social-container{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}
  .footer-bottom.grey{border-top-style:none;color:#c5cee4}
  .social-container{display:flex}
  .social-container.margin-top{margin-top:14px}
  .two-col-grid{width:100%;grid-column-gap:30px}
  .feature-icon,.small-feature-icon{border-radius:10px;background-color:#eff0ff}
  .two-col-grid{display:-ms-grid;display:grid;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;justify-items:stretch;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;grid-row-gap:30px;-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr;-ms-grid-rows:1fr;grid-template-rows:1fr}
  .small-container,.small-container-no-anim{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;max-width:480px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}
  .pricing-grid{display:-ms-grid;-ms-grid-columns:1fr 1fr 1fr;grid-template-columns:1fr 1fr 1fr;grid-auto-columns:1fr}
  .main-image{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
  .main-image.no_anim{width:150%}
  .subtitle{margin-top:20px;margin-bottom:30px;color:#8087a6;font-size:18px;line-height:28px}
  .feature-icon-top-v-1,.logotype,.testimonial-details-v-3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}
  .feature-icon-top-v-1,.testimonial-details-v-3{display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:center}
  .feature-icon{width:70px;padding:14px}
  .feature-icon.stat{width:48px;padding:0;background-color:transparent}
  .logotype{display:flex;height:38px;padding-right:8px;padding-left:8px}
  .feature-icon-left{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}
  .feature-icon-top-v-2,.pricing-card-v-1,.small-feature-icon,.tabs{-webkit-box-orient:vertical;-webkit-box-direction:normal}
  .small-feature{display:block;max-width:470px;margin-top:10px;margin-bottom:10px;padding-top:4px;padding-bottom:4px}
  .small-feature.margin-top{display:block;margin-top:20px;margin-bottom:10px}
  .small-feature-icon{display:block;width:50px;padding:8px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start}
  .pricing-container,.tabs{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}
  .testimonial-v-1{padding:30px;border-radius:4px;background-color:#fff;box-shadow:0 16px 24px 0 rgba(55,68,111,.14);-webkit-transition:z-Index .1s;transition:z-Index .1s;-o-object-fit:fill;object-fit:fill}
  .solutions.one,.testimonial-v-1.one{background-image:url(/assets/images/1.svg);background-position:100% 100%;background-clip:border-box;-webkit-text-fill-color:inherit}
  .solutions.two,.testimonial-v-1.two{background-image:url(/assets/images/2.svg);background-position:100% 100%}
  .solutions.three,.testimonial-v-1.three{background-image:url(/assets/images/3.svg);background-position:100% 100%}
  .solutions.four,.testimonial-v-1.four{background-image:url(/assets/images/4.svg);background-position:100% 100%}
  .type{-webkit-align-self:flex-end;-ms-flex-item-align:end;align-self:flex-end;color:#8087a6;font-size:13px;letter-spacing:1px}
  .tabs{display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
  .check-icon-v-2{width:16px;margin-right:8px}
  .pricing-container{display:flex;-webkit-box-flex:0;-webkit-flex:0 auto;-ms-flex:0 auto;flex:0 auto}
  .pricing-card-v-1,.tabs-content{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;overflow:visible}
  .tabs-content{display:flex;width:100%;padding-top:40px;padding-bottom:80px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}
  .pricing-details{margin-bottom:30px;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}
  .pricing-card-v-1{display:flex;max-width:100%;min-width:100%;padding:30px 25px 40px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;border-radius:10px;background-color:#fff;box-shadow:0 30px 50px 0 rgba(55,68,111,.1);-o-object-fit:fill;object-fit:fill}
  .plus-icon{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}
  .analytics-grid,.pricing-grid{margin-right:auto;margin-left:auto}
  .dollar{-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;color:#37446f;font-size:28px;padding-left:5px}
  .price{padding-right:4px;padding-left:4px;font-size:34px;line-height:34px}
  .accordion,.image-32{width:100%}
  .accordion-text{position:static;background-color:transparent}
  .horizontal-line,.vertical-line{background-color:#8087a6;border-radius:4px}
  .accordion-text.w--open{padding-right:20px;padding-bottom:20px;padding-left:20px;background-color:transparent}
  .tab-link-v-2-tab-1.w--current,.tab-link-v-2-tab-3.w--current{background-color:#fff;box-shadow:0 6px 10px 0 rgba(55,68,111,.2);color:#4e74ff;font-weight:600}
  .plus-icon{position:relative;display:flex;width:18px;height:18px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
  .accordion-container,.feature-icon-top-v-2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}
  .vertical-line{width:2px;height:18px}
  .horizontal-line{position:absolute;width:18px;height:2px}
  .accordion-container{display:flex;width:100%;padding:10px 0;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;color:#37446f}
  .line-2{width:100%;height:1.5px;margin-top:16px;margin-bottom:16px;background-color:#dee2ef}
  .feature-icon-top-v-2{display:flex;padding:30px 18px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;border-radius:4px;box-shadow:0 10px 30px 0 rgba(55,68,111,.1)}
  .tabs-menu-v-2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:4px;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;border-radius:100px;background-color:#eff3fb}
  .post-card,.pricing-card-v-2{-webkit-flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal}
  .tab-link-v-2-tab-1,.tab-link-v-2-tab-3{display:block;padding:6px 22px;background-color:transparent;color:#8087a6;font-size:14px;line-height:20px;font-weight:400}
  .tab-link-v-2-tab-1.w--current{border-radius:100px;-webkit-transition:.2s;transition:.2s}
  .tab-link-v-2-tab-3.w--current{display:block;border-radius:100px}
  .pricing-card-v-2{box-shadow:0 10px 30px 0 rgba(55,68,111,.1)}
  .pricing-card-v-2{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;max-width:100%;padding:30px 25px 40px;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-align-content:flex-start;-ms-flex-line-pack:start;align-content:flex-start;border:2px solid #4e74ff;border-radius:10px;background-color:rgba(255,255,255,.5)}
  .label-choise{position:absolute;left:auto;top:-20px;right:auto;bottom:auto;padding:8px 14px;border-radius:4px;background-color:#4e74ff;color:#fff}
  .pricing-grid{display:grid;width:100%;margin-top:40px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;justify-items:center;-webkit-box-align:stretch;-webkit-align-items:stretch;-ms-flex-align:stretch;align-items:stretch;grid-column-gap:16px;grid-row-gap:16px;-ms-grid-rows:auto;grid-template-rows:auto}
  .posts-grid{display:-ms-grid;display:grid;grid-auto-columns:1fr;grid-column-gap:30px;grid-row-gap:30px;-ms-grid-columns:1fr 1fr 1fr;grid-template-columns:1fr 1fr 1fr;-ms-grid-rows:1fr;grid-template-rows:1fr}
  .post-card{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;border-radius:4px}
  .analytics-grid,.section-2.hero{grid-column-gap:16px;grid-row-gap:16px}
  .post-card{display:flex;overflow:hidden;-ms-flex-direction:column;flex-direction:column;background-color:#fff;box-shadow:0 30px 50px 0 rgba(55,68,111,.1)}
  .post-image{width:100%;height:230px;-o-object-fit:cover;object-fit:cover}
  .post-content{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:20px 20px 30px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}
  .analytics-grid{display:-ms-grid;display:grid;width:100%;max-width:100%;padding-right:0;padding-left:0;grid-auto-columns:1fr;-ms-grid-columns:1fr 1fr 1fr 1fr;grid-template-columns:1fr 1fr 1fr 1fr;-ms-grid-rows:auto;grid-template-rows:auto;color:#fff}
  .analytic,.feature-image,.small-container-2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;-webkit-flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal}
  .analytic{display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
  .feature-image,.small-container-2{display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}
  .tabs-menu-v-3,.testimonial-v-3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}
  .team-member,.testimonial-v-3{-webkit-flex-direction:column;border-radius:4px;box-shadow:0 16px 24px 0 rgba(55,68,111,.1)}
  .lightbox-link{border-radius:4px;background-image:url(/assets/images/Laptop_Work.jpg);background-position:50% 50%;background-size:cover;background-repeat:no-repeat}
  .testimonial-v-3{display:flex;padding:24px 30px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start;background-color:#fff}
  .breadcrumb-text,.slash{display:inline;color:#8087a6}
  .slash{margin-right:6px;margin-left:6px}
  .breadcrumbs{margin-top:20px;margin-bottom:20px}
  .tabs-menu-v-3{display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
  .contact-container,.team-member{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;background-color:#fff;-webkit-box-orient:vertical;-webkit-box-direction:normal}
  .team-member{display:flex;padding:30px;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
  .contact-container{display:flex;max-width:560px;margin-right:auto;margin-left:auto;padding-right:15px;padding-bottom:30px;padding-left:15px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;border-radius:6px;box-shadow:0 18px 40px 0 rgba(55,68,111,.14)}
  .error-message,.success-message{max-width:500px;margin-top:20px;margin-right:auto;margin-left:auto;border-radius:6px}
  .error-message{padding:20px;background-color:#ffe9e9;color:#ff3b73}
  .success-message{background-color:#eff3fb;color:#37446f}
  .container-2,.post-container,.title-container-2{margin-right:auto;margin-left:auto}
  .large-avatar{background-position:50% 50%;background-repeat:no-repeat}
  .paragraph-20{margin-bottom:20px}
  .main-grid-2{grid-column-gap:30px}
  .section-2.hero{-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr;-ms-grid-rows:auto auto;grid-template-rows:auto auto;grid-auto-columns:1fr}
  .post-container{width:100%;max-width:770px;margin-top:60px;padding-right:0;padding-left:0}
  .inline-text{display:inline;color:#8087a6;font-size:14px;line-height:20px}
  .h3-2,.h3-3,.h3-4,.h3-5{font-size:24px;line-height:32px;font-weight:700}
  .industries.section{margin-bottom:0;padding-top:10px;padding-bottom:20px}
  .container-2.sample,.section-2{padding-bottom:60px}
  .section-2{position:relative;overflow:hidden;margin-bottom:60px;padding-top:60px}
  .section-2.padding-bottom{margin-top:60px;margin-bottom:60px;padding-top:60px;padding-bottom:60px;background-color:transparent}
  .section-2.padding-bottom.blog-post{padding-top:60px;background-color:#f0f4fb}
  .section-2.grey,.section-2.padding-bottom.grey{background-color:#eff3fb}
  .section-2.hero{display:block;margin-bottom:0;padding-top:140px;padding-bottom:120px}
  .section-2.osm,.section-2.sample{padding-top:0;margin-bottom:0}
  .section-2.grey.hero-grey{padding-top:120px;padding-bottom:120px}
  .section-2.grey._60{padding-bottom:30px}
  .section-2.grey_grad{background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),color-stop(50%,rgba(239,243,251,.5)),to(#fff));background-image:linear-gradient(180deg,#fff,rgba(239,243,251,.5) 50%,#fff)}
  .section-2.grey_grad.anim{background-image:url(/assets/images/footer-shape_anim.svg),-webkit-gradient(linear,left top,left bottom,from(#fff),color-stop(50%,rgba(239,243,251,.5)),to(#fff));background-image:url(/assets/images/footer-shape_anim.svg),linear-gradient(180deg,#fff,rgba(239,243,251,.5) 50%,#fff);background-position:0 100%,0 0}
  .section-2.line{background-image:url(/assets/images/footer-shape_anim.svg);background-position:0 100%;background-size:contain;background-repeat:no-repeat}
  .section-2.osm{padding-bottom:0}
  .div-block-2,.small-feature-2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}
  .paragraph-10{text-align:left}
  .h3-2.not-margin{margin-top:0;margin-bottom:0;margin-left:.5em}
  .h3-2.count{font-size:32px;font-weight:700}
  .paragraph-10{margin-bottom:10px}
  .link-2{padding:20px;color:#4e74ff;font-weight:700;text-decoration:none}
  .link-2.w--current{margin-right:0;padding:20px}
  .paragraph-28{margin-top:10px}
  .div-block-2{display:flex;margin-top:auto;margin-bottom:auto;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
  .div-block-16{margin-top:60px}
  .small-feature-2{display:flex;max-width:470px;padding-top:4px;padding-bottom:4px}
  .small-feature-2.contacts{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;color:#eff3fb}
  .pricing-card-v-1-2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;min-width:280px;padding:30px 30px 40px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;border-radius:10px;background-color:#fff;box-shadow:0 30px 50px 0 rgba(55,68,111,.1)}
  .image-42{min-width:24px}
  .grid-5,.title-container-2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}
  .container-2{width:100%;max-width:1200px;padding-right:15px;padding-left:15px;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
  .title-container-2{display:flex;max-width:770px;margin-bottom:30px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:center}
  .dropdown-list-2.w--open{display:block}
  .title-container-2.not-margin{margin-bottom:40px}
  .dropdown-toggle-2{padding-right:40px}
  .text-block-6{color:#4e74ff;font-weight:700}
  .icon{position:absolute;margin-right:20px;color:#4e74ff;font-weight:700}
  .dropdown-list-2{border-top-right-radius:5px;border-bottom-left-radius:5px;border-bottom-right-radius:5px;background-color:#fff}
  .dropdown-link-2.w--current{border-radius:5px}
  .dropdown-link-2.last,.dropdown-link-2.medium{-webkit-transition-property:none;transition-property:none;color:#4e74ff}
  .dropdown-link-2.first{border-top-right-radius:5px;-webkit-transition-property:none;transition-property:none;color:#4e74ff}
  .dropdown-link-2.first:hover{border-top-right-radius:5px;color:#fff}
  .dropdown-link-2.last:hover{border-radius:0 0 5px 5px;background-color:#4e74ff;color:#fff}
  .dropdown.pc:hover{background-color:#4e74ff}
  .h3-5.not-margin{margin-top:0;text-decoration:none}
  .div-block-9{grid-column-gap:16px;grid-row-gap:16px;-ms-grid-columns:1fr 1fr 1fr;grid-template-columns:1fr 1fr 1fr;grid-auto-columns:1fr}
  .link-block{color:#37446f;text-decoration:none}
  .simple-title{margin-bottom:60px;text-align:center}
  .div-block-9,.grid-5{-ms-grid-rows:auto;grid-template-rows:auto}
  .div-block-9{display:-ms-grid;display:grid}
  .paragraph-21{padding-bottom:20px;text-align:center}
  .grid-5{display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr}
  .div-block-10,.div-block-11{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}
  .div-block-10{display:flex;-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}
  .main-grid-2,.my-grid-4{display:-ms-grid;grid-row-gap:30px;-ms-grid-rows:auto;grid-template-rows:auto}
  .link-block-4.second{margin-left:10px;padding-left:10px}
  .text-block-8{margin-right:10px;padding-right:10px;border-right:1px solid #3762ff}
  .text-block-9{color:#8087a6}
  .link-5,.paragraph-24,.paragraph-25{color:#eff3fb}
  .list{list-style-type:disc}
  .list._600{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;font-weight:600}
  .main-grid-2{display:grid;width:100%;grid-auto-columns:1fr;-ms-grid-columns:1fr 1fr 1fr 1fr;grid-template-columns:1fr 1fr 1fr 1fr}
  .custom-grid-3,.my-grid-4{width:100%;grid-column-gap:30px;-ms-grid-columns:1fr 1fr 1fr;grid-template-columns:1fr 1fr 1fr;grid-auto-columns:1fr}
  .my-grid-4{display:grid}
  .custom-grid-3{display:-ms-grid;display:grid;-ms-grid-rows:auto auto auto auto auto auto;grid-template-rows:auto auto auto auto auto auto}
  .div-block-11{display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-justify-content:space-around;-ms-flex-pack:distribute;justify-content:space-around}
  .blog_anounce,.div-block-15{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}
  .small-container-3,.small-container-3-noa,.solutions{-webkit-box-orient:vertical;-webkit-box-direction:normal}
  .paragraph-24{font-size:14px}
  #w-node-_2adddf46-15c1-a429-9909-9f8be30055b0-87679205,#w-node-_2adddf46-15c1-a429-9909-9f8be30055b0-d9a31d37,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a15-2ce6f2d2,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a15-3870e562,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a15-3e539c03,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a15-94f296de,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a15-e09c52e1,#w-node-_874e62fb-93fe-0f80-c1ac-976fc334068c-665023cf,.div-block-13,.div-block-14{-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}
  .link-5{font-weight:700;text-decoration:none}
  .link-5:hover{color:#dee2ef}
  .div-block-15{display:flex;min-height:4em;padding-bottom:20px;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
  .image-33{max-width:48px}
  .div-block-16{display:block;margin-right:auto;margin-left:auto;text-align:center}
  .small-container-no-anim.hero{max-width:480px}
  .blog_anounce{display:flex;grid-auto-columns:1fr;-ms-grid-columns:1fr;grid-template-columns:1fr;-ms-grid-rows:auto;grid-template-rows:auto}
  .collection-list,.div-block-18{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}
  .collection-list{display:flex;grid-auto-columns:1fr;-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr;-ms-grid-rows:auto auto;grid-template-rows:auto auto}
  .div-block-18{display:flex;max-height:3em;margin-bottom:10px;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
  .image-35{max-width:3em;margin-right:1em;padding-top:.25em;padding-bottom:.25em;-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;-webkit-box-flex:0;-webkit-flex:0 auto;-ms-flex:0 auto;flex:0 auto;border-radius:10px;background-color:#eff0ff;box-shadow:1px 1px 3px 0 #c5cee4}
  .solutions,.wwcd{background-color:#fff}
  .heading-3{margin-top:auto;margin-bottom:auto}
  .image-36{width:110%;max-width:110%;-o-object-fit:fill;object-fit:fill}
  .small-container-3,.small-container-3-noa{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;max-width:470px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}
  .large-avatar{width:124px;height:124px;margin-bottom:24px;border-radius:100%;background-image:url(/assets/images/vitaly.jpg);background-size:cover}
  .team-grid,.two-col{width:100%;grid-auto-columns:1fr;grid-column-gap:30px}
  .button-2,.solutions,.wwcd{border-radius:4px}
  .large-avatar.avatar-2{background-image:url(/assets/images/roman.jpg)}
  .large-avatar.avatar-3{background-image:url(/assets/images/andrey.png)}
  .team-grid{display:-ms-grid;display:grid;margin-right:auto;margin-left:auto;grid-row-gap:50px;-ms-grid-columns:1fr 1fr 1fr;grid-template-columns:1fr 1fr 1fr;-ms-grid-rows:auto;grid-template-rows:auto}
  .div-block-19,.two-col{display:-ms-grid;-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr}
  .small-container-3-noa.center{margin-right:auto;margin-left:auto;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:center}
  .two-col{display:grid;justify-items:end;grid-row-gap:30px;-ms-grid-rows:auto;grid-template-rows:auto}
  .div-block-19{grid-column-gap:16px;grid-row-gap:16px;-ms-grid-rows:auto;grid-template-rows:auto}
  .image-37,.image-38{max-width:75%}
  .div-block-19{display:grid;grid-auto-columns:1fr}
  .two-col-grid-30{display:-ms-grid;grid-auto-columns:1fr}
  .div-block-24,.solutions{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}
  .image-39{max-height:3.5em;margin-right:10px}
  .div-block-24{display:flex;min-height:3.75em;margin-bottom:10px;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
  .heading-6{margin-top:0;margin-bottom:0;font-size:20px}
  .wwcd{padding:20px;box-shadow:0 30px 50px 0 rgba(55,68,111,.14)}
  .two-col-grid-30{display:grid;width:100%;margin-top:30px;margin-bottom:30px;padding-top:30px;padding-bottom:30px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;justify-items:stretch;-webkit-box-align:start;-webkit-align-items:start;-ms-flex-align:start;align-items:start;grid-column-gap:30px;grid-row-gap:30px;-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr;-ms-grid-rows:1fr;grid-template-rows:1fr}
  .wwcd3{display:-ms-grid}
  .div-block-25,.listwwcd{padding-top:10px}
  .listwwcd,.wwcd3{grid-column-gap:16px;grid-row-gap:16px;-ms-grid-rows:auto;grid-template-rows:auto;grid-auto-columns:1fr}
  .wwcd3{display:grid;margin-bottom:30px;-ms-grid-columns:1fr 1fr 1fr;grid-template-columns:1fr 1fr 1fr}
  .image-40._140{width:140%;max-width:140%}
  .listwwcd{display:-ms-grid;display:grid;-ms-grid-columns:1fr 1fr 1fr;grid-template-columns:1fr 1fr 1fr}
  .prdesc p{margin-bottom:10px}
  .div-block-26{text-align:center; padding-top:20px}
  .link-6{color:#3762ff;font-weight:700;text-decoration:underline}
  .link-6:hover{color:#4e74ff;text-decoration:underline}
  .solutions{display:flex;padding:30px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;box-shadow:0 16px 24px 0 rgba(55,68,111,.14);-webkit-transition:z-Index .1s;transition:z-Index .1s;-o-object-fit:fill;object-fit:fill}
  .collection-item{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}
  .html-embed{margin:0;padding:0}
  @media screen and (max-width:991px){
    .burger-icon,.dropdown-toggle-2{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox}
    .dropdown-link-2,.icon,.link-2,.text-block-6{color:#4e74ff}
    .nav-menu-lbg{box-shadow:0 20px 60px 0 rgba(55,68,111,.4)}
    .buttons-container,.div-block-13,.div-block-14,.primary-medium-button.margin-top,.primary-small-button.white.sample{margin-right:auto;margin-left:auto}
    .navbar-container,.primary-small-button.white{background-color:#fff}
    .middle-burger-line{width:28px;height:2px;margin-top:6px;margin-bottom:6px;padding-right:0;padding-bottom:0;border-radius:20px;background-color:#37446f}
    .dropdown-link-2.first:hover,.dropdown-link-2.last,.dropdown-link-2.last:hover,.dropdown-link-2.medium,.dropdown-list-2.w--open,.nav-menu-lbg{border-radius:0}
    .buttons-container,.menu-button.w--open{background-color:transparent}
    .buttons-container{padding-top:14px;padding-bottom:14px;padding-left:0;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}
    .dropdown-toggle-2{display:flex}
    .menu-button{padding:0}
    .dropdown-toggle-2:hover,.link-2:hover,.primary-small-button.white.sample:hover{background-color:#4e74ff}
    .nav-menu-lbg{display:block;padding-top:20px;padding-bottom:20px;-webkit-align-content:stretch;-ms-flex-line-pack:stretch;align-content:stretch;background-color:#fff;text-align:left}
    .bottom-burger-line,.top-burger-line{width:28px;height:2px;padding-right:0;padding-bottom:0;border-radius:20px;background-color:#37446f}
    .dropdown-link-2,.dropdown-link-2:hover{border-radius:5px}
    .primary-small-button.white:hover{background-color:#3762ff}
    .primary-small-button.white.sample{margin-bottom:20px;background-color:#fff}
    .navigation{position:absolute;left:0;top:0;right:0;bottom:auto}
    .burger-icon{position:relative;z-index:400;display:flex;width:36px;height:36px;padding:4px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
    .medium-container.center,.pricing-grid{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;-webkit-box-orient:vertical;-webkit-box-direction:normal}
    .section.home-hero{height:auto;margin-bottom:0;padding-bottom:60px}
    .section-2.hero,.section.hero{padding-top:100px}
    .primary-medium-button.margin-top{margin-bottom:20px}
    .text-field.contact._450{min-width:300px}
    .container.div-block-11{-ms-grid-columns:1fr 1fr 1fr;grid-template-columns:1fr 1fr 1fr;-ms-grid-rows:auto;grid-template-rows:auto}
    .medium-container.center{display:flex;padding-right:15px;padding-left:15px;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
    .two-col-grid,.two-col-grid-30{justify-items:center;-ms-grid-columns:1fr;grid-template-columns:1fr}
    .small-container-no-anim.hero,.small-container.hero{margin-bottom:30px;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:center}
    .main-image{width:50%}
    .main-image.no_anim{width:70%}
    .wwcd3{-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr;-ms-grid-rows:auto auto;grid-template-rows:auto auto}
    .logotype{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center}
    .small-feature,.small-feature-2{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
    .pricing-card-v-1{width:60%;min-width:0;-webkit-align-self:auto;-ms-flex-item-align:auto;-ms-grid-row-align:auto;align-self:auto}
    .accordion{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
    .pricing-card-v-2{width:60%;-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}
    .pricing-grid{display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-align-content:center;-ms-flex-line-pack:center;align-content:center;-ms-grid-columns:1fr;grid-template-columns:1fr;text-align:left}
    .div-block-11,.posts-grid,.small-container-2{-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr}
    .div-block-11,.small-container-2{display:-ms-grid;display:grid;grid-auto-columns:1fr;grid-column-gap:16px;grid-row-gap:16px;-ms-grid-rows:auto auto;grid-template-rows:auto auto}
    .dropdown,.dropdown.mob,.link-2{display:block}
    .section-2._60{padding-top:0}
    .main-grid-2{-ms-grid-rows:auto auto;grid-template-rows:auto auto}
    .paragraph-4{text-align:center}
    .link-2{-webkit-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out}
    .link-2:hover{color:#fff}
    .dropdown-list-2{position:static}
    .dropdown.pc{display:none}
    .div-block-9,.team-grid{-ms-grid-columns:1fr 1fr 1fr;grid-template-columns:1fr 1fr 1fr}
    .custom-grid-3,.main-grid-2,.my-grid-4{-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr;grid-auto-columns:1fr}
    .my-grid-4{-ms-grid-rows:auto auto auto;grid-template-rows:auto auto auto}
    .custom-grid-3{-ms-grid-rows:auto auto auto auto;grid-template-rows:auto auto auto auto}
    .div-block-19,.two-col{-ms-grid-columns:1fr;grid-template-columns:1fr}
    .div-block-13{margin-top:20px}
    .blog_anounce.anounce{width:100%;padding-top:20px;-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch}
    .collection-list{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
    .div-block-17{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
    .two-col{display:-ms-grid;display:grid;justify-items:center;grid-auto-columns:1fr;grid-column-gap:30px;grid-row-gap:30px;-ms-grid-rows:auto auto;grid-template-rows:auto auto}
  }
  @media screen and (max-width:767px){
    .section.hero,.section.home-hero{padding-bottom:60px}
    .div-block-13,.dropdown{display:block}
    .div-block-13,.div-block-14{padding-left:20px}
    .buttons-container{background-color:transparent}
    .bottom-burger-line{padding-right:0;padding-bottom:0}
    .small-text,.small-text-2{line-height:24px}
    .section.home-hero{margin-bottom:0;padding-top:120px}
    .section.dark{background-size:880px}
    .text-field.contact._450{min-width:250px}
    .container{position:relative;padding-bottom:40px;-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start}
    .footer.dark{background-size:600px}
    .two-col,.two-col-grid,.two-col-grid-30{grid-auto-flow:row;-ms-grid-columns:1fr;grid-template-columns:1fr;-ms-grid-rows:auto;grid-template-rows:auto}
    .analytics-grid{-ms-grid-rows:auto auto;grid-template-rows:auto auto}
    .feature-icon-left{-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
    .pricing-card-v-1{width:70%}
    .pricing-card-v-2{width:70%;margin-top:20px;-webkit-box-ordinal-group:0;-webkit-order:-1;-ms-flex-order:-1;order:-1}
    .div-block-9,.posts-grid,.pricing-grid{-ms-grid-columns:1fr;grid-template-columns:1fr}
    .analytics-grid{grid-column-gap:16px;grid-row-gap:32px;-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr}
    .small-container-2{margin-bottom:20px}
    .section-2.padding-bottom{padding-bottom:0}
    .section-2.hero{padding-top:100px;padding-bottom:60px}
    .container-2{position:relative}
    .div-block-10{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
    .main-grid-2{justify-items:center;grid-auto-flow:row;-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr;-ms-grid-rows:auto auto;grid-template-rows:auto auto}
    .my-grid-4{justify-items:center;-ms-grid-columns:1fr;grid-template-columns:1fr;-ms-grid-rows:auto auto auto auto auto auto;grid-template-rows:auto auto auto auto auto auto}
    .custom-grid-3{justify-items:center;-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr}
    .div-block-13{padding-right:20px}
    .div-block-17{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}
    .team-grid{-ms-grid-columns:1fr;grid-template-columns:1fr;-ms-grid-rows:auto auto auto;grid-template-rows:auto auto auto}
  }
  .label-choise1,.pricing-header-item,.pricing-item,.pricing-table{position:relative}
  @media screen and (max-width:479px){
    .tabs-menu-v-3{-webkit-box-direction:normal}
    .rich-text,.small-feature,.small-feature.margin-top{max-width:100%}
    .div-block-9,.feature-icon.stat,.form,.two-col{grid-auto-columns:1fr}
    .buttons-container{background-color:transparent}
    .nav-menu-lbg{background-color:#fff}
    .h4{white-space:break-spaces}
    .h1{font-size:42px;line-height:46px}
    .section.home-hero{margin-bottom:0;padding-top:100px;padding-bottom:60px}
    .container,.rich-text,.section-2.padding-bottom{padding-bottom:0}
    .section.dark{background-size:700px}
    .tab-link-v-2-tab-1,.tab-link-v-2-tab-3,.title-container{padding-right:10px;padding-left:10px}
    .primary-medium-button.margin-top{margin-right:auto;margin-left:auto;text-align:left}
    .submit-button{width:30%}
    .text-field,.textarea{width:100%;min-width:0}
    .form{-ms-grid-columns:1fr;grid-template-columns:1fr}
    .primary-button{-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}
    .container{-webkit-align-self:flex-start;-ms-flex-item-align:start;align-self:flex-start}
    .blog_anounce.anounce,.medium-container.center{padding-right:0;padding-left:0}
    .rich-text{padding-top:0}
    .rich-text blockquote,.rich-text li,.rich-text p{font-size:16px;line-height:28px}
    .rich-text h2{font-size:26px}
    .analytics-grid,.two-col-grid,.two-col-grid-30,.wwcd3{-ms-grid-columns:1fr;grid-template-columns:1fr}
    .two-col-grid,.two-col-grid-30{width:100%;-ms-grid-rows:auto;grid-template-rows:auto}
    .feature-icon-left,.main-image,.main-image.no_anim,.pricing-card-v-1,.pricing-card-v-2{width:100%}
    .feature-icon.stat{grid-column-gap:16px;grid-row-gap:16px;-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr;-ms-grid-rows:auto auto;grid-template-rows:auto auto}
    .logotype{-o-object-fit:scale-down;object-fit:scale-down}
    .tabs-content{overflow:visible}
    .plus-icon{margin-left:10px}
    .accordion-container{-webkit-align-content:space-around;-ms-flex-line-pack:distribute;align-content:space-around}
    .form-block{width:100%;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
    .analytics-grid,.wwcd3{-ms-grid-rows:auto auto auto auto;grid-template-rows:auto auto auto auto}
    .my-grid-4,.small-container-2{-ms-grid-rows:auto auto auto auto auto;grid-template-rows:auto auto auto auto auto;-ms-grid-columns:1fr;grid-template-columns:1fr}
    .analytic{margin-bottom:20px}
    .team-member,.testimonial-v-3{margin-right:0;margin-left:0;box-shadow:0 4px 10px 0 rgba(55,68,111,.14)}
    .tabs-menu-v-3{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;-webkit-box-orient:horizontal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}
    .div-block-10,.dropdown,.link-2{display:block}
    .grid-5,.small-container-2{-webkit-flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal}
    .small-container-2{max-width:100%;-ms-flex-direction:column;flex-direction:column;-webkit-flex-wrap:nowrap;-ms-flex-wrap:nowrap;flex-wrap:nowrap}
    .section-2.hero{padding-top:100px}
    .section-2.grey._60{padding-top:60px}
    .link-2{color:#4e74ff}
    .div-block-16,.paragraph-28{margin-top:0}
    .div-block-18,.div-block-25,.text-block-8{margin-bottom:10px}
    .custom-grid-3,.main-grid-2,.team-grid,.two-col{-ms-grid-columns:1fr;grid-template-columns:1fr}
    .div-block-12,.link-block-4.second{padding-left:20px}
    .div-block-12,.div-block-14{padding-right:20px}
    .grid-5{-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1}
    .text-block-8{padding-bottom:10px;border-bottom:1px solid #3762ff;border-right-style:none}
    .list._600{padding-left:10px}
    .main-grid-2{padding-bottom:60px;-ms-grid-rows:auto auto auto auto;grid-template-rows:auto auto auto auto}
    .custom-grid-3{-ms-grid-rows:auto auto auto auto auto auto;grid-template-rows:auto auto auto auto auto auto}
    .div-block-11{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column}
    .div-block-13,.div-block-27{-webkit-box-ordinal-group:2;-webkit-order:1;-ms-flex-order:1;order:1}
    .div-block-17{display:none}
    .two-col{width:100%;-ms-grid-rows:auto auto;grid-template-rows:auto auto}
    .div-block-25{margin-top:10px}
    .listwwcd{-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr}
    .image-42{min-width:24px}
  }
  #w-node-_26038833-8b9d-bb2c-1362-f321c39eea7a-3599922e,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea7a-45e5ffc2,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea7a-c367b424,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea7a-ee235b9d,#w-node-_3f36255a-b585-51bb-06a4-05ee9b3a2599-2ce6f2d2,#w-node-_3f36255a-b585-51bb-06a4-05ee9b3a2599-ee235b9d,#w-node-_91d548b5-00e8-7d75-ec6d-1887573422e7-3599922e,#w-node-_91d548b5-00e8-7d75-ec6d-1887573422e7-c367b424,#w-node-_91d548b5-00e8-7d75-ec6d-1887573422e7-ee235b9d,#w-node-b136e67e-bc7e-385c-8b9a-95537e6acae1-45e5ffc2,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eace99-3599922e,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eace99-dc3f571f,#w-node-eb1e2fec-b7d7-6e77-1790-75e8b583ebb0-45e5ffc2{-ms-grid-column-span:1;grid-column-end:3;-ms-grid-column:2;grid-column-start:2;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1}
  #w-node-b136e67e-bc7e-385c-8b9a-95537e6acae2-45e5ffc2,#w-node-eb1e2fec-b7d7-6e77-1790-75e8b583ebb1-45e5ffc2{-ms-grid-column-align:end;justify-self:end}
  #w-node-_237b4ba7-71a9-fea9-03d8-677d58022eda-3599922e,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022eda-45e5ffc2,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022eda-c367b424,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022eda-ee235b9d,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f58-3599922e,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f58-45e5ffc2,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f58-c367b424,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f58-ee235b9d,#w-node-_3dca00ca-aa69-ac2f-a8f8-0346e95f01ce-2ce6f2d2,#w-node-_3dca00ca-aa69-ac2f-a8f8-0346e95f01ce-ee235b9d,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d225b-45e5ffc2,#w-node-bab700ed-6d3d-ea4a-9e35-6a68018c624c-2ce6f2d2,#w-node-bab700ed-6d3d-ea4a-9e35-6a68018c624c-ee235b9d,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eace99-2ce6f2d2,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eace99-ee235b9d{-ms-grid-column-span:3;grid-column-end:4;-ms-grid-column:1;grid-column-start:1;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1}
  #w-node-_237b4ba7-71a9-fea9-03d8-677d58022ef9-3599922e,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022ef9-45e5ffc2,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022ef9-c367b424,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022ef9-ee235b9d,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f77-3599922e,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f77-45e5ffc2,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f77-c367b424,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f77-ee235b9d,#w-node-_3dca00ca-aa69-ac2f-a8f8-0346e95f01d9-2ce6f2d2,#w-node-_3dca00ca-aa69-ac2f-a8f8-0346e95f01d9-ee235b9d,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2262-45e5ffc2,#w-node-bab700ed-6d3d-ea4a-9e35-6a68018c6256-2ce6f2d2,#w-node-bab700ed-6d3d-ea4a-9e35-6a68018c6256-ee235b9d,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eaceb8-2ce6f2d2,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eaceb8-ee235b9d{-ms-grid-column-span:3;grid-column-end:7;-ms-grid-column:4;grid-column-start:4;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1}
  #w-node-_237b4ba7-71a9-fea9-03d8-677d58022f18-3599922e,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f18-45e5ffc2,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f18-c367b424,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f18-ee235b9d,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f96-3599922e,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f96-45e5ffc2,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f96-c367b424,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f96-ee235b9d,#w-node-_3dca00ca-aa69-ac2f-a8f8-0346e95f01e3-2ce6f2d2,#w-node-_3dca00ca-aa69-ac2f-a8f8-0346e95f01e3-ee235b9d,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d226b-45e5ffc2,#w-node-bab700ed-6d3d-ea4a-9e35-6a68018c6260-2ce6f2d2,#w-node-bab700ed-6d3d-ea4a-9e35-6a68018c6260-ee235b9d,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eaced7-2ce6f2d2,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eaced7-ee235b9d{-ms-grid-column-span:3;grid-column-end:10;-ms-grid-column:7;grid-column-start:7;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1}
  #w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2273-45e5ffc2{-ms-grid-column-span:3;grid-column-end:7;-ms-grid-column:4;grid-column-start:4;-ms-grid-row-span:1;grid-row-end:3;-ms-grid-row:2;grid-row-start:2}
  #w-node-d961b05d-c5ab-a677-315f-35bc8a02aa84-45e5ffc2{-ms-grid-column-span:3;grid-column-end:4;-ms-grid-column:1;grid-column-start:1;-ms-grid-row-span:1;grid-row-end:3;-ms-grid-row:2;grid-row-start:2}
  #w-node-_237b4ba7-71a9-fea9-03d8-677d58022f37-3599922e,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f37-45e5ffc2,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f37-c367b424,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f37-ee235b9d,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022fb5-3599922e,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022fb5-45e5ffc2,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022fb5-c367b424,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022fb5-ee235b9d,#w-node-_9d1ea7ff-a73c-e982-6c88-81278ae9d3df-45e5ffc2,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eacef6-2ce6f2d2,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eacef6-ee235b9d{-ms-grid-column-span:3;grid-column-end:13;-ms-grid-column:10;grid-column-start:10;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1}
  #w-node-_18174b85-d512-76ae-d4b5-ed54ba107f57-45e5ffc2{-ms-grid-column-span:3;grid-column-end:10;-ms-grid-column:7;grid-column-start:7;-ms-grid-row-span:1;grid-row-end:3;-ms-grid-row:2;grid-row-start:2}
  #w-node-_720b3cf3-265b-060c-9987-b8a7ea9a6c59-45e5ffc2{-ms-grid-column-span:3;grid-column-end:13;-ms-grid-column:10;grid-column-start:10;-ms-grid-row-span:1;grid-row-end:3;-ms-grid-row:2;grid-row-start:2}
  #w-node-_26038833-8b9d-bb2c-1362-f321c39eea6e-3599922e,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea6e-45e5ffc2,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea6e-c367b424,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea6e-ee235b9d,#w-node-_3ac12318-0bab-3cf7-2c81-13674afcf375-3599922e,#w-node-_3ac12318-0bab-3cf7-2c81-13674afcf375-c367b424,#w-node-_3ac12318-0bab-3cf7-2c81-13674afcf375-ee235b9d,#w-node-_7c733c06-7115-4b1b-83fd-f097a760a90f-c367b424{-ms-grid-column-span:1;grid-column-end:2;-ms-grid-column:1;grid-column-start:1;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1}
  #w-node-_26038833-8b9d-bb2c-1362-f321c39eea86-3599922e,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea86-45e5ffc2,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea86-c367b424,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea86-ee235b9d{-ms-grid-column-span:1;grid-column-end:2;-ms-grid-column:1;grid-column-start:1;-ms-grid-row-span:1;grid-row-end:3;-ms-grid-row:2;grid-row-start:2}
  #w-node-_809756b9-6645-851a-f056-f1898582ecc0-3599922e,#w-node-_809756b9-6645-851a-f056-f1898582ecc0-45e5ffc2,#w-node-_809756b9-6645-851a-f056-f1898582ecc0-c367b424,#w-node-_809756b9-6645-851a-f056-f1898582ecc0-ee235b9d{-ms-grid-column-span:1;grid-column-end:3;-ms-grid-column:2;grid-column-start:2;-ms-grid-row-span:1;grid-row-end:3;-ms-grid-row:2;grid-row-start:2}
  #w-node-_020bae4e-2aaa-ae12-56a9-f641d37c153d-d37c1530,#w-node-_020bae4e-2aaa-ae12-56a9-f641d37c1543-d37c1530,#w-node-_020bae4e-2aaa-ae12-56a9-f641d37c154a-d37c1530,#w-node-_020bae4e-2aaa-ae12-56a9-f641d37c1551-d37c1530,#w-node-_5342d3bd-b843-9764-b6b0-76763825af97-45e5ffc2,#w-node-_5342d3bd-b843-9764-b6b0-76763825af9e-45e5ffc2,#w-node-_5342d3bd-b843-9764-b6b0-76763825afa5-45e5ffc2,#w-node-_5342d3bd-b843-9764-b6b0-76763825afb5-45e5ffc2,#w-node-_5342d3bd-b843-9764-b6b0-76763825afbc-45e5ffc2,#w-node-_5342d3bd-b843-9764-b6b0-76763825afc3-45e5ffc2,#w-node-_55812bf7-1518-c3ed-c817-348548c3a95c-d9a31d37,#w-node-_55812bf7-1518-c3ed-c817-348548c3a964-d9a31d37,#w-node-_55812bf7-1518-c3ed-c817-348548c3a96c-d9a31d37,#w-node-_55812bf7-1518-c3ed-c817-348548c3a974-d9a31d37,#w-node-_60289549-6ea6-b81d-4c3c-57f1d9e988a1-3fedec56,#w-node-_60289549-6ea6-b81d-4c3c-57f1d9e988af-3fedec56,#w-node-_60289549-6ea6-b81d-4c3c-57f1d9e988be-3fedec56,#w-node-_60289549-6ea6-b81d-4c3c-57f1d9e988ce-3fedec56,#w-node-_60289549-6ea6-b81d-4c3c-57f1d9e988de-3fedec56,#w-node-_60289549-6ea6-b81d-4c3c-57f1d9e988ee-3fedec56,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d225b-3599922e,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d225b-c367b424,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d225b-ee235b9d,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2262-3599922e,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2262-c367b424,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2262-ee235b9d,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d226b-3599922e,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d226b-c367b424,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d226b-ee235b9d,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2273-3599922e,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2273-c367b424,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2273-ee235b9d,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eace99-665023cf,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eace99-c367b424,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eaceb8-665023cf,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eaceb8-c367b424,#w-node-d4e73f4b-c10d-d25f-951e-27347a0df0a2-c367b424,#w-node-d961b05d-c5ab-a677-315f-35bc8a02aa84-3599922e,#w-node-d961b05d-c5ab-a677-315f-35bc8a02aa84-c367b424,#w-node-d961b05d-c5ab-a677-315f-35bc8a02aa84-ee235b9d,#w-node-fe376844-e4b3-0540-4e43-88909177e1a3-665023cf,#w-node-fe376844-e4b3-0540-4e43-88909177e1a3-c367b424{-ms-grid-column-span:1;grid-column-end:span 1;-ms-grid-column:span 1;grid-column-start:span 1;-ms-grid-row-span:1;grid-row-end:span 1;-ms-grid-row:span 1;grid-row-start:span 1}
  #w-node-_3e2a777f-c626-8c48-a040-431e109bc5f0-b6ce6576,#w-node-_61e23b95-34ff-8394-b396-840fb696fbef-3599922e,#w-node-_61e23b95-34ff-8394-b396-840fb696fbef-45e5ffc2,#w-node-_61e23b95-34ff-8394-b396-840fb696fbef-c367b424,#w-node-_61e23b95-34ff-8394-b396-840fb696fbef-ee235b9d,#w-node-_71290d00-5e7c-5ec6-508c-6869021b5c79-3599922e,#w-node-_71290d00-5e7c-5ec6-508c-6869021b5c79-45e5ffc2,#w-node-_71290d00-5e7c-5ec6-508c-6869021b5c79-c367b424,#w-node-_71290d00-5e7c-5ec6-508c-6869021b5c79-ee235b9d,#w-node-f2e3acfe-fcf0-4186-6556-dd7c67915bc5-54e5ffcb{-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch}
  #w-node-_71290d00-5e7c-5ec6-508c-6869021b5cb3-3599922e,#w-node-_71290d00-5e7c-5ec6-508c-6869021b5cb3-45e5ffc2,#w-node-_71290d00-5e7c-5ec6-508c-6869021b5cb3-c367b424,#w-node-_71290d00-5e7c-5ec6-508c-6869021b5cb3-ee235b9d{-ms-grid-column-span:1;grid-column-end:3;-ms-grid-column:2;grid-column-start:2;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1;-ms-grid-row-align:stretch;align-self:stretch}
  #w-node-_14d423a0-f31d-d4e9-caa4-ef71e9e0f285-5ae5ffcc,#w-node-_2f97fe99-6b17-77d7-4768-ad562081ab9e-d9a31d37,#w-node-_6bdf86f3-629e-5109-6735-d79b5709c615-5709c612,#w-node-c9faaf92-15e0-bd16-d6df-4b9e491e1237-491e1229,#w-node-e710ae47-36b0-d352-4857-49f30d5e1fc3-3599922e,#w-node-e710ae47-36b0-d352-4857-49f30d5e1fc3-45e5ffc2,#w-node-e710ae47-36b0-d352-4857-49f30d5e1fc3-c367b424,#w-node-e710ae47-36b0-d352-4857-49f30d5e1fc3-ee235b9d{-ms-grid-column-align:center;justify-self:center;-webkit-align-self:start;-ms-flex-item-align:start;-ms-grid-row-align:start;align-self:start}
  #w-node-c43bf44f-43ac-4ed4-e691-d28d846b4993-20e5ffdc{-ms-grid-row:span 1;grid-row-start:span 1;-ms-grid-row-span:1;grid-row-end:span 1;-ms-grid-column:span 8;grid-column-start:span 8;-ms-grid-column-span:8;grid-column-end:span 8}
  #w-node-_58064414-fd3b-7c34-95bc-3bf3988e459e-988e459b{-ms-grid-column-span:2;grid-column-end:3;-ms-grid-column:1;grid-column-start:1;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1}
  #w-node-_58064414-fd3b-7c34-95bc-3bf3988e45a2-988e459b{-ms-grid-column-span:2;grid-column-end:5;-ms-grid-column:3;grid-column-start:3;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1}
  #w-node-_58064414-fd3b-7c34-95bc-3bf3988e45af-988e459b{-ms-grid-column-span:2;grid-column-end:7;-ms-grid-column:5;grid-column-start:5;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1}
  #w-node-_58064414-fd3b-7c34-95bc-3bf3988e45bc-988e459b{-ms-grid-column-span:2;grid-column-end:9;-ms-grid-column:7;grid-column-start:7;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1}
  #w-node-_58064414-fd3b-7c34-95bc-3bf3988e45c9-988e459b{-ms-grid-column-span:1;grid-column-end:13;-ms-grid-column:12;grid-column-start:12;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1}
  #w-node-_7c733c06-7115-4b1b-83fd-f097a760a90f-3599922e,#w-node-_7c733c06-7115-4b1b-83fd-f097a760a90f-ee235b9d{-ms-grid-column-align:end;justify-self:end;-ms-grid-column-span:1;grid-column-end:2;-ms-grid-column:1;grid-column-start:1;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1}
  #w-node-_7c733c06-7115-4b1b-83fd-f097a760a910-3599922e,#w-node-_7c733c06-7115-4b1b-83fd-f097a760a910-c367b424,#w-node-_7c733c06-7115-4b1b-83fd-f097a760a910-ee235b9d{-ms-grid-row-align:start;align-self:start;-ms-grid-column-span:1;grid-column-end:3;-ms-grid-column:2;grid-column-start:2;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1}
  #w-node-_229ff4ee-6f94-d4e5-4519-d1c3d2ba2639-3599922e,#w-node-_2adddf46-15c1-a429-9909-9f8be30055b0-dc3f571f,#w-node-_39ca327f-91d2-26e0-42ac-7cab91a1aa5e-c367b424,#w-node-_39ca327f-91d2-26e0-42ac-7cab91a1aa5e-ee235b9d,#w-node-_9b7b715e-d756-6520-c963-408601131c19-3599922e,#w-node-b47054b9-2d5e-ba19-9c20-49e910cb52b4-c367b424,#w-node-b47054b9-2d5e-ba19-9c20-49e910cb52b4-ee235b9d,#w-node-b47054b9-2d5e-ba19-9c20-49e910cb52bc-c367b424,#w-node-b47054b9-2d5e-ba19-9c20-49e910cb52bc-ee235b9d,#w-node-b47054b9-2d5e-ba19-9c20-49e910cb52c4-3599922e,#w-node-b47054b9-2d5e-ba19-9c20-49e910cb52c4-c367b424,#w-node-b47054b9-2d5e-ba19-9c20-49e910cb52c4-ee235b9d,#w-node-bb2ae734-6c0e-dc93-ccb8-7d268d8e7139-3599922e{-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;-ms-grid-column-align:center;justify-self:center}
  #w-node-cf8f962b-e8ec-c31b-15ac-d37b6bf39fa3-3599922e,#w-node-cf8f962b-e8ec-c31b-15ac-d37b6bf39fa3-c367b424,#w-node-cf8f962b-e8ec-c31b-15ac-d37b6bf39fa3-ee235b9d,#w-node-ecfebe21-9023-a5b4-f6ae-31cb8d25a0fa-3599922e,#w-node-ecfebe21-9023-a5b4-f6ae-31cb8d25a0fa-c367b424,#w-node-ecfebe21-9023-a5b4-f6ae-31cb8d25a0fa-ee235b9d{-ms-grid-column-align:center;justify-self:center;-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}
  #w-node-b47054b9-2d5e-ba19-9c20-49e910cb52b0-3599922e,#w-node-b47054b9-2d5e-ba19-9c20-49e910cb52b0-c367b424,#w-node-b47054b9-2d5e-ba19-9c20-49e910cb52b0-ee235b9d{-ms-grid-column-align:start;justify-self:start;-ms-grid-column-span:1;grid-column-end:3;-ms-grid-column:2;grid-column-start:2;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1}
  #w-node-b47054b9-2d5e-ba19-9c20-49e910cb52b1-3599922e,#w-node-b47054b9-2d5e-ba19-9c20-49e910cb52b1-c367b424,#w-node-b47054b9-2d5e-ba19-9c20-49e910cb52b1-ee235b9d{-ms-grid-row-align:start;align-self:start;-ms-grid-column-align:end;justify-self:end;-ms-grid-column-span:1;grid-column-end:2;-ms-grid-column:1;grid-column-start:1;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1}
  #w-node-f8fb2d0e-b235-72be-2e94-0ec33af7e85a-3af7e7eb{-ms-grid-row-align:stretch;align-self:stretch;-ms-grid-column-span:1;grid-column-end:4;-ms-grid-column:3;grid-column-start:3;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1}
  #w-node-_150ced44-7aef-d578-1696-b9ce92ede785-d9a31d37,#w-node-_6a5a1f6a-43bd-6d03-3317-b717ca6e55aa-ca6e559e{-ms-grid-column-span:1;grid-column-end:2;-ms-grid-column:1;grid-column-start:1;-ms-grid-row-span:2;grid-row-end:3;-ms-grid-row:1;grid-row-start:1}
  #w-node-_150ced44-7aef-d578-1696-b9ce92ede78d-d9a31d37,#w-node-_6a5a1f6a-43bd-6d03-3317-b717ca6e55b2-ca6e559e{-ms-grid-column-span:1;grid-column-end:4;-ms-grid-column:3;grid-column-start:3;-ms-grid-row-span:2;grid-row-end:3;-ms-grid-row:1;grid-row-start:1}
  #w-node-_150ced44-7aef-d578-1696-b9ce92ede795-d9a31d37,#w-node-_6a5a1f6a-43bd-6d03-3317-b717ca6e55ba-ca6e559e{-ms-grid-column-span:1;grid-column-end:2;-ms-grid-column:1;grid-column-start:1;-ms-grid-row-span:2;grid-row-end:5;-ms-grid-row:3;grid-row-start:3}
  #w-node-_150ced44-7aef-d578-1696-b9ce92ede79d-d9a31d37,#w-node-_6a5a1f6a-43bd-6d03-3317-b717ca6e55c2-ca6e559e{-ms-grid-column-span:1;grid-column-end:4;-ms-grid-column:3;grid-column-start:3;-ms-grid-row-span:2;grid-row-end:5;-ms-grid-row:3;grid-row-start:3}
  #w-node-_150ced44-7aef-d578-1696-b9ce92ede7a5-d9a31d37,#w-node-_6a5a1f6a-43bd-6d03-3317-b717ca6e55ca-ca6e559e{-ms-grid-column-span:1;grid-column-end:2;-ms-grid-column:1;grid-column-start:1;-ms-grid-row-span:2;grid-row-end:7;-ms-grid-row:5;grid-row-start:5}
  #w-node-_150ced44-7aef-d578-1696-b9ce92ede7ad-d9a31d37,#w-node-_6a5a1f6a-43bd-6d03-3317-b717ca6e55d2-ca6e559e{-ms-grid-column-span:1;grid-column-end:4;-ms-grid-column:3;grid-column-start:3;-ms-grid-row-span:2;grid-row-end:7;-ms-grid-row:5;grid-row-start:5}
  #w-node-_150ced44-7aef-d578-1696-b9ce92ede7b5-d9a31d37,#w-node-_6a5a1f6a-43bd-6d03-3317-b717ca6e55da-ca6e559e{-ms-grid-column-span:1;grid-column-end:3;-ms-grid-column:2;grid-column-start:2;-ms-grid-row-span:6;grid-row-end:7;-ms-grid-row:1;grid-row-start:1;-ms-grid-row-align:center;align-self:center}
  #w-node-_0471faef-aed6-45d6-b011-7864af96379a-051ec07f{-ms-grid-column:2;grid-column-start:2;-ms-grid-column-span:1;grid-column-end:3;-ms-grid-row:1;grid-row-start:1;-ms-grid-row-span:1;grid-row-end:2}
  #w-node-_0471faef-aed6-45d6-b011-7864af9637a0-051ec07f{-ms-grid-column-align:start;justify-self:start}
  @media screen and (max-width:991px){
    #w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2273-3599922e,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2273-ee235b9d,#w-node-d961b05d-c5ab-a677-315f-35bc8a02aa84-3599922e,#w-node-d961b05d-c5ab-a677-315f-35bc8a02aa84-ee235b9d{grid-column-end:span 3;-ms-grid-column:span 3;grid-column-start:span 3;-ms-grid-column-span:3;-ms-grid-row:span 1;grid-row-start:span 1;-ms-grid-row-span:1;grid-row-end:span 1}
    #w-node-_2f97fe99-6b17-77d7-4768-ad562081ab9f-d9a31d37,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2262-3599922e,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2262-ee235b9d,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d226b-3599922e,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d226b-ee235b9d,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eace99-665023cf,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eace99-c367b424,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eaceb8-665023cf,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eaceb8-c367b424,#w-node-c9faaf92-15e0-bd16-d6df-4b9e491e1238-491e1229{-ms-grid-column:span 2;grid-column-start:span 2;-ms-grid-column-span:2;grid-column-end:span 2}
    #w-node-b136e67e-bc7e-385c-8b9a-95537e6acae1-051ec07f,#w-node-df08596e-c911-6bec-12d5-12aa462d934a-2ce6f2d2,#w-node-df08596e-c911-6bec-12d5-12aa462d934a-3599922e,#w-node-df08596e-c911-6bec-12d5-12aa462d934a-3870e562,#w-node-df08596e-c911-6bec-12d5-12aa462d934a-3e539c03,#w-node-df08596e-c911-6bec-12d5-12aa462d934a-3fedec56,#w-node-df08596e-c911-6bec-12d5-12aa462d934a-45e5ffc2,#w-node-df08596e-c911-6bec-12d5-12aa462d934a-665023cf,#w-node-df08596e-c911-6bec-12d5-12aa462d934a-87679205,#w-node-df08596e-c911-6bec-12d5-12aa462d934a-94f296de,#w-node-df08596e-c911-6bec-12d5-12aa462d934a-c367b424,#w-node-df08596e-c911-6bec-12d5-12aa462d934a-d9a31d37,#w-node-df08596e-c911-6bec-12d5-12aa462d934a-dc3f571f,#w-node-df08596e-c911-6bec-12d5-12aa462d934a-e09c52e1,#w-node-df08596e-c911-6bec-12d5-12aa462d934a-ee235b9d{-webkit-box-ordinal-group:-9998;-webkit-order:-9999;-ms-flex-order:-9999;order:-9999}
    #w-node-_0471faef-aed6-45d6-b011-7864af96379a-051ec07f,#w-node-_5342d3bd-b843-9764-b6b0-76763825afbc-45e5ffc2,#w-node-_9d1ea7ff-a73c-e982-6c88-81278ae9d3df-45e5ffc2,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2262-45e5ffc2,#w-node-b136e67e-bc7e-385c-8b9a-95537e6acae1-45e5ffc2,#w-node-eb1e2fec-b7d7-6e77-1790-75e8b583ebb0-45e5ffc2{-ms-grid-column:span 1;grid-column-start:span 1;-ms-grid-column-span:1;grid-column-end:span 1;-ms-grid-row:span 1;grid-row-start:span 1;-ms-grid-row-span:1;grid-row-end:span 1}
    #w-node-_0471faef-aed6-45d6-b011-7864af9637a0-051ec07f,#w-node-_14d423a0-f31d-d4e9-caa4-ef71e9e0f285-5ae5ffcc,#w-node-_2f97fe99-6b17-77d7-4768-ad562081ab9e-d9a31d37,#w-node-_6bdf86f3-629e-5109-6735-d79b5709c615-5709c612,#w-node-b136e67e-bc7e-385c-8b9a-95537e6acae2-45e5ffc2,#w-node-c9faaf92-15e0-bd16-d6df-4b9e491e1237-491e1229,#w-node-e710ae47-36b0-d352-4857-49f30d5e1fc3-3599922e,#w-node-e710ae47-36b0-d352-4857-49f30d5e1fc3-45e5ffc2,#w-node-e710ae47-36b0-d352-4857-49f30d5e1fc3-c367b424,#w-node-e710ae47-36b0-d352-4857-49f30d5e1fc3-ee235b9d,#w-node-eb1e2fec-b7d7-6e77-1790-75e8b583ebb1-45e5ffc2{-ms-grid-column-align:center;justify-self:center}
    #w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d225b-45e5ffc2{-ms-grid-column-span:1;grid-column-end:span 1;-ms-grid-column:span 1;grid-column-start:span 1;-ms-grid-row:span 1;grid-row-start:span 1;-ms-grid-row-span:1;grid-row-end:span 1}
    #w-node-_020bae4e-2aaa-ae12-56a9-f641d37c154a-d37c1530,#w-node-_020bae4e-2aaa-ae12-56a9-f641d37c1551-d37c1530,#w-node-_18174b85-d512-76ae-d4b5-ed54ba107f57-45e5ffc2,#w-node-_5342d3bd-b843-9764-b6b0-76763825afa5-45e5ffc2,#w-node-_5342d3bd-b843-9764-b6b0-76763825afc3-45e5ffc2,#w-node-_55812bf7-1518-c3ed-c817-348548c3a96c-d9a31d37,#w-node-_55812bf7-1518-c3ed-c817-348548c3a974-d9a31d37,#w-node-_60289549-6ea6-b81d-4c3c-57f1d9e988be-3fedec56,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d226b-45e5ffc2,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d226b-c367b424{-ms-grid-row:span 1;grid-row-start:span 1;-ms-grid-row-span:1;grid-row-end:span 1;-ms-grid-column:span 1;grid-column-start:span 1;-ms-grid-column-span:1;grid-column-end:span 1}
    #w-node-_720b3cf3-265b-060c-9987-b8a7ea9a6c59-45e5ffc2,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2273-45e5ffc2,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2273-c367b424{-ms-grid-column:span 1;grid-column-start:span 1;-ms-grid-row:span 1;grid-row-start:span 1;-ms-grid-row-span:1;grid-row-end:span 1;-ms-grid-column-span:1;grid-column-end:span 1}
    #w-node-_5342d3bd-b843-9764-b6b0-76763825afb5-45e5ffc2,#w-node-d961b05d-c5ab-a677-315f-35bc8a02aa84-45e5ffc2,#w-node-d961b05d-c5ab-a677-315f-35bc8a02aa84-c367b424{-ms-grid-column-span:1;grid-column-end:span 1;-ms-grid-row:span 1;grid-row-start:span 1;-ms-grid-row-span:1;grid-row-end:span 1;-ms-grid-column:span 1;grid-column-start:span 1}
    #w-node-_26038833-8b9d-bb2c-1362-f321c39eea6e-3599922e,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea6e-45e5ffc2,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea6e-c367b424,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea6e-ee235b9d{-ms-grid-column-span:7;grid-column-end:7}
    #w-node-_26038833-8b9d-bb2c-1362-f321c39eea7a-3599922e,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea7a-45e5ffc2,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea7a-c367b424,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea7a-ee235b9d,#w-node-_809756b9-6645-851a-f056-f1898582ecc0-3599922e,#w-node-_809756b9-6645-851a-f056-f1898582ecc0-45e5ffc2,#w-node-_809756b9-6645-851a-f056-f1898582ecc0-c367b424,#w-node-_809756b9-6645-851a-f056-f1898582ecc0-ee235b9d{-ms-grid-column:7;grid-column-start:7;-ms-grid-column-span:6;grid-column-end:13}
    #w-node-_26038833-8b9d-bb2c-1362-f321c39eea86-3599922e,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea86-45e5ffc2,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea86-c367b424,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea86-ee235b9d{-ms-grid-row:2;grid-row-start:2;-ms-grid-row-span:1;grid-row-end:3;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:6;grid-column-end:7}
    #w-node-_020bae4e-2aaa-ae12-56a9-f641d37c153d-d37c1530,#w-node-_5342d3bd-b843-9764-b6b0-76763825af97-45e5ffc2,#w-node-_55812bf7-1518-c3ed-c817-348548c3a95c-d9a31d37,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d225b-c367b424,#w-node-d4e73f4b-c10d-d25f-951e-27347a0df0a2-c367b424,#w-node-df08596e-c911-6bec-12d5-12aa462d9343-3fedec56{-ms-grid-column-span:1;grid-column-end:span 1;-ms-grid-column:span 1;grid-column-start:span 1;-ms-grid-row-span:1;grid-row-end:span 1;-ms-grid-row:span 1;grid-row-start:span 1}
    #w-node-_5342d3bd-b843-9764-b6b0-76763825af9e-45e5ffc2{-ms-grid-column:span 1;grid-column-start:span 1;-ms-grid-column-span:1;grid-column-end:span 1}
    #w-node-_61e23b95-34ff-8394-b396-840fb696fbef-3599922e,#w-node-_61e23b95-34ff-8394-b396-840fb696fbef-45e5ffc2,#w-node-_61e23b95-34ff-8394-b396-840fb696fbef-c367b424,#w-node-_61e23b95-34ff-8394-b396-840fb696fbef-ee235b9d{-webkit-align-self:stretch;-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch}
    #w-node-_71290d00-5e7c-5ec6-508c-6869021b5cb3-3599922e,#w-node-_71290d00-5e7c-5ec6-508c-6869021b5cb3-45e5ffc2,#w-node-_71290d00-5e7c-5ec6-508c-6869021b5cb3-c367b424,#w-node-_71290d00-5e7c-5ec6-508c-6869021b5cb3-ee235b9d{-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:1;grid-column-end:2;-ms-grid-row:1;grid-row-start:1;-ms-grid-row-span:1;grid-row-end:2}
    #w-node-_237b4ba7-71a9-fea9-03d8-677d58022eda-3599922e,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022eda-45e5ffc2,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022eda-c367b424,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022eda-ee235b9d,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f58-3599922e,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f58-45e5ffc2,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f58-c367b424,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f58-ee235b9d,#w-node-_3dca00ca-aa69-ac2f-a8f8-0346e95f01ce-2ce6f2d2,#w-node-_3dca00ca-aa69-ac2f-a8f8-0346e95f01ce-ee235b9d,#w-node-bab700ed-6d3d-ea4a-9e35-6a68018c624c-2ce6f2d2,#w-node-bab700ed-6d3d-ea4a-9e35-6a68018c624c-ee235b9d,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eace99-2ce6f2d2,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eace99-ee235b9d{-ms-grid-column-span:5;grid-column-end:5}
    #w-node-_237b4ba7-71a9-fea9-03d8-677d58022ef9-3599922e,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022ef9-45e5ffc2,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022ef9-c367b424,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022ef9-ee235b9d,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f77-3599922e,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f77-45e5ffc2,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f77-c367b424,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f77-ee235b9d,#w-node-_3dca00ca-aa69-ac2f-a8f8-0346e95f01d9-2ce6f2d2,#w-node-_3dca00ca-aa69-ac2f-a8f8-0346e95f01d9-ee235b9d,#w-node-bab700ed-6d3d-ea4a-9e35-6a68018c6256-2ce6f2d2,#w-node-bab700ed-6d3d-ea4a-9e35-6a68018c6256-ee235b9d,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eaceb8-2ce6f2d2,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eaceb8-ee235b9d{-ms-grid-column:5;grid-column-start:5;-ms-grid-column-span:4;grid-column-end:9}
    #w-node-_237b4ba7-71a9-fea9-03d8-677d58022f18-3599922e,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f18-45e5ffc2,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f18-c367b424,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f18-ee235b9d,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f96-3599922e,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f96-45e5ffc2,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f96-c367b424,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f96-ee235b9d,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eaced7-2ce6f2d2,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eaced7-ee235b9d{-ms-grid-row:2;grid-row-start:2;-ms-grid-row-span:1;grid-row-end:3;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:4;grid-column-end:5}
    #w-node-_237b4ba7-71a9-fea9-03d8-677d58022f37-3599922e,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f37-45e5ffc2,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f37-c367b424,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f37-ee235b9d,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022fb5-3599922e,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022fb5-45e5ffc2,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022fb5-c367b424,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022fb5-ee235b9d,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eacef6-2ce6f2d2,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eacef6-ee235b9d{-ms-grid-row:2;grid-row-start:2;-ms-grid-row-span:1;grid-row-end:3;-ms-grid-column:5;grid-column-start:5;-ms-grid-column-span:4;grid-column-end:9}
    #w-node-_58064414-fd3b-7c34-95bc-3bf3988e45c9-988e459b{-ms-grid-row:2;grid-row-start:2;-ms-grid-row-span:1;grid-row-end:3;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:2;grid-column-end:3}
    #w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d225b-3599922e,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d225b-ee235b9d{-ms-grid-column-span:2;grid-column-end:span 2;-ms-grid-column:span 2;grid-column-start:span 2;-ms-grid-row-span:1;grid-row-end:span 1;-ms-grid-row:span 1;grid-row-start:span 1}
    #w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2262-3599922e,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2262-ee235b9d{-ms-grid-row-span:1;grid-row-end:span 1;-ms-grid-row:span 1;grid-row-start:span 1}
    #w-node-_2f97fe99-6b17-77d7-4768-ad562081ab9f-d9a31d37,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d226b-3599922e,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d226b-ee235b9d,#w-node-c9faaf92-15e0-bd16-d6df-4b9e491e1238-491e1229{-ms-grid-row:span 1;grid-row-start:span 1;-ms-grid-row-span:1;grid-row-end:span 1}
    #w-node-_91d548b5-00e8-7d75-ec6d-1887573422e7-3599922e,#w-node-_91d548b5-00e8-7d75-ec6d-1887573422e7-c367b424,#w-node-_91d548b5-00e8-7d75-ec6d-1887573422e7-ee235b9d{-ms-grid-column:1;grid-column-start:1}
    #w-node-_3ac12318-0bab-3cf7-2c81-13674afcf375-3599922e,#w-node-_3ac12318-0bab-3cf7-2c81-13674afcf375-c367b424,#w-node-_3ac12318-0bab-3cf7-2c81-13674afcf375-ee235b9d{-ms-grid-column-span:3;grid-column-end:3}
    #w-node-_2adddf46-15c1-a429-9909-9f8be30055b0-87679205,#w-node-_2adddf46-15c1-a429-9909-9f8be30055b0-d9a31d37,#w-node-_2adddf46-15c1-a429-9909-9f8be30055b0-dc3f571f,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a15-2ce6f2d2,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a15-3870e562,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a15-3e539c03,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a15-94f296de,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a15-e09c52e1,#w-node-_874e62fb-93fe-0f80-c1ac-976fc334068c-665023cf,#w-node-b47054b9-2d5e-ba19-9c20-49e910cb52b0-3599922e,#w-node-b47054b9-2d5e-ba19-9c20-49e910cb52b0-c367b424,#w-node-b47054b9-2d5e-ba19-9c20-49e910cb52b0-ee235b9d{-ms-grid-column-align:start;justify-self:start}
    #w-node-_3dca00ca-aa69-ac2f-a8f8-0346e95f01e3-2ce6f2d2,#w-node-_3dca00ca-aa69-ac2f-a8f8-0346e95f01e3-ee235b9d,#w-node-bab700ed-6d3d-ea4a-9e35-6a68018c6260-2ce6f2d2,#w-node-bab700ed-6d3d-ea4a-9e35-6a68018c6260-ee235b9d{-ms-grid-row:2;grid-row-start:2;-ms-grid-row-span:1;grid-row-end:3;-ms-grid-column:3;grid-column-start:3;-ms-grid-column-span:4;grid-column-end:7}
    #w-node-_3f36255a-b585-51bb-06a4-05ee9b3a2599-2ce6f2d2,#w-node-_3f36255a-b585-51bb-06a4-05ee9b3a2599-ee235b9d{-ms-grid-column-span:4;grid-column-end:7;-ms-grid-column:3;grid-column-start:3}
    #w-node-_020bae4e-2aaa-ae12-56a9-f641d37c1543-d37c1530,#w-node-_55812bf7-1518-c3ed-c817-348548c3a964-d9a31d37,#w-node-_60289549-6ea6-b81d-4c3c-57f1d9e988af-3fedec56,#w-node-_60289549-6ea6-b81d-4c3c-57f1d9e988ce-3fedec56,#w-node-_60289549-6ea6-b81d-4c3c-57f1d9e988de-3fedec56,#w-node-_60289549-6ea6-b81d-4c3c-57f1d9e988ee-3fedec56,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2262-c367b424{-ms-grid-column:span 1;grid-column-start:span 1;-ms-grid-column-span:1;grid-column-end:span 1;-ms-grid-row-span:1;grid-row-end:span 1;-ms-grid-row:span 1;grid-row-start:span 1}
    #w-node-fe376844-e4b3-0540-4e43-88909177e1a3-665023cf,#w-node-fe376844-e4b3-0540-4e43-88909177e1a3-c367b424{-ms-grid-column:2;grid-column-start:2;-ms-grid-column-span:2;grid-column-end:4;-ms-grid-row-span:1;grid-row-end:3;-ms-grid-row:2;grid-row-start:2}
    #w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eace99-3599922e,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eace99-dc3f571f{-ms-grid-column-span:1;grid-column-end:3;-ms-grid-column:2;grid-column-start:2;-ms-grid-row:1;grid-row-start:1;-ms-grid-row-span:1;grid-row-end:2}
    #w-node-_60289549-6ea6-b81d-4c3c-57f1d9e988a1-3fedec56{-ms-grid-column-span:1;grid-column-end:2;-ms-grid-column:1;grid-column-start:1;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1}
    #w-node-_6bdf86f3-629e-5109-6735-d79b5709c616-5709c612{-ms-grid-column-span:2;grid-column-end:3;-ms-grid-column:1;grid-column-start:1;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1}
    #w-node-_150ced44-7aef-d578-1696-b9ce92ede785-d9a31d37,#w-node-_6a5a1f6a-43bd-6d03-3317-b717ca6e55aa-ca6e559e{-ms-grid-row-span:2;grid-row-end:2}
    #w-node-_150ced44-7aef-d578-1696-b9ce92ede78d-d9a31d37,#w-node-_6a5a1f6a-43bd-6d03-3317-b717ca6e55b2-ca6e559e{-ms-grid-row-span:1;grid-row-end:3;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:1;grid-column-end:2;-ms-grid-row:2;grid-row-start:2}
    #w-node-_150ced44-7aef-d578-1696-b9ce92ede795-d9a31d37,#w-node-_6a5a1f6a-43bd-6d03-3317-b717ca6e55ba-ca6e559e{-ms-grid-row:3;grid-row-start:3;-ms-grid-row-span:1;grid-row-end:4}
    #w-node-_150ced44-7aef-d578-1696-b9ce92ede79d-d9a31d37,#w-node-_6a5a1f6a-43bd-6d03-3317-b717ca6e55c2-ca6e559e{-ms-grid-row:4;grid-row-start:4;-ms-grid-row-span:1;grid-row-end:5;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:1;grid-column-end:2}
    #w-node-_150ced44-7aef-d578-1696-b9ce92ede7a5-d9a31d37,#w-node-_6a5a1f6a-43bd-6d03-3317-b717ca6e55ca-ca6e559e{-ms-grid-row:3;grid-row-start:3;-ms-grid-row-span:1;grid-row-end:4;-ms-grid-column:2;grid-column-start:2;-ms-grid-column-span:1;grid-column-end:3}
    #w-node-_150ced44-7aef-d578-1696-b9ce92ede7ad-d9a31d37,#w-node-_6a5a1f6a-43bd-6d03-3317-b717ca6e55d2-ca6e559e{-ms-grid-row:4;grid-row-start:4;-ms-grid-row-span:1;grid-row-end:5;-ms-grid-column:2;grid-column-start:2;-ms-grid-column-span:1;grid-column-end:3}
    #w-node-_150ced44-7aef-d578-1696-b9ce92ede7b5-d9a31d37,#w-node-_6a5a1f6a-43bd-6d03-3317-b717ca6e55da-ca6e559e{-ms-grid-row-span:2;grid-row-end:3;-ms-grid-row:1;grid-row-start:1}
    .lastorder{order:9999}
  }
  @media screen and (max-width:767px){
    #w-node-_020bae4e-2aaa-ae12-56a9-f641d37c153d-d37c1530,#w-node-_020bae4e-2aaa-ae12-56a9-f641d37c1543-d37c1530,#w-node-_020bae4e-2aaa-ae12-56a9-f641d37c154a-d37c1530,#w-node-_020bae4e-2aaa-ae12-56a9-f641d37c1551-d37c1530,#w-node-_2adddf46-15c1-a429-9909-9f8be3005580-87679205,#w-node-_2adddf46-15c1-a429-9909-9f8be3005580-d9a31d37,#w-node-_2adddf46-15c1-a429-9909-9f8be3005580-dc3f571f,#w-node-_2adddf46-15c1-a429-9909-9f8be30055b0-87679205,#w-node-_2adddf46-15c1-a429-9909-9f8be30055b0-d9a31d37,#w-node-_2adddf46-15c1-a429-9909-9f8be30055b0-dc3f571f,#w-node-_55812bf7-1518-c3ed-c817-348548c3a95c-d9a31d37,#w-node-_55812bf7-1518-c3ed-c817-348548c3a964-d9a31d37,#w-node-_55812bf7-1518-c3ed-c817-348548c3a96c-d9a31d37,#w-node-_55812bf7-1518-c3ed-c817-348548c3a974-d9a31d37,#w-node-_60289549-6ea6-b81d-4c3c-57f1d9e988a1-3fedec56,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a0f-2ce6f2d2,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a0f-3870e562,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a0f-3e539c03,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a0f-94f296de,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a0f-e09c52e1,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a15-2ce6f2d2,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a15-3870e562,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a15-3e539c03,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a15-94f296de,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a15-e09c52e1,#w-node-_874e62fb-93fe-0f80-c1ac-976fc334068c-665023cf,#w-node-_874e62fb-93fe-0f80-c1ac-976fc334068d-665023cf,#w-node-b47054b9-2d5e-ba19-9c20-49e910cb52b0-3599922e,#w-node-b47054b9-2d5e-ba19-9c20-49e910cb52b0-c367b424,#w-node-b47054b9-2d5e-ba19-9c20-49e910cb52b0-ee235b9d,#w-node-b47054b9-2d5e-ba19-9c20-49e910cb52b1-3599922e,#w-node-b47054b9-2d5e-ba19-9c20-49e910cb52b1-c367b424,#w-node-b47054b9-2d5e-ba19-9c20-49e910cb52b1-ee235b9d,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eace99-3599922e,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eace99-665023cf,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eace99-c367b424,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eace99-dc3f571f,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eaceb8-665023cf,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eaceb8-c367b424,#w-node-fe376844-e4b3-0540-4e43-88909177e1a3-665023cf,#w-node-fe376844-e4b3-0540-4e43-88909177e1a3-c367b424{-ms-grid-row:span 1;grid-row-start:span 1;-ms-grid-row-span:1;grid-row-end:span 1;-ms-grid-column-span:1;grid-column-end:span 1;-ms-grid-column:span 1;grid-column-start:span 1}
    #w-node-_26038833-8b9d-bb2c-1362-f321c39eea6e-3599922e,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea6e-45e5ffc2,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea6e-c367b424,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea6e-ee235b9d{-ms-grid-column-span:7;grid-column-end:7}
    #w-node-_26038833-8b9d-bb2c-1362-f321c39eea7a-3599922e,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea7a-45e5ffc2,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea7a-c367b424,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea7a-ee235b9d{-ms-grid-row:1;grid-row-start:1;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-column:7;grid-column-start:7}
    #w-node-_26038833-8b9d-bb2c-1362-f321c39eea86-3599922e,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea86-45e5ffc2,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea86-c367b424,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea86-ee235b9d{-ms-grid-row:2;grid-row-start:2;-ms-grid-row-span:1;grid-row-end:3;-ms-grid-column-span:7;grid-column-end:7}
    #w-node-_809756b9-6645-851a-f056-f1898582ecc0-3599922e,#w-node-_809756b9-6645-851a-f056-f1898582ecc0-45e5ffc2,#w-node-_809756b9-6645-851a-f056-f1898582ecc0-c367b424,#w-node-_809756b9-6645-851a-f056-f1898582ecc0-ee235b9d{-ms-grid-column-span:13;grid-column-end:13}
    #w-node-_71290d00-5e7c-5ec6-508c-6869021b5cb3-3599922e,#w-node-_71290d00-5e7c-5ec6-508c-6869021b5cb3-45e5ffc2,#w-node-_71290d00-5e7c-5ec6-508c-6869021b5cb3-c367b424,#w-node-_71290d00-5e7c-5ec6-508c-6869021b5cb3-ee235b9d{-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:1;grid-column-end:2;-ms-grid-row:2;grid-row-start:2;-ms-grid-row-span:1;grid-row-end:3}
    #w-node-_237b4ba7-71a9-fea9-03d8-677d58022eda-3599922e,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022eda-45e5ffc2,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022eda-c367b424,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022eda-ee235b9d,#w-node-_3dca00ca-aa69-ac2f-a8f8-0346e95f01ce-2ce6f2d2,#w-node-_3dca00ca-aa69-ac2f-a8f8-0346e95f01ce-ee235b9d,#w-node-bab700ed-6d3d-ea4a-9e35-6a68018c624c-2ce6f2d2,#w-node-bab700ed-6d3d-ea4a-9e35-6a68018c624c-ee235b9d,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eace99-2ce6f2d2,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eace99-ee235b9d{-ms-grid-column-span:9;grid-column-end:9}
    #w-node-_237b4ba7-71a9-fea9-03d8-677d58022ef9-3599922e,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022ef9-45e5ffc2,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022ef9-c367b424,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022ef9-ee235b9d,#w-node-_3dca00ca-aa69-ac2f-a8f8-0346e95f01d9-2ce6f2d2,#w-node-_3dca00ca-aa69-ac2f-a8f8-0346e95f01d9-ee235b9d,#w-node-bab700ed-6d3d-ea4a-9e35-6a68018c6256-2ce6f2d2,#w-node-bab700ed-6d3d-ea4a-9e35-6a68018c6256-ee235b9d,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eaceb8-2ce6f2d2,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eaceb8-ee235b9d{-ms-grid-row:2;grid-row-start:2;-ms-grid-row-span:1;grid-row-end:3;-ms-grid-column:1;grid-column-start:1}
    #w-node-_237b4ba7-71a9-fea9-03d8-677d58022f18-3599922e,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f18-45e5ffc2,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f18-c367b424,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f18-ee235b9d,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eaced7-2ce6f2d2,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eaced7-ee235b9d{-ms-grid-row:3;grid-row-start:3;-ms-grid-row-span:1;grid-row-end:4;-ms-grid-column-span:9;grid-column-end:9}
    #w-node-_237b4ba7-71a9-fea9-03d8-677d58022f37-3599922e,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f37-45e5ffc2,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f37-c367b424,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f37-ee235b9d,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eacef6-2ce6f2d2,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eacef6-ee235b9d{-ms-grid-row:4;grid-row-start:4;-ms-grid-row-span:1;grid-row-end:5;-ms-grid-column:1;grid-column-start:1}
    #w-node-_14d423a0-f31d-d4e9-caa4-ef71e9e0f285-5ae5ffcc,#w-node-_2f97fe99-6b17-77d7-4768-ad562081ab9e-d9a31d37,#w-node-_6bdf86f3-629e-5109-6735-d79b5709c615-5709c612,#w-node-c9faaf92-15e0-bd16-d6df-4b9e491e1237-491e1229,#w-node-e710ae47-36b0-d352-4857-49f30d5e1fc3-3599922e,#w-node-e710ae47-36b0-d352-4857-49f30d5e1fc3-45e5ffc2,#w-node-e710ae47-36b0-d352-4857-49f30d5e1fc3-c367b424,#w-node-e710ae47-36b0-d352-4857-49f30d5e1fc3-ee235b9d{-webkit-box-ordinal-group:-9998;-webkit-order:-9999;-ms-flex-order:-9999;order:-9999}
    #w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2273-3599922e,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2273-ee235b9d{-ms-grid-column:span 2;grid-column-start:span 2;-ms-grid-column-span:2;grid-column-end:span 2}
    #w-node-d961b05d-c5ab-a677-315f-35bc8a02aa84-3599922e,#w-node-d961b05d-c5ab-a677-315f-35bc8a02aa84-ee235b9d{-ms-grid-column:span 4;grid-column-start:span 4;-ms-grid-column-span:4;grid-column-end:span 4}
    #w-node-_7c733c06-7115-4b1b-83fd-f097a760a910-3599922e,#w-node-_7c733c06-7115-4b1b-83fd-f097a760a910-c367b424,#w-node-_7c733c06-7115-4b1b-83fd-f097a760a910-ee235b9d{-ms-grid-column:1;grid-column-start:1;-ms-grid-row:2;grid-row-start:2;-ms-grid-row-span:1;grid-row-end:3;-ms-grid-column-span:1;grid-column-end:2}
    #w-node-_3dca00ca-aa69-ac2f-a8f8-0346e95f01e3-2ce6f2d2,#w-node-_3dca00ca-aa69-ac2f-a8f8-0346e95f01e3-ee235b9d,#w-node-bab700ed-6d3d-ea4a-9e35-6a68018c6260-2ce6f2d2,#w-node-bab700ed-6d3d-ea4a-9e35-6a68018c6260-ee235b9d{-ms-grid-row:3;grid-row-start:3;-ms-grid-row-span:1;grid-row-end:4;-ms-grid-column-span:8;grid-column-end:9;-ms-grid-column:1;grid-column-start:1}
    #w-node-_3f36255a-b585-51bb-06a4-05ee9b3a2599-2ce6f2d2,#w-node-_3f36255a-b585-51bb-06a4-05ee9b3a2599-ee235b9d{-ms-grid-column-span:8;grid-column-end:9;-ms-grid-column:1;grid-column-start:1}
    #w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2273-c367b424,#w-node-d961b05d-c5ab-a677-315f-35bc8a02aa84-c367b424{-ms-grid-column:span 1;grid-column-start:span 1;-ms-grid-column-span:1;grid-column-end:span 1}
    #w-node-_150ced44-7aef-d578-1696-b9ce92ede7b5-d9a31d37,#w-node-_6a5a1f6a-43bd-6d03-3317-b717ca6e55da-ca6e559e{-ms-grid-row-span:3;grid-row-end:3}
    #w-node-_0471faef-aed6-45d6-b011-7864af9637a0-051ec07f,#w-node-b136e67e-bc7e-385c-8b9a-95537e6acae1-051ec07f{-webkit-align-self:center;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}
    .listwwcd{-ms-grid-columns:1fr;grid-template-columns:1fr}
  }
  @media screen and (max-width:479px){
    #w-node-_0471faef-aed6-45d6-b011-7864af9637a0-051ec07f,#w-node-b136e67e-bc7e-385c-8b9a-95537e6acae1-051ec07f{-webkit-box-ordinal-group:-9998;-ms-grid-row:span 1;grid-row-start:span 1;-ms-grid-row-span:1;grid-row-end:span 1;-ms-grid-column:span 1;grid-column-start:span 1;-ms-grid-column-span:1;grid-column-end:span 1}
    #w-node-_150ced44-7aef-d578-1696-b9ce92ede785-d9a31d37,#w-node-_150ced44-7aef-d578-1696-b9ce92ede78d-d9a31d37,#w-node-_150ced44-7aef-d578-1696-b9ce92ede795-d9a31d37,#w-node-_150ced44-7aef-d578-1696-b9ce92ede79d-d9a31d37,#w-node-_150ced44-7aef-d578-1696-b9ce92ede7a5-d9a31d37,#w-node-_150ced44-7aef-d578-1696-b9ce92ede7ad-d9a31d37,#w-node-_1e41b13c-e5d0-ae6c-4685-70d00cbf20f2-87679205,#w-node-_1e41b13c-e5d0-ae6c-4685-70d00cbf20f2-dc3f571f,#w-node-_1e41b13c-e5d0-ae6c-4685-70d00cbf20fa-87679205,#w-node-_1e41b13c-e5d0-ae6c-4685-70d00cbf20fa-dc3f571f,#w-node-_1e41b13c-e5d0-ae6c-4685-70d00cbf2104-87679205,#w-node-_1e41b13c-e5d0-ae6c-4685-70d00cbf2104-dc3f571f,#w-node-_3ed6c370-1cea-e223-0e7c-c0f405e7ee25-87679205,#w-node-_3ed6c370-1cea-e223-0e7c-c0f405e7ee25-d9a31d37,#w-node-_3ed6c370-1cea-e223-0e7c-c0f405e7ee25-dc3f571f,#w-node-_3ed6c370-1cea-e223-0e7c-c0f405e7ee2d-87679205,#w-node-_3ed6c370-1cea-e223-0e7c-c0f405e7ee2d-d9a31d37,#w-node-_3ed6c370-1cea-e223-0e7c-c0f405e7ee2d-dc3f571f,#w-node-_3ed6c370-1cea-e223-0e7c-c0f405e7ee37-87679205,#w-node-_3ed6c370-1cea-e223-0e7c-c0f405e7ee37-d9a31d37,#w-node-_3ed6c370-1cea-e223-0e7c-c0f405e7ee37-dc3f571f,#w-node-_5342d3bd-b843-9764-b6b0-76763825af9e-45e5ffc2,#w-node-_5342d3bd-b843-9764-b6b0-76763825afbc-45e5ffc2,#w-node-_5c13b3a0-aed5-d7fc-9e6f-af7381048e4d-665023cf,#w-node-_5c13b3a0-aed5-d7fc-9e6f-af7381048e56-665023cf,#w-node-_5c13b3a0-aed5-d7fc-9e6f-af7381048e5f-665023cf,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a18-2ce6f2d2,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a18-3870e562,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a18-3e539c03,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a18-e09c52e1,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a21-2ce6f2d2,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a21-3870e562,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a21-3e539c03,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a21-94f296de,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a21-e09c52e1,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a2a-2ce6f2d2,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a2a-3870e562,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a2a-3e539c03,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a2a-94f296de,#w-node-_63b6f2ff-5143-f6ed-edc3-130af6784a2a-e09c52e1,#w-node-_6a5a1f6a-43bd-6d03-3317-b717ca6e55aa-ca6e559e,#w-node-_6a5a1f6a-43bd-6d03-3317-b717ca6e55b2-ca6e559e,#w-node-_6a5a1f6a-43bd-6d03-3317-b717ca6e55ba-ca6e559e,#w-node-_6a5a1f6a-43bd-6d03-3317-b717ca6e55c2-ca6e559e,#w-node-_6a5a1f6a-43bd-6d03-3317-b717ca6e55ca-ca6e559e,#w-node-_6a5a1f6a-43bd-6d03-3317-b717ca6e55d2-ca6e559e,#w-node-_720b3cf3-265b-060c-9987-b8a7ea9a6c59-45e5ffc2,#w-node-_81beac7a-826c-1b3c-e5c7-4ec8a4277abc-665023cf,#w-node-_81beac7a-826c-1b3c-e5c7-4ec8a4277ac5-665023cf,#w-node-_81beac7a-826c-1b3c-e5c7-4ec8a4277ace-665023cf,#w-node-_9d1ea7ff-a73c-e982-6c88-81278ae9d3df-45e5ffc2,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2262-3599922e,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2262-45e5ffc2,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2262-c367b424,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2262-ee235b9d,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2273-3599922e,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2273-45e5ffc2,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2273-c367b424,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d2273-ee235b9d,#w-node-c9ace4f3-56e0-a7fe-d808-3d4e1f2d2ad8-2ce6f2d2,#w-node-c9ace4f3-56e0-a7fe-d808-3d4e1f2d2ad8-3870e562,#w-node-c9ace4f3-56e0-a7fe-d808-3d4e1f2d2ad8-3e539c03,#w-node-c9ace4f3-56e0-a7fe-d808-3d4e1f2d2ad8-94f296de,#w-node-c9ace4f3-56e0-a7fe-d808-3d4e1f2d2ad8-e09c52e1,#w-node-c9ace4f3-56e0-a7fe-d808-3d4e1f2d2ae1-2ce6f2d2,#w-node-c9ace4f3-56e0-a7fe-d808-3d4e1f2d2ae1-3870e562,#w-node-c9ace4f3-56e0-a7fe-d808-3d4e1f2d2ae1-3e539c03,#w-node-c9ace4f3-56e0-a7fe-d808-3d4e1f2d2ae1-94f296de,#w-node-c9ace4f3-56e0-a7fe-d808-3d4e1f2d2ae1-e09c52e1,#w-node-c9ace4f3-56e0-a7fe-d808-3d4e1f2d2aea-2ce6f2d2,#w-node-c9ace4f3-56e0-a7fe-d808-3d4e1f2d2aea-3870e562,#w-node-c9ace4f3-56e0-a7fe-d808-3d4e1f2d2aea-3e539c03,#w-node-c9ace4f3-56e0-a7fe-d808-3d4e1f2d2aea-94f296de,#w-node-c9ace4f3-56e0-a7fe-d808-3d4e1f2d2aea-e09c52e1{-ms-grid-column:span 1;grid-column-start:span 1;-ms-grid-column-span:1;grid-column-end:span 1;-ms-grid-row:span 1;grid-row-start:span 1;-ms-grid-row-span:1;grid-row-end:span 1}
    #w-node-_18174b85-d512-76ae-d4b5-ed54ba107f57-45e5ffc2,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d226b-45e5ffc2,#w-node-d961b05d-c5ab-a677-315f-35bc8a02aa84-45e5ffc2{-ms-grid-row:span 1;grid-row-start:span 1;-ms-grid-row-span:1;grid-row-end:span 1}
    #w-node-_020bae4e-2aaa-ae12-56a9-f641d37c153d-d37c1530,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea6e-3599922e,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea6e-45e5ffc2,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea6e-c367b424,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea6e-ee235b9d,#w-node-_2ea997ed-9c71-a5c2-1da7-ece23ecf248c-051ec07f,#w-node-_55812bf7-1518-c3ed-c817-348548c3a95c-d9a31d37{-ms-grid-column-span:2;grid-column-end:2}
    #w-node-_26038833-8b9d-bb2c-1362-f321c39eea7a-3599922e,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea7a-45e5ffc2,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea7a-c367b424,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea7a-ee235b9d{-ms-grid-column:1;grid-column-start:1;-ms-grid-row:2;grid-row-start:2;-ms-grid-row-span:1;grid-row-end:3;-ms-grid-column-span:1;grid-column-end:2}
    #w-node-_26038833-8b9d-bb2c-1362-f321c39eea86-3599922e,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea86-45e5ffc2,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea86-c367b424,#w-node-_26038833-8b9d-bb2c-1362-f321c39eea86-ee235b9d{-ms-grid-column-span:2;grid-column-end:2;-ms-grid-row:3;grid-row-start:3;-ms-grid-row-span:1;grid-row-end:4}
    #w-node-_809756b9-6645-851a-f056-f1898582ecc0-3599922e,#w-node-_809756b9-6645-851a-f056-f1898582ecc0-45e5ffc2,#w-node-_809756b9-6645-851a-f056-f1898582ecc0-c367b424,#w-node-_809756b9-6645-851a-f056-f1898582ecc0-ee235b9d{-ms-grid-column:1;grid-column-start:1;-ms-grid-row:4;grid-row-start:4;-ms-grid-row-span:1;grid-row-end:5;-ms-grid-column-span:1;grid-column-end:2}
    #w-node-_5342d3bd-b843-9764-b6b0-76763825af97-45e5ffc2,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eace99-665023cf,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eace99-c367b424,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eaceb8-665023cf,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eaceb8-c367b424,#w-node-fe376844-e4b3-0540-4e43-88909177e1a3-665023cf,#w-node-fe376844-e4b3-0540-4e43-88909177e1a3-c367b424{-ms-grid-column-span:1;grid-column-end:span 1;-ms-grid-column:span 1;grid-column-start:span 1;-ms-grid-row-span:1;grid-row-end:span 1;-ms-grid-row:span 1;grid-row-start:span 1}
    #w-node-_5342d3bd-b843-9764-b6b0-76763825afa5-45e5ffc2,#w-node-_5342d3bd-b843-9764-b6b0-76763825afb5-45e5ffc2,#w-node-_5342d3bd-b843-9764-b6b0-76763825afc3-45e5ffc2{-ms-grid-row:span 1;grid-row-start:span 1;-ms-grid-row-span:1;grid-row-end:span 1;-ms-grid-column-span:1;grid-column-end:span 1;-ms-grid-column:span 1;grid-column-start:span 1}
    #w-node-_71290d00-5e7c-5ec6-508c-6869021b5cb3-3599922e,#w-node-_71290d00-5e7c-5ec6-508c-6869021b5cb3-45e5ffc2,#w-node-_71290d00-5e7c-5ec6-508c-6869021b5cb3-c367b424,#w-node-_71290d00-5e7c-5ec6-508c-6869021b5cb3-ee235b9d{-ms-grid-row:1;grid-row-start:1;-ms-grid-row-span:1;grid-row-end:2}
    #w-node-_237b4ba7-71a9-fea9-03d8-677d58022eda-3599922e,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022eda-45e5ffc2,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022eda-c367b424,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022eda-ee235b9d,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022ef9-3599922e,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022ef9-45e5ffc2,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022ef9-c367b424,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022ef9-ee235b9d,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f18-3599922e,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f18-45e5ffc2,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f18-c367b424,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f18-ee235b9d,#w-node-_3dca00ca-aa69-ac2f-a8f8-0346e95f01ce-2ce6f2d2,#w-node-_3dca00ca-aa69-ac2f-a8f8-0346e95f01ce-ee235b9d,#w-node-_3dca00ca-aa69-ac2f-a8f8-0346e95f01d9-2ce6f2d2,#w-node-_3dca00ca-aa69-ac2f-a8f8-0346e95f01d9-ee235b9d,#w-node-_3dca00ca-aa69-ac2f-a8f8-0346e95f01e3-2ce6f2d2,#w-node-_3dca00ca-aa69-ac2f-a8f8-0346e95f01e3-ee235b9d,#w-node-_3f36255a-b585-51bb-06a4-05ee9b3a2599-2ce6f2d2,#w-node-_3f36255a-b585-51bb-06a4-05ee9b3a2599-ee235b9d,#w-node-_58064414-fd3b-7c34-95bc-3bf3988e459e-988e459b,#w-node-bab700ed-6d3d-ea4a-9e35-6a68018c624c-2ce6f2d2,#w-node-bab700ed-6d3d-ea4a-9e35-6a68018c624c-ee235b9d,#w-node-bab700ed-6d3d-ea4a-9e35-6a68018c6256-2ce6f2d2,#w-node-bab700ed-6d3d-ea4a-9e35-6a68018c6256-ee235b9d,#w-node-bab700ed-6d3d-ea4a-9e35-6a68018c6260-2ce6f2d2,#w-node-bab700ed-6d3d-ea4a-9e35-6a68018c6260-ee235b9d,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eace99-2ce6f2d2,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eace99-ee235b9d,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eaceb8-2ce6f2d2,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eaceb8-ee235b9d,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eaced7-2ce6f2d2,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eaced7-ee235b9d{-ms-grid-column-span:5;grid-column-end:5}
    #w-node-_237b4ba7-71a9-fea9-03d8-677d58022f37-3599922e,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f37-45e5ffc2,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f37-c367b424,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f37-ee235b9d,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022fb5-3599922e,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022fb5-45e5ffc2,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022fb5-c367b424,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022fb5-ee235b9d,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eacef6-2ce6f2d2,#w-node-c2c96c7f-1419-bfd8-3d4e-3929f5eacef6-ee235b9d{-ms-grid-row:4;grid-row-start:4;-ms-grid-row-span:1;grid-row-end:5;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:4;grid-column-end:5}
    #w-node-_237b4ba7-71a9-fea9-03d8-677d58022f77-3599922e,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f77-45e5ffc2,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f77-c367b424,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f77-ee235b9d{-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:4;grid-column-end:5;-ms-grid-row:2;grid-row-start:2;-ms-grid-row-span:1;grid-row-end:3}
    #w-node-_237b4ba7-71a9-fea9-03d8-677d58022f96-3599922e,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f96-45e5ffc2,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f96-c367b424,#w-node-_237b4ba7-71a9-fea9-03d8-677d58022f96-ee235b9d{-ms-grid-row:3;grid-row-start:3;-ms-grid-row-span:1;grid-row-end:4}
    #w-node-_14d423a0-f31d-d4e9-caa4-ef71e9e0f285-5ae5ffcc,#w-node-_2f97fe99-6b17-77d7-4768-ad562081ab9e-d9a31d37,#w-node-_6bdf86f3-629e-5109-6735-d79b5709c615-5709c612,#w-node-c9faaf92-15e0-bd16-d6df-4b9e491e1237-491e1229,#w-node-e710ae47-36b0-d352-4857-49f30d5e1fc3-3599922e,#w-node-e710ae47-36b0-d352-4857-49f30d5e1fc3-45e5ffc2,#w-node-e710ae47-36b0-d352-4857-49f30d5e1fc3-c367b424,#w-node-e710ae47-36b0-d352-4857-49f30d5e1fc3-ee235b9d{-ms-grid-column-span:1;grid-column-end:span 1;-ms-grid-column:span 1;grid-column-start:span 1;-ms-grid-row-span:1;grid-row-end:span 1;-ms-grid-row:span 1;grid-row-start:span 1;-ms-grid-column-align:center;justify-self:center;-ms-grid-row-align:start;align-self:start;-webkit-box-ordinal-group:-9998;-webkit-order:-9999;-ms-flex-order:-9999;order:-9999}
    #name-2.w-node-_6bdf86f3-629e-5109-6735-d79b5709c63d-5709c612{-ms-grid-column-span:1;grid-column-end:2;-ms-grid-column:1;grid-column-start:1;-ms-grid-row-span:1;grid-row-end:2;-ms-grid-row:1;grid-row-start:1}
    #Email-2.w-node-_6bdf86f3-629e-5109-6735-d79b5709c63e-5709c612{-ms-grid-column-span:1;grid-column-end:2;-ms-grid-column:1;grid-column-start:1;-ms-grid-row-span:1;grid-row-end:3;-ms-grid-row:2;grid-row-start:2}
    #Message-2.w-node-_6bdf86f3-629e-5109-6735-d79b5709c63f-5709c612{-ms-grid-column-span:1;grid-column-end:2;-ms-grid-column:1;grid-column-start:1;-ms-grid-row-span:1;grid-row-end:4;-ms-grid-row:3;grid-row-start:3}
    #w-node-_14d423a0-f31d-d4e9-caa4-ef71e9e0f2ac-5ae5ffcc,#w-node-_2f97fe99-6b17-77d7-4768-ad562081abc6-d9a31d37,#w-node-_839b41cc-0c65-b26d-811e-9948f90fafb5-3599922e,#w-node-_839b41cc-0c65-b26d-811e-9948f90fafb5-45e5ffc2,#w-node-_839b41cc-0c65-b26d-811e-9948f90fafb5-949f57d9,#w-node-_839b41cc-0c65-b26d-811e-9948f90fafb5-c367b424,#w-node-_839b41cc-0c65-b26d-811e-9948f90fafb5-ee235b9d,#w-node-c9faaf92-15e0-bd16-d6df-4b9e491e125f-491e1229{-ms-grid-column-span:1;grid-column-end:2;-ms-grid-column:1;grid-column-start:1;-ms-grid-row-span:1;grid-row-end:5;-ms-grid-row:4;grid-row-start:4}
    #w-node-_58064414-fd3b-7c34-95bc-3bf3988e45a2-988e459b{-ms-grid-row:2;grid-row-start:2;-ms-grid-row-span:1;grid-row-end:3;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:2;grid-column-end:3}
    #w-node-_58064414-fd3b-7c34-95bc-3bf3988e45af-988e459b{-ms-grid-row:2;grid-row-start:2;-ms-grid-row-span:1;grid-row-end:3;-ms-grid-column:3;grid-column-start:3;-ms-grid-column-span:2;grid-column-end:5}
    #w-node-_58064414-fd3b-7c34-95bc-3bf3988e45bc-988e459b{-ms-grid-row:3;grid-row-start:3;-ms-grid-row-span:1;grid-row-end:4;-ms-grid-column:1;grid-column-start:1;-ms-grid-column-span:2;grid-column-end:3}
    #w-node-_58064414-fd3b-7c34-95bc-3bf3988e45c9-988e459b{-ms-grid-column:3;grid-column-start:3;-ms-grid-column-span:2;grid-column-end:5;-ms-grid-row:3;grid-row-start:3;-ms-grid-row-span:1;grid-row-end:4}
    #w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d225b-3599922e,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d225b-c367b424,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d225b-ee235b9d,#w-node-d4e73f4b-c10d-d25f-951e-27347a0df0a2-c367b424{-ms-grid-column-span:1;grid-column-end:span 1;-ms-grid-column:span 1;grid-column-start:span 1}
    #w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d226b-3599922e,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d226b-c367b424,#w-node-_9f2064b4-ec9f-6a0b-d8ae-792f269d226b-ee235b9d,#w-node-d961b05d-c5ab-a677-315f-35bc8a02aa84-3599922e,#w-node-d961b05d-c5ab-a677-315f-35bc8a02aa84-c367b424,#w-node-d961b05d-c5ab-a677-315f-35bc8a02aa84-ee235b9d{-ms-grid-row:span 1;grid-row-start:span 1;-ms-grid-row-span:1;grid-row-end:span 1;-ms-grid-column:span 1;grid-column-start:span 1;-ms-grid-column-span:1;grid-column-end:span 1}
    #w-node-_6bdf86f3-629e-5109-6735-d79b5709c616-5709c612{-ms-grid-column-span:1;grid-column-end:span 1;-ms-grid-column:span 1;grid-column-start:span 1;-ms-grid-row:span 1;grid-row-start:span 1;-ms-grid-row-span:1;grid-row-end:span 1}
    .recaptcha-item{grid-column-end:2;-ms-grid-column:1;grid-column-start:1;-ms-grid-row-span:1;grid-row-end:5;-ms-grid-row:4;grid-row-start:4}
    #w-node-_6bdf86f3-629e-5109-6735-d79b5709c640-5709c612{-ms-grid-column-span:1;grid-column-end:2;-ms-grid-column:1;grid-column-start:1;-ms-grid-row-span:1;grid-row-end:6;-ms-grid-row:5;grid-row-start:5}
    #w-node-_150ced44-7aef-d578-1696-b9ce92ede7b5-d9a31d37,#w-node-_6a5a1f6a-43bd-6d03-3317-b717ca6e55da-ca6e559e{-ms-grid-column:span 1;grid-column-start:span 1;-ms-grid-column-span:1;grid-column-end:span 1;-ms-grid-row:span 2;grid-row-start:span 2;-ms-grid-row-span:2;grid-row-end:span 2}
    #w-node-_0471faef-aed6-45d6-b011-7864af9637a0-051ec07f,#w-node-b136e67e-bc7e-385c-8b9a-95537e6acae1-051ec07f{-webkit-order:-9999;-ms-flex-order:-9999;order:-9999}
    #w-node-_2ea997ed-9c71-a5c2-1da7-ece23ecf24ac-051ec07f{-ms-grid-column-span:2;grid-column-end:2;-ms-grid-row:span 1;grid-row-start:span 1;-ms-grid-row-span:1;grid-row-end:span 1}
    #w-node-_2f97fe99-6b17-77d7-4768-ad562081ab9f-d9a31d37,#w-node-c9faaf92-15e0-bd16-d6df-4b9e491e1238-491e1229{-ms-grid-column:span 1;grid-column-start:span 1;-ms-grid-column-span:1;grid-column-end:span 1}
  }
  .m30{margin:60px 0}
  .language-json::-webkit-scrollbar{width:10px}
  .language-json::-webkit-scrollbar-track{background:#272822;border-radius:.3em}
  .language-json::-webkit-scrollbar-thumb{background:#404040;border-radius:.3em}
  .language-json::-webkit-scrollbar-thumb:hover{background:#505050}
  ul.store_scraper{margin-top:1em}
  ul.store_scraper li{margin-bottom:.5em}
  .div-block-32{display:grid;padding:20px;grid-auto-columns:1fr;gap:0;grid-template-columns:1fr;grid-template-rows:auto auto auto auto;border-radius:6px;background-image:url(/assets/images/ctabg_1.webp);background-position:50% 100%;background-size:cover;background-repeat:repeat;background-attachment:scroll;color:#fff}
  .button-2{background-color:#fff;color:#273b8b!important;font-weight:700;display:inline-block;padding:9px 15px;border:0;line-height:inherit;text-decoration:none;justify-self:center}
  .pricing-header-item,.pricing-header-item.pricing-column-highlight{background-color:#293058}
  .pricing-table{display:flex;flex-direction:column;width:100%}
  .pricing-header,.pricing-row{display:flex;width:100%;border-bottom:1px solid #4e5fc5}
  .pricing-header-item,.pricing-item,.pricing-item-title{flex:1;padding:8px 5px;text-align:center}
  .pricing-header-item:last-child,.pricing-item:last-child{border-right:none}
  .pricing-header-item{font-size:17px;padding-top:20px;padding-bottom:5px;font-weight:900;color:#fff}
  .plus-minus{font-size:17px;font-weight:700}
  .pricing-header-item:first-child{background-color:#eff3fb;color:#37446f;border-right:1px solid #4e5fc5;min-width:210px}
  .label-choise1,.tooltip{color:#fff;font-weight:700}
  .pricing-item-title{background-color:#f0f4fb;text-align:left;font-weight:900;font-size:14px;display:flex;align-items:center;justify-content:flex-start;min-width:210px;border-right:1px solid #5e75ff}
  .pricing-item{background-color:#fff;font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center;}
  .fee-month-value{font-size:17px;font-weight:900}
  .price-button-container{text-align:center;margin-top:0;padding:20px 0}
  .price-button-container .submit-button{width:40%}
  .highlighted-column{border-left:2px solid #4e74ff;border-right:2px solid #4e74ff}
  .label-choise1{top:-10px;left:8%;padding:4px 5px;border-radius:4px;background-color:#4e74ff;font-size:10px;line-height:12px;width:90%}
  .chapter,.pricing-item:hover{background-color:#cfd0dc}
  .chapter{text-align:center;font-size:20px;border:none;justify-content:center;text-transform:uppercase}
  .sticky-header{position:fixed;top:74px;left:auto;right:auto;max-width:1171px;z-index:999;opacity:0;transition:opacity .3s}
  .sticky-header.visible{opacity:1}
  .pricing-item{transition:background-color .3s;flex-direction: column;}
  .pricing-column-highlight{transition:background-color .5s;background-color:#f0f4fb}
  .tooltip{display:inline-block;width:15.2px;left:16.1%;height:15.2px;line-height:15.2px;text-align:center;border-radius:50%;background-color:#4e74ff;font-size:12px;position:absolute}
  .tooltip .tooltip-text{visibility:hidden;width:350px;background-color:#293058;color:#fff;text-align:center;border-radius:4px;padding:8px;left:100%;z-index:10;opacity:0;transition:opacity .3s;font-size:14px;box-shadow:0 4px 6px rgba(0,0,0,.1);margin-left:10px}
  .tooltip .tooltip-text::after{content:'';left:-5px;border-width:5px;border-style:solid;border-color:transparent #293058 transparent transparent}
  .tooltip:hover .tooltip-text{visibility:visible;opacity:1}
  @media (max-width:1200px){
    .sticky-header{max-width:97.4%}
    .tooltip{width:15px;left:17.1%;height:15px;line-height:15px}
  }
  @media (max-width:1040px){
    .tooltip{left:15%}
  }
  @media (max-width:1024px){
    .pricing-header-item,.pricing-item,.pricing-item-title{width:100%;padding:6px 3px;border-right:none}
    .pricing-header-item{font-size:13px}
    .pricing-item-title{font-size:12px;font-weight:700;min-width:160px}
    .pricing-header-item:first-child{min-width:160px}
    .pricing-item{font-size:12px}
    .highlighted-column{border-left:none;border-right:none}
    .label-choise1{display:none}
    .fee-month-value{font-size:14px}
    .sticky-header{max-width:96.5%}
  }
  @media (max-width:910px){
    .tooltip{left:16.5%}
  }
  @media (max-width:768px){
    .sticky-header{max-width:95%}
    .pricing-header-item:first-child,.pricing-item-title{min-width:120px}
    .tooltip{width:14px;left:15%;height:14px;line-height:14px}
    .pricing-header-item,.pricing-item,.pricing-item-title{padding:6px 3px;font-size:12px}
    .label-choise1{display:none}
    .fee-month-value{font-size:13px}
    .pricing-header-item{text-align:center}
    .pricing-header-item:first-child{background-color:#f8f9fd}
  }
  @media (max-width:600px){
    .pricing-item,.pricing-item-title{padding:4px 2px;font-size:10px}
    .tooltip{left:18%}
  }
  .pricing-header-title{display:none;font-size:26px;text-align:center;font-weight:700;margin-bottom:10px}
  @media (max-width:490px){
    .tooltip{left:90%}
    .pricing-table{padding:5px;border:2px solid #b0b4ca}
    .pricing-header-title{display:block}
    .pricing-header{display:none}
    .pricing-row{display:flex;flex-direction:column;border-bottom:1px solid #4e5fc5;margin-bottom:15px}
    .pricing-item-title{font-size:15px}
    .pricing-item{display:flex;justify-content:space-between;align-items:center;padding:5px 10px;font-size:12px;border-bottom:1px solid #ececec}
    .pricing-item::before{content:attr(data-plan);font-weight:700;font-size:13px;margin-right:10px}
  }
  .price-button-container .submit-button{width:70%}
  .breadcrumbs{font-size: 13px;
    color: #8087a6;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: 10px;
    background: transparent !important;}
  .breadcrumbs a:hover{color: #eee; 
    text-decoration: underline;}
  .breadcrumbs span{color: #eee;
    font-weight: normal;}
  .breadcrumbs::before{content: "";}
  .breadcrumb{background: transparent !important;}
  ul.pagination{display: flex;
    list-style: none;
    margin: 2em 0;
    padding: 0;
    justify-content: center;}
  .wwcd p{margin-bottom: 1em;}
  #home img{height: auto;}
  #faq .container,#faq .title-container,#faq .faq-blocks,#faq .medium-container{margin: 0 auto !important;}
  #faq .faq-item{max-width: 800px;
        margin: 0 auto 2em;
        text-align: left;}
  .section-2{margin-bottom:0 !important;}
  #why_scrape ul,#about_platform ul{text-align:left;}
  .si-flag{pointer-events: auto; 
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 5px;
    border: 1.5px solid #dd2828; 
    border-radius: 999px;
    background: #fff;
    font-size: 10px; 
    line-height: 1.1;
    color: #dd2828;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
    user-select: none;
    cursor: pointer;}
  .si-flag small{font-size: 12px;}
  .si-flag.active{background: #dd2828;
    color: #fff;}
  .setup-discount-wrap{display:inline-flex; gap:10px; align-items:center;}
  .setup-discount-wrap .orig{color:#8b8fa3; text-decoration: line-through; font-size:.95em;}
  .setup-discount-wrap .new{font-weight:700;color:#dd2828;}
  .si-flag{position: relative;}
  .si-flag::after{content: attr(data-tip);
  position: absolute;
  left: 0;  
  bottom: 100%;
  transform: translateY(-6px);
  z-index: 9999;
  padding: 8px 10px;
  background: #111827;
  color: #fff;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.2;
  white-space: pre-line;
  width: 200px;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .15s ease, transform .15s ease, visibility .15s;}
  .si-flag::before{content: "";
  position: absolute;
  left: 14px; 
  bottom: 100%;
  transform: translateY(2px);
  border: 6px solid transparent;
  border-top-color: #111827;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, transform .15s ease, visibility .15s;}
  .si-flag:hover::after,.si-flag:hover::before{opacity: 1;
  visibility: visible;
  transform: translateY(-6px);}
  .choose-btn{display:inline-block;
  padding:10px 16px;
  border-radius:12px;
  background:#4e74ff;
  color:#fff; font-weight:700; text-decoration:none; line-height:1;
  box-shadow:0 6px 16px rgba(78,116,255,.25);
  transition:transform .15s ease, box-shadow .15s ease;}
  .choose-btn:hover{transform:translateY(-1px); box-shadow:0 10px 24px rgba(78,116,255,.28);}
  .choose-btn:active{transform:translateY(0); box-shadow:0 6px 16px rgba(78,116,255,.25);}
  .setup-discount-wrap{display:flex; flex-direction:row; align-items:center;}
  .setup-discount-wrap .orig{color:#8b8fa3; text-decoration:line-through;}
  .setup-discount-wrap .new{font-weight:700;}
  .purposes-grid--cards{display:grid;
    gap:24px;
    grid-template-columns:repeat(3,minmax(0,1fr));
    counter-reset: purpose;
    margin-top:24px;}
  @media (max-width:1100px){
    .purposes-grid--cards{grid-template-columns:repeat(2,minmax(0,1fr));}
  }
  @media (max-width:640px){
    .purposes-grid--cards{grid-template-columns:1fr;}
  }
  .purpose-card{position:relative;
    background:#fff;
    border-radius:18px;
    padding:28px 28px 26px;
    box-shadow:0 10px 30px rgba(16,24,40,.08);
    overflow:hidden;
    min-height:200px;}
  .purpose-card::before{counter-increment: purpose;
    content: counter(purpose, decimal-leading-zero);
    position:absolute;
    right:16px;
    bottom:-34px;
    font-size:160px;
    font-weight:800;
    line-height:1;
    letter-spacing:-0.04em;
    color:rgba(30,58,138,.06);
    pointer-events:none;}
  .purpose-title{margin:0 0 10px;
    font-size:22px;
    line-height:1.25;
    font-weight:800;
    color:#1f2a44;
    max-width: 22ch;}
  .purpose-text{margin:0;
    font-size:16px;
    line-height:1.6;
    color:#6b7280;
    max-width: 58ch;}
  .who-uses__grid{display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;}
  .who-uses__grid{display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;}
  @media (min-width: 992px){
    .who-uses__grid > :last-child:nth-child(3n+1){grid-column: 2 / span 1;}
  }
  .who-uses__item{background: #fff;
  border-radius: 16px;
  padding: 18px 20px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);

  display: flex;
  align-items: center;

  min-height: 72px;}
  .who-uses__title{margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.25;
  color: #1f2a44;}
  @media (max-width: 991px){
    .who-uses__grid{grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;}
  }
  @media (max-width: 479px){
    .who-uses__item{padding: 14px 14px;
    border-radius: 14px;
    min-height: 64px;}
    .who-uses__title{font-size: 14px;

    
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;}
  }
  .cases__more{display: flex;
  justify-content: center;
  margin-top: 24px;}
  .cases__more .primary-button{width: auto;          
  min-width: 280px;     
  padding: 16px 32px;}
  .purposes-cta{margin-top: 28px;
  text-align: center;}
  .purposes-cta .primary-button{display: inline-block;}
  .section-cta{margin-top: 28px;
  display: flex;
  justify-content: center;}
  .section-cta .primary-button{width: auto;
  min-width: 260px;}
  .platforms__more{margin-top: 24px;
  text-align: center;}
  .platforms__link{font-size: 15px;
  font-weight: 600;
  color: #3b82f6;
  text-decoration: none;
  transition: color .2s ease;}
  .platforms__link:hover{color: #2563eb;
  text-decoration: underline;}
  .provide-data-section{background:#eff3fb;}
  .provide-data{align-items:center;
  gap:40px;}
  .provide-data__list{list-style:none;
  padding-left:0;
  margin:18px 0 0;
  columns:2;
  column-gap:34px;}
  @media (max-width: 991px){
    .provide-data__list{columns:1;}
  }
  .provide-data__list li{break-inside:avoid;
  position:relative;
  padding-left:32px;
  margin:0 0 14px;
  font-weight:600;
  color:#1f2a44;
  line-height:1.45;}
  .provide-data__list li::before{content:"";
  position:absolute;
  left:0;
  top:2px;
  width:18px;
  height:18px;
  background:url("https://www.scrapeit.io/assets/images/check_icon_b.svg") no-repeat center / contain;}
  .provide-data__cta{margin-top:22px;}
  .provide-data__btn{display:inline-flex;
  align-items:center;
  justify-content:center;
  width:auto;
  min-width:260px;
  padding:14px 22px;}
  .provide-data__img{width:100%;
  max-width:570px;
  height:auto;}
  .who-uses__cta{margin-top: 28px;
  display: flex;
  justify-content: center;}
  .who-uses__cta .primary-button{width: auto;
  min-width: 280px;}
  .breadcrumbs{display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;}
  .breadcrumbs .link{display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;}
  .breadcrumbs .breadcrumb-text{white-space: nowrap;
  font-weight: 600;}
  .breadcrumbs .slash{margin: 0 6px;
  color: #7a869a;}
  .breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:20px 0;font-size:15px;line-height:1.4}
  .breadcrumbs>*{flex:0 0 auto}
  .breadcrumbs .slash,.breadcrumbs__sep{margin:0;color:#6b7280}
  .breadcrumbs__link,.breadcrumbs .breadcrumb{display:inline;white-space:nowrap}
  .breadcrumbs .breadcrumb-text{color:#4b5563}
}

/* ===== tokens.css (authored source) ===== */
/* =============================================================
   ScrapeIt design tokens + systemic fixes
   Layers: tokens < base < components  (all above `legacy`)
   Every colour pair here is verified against WCAG 2.1 AA.
   ============================================================= */

@layer tokens {
  :root {
    color-scheme: light;

    /* -- Tier 1: literal ------------------------------------ */
    --c-white:        #fff;
    --c-ink-900:      #0f1729;   /* 17.87:1 on white */
    --c-ink-700:      #37446f;   /*  9.46:1 */
    --c-ink-600:      #4a5578;   /*  7.34:1 — body copy */
    --c-ink-500:      #5b6689;   /*  5.67:1 — muted, still AA */
    --c-line-500:     #7c88ad;   /*  3.51:1 — form borders, AA non-text */
    --c-line-200:     #dbe2f0;
    --c-surface-50:   #f7f9fd;
    --c-surface-100:  #eff3fb;

    --c-brand-500:    #3762ff;   /*  4.82:1 with white text */
    --c-brand-600:    #2f56e8;   /*  5.81:1 */
    --c-brand-700:    #1e40d8;   /*  7.55:1 — focus ring */
    --c-danger-600:   #b91c4a;   /*  6.31:1 */
    --c-danger-50:    #fff1f5;
    --c-success-600:  #047857;   /*  5.48:1 */
    --c-success-50:   #ecfdf5;

    /* -- Tier 2: semantic ----------------------------------- */
    --text-body:      var(--c-ink-600);
    --text-heading:   var(--c-ink-900);
    --text-muted:     var(--c-ink-500);
    --text-on-brand:  var(--c-white);
    --surface:        var(--c-white);
    --surface-subtle: var(--c-surface-100);
    --accent:         var(--c-brand-500);
    --accent-hover:   var(--c-brand-600);
    --focus-ring:     var(--c-brand-700);
    --field-border:   var(--c-line-500);

    /* -- Type scale (fluid) --------------------------------- */
    --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.90rem);
    --step-0:  clamp(1.00rem, 0.95rem + 0.25vw, 1.13rem);
    --step-1:  clamp(1.20rem, 1.10rem + 0.50vw, 1.45rem);
    --step-2:  clamp(1.45rem, 1.25rem + 1.00vw, 1.95rem);
    --step-3:  clamp(1.75rem, 1.40rem + 1.75vw, 2.60rem);
    --step-4:  clamp(2.10rem, 1.50rem + 3.00vw, 3.50rem);

    /* -- Spacing / shape / motion --------------------------- */
    --space-1: .25rem; --space-2: .5rem;  --space-3: .75rem;
    --space-4: 1rem;   --space-5: 1.5rem; --space-6: 2rem;
    --space-7: 3rem;   --space-8: 4rem;

    --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgb(15 23 41 / .06), 0 1px 3px rgb(15 23 41 / .08);
    --shadow-md: 0 4px 12px rgb(15 23 41 / .08), 0 2px 4px rgb(15 23 41 / .06);
    --shadow-lg: 0 12px 32px rgb(15 23 41 / .12), 0 4px 8px rgb(15 23 41 / .06);

    --ease: cubic-bezier(.2, .7, .3, 1);
    --dur-fast: 120ms; --dur: 200ms; --dur-slow: 360ms;

    --tap-min: 24px;          /* WCAG 2.5.8 AA */
    accent-color: var(--accent);
  }

  @media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
  }
}

@layer base {
  /* Body copy contrast: legacy shipped #8087a6 = 3.54:1 (AA fail). */
  p { color: var(--text-body); text-wrap: pretty; }
  h1, h2, h3, h4, h5, h6 { color: var(--text-heading); text-wrap: balance; }

  /* Focus. legacy main.css set outline:0 on every interactive control
     and replaced it only on slider dots. This restores a visible ring. */
  :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  @media (forced-colors: active) {
    :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
      outline-color: Highlight;
    }
  }

  ::selection { background: var(--accent); color: var(--text-on-brand); }

  /* Skip link — hidden until focused. */
  .skip-link {
    position: absolute; left: var(--space-4); top: var(--space-4);
    z-index: 1000; padding: var(--space-3) var(--space-5);
    background: var(--surface); color: var(--accent);
    border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
    font-weight: 700; text-decoration: none;
    transform: translateY(-200%);
    transition: transform var(--dur) var(--ease);
  }
  .skip-link:focus-visible { transform: none; }

  img, video { max-width: 100%; height: auto; }
}

@layer components {
  /* ---- Buttons: legacy #4e74ff on white = 3.99:1 (AA fail) ---- */
  .primary-button,
  .primary-medium-button,
  .primary-small-button,
  .submit-button,
  .btn {
    background-color: var(--accent);
    color: var(--text-on-brand);
    border-color: var(--accent);
    border-radius: var(--radius-md);
    min-block-size: var(--tap-min);
    transition: background-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                transform var(--dur-fast) var(--ease);
  }
  .primary-button:hover,
  .primary-medium-button:hover,
  .primary-small-button:hover,
  .submit-button:hover,
  .btn:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
    box-shadow: var(--shadow-md);
  }
  .primary-button:active, .submit-button:active, .btn:active { transform: translateY(1px); }

  .primary-small-button.white { color: var(--accent); }
  .secondary-small-button { border-color: var(--accent); color: var(--accent); }

  /* Brand-coloured text needs the darker tone to clear 4.5:1 */
  .link, .small-link, .link-4, .link-topics, .rich-text a { color: var(--accent); }

  /* ---- Muted text that legacy set to #8087a6 (3.54:1) ---- */
  .small-text, .small-text-2, .subtitle, .type, .breadcrumb-text, .slash,
  .footer-link, .footer-bottom, .error-code { color: var(--text-muted); }

  /* ---- Form fields ---------------------------------------- */
  .text-field, .textarea, .w-input, .w-select {
    background-color: var(--surface);
    border: 1px solid var(--field-border);   /* legacy border was 1.11:1 */
    border-radius: var(--radius-md);
    color: var(--text-heading);
    font-size: var(--step-0);
    min-block-size: 44px;
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  .textarea { min-block-size: 160px; resize: vertical; }

  .text-field:hover, .textarea:hover { border-color: var(--c-ink-500); }

  /* legacy :focus border was #c5cee4 = 1.42:1 against the field fill */
  .text-field:focus-visible, .textarea:focus-visible,
  .w-input:focus-visible, .w-select:focus-visible {
    border-color: var(--accent);
    outline: 3px solid var(--focus-ring);
    outline-offset: 1px;
  }

  .text-field::placeholder, .textarea::placeholder,
  .w-input::placeholder, .w-select::placeholder {
    color: var(--text-muted);          /* legacy 1.90:1 -> 5.67:1 */
    opacity: 1;
  }

  /* Validity styling only after the user has interacted. */
  .text-field:user-invalid, .textarea:user-invalid, .w-input:user-invalid {
    border-color: var(--c-danger-600);
    background-color: var(--c-danger-50);
  }
  .text-field:user-valid, .textarea:user-valid, .w-input:user-valid {
    border-color: var(--c-success-600);
  }

  .field { display: grid; gap: var(--space-2); }
  .field > label { font-weight: 600; color: var(--text-heading); font-size: var(--step--1); }
  .field-hint  { color: var(--text-muted); font-size: var(--step--1); }
  .field-error { color: var(--c-danger-600); font-size: var(--step--1); font-weight: 600; }
  .field-error:empty { display: none; }

  /* ---- Form result messages (legacy #ff3b73 on #ffe9e9 = 2.95:1) ---- */
  .error-message   { background-color: var(--c-danger-50);  color: var(--c-danger-600);  border-radius: var(--radius-md); }
  .success-message { background-color: var(--c-success-50); color: var(--c-success-600); border-radius: var(--radius-md); }
  .error-message:empty, .success-message:empty { display: none; padding: 0; margin: 0; }

  /* ---- Touch targets under the 24px AA floor ---- */
  .dropdown-toggle, .dropdown-toggle-2 { min-block-size: var(--tap-min); display: flex; align-items: center; }
  .link.grey, .dropdown-link, .dropdown-link-2, .tab-link-v-2-tab-1, .tab-link-v-2-tab-3 {
    min-block-size: var(--tap-min); display: flex; align-items: center;
  }
  @media (pointer: coarse) {
    .dropdown-toggle, .dropdown-toggle-2, .link.grey,
    .dropdown-link, .dropdown-link-2 { min-block-size: 44px; }
  }
}
/* ============================================================
   Expressive 2026 visual layer.
   Assembled from the recon plan; every selector was verified to
   exist in the live markup before landing here.
   Sits in @layer components, so it outranks all legacy CSS but
   still loses to unlayered <style> blocks in templates — those
   are removed separately.
   ============================================================ */

@layer components {

  /* ---- correction: focus ring on dark surfaces ----
     --focus-ring #1e40d8 measures 2.36:1 on the #0e1630 pricing band and
     2.37:1 on --c-ink-900 — both fail WCAG 1.4.11 (needs 3:1).
     --focus-ring is inherited and consumed by the :focus-visible rule in
     @layer base, so re-pointing it on dark containers fixes every
     descendant without repeating a single selector.
     #a8c0ff measures 9.90:1 on #0e1630 and 9.91:1 on --c-ink-900. */
  .section.dark,
  #pricing.pricing,
  .footer,
  [data-surface="dark"] {
    --focus-ring: #a8c0ff;
  }

  /* ---- [1] BLOCKER: unlayered <style> in header.tpl (×6 header chunks) outranks the nav rules and h ---- */
  /* NOTE: the six header chunks' inline <style> blocks are deleted separately;
     these rules replace them. */
    /* ---- was: unlayered <style> in chunks/header*.tpl ---- */
    .dropdown-toggle-2.w--open {
      background-color: var(--accent-hover);      /* #2f56e8; white on it = 5.81:1 (was #4e74ff = 3.99:1) */
    }
    .dropdown-toggle-2.w--open .text-block-6,
    .dropdown-toggle-2.w--open .w-icon-dropdown-toggle,
    .dropdown-toggle-2:hover a > div:first-child,
    .dropdown-toggle-2:hover div {
      color: var(--text-on-brand);
    }
    .rich-text img,
    .w-embed { margin-block-end: var(--space-5); }   /* 20px -> 1.5rem */

  /* ---- [2] Vertical rhythm must use padding-block, never margin — !important in @layer legacy canno ---- */
  /* ===== derived tokens — no new hues, all mixed from existing brand ===== */
    :root {
      /* color-mix(in srgb, #3762ff 42%, #fff) = #abbdff
         9.75:1 on --c-ink-900, 8.17:1 on --c-ink-800, 6.99:1 on legacy #253057 */
      --c-brand-on-dark: color-mix(in srgb, var(--c-brand-500) 42%, #fff);
      --c-ink-800: #1b2547;                 /* second stop of the dark gradients; white on it = 14.98:1 */
      --card-border: color-mix(in srgb, var(--c-line-200) 70%, transparent);
      --card-ring:   color-mix(in srgb, var(--c-brand-500) 24%, transparent);
      --section-pad: clamp(3rem, 2rem + 5vw, 6.5rem);
    }
    /* color-mix(): Baseline WIDELY available (newly 2023-05-15, Chrome 111 / Safari 16.2 / Firefox 113).
       clamp(): Baseline widely available since 2020. No fallback required. */

    /* ===== section rhythm — padding only, margins zeroed ===== */
    .section,
    .section-2 {
      padding-block: var(--section-pad);
      margin-block-end: 0;              /* normal decl, beats legacy's normal 140px/60px */
    }
    .section.home-hero {
      padding-block: calc(var(--section-pad) + 4.5rem) var(--section-pad);
    }
    .section.dark { padding-block: var(--section-pad); }


  /* ---- dark-surface token context ----
     p{color:var(--text-body)} lives in @layer base and therefore outranks the
     legacy `.paragraph,.paragraph-2,…{color:#fff}` rules regardless of
     specificity — layer order wins. That turned the stats band into
     #4a5578 on #0f1729 = 2.44:1. Rather than re-specify a colour per
     selector, redefine the inherited tokens for dark contexts; every
     descendant that reads them corrects itself.
       #dbe2f0 on #0f1729 = 13.74:1   #ffffff on #0f1729 = 17.87:1
       #a9b4cc on #0f1729 =  8.59:1   (all comfortably AA) */
  .section.dark,
  #pricing.pricing,
  [data-surface="dark"] {
    --text-body:    var(--c-line-200);
    --text-heading: var(--c-white);
    --text-muted:   #a9b4cc;
    --focus-ring:   #a8c0ff;
    --field-border: #7f8db5;
  }

  /* ---- section rhythm: keep the variants legacy deliberately set ----
     `.section,.section-2{padding-block:var(--section-pad)}` flattened them.
     The hero variants matter most: the navbar is fixed, so a shorter top
     pad lets content slide under it on blog posts and case studies. */
  .section.hero,
  .section-2.hero {
    padding-block-start: calc(var(--section-pad) + 2.5rem);
  }
  .section.hero.blog-post { padding-block-end: 0; }

    /* #faq margins are !important-locked at app.css:925 — use padding on the child instead */
    #faq .faq-blocks { padding-block-start: var(--space-6); }

  /* ---- [3] Hero: layered gradient depth with zero LCP cost ---- */
  /* ===== HERO ===== */
    /* Depth comes from paint-only gradients: no extra network request, no filter/
       backdrop-filter/content-visibility over the LCP region, and NO opacity or
       transform animation anywhere in the #home subtree — so the eager,
       fetchpriority=high SVG at Main_Page.tpl:15 keeps its priority and the H1
       is painted at final opacity on the first frame. */
    .section.home-hero {
      block-size: auto;
      isolation: isolate;
      background-color: var(--c-white);
      background-image:
        url(/assets/images/hero-shape.svg),
        radial-gradient(62% 55% at 80% 6%,
          color-mix(in srgb, var(--c-brand-500) 17%, transparent) 0%, transparent 70%),
        radial-gradient(52% 46% at 6% 82%,
          color-mix(in srgb, var(--c-brand-500) 10%, transparent) 0%, transparent 72%),
        linear-gradient(180deg, var(--c-surface-100) 0%, var(--c-white) 64%);
      background-position: 100% 0, 0 0, 0 0, 0 0;
      background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
      background-size: contain, auto, auto, auto;
    }
    /* Soft brand bloom behind the illustration. Clipped by .section{overflow:hidden}
       (app.css:265) so it can never create a scrollbar. */
    .section.home-hero::after {
      content: "";
      position: absolute;
      inset-block-start: -14%;
      inset-inline-end: -10%;
      inline-size: min(54rem, 64%);
      aspect-ratio: 1;
      z-index: -1;                          /* behind content, above the bg, inside the isolate */
      pointer-events: none;
      border-radius: 50%;
      background: radial-gradient(circle at 50% 50%,
        color-mix(in srgb, var(--c-brand-500) 20%, transparent) 0%,
        color-mix(in srgb, var(--c-brand-500) 6%,  transparent) 46%,
        transparent 68%);
    }
    .small-container-no-anim.hero { gap: var(--space-5); max-inline-size: 34rem; }
    .small-container-no-anim.hero .subtitle { margin-block: 0; max-inline-size: 56ch; }
    .section.home-hero .primary-button {
      padding-inline: var(--space-6);
      padding-block: var(--space-4);
      font-size: var(--step-0);
      box-shadow: 0 10px 30px color-mix(in srgb, var(--c-brand-500) 30%, transparent);
    }
    .section.home-hero .primary-button:hover {
      box-shadow: 0 14px 38px color-mix(in srgb, var(--c-brand-500) 38%, transparent);
    }

  /* Viewport-height floor only where there is room for it. Legacy already
     shrink-wraps the hero below 991px; forcing 100svh there pushes the stats
     band off the first screen on every phone.
     svh: Baseline widely available (Chrome 108 / Safari 15.4 / Firefox 101). */
  @media (min-width: 992px) {
    .section.home-hero { min-block-size: 100svh; }
  }

  /* ---- [4] Scroll-reveal system, explicitly scoped away from the hero so LCP cannot regress ---- */
  /* ===== SCROLL REVEAL =====
       Baseline: scroll-driven animations = LIMITED availability
       (Chrome 115 Jul-2023, Edge 115, Safari 26 Sep-2025; NOT Firefox).
       Treated as decorative progressive enhancement, so per the
       modern-web-guidance `scroll-entry-exit-effects` guide no JS fallback is
       supplied: unsupported browsers simply render the final state. The
       `(animation-range: entry)` half of the @supports test is MANDATORY per
       that guide to exclude partial implementations.
       Compositor-only: transform + opacity, never width/height/top. */
    @media (prefers-reduced-motion: no-preference) {
      @supports ((animation-timeline: view()) and (animation-range: entry)) {

        /* FAIL-SAFE: no opacity here. If the view timeline never becomes
           active (unsupported browser, non-scrolling ancestor, containment
           edge case) the element keeps its natural styles and stays READABLE.
           Animating opacity from 0 previously hid the blog and case-study
           collections outright. */
        @keyframes si-card-in {
          from { transform: translate3d(0, 1.5rem, 0); }
        }

        .my-grid-4 > .solutions,
        .wwcd3 > .wwcd,
        .purposes-grid--cards > .purpose-card,
        .posts-grid > .collection-item,
        .collection-list > .blog_anounce,
        .faq-blocks > .faq-item {
          animation: si-card-in auto linear;
          animation-timeline: view();      /* declared AFTER the shorthand — guide requirement */
          animation-range: entry 8% cover 26%;
          will-change: opacity, transform;
        }

        /* Belt-and-braces for the LCP subtree. Narrowed from  to
           images only: the blanket rule also killed the hero entrance
           animations, and those are time-based (they always complete), so
           they never posed the stuck-invisible risk this guard was for. */
        #home img,
        .section.home-hero img {
          animation-name: none !important;
          opacity: 1 !important;
        }
      }
    }

  /* ---- [5] Stat counters: floating dark band, tabular numerals, container-scaled weight, staggered  ---- */
  /* ===== STATS BAND ===== */
    .section.dark.statistics {
      max-inline-size: min(1400px, 100% - 2 * var(--space-4));
      margin-inline: auto;
      border-radius: var(--radius-lg);
      background-color: var(--c-ink-900);
      background-image:
        url(/assets/images/footer-shape.svg),
        radial-gradient(72% 120% at 50% -22%,
          color-mix(in srgb, var(--c-brand-500) 26%, transparent) 0%, transparent 64%),
        linear-gradient(180deg, var(--c-ink-900) 0%, var(--c-ink-800) 100%);
      background-position: 100% 100%, 0 0, 0 0;
      background-repeat: no-repeat, no-repeat, no-repeat;
      background-size: contain, auto, auto;
    }
    .analytics-grid { gap: var(--space-6) var(--space-5); }
    .analytic {
      container-type: inline-size;          /* Container queries: Baseline WIDELY available since 2023-02-14 */
      gap: var(--space-3);
      padding: var(--space-5) var(--space-4);
      border-radius: var(--radius-lg);
      background-color: color-mix(in srgb, var(--c-white) 6%, transparent);
      border: 1px solid color-mix(in srgb, var(--c-white) 14%, transparent);
      margin-block-end: 0;
    }
    .h3-2.count {
      /* cqi = 1% of .analytic's content-box inline size, so the number grows when
         the grid collapses to 2 or 1 column and shrinks in the 4-up desktop row.
         At a 244px cell: 26.8px. At a 360px mobile cell: 39.6px. Clamped 24-41.6px,
         which keeps `1 500 000 000` (11 tabular digits + 2 spaces) inside the cell. */
      font-size: clamp(1.5rem, 11cqi, 2.6rem);
      line-height: 1;
      font-weight: 800;
      letter-spacing: -0.03em;
      font-variant-numeric: tabular-nums;   /* Baseline widely available */
      font-feature-settings: "tnum" 1;      /* belt-and-braces for older shapers */
      color: var(--c-brand-on-dark);        /* #abbdff — 9.75:1 on #0f1729, 8.17:1 on #1b2547 */
      margin-block: var(--space-2) 0;
    }
    .analytic .paragraph,
    .analytic .paragraph-2,
    .analytic .paragraph-3,
    .analytic .paragraph-4 {
      color: var(--c-white);                /* 17.87:1 top of band, 14.98:1 bottom */
      font-size: var(--step-0);
      margin-block-end: 0;
    }
    /* Staggered entrance driven by ONE named view-timeline on the grid, because the
       four cards share a row and anonymous view() would fire them simultaneously.
       .analytics-grid is a flat-tree ancestor of .analytic so the name resolves
       without timeline-scope. */
    @media (prefers-reduced-motion: no-preference) {
      @supports ((animation-timeline: view()) and (animation-range: entry)) {
        @keyframes si-stat-in {
          from { transform: translate3d(0, 1.25rem, 0) scale(0.96); }
        }
        .analytics-grid { view-timeline: --si-stats block; }
        .analytic {
          animation: si-stat-in auto linear;
          animation-timeline: --si-stats;
        }
        .analytic:nth-child(1) { animation-range: entry 10% entry 55%; }
        .analytic:nth-child(2) { animation-range: entry 18% entry 63%; }
        .analytic:nth-child(3) { animation-range: entry 26% entry 71%; }
        .analytic:nth-child(4) { animation-range: entry 34% entry 79%; }
      }
    }

  /* ---- [6] Card system: shared elevation, gradient hairline, :has()-aware hover and focus, containe ---- */
  /* ===== CARD SYSTEM ===== */
    .solutions,
    .post-card,
    .wwcd,
    .purpose-card {
      position: relative;
      container-type: inline-size;
      background-color: var(--surface);
      border: 1px solid var(--card-border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-sm);
      transition:
        transform    var(--dur) var(--ease),
        box-shadow   var(--dur) var(--ease),
        border-color var(--dur) var(--ease);
    }
    /* Brand hairline at the top edge, painted as a background layer instead of a
       pseudo-element because .purpose-card::before is already the counter and
       .solutions.one/.two/.three/.four carry decorative SVG backgrounds
       (app.css:349-352) that must not be clobbered. */
    .solutions:not(.one):not(.two):not(.three):not(.four),
    .wwcd,
    .purpose-card {
      background-image: linear-gradient(to right,
        var(--c-brand-500) 0%,
        color-mix(in srgb, var(--c-brand-500) 30%, transparent) 100%);
      background-repeat: no-repeat;
      background-size: 100% 3px;
      background-position: 0 0;
    }
    .solutions { padding-block-start: calc(var(--space-6) + 3px); }
    .wwcd      { padding: calc(var(--space-5) + 3px) var(--space-5) var(--space-5); }
    /* :has(): Baseline WIDELY available (newly 2023-12-19, Chrome 105 / Safari 15.4 /
       Firefox 121). Used only for enhancement — every card is fully usable without it. */
    .post-card:has(.post-image) .post-content { padding-block-start: var(--space-5); }
    .post-card:has(a:focus-visible) {
      border-color: var(--accent);
      box-shadow: var(--shadow-lg);
    }
    @media (hover: hover) {
      .solutions:hover,
      .post-card:hover,
      .wwcd:hover,
      .purpose-card:hover {
        box-shadow: var(--shadow-lg);
        border-color: var(--card-ring);
      }
    }
    @media (hover: hover) and (prefers-reduced-motion: no-preference) {
      .solutions:hover,
      .post-card:hover,
      .wwcd:hover,
      .purpose-card:hover { transform: translate3d(0, -6px, 0); }
    }
    /* Card-local type steps: the same card reads correctly at 1-up and 3-up. */
    @container (min-width: 21rem) {
      .purpose-title              { font-size: var(--step-2); }
      .post-content .h3-5         { font-size: var(--step-1); }
      .div-block-15 .h3-2         { font-size: var(--step-2); }
      .div-block-24 .heading-6    { font-size: var(--step-1); }
    }
    .div-block-26 { padding-block-start: var(--space-5); }
    .link-6:hover { color: var(--accent-hover); }   /* was #4e74ff = 3.99:1 -> #2f56e8 = 5.81:1 */

  /* ---- [7] Pricing table: full replacement for the deleted inline <style>, tokenised and AA-clean ---- */
  /* ===== PRICING (replaces chunks/pricelist.tpl:23-100) ===== */
    #pricing.pricing {
      padding-block: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);   /* was 56px; mobile override was 32px */
      padding-inline: var(--space-4);
      color: var(--c-white);
      background-color: var(--c-ink-900);
      background-image:
        radial-gradient(74% 110% at 50% -12%,
          color-mix(in srgb, var(--c-brand-500) 28%, transparent) 0%, transparent 62%),
        linear-gradient(180deg, var(--c-ink-900) 0%, var(--c-ink-800) 100%);
    }
    #pricing.pricing .pricing__container { max-inline-size: 1200px; margin-inline: auto; color: var(--c-white); }
    #pricing.pricing .pricing__eyebrow {
      display: inline-block; margin-block-end: var(--space-2);
      font-size: var(--step--1); letter-spacing: .12em;
      text-transform: uppercase;            /* PRE-EXISTING — kept verbatim, not introduced */
      color: var(--c-line-200);             /* #dbe2f0 on #0f1729 = 13.74:1 (was #a9b4cc = 8.58:1) */
    }
    #pricing.pricing .pricing__title {
      margin: 0 0 var(--space-3);
      font-size: var(--step-3); line-height: 1.12; font-weight: 800;
      letter-spacing: -0.015em; color: var(--c-white); text-wrap: balance;
    }
    #pricing.pricing .pricing__subtitle {
      margin: 0 0 var(--space-7);
      color: var(--c-line-200);             /* 13.74:1 top / 11.52:1 bottom of band */
      font-size: var(--step-0); max-inline-size: 62ch;
    }
    /* auto-fit replaces the 5/3/2/1 hardcoded breakpoint ladder.
       13rem = 208px: five tracks + four 24px gaps = 1136px, fits the 1200px container. */
    #pricing.pricing .pricing__grid {
      display: grid;
      gap: var(--space-5);
      grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
      align-items: stretch;
    }
    #pricing.pricing .pricing-card {
      position: relative;                   /* anchors .card__popular — MUST be kept */
      container-type: inline-size;
      display: flex; flex-direction: column; overflow: hidden;
      background-color: var(--surface);
      color: var(--text-heading);
      border: 1px solid var(--card-border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-md);
      transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
    }
    @media (hover: hover) and (prefers-reduced-motion: no-preference) {
      #pricing.pricing .pricing-card:hover { transform: translate3d(0, -4px, 0); box-shadow: var(--shadow-lg); }
    }
    #pricing.pricing .card__head  { padding: var(--space-5) var(--space-5) 0; }
    #pricing.pricing .card__name  { margin: 0 0 var(--space-3); font-size: var(--step-1); font-weight: 700; color: var(--text-heading); }
    #pricing.pricing .card__price {
      margin: 0; display: flex; align-items: baseline; gap: var(--space-2);
      font-size: var(--step-3); font-weight: 800; letter-spacing: -0.02em;
      font-variant-numeric: tabular-nums; color: var(--text-heading);
    }
    #pricing.pricing .card__price small { font-size: var(--step--1); font-weight: 600; color: var(--text-muted); }
    #pricing.pricing .card__setup { margin: var(--space-2) 0 0; font-size: var(--step--1); color: var(--text-muted); }
    #pricing.pricing .card__body { padding: var(--space-4) var(--space-5) 0; display: flex; flex-direction: column; }
    #pricing.pricing .feat {
      display: flex; justify-content: space-between; align-items: baseline;
      gap: var(--space-4); padding-block: var(--space-3);
      border-block-start: 1px solid var(--c-line-200);
    }
    #pricing.pricing .feat:first-child { border-block-start: 0; }
    #pricing.pricing .feat__name  { flex: 1; text-align: start; font-size: var(--step--1); color: var(--text-muted); }
    #pricing.pricing .feat__value { flex: 1; text-align: end; font-size: var(--step-0); font-weight: 700; color: var(--text-heading); font-variant-numeric: tabular-nums; }
    #pricing.pricing .card__foot { padding: var(--space-5); margin-block-start: auto; }
    /* Restores the primary/secondary split that the generic .btn rule in
       tokens.css would otherwise erase. */
    #pricing.pricing .btn {
      display: inline-flex; align-items: center; justify-content: center;
      inline-size: 100%; min-block-size: 44px;
      padding: var(--space-3) var(--space-4);
      border-radius: var(--radius-md);
      font-weight: 700; text-decoration: none;
      background-color: var(--c-white);
      color: var(--c-brand-700);            /* #1e40d8 on #fff = 7.55:1 */
      border: 1.5px solid var(--c-brand-500);  /* #3762ff on #fff = 4.82:1, clears the 3:1 boundary floor */
    }
    #pricing.pricing .btn:hover { background-color: var(--c-surface-100); border-color: var(--accent-hover); }
    #pricing.pricing .btn--primary {
      background-color: var(--accent); color: var(--text-on-brand); border-color: var(--accent);
    }
    #pricing.pricing .btn--primary:hover { background-color: var(--accent-hover); border-color: var(--accent-hover); box-shadow: var(--shadow-md); }
    #pricing.pricing .pricing__more { margin-block-start: var(--space-6); text-align: center; }
    #pricing.pricing .pricing__link {
      font-size: var(--step-0); font-weight: 600;
      color: var(--c-brand-on-dark);        /* #abbdff on #1b2547 = 8.17:1 */
      text-decoration: underline; text-underline-offset: 3px;
    }
    #pricing.pricing .pricing__link:hover { color: var(--c-white); }

  /* ---- [8] Pricing: make the Microscope tier unambiguously the recommended one without touching pla ---- */
  /* ===== POPULAR TIER =====
       The distinction is NOT colour-alone: the <span class="card__popular">POPULAR</span>
       text node and aria-current="true" already carry it. The styling below only
       amplifies an existing textual signal, so SC 1.4.1 is satisfied. */
    #pricing.pricing .pricing-card--popular {
      border-color: var(--accent);
      box-shadow: 0 0 0 2px var(--accent), var(--shadow-lg);
      background-image: linear-gradient(180deg,
        color-mix(in srgb, var(--c-brand-500) 8%, var(--c-white)) 0%,
        var(--c-white) 44%);
      z-index: 1;
    }
    /* Lift only where there is room and only if motion is welcome. Uses translate3d,
       never scale() — scaling would resample the plan name text. */
    @media (min-width: 62rem) and (prefers-reduced-motion: no-preference) {
      #pricing.pricing .pricing-card--popular { transform: translate3d(0, -0.75rem, 0); }
    }
    #pricing.pricing .card__popular {
      position: absolute;
      inset-block-start: var(--space-3);
      inset-inline-end: var(--space-3);
      padding: var(--space-1) var(--space-3);
      border-radius: var(--radius-pill);
      background-color: var(--c-brand-600);   /* white on #2f56e8 = 5.81:1 (was #3b82f6 = 3.68:1 FAIL) */
      color: var(--text-on-brand);
      font-size: var(--step--1); font-weight: 800; letter-spacing: .06em;
      line-height: 1.4;
      box-shadow: 0 6px 14px color-mix(in srgb, var(--c-brand-500) 38%, transparent);
    }
    /* Keep the pill from colliding with the plan name at narrow card widths. */
    #pricing.pricing .pricing-card--popular .card__name { padding-inline-end: 6.5rem; }
    @container (max-width: 15rem) {
      #pricing.pricing .pricing-card--popular .card__name { padding-inline-end: 0; padding-block-start: var(--space-6); }
    }

  /* ---- [9] Navigation and mega-menu: translucent depth, real dropdown surface, keyframe entrance, a ---- */
  /* ===== NAVIGATION ===== */
    .navigation.light {
      background-color: var(--surface);
      border-block-end: 1px solid var(--c-line-200);   /* was a full-strength #4e74ff rule */
      box-shadow: 0 1px 0 color-mix(in srgb, var(--c-ink-900) 6%, transparent);
    }
    /* backdrop-filter: Baseline NEWLY available (2024-09-16, Chrome 76 / Safari 18 /
       Firefox 103) — NOT widely available, so it is gated and the opaque
       background above is the fallback. Applied to a 74px strip only, so the
       backdrop snapshot cost over the LCP region is negligible. */
    @supports (backdrop-filter: blur(1px)) {
      .navigation.light {
        background-color: color-mix(in srgb, var(--c-white) 86%, transparent);
        backdrop-filter: saturate(160%) blur(14px);
      }
    }
    .navbar-container { background-color: transparent; }
    /* --- colour corrections: every #4e74ff (3.99:1) replaced --- */
    .link-2, .link-2 > div        { color: var(--accent); }        /* #3762ff = 4.82:1 */
    .dropdown-link-2,
    .dropdown-link-2.first,
    .dropdown-link-2.medium,
    .dropdown-link-2.last          { color: var(--c-brand-700); }   /* #1e40d8 = 7.55:1 */
    .text-block-6                  { color: var(--text-heading); font-weight: 600; }
    .dropdown-link-2:hover,
    .dropdown-link-2:focus-visible,
    .link-2:hover,
    .primary-small-button.white:hover,
    .text-block-6:hover {
      background-color: var(--accent-hover);                        /* white on #2f56e8 = 5.81:1 */
      color: var(--text-on-brand);
    }
    /* --- mega-menu surface --- */
    .dropdown-list-2.w--open {
      padding: var(--space-2);
      min-inline-size: 16rem;
      background-color: var(--surface);
      border: 1px solid var(--c-line-200);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
    }
    .dropdown-link-2 {
      border-radius: var(--radius-md);       /* overrides the .first/.last corner rules by layer, not specificity */
      padding-inline: var(--space-3);
      font-weight: 600;
      transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
    }
    /* Entrance. Deliberately a keyframe on .w--open rather than a discrete
       display transition: @starting-style / transition-behavior:allow-discrete are
       Baseline NEWLY available (2024-07/2024-08) and a failed detection there would
       leave the menu stuck at opacity 0. CSS animations are Baseline widely
       available and the base state is already display:none, so this cannot hide the
       menu. Compositor-only. */
    @media (prefers-reduced-motion: no-preference) {
      @keyframes si-menu-in {
        from { opacity: 0; transform: translate3d(0, -6px, 0); }
      }
      .dropdown-list-2.w--open { animation: si-menu-in var(--dur) var(--ease) both; }
    }

  /* ---- [10] Typography: apply the --step-* fluid scale to the real heading classes ---- */
  /* ===== TYPOGRAPHY =====
       text-wrap: balance is Baseline NEWLY available (2024-05-13, Chrome 114 /
       Firefox 121 / Safari 17.5) — it degrades to normal wrapping, so no fallback
       is needed. Per the modern-web-guidance `improve-text-layout-and-legibility`
       guide it is applied ONLY to short headings, never globally, because the
       balancing algorithm is expensive and browsers bail out past 6-10 lines.
       text-wrap: pretty is already set on `p` in @layer base and has LIMITED
       availability (no Firefox) — left as-is, it degrades silently. */
    .h1 {
      font-size: var(--step-4);        /* 33.6px -> 56px fluid, replaces the 48px/42px pair */
      line-height: 1.05;
      letter-spacing: -0.022em;
      text-wrap: balance;
    }
    .h2,
    .pricing__title {
      font-size: var(--step-3);        /* 28px -> 41.6px, replaces the flat 32px */
      line-height: 1.12;
      letter-spacing: -0.015em;
      text-wrap: balance;
    }
    .h3-2, .h3-3, .h3-4, .purpose-title {
      font-size: var(--step-2);        /* 23.2px -> 31.2px, replaces 24px / 22px */
      line-height: 1.22;
      letter-spacing: -0.01em;
      text-wrap: balance;
    }
    .h3-5 {
      font-size: var(--step-1);        /* card titles live in ~330px tracks — one step down */
      line-height: 1.28;
      letter-spacing: -0.008em;
      text-wrap: balance;
    }
    .h4, .heading-6 {
      font-size: var(--step-1);        /* 19.2px -> 23.2px, replaces the flat 20px */
      line-height: 1.3;
    }
    .subtitle {
      font-size: var(--step-1);        /* replaces 18px */
      line-height: 1.55;
      max-inline-size: 62ch;
    }
    /* .h3-2.count is excluded — it gets its own cqi-based size in the stats item. */

  /* ---- [11] Focus indicator fails 1.4.11 on every dark band — --focus-ring #1e40d8 is 2.37:1 on --c- ---- */
  /* ===== FOCUS ON DARK SURFACES (WCAG 1.4.11) =====
       --focus-ring #1e40d8 measures 2.37:1 on --c-ink-900 and 1.70:1 on the legacy
       #253057 dark band. White measures 17.87:1 / 12.81:1. Scoped narrowly to
       elements that actually sit on a dark ground — #pricing.pricing .btn lives on a WHITE
       card, so it deliberately keeps the blue ring. */
    #pricing.pricing .pricing__link:focus-visible,
    #pricing.pricing .pricing__container > :where(a, button):focus-visible,
    .section.dark :where(a, button, [tabindex]):focus-visible,
    .footer.dark :where(a, button, [tabindex]):focus-visible {
      outline: 3px solid var(--c-white);
      outline-offset: 2px;
    }
    @media (forced-colors: active) {
      #pricing.pricing .pricing__link:focus-visible,
      .section.dark :where(a, button, [tabindex]):focus-visible,
      .footer.dark :where(a, button, [tabindex]):focus-visible {
        outline-color: Highlight;
      }
    }

  /* ---- [12] forced-colors hardening: strip decorative gradients and restore real boundaries ---- */
  /* ===== FORCED COLORS ===== */
    @media (forced-colors: active) {
      /* background-image is NOT force-adjusted by the UA — kill it explicitly. */
      .section.home-hero,
      .section.dark.statistics,
      #pricing.pricing,
      #pricing.pricing .pricing-card--popular,
      .solutions,
      .wwcd,
      .purpose-card,
      .navigation.light {
        background-image: none;
      }
      .section.home-hero::after,
      .purpose-card::before {
        display: none;
      }
      @supports (backdrop-filter: blur(1px)) {
        .navigation.light { backdrop-filter: none; background-color: Canvas; }
      }

      /* box-shadow is dropped in forced-colors — give every card a real border. */
      .solutions,
      .post-card,
      .wwcd,
      .purpose-card,
      .faq-item,
      .analytic,
      #pricing.pricing .pricing-card,
      .dropdown-list-2.w--open {
        border: 1px solid CanvasText;
        box-shadow: none;
      }
      /* The recommended tier keeps a distinction that survives colour forcing.
         forced-color-adjust is deliberately NOT set to none anywhere. */
      #pricing.pricing .pricing-card--popular { border: 3px solid Highlight; }
      #pricing.pricing .card__popular         { border: 1px solid CanvasText; }
      #pricing.pricing .btn                   { border: 1px solid ButtonText; }

      .analytic { background-color: Canvas; }
    }

  /* ---- [13] Reduced-motion kill switch that also defeats the unlayered inline <style> blocks ---- */
  /* ===== REDUCED MOTION — final backstop =====
       !important inside a layer beats every normal declaration anywhere,
       including the unlayered <style> blocks in the header/pricing chunks and
       anything webflow.js writes as an inline style. It does NOT beat an
       !important in @layer legacy, but legacy declares no animation !important. */
    @media (prefers-reduced-motion: reduce) {
      .analytic,
      .solutions,
      .post-card,
      .wwcd,
      .purpose-card,
      .collection-item,
      .blog_anounce,
      .faq-item,
      .dropdown-list-2.w--open,
      #pricing.pricing .pricing-card,
      #pricing.pricing .pricing-card--popular,
      .section.home-hero,
      .section-2.anim {
        animation: none !important;
        transform: none !important;
        transition-duration: 1ms !important;
        scroll-behavior: auto !important;
      }
    }

  /* ---- [14] FAQ list: give the eleven items a card treatment inside the !important-locked margin con ---- */
  /* ===== FAQ =====
       #faq .faq-blocks margin is !important-locked at app.css:925, so spacing is
       expressed as padding on the container + grid gap, and the per-item 2em
       bottom margin (a NORMAL declaration at app.css:926) is zeroed here. */
    #faq .faq-blocks {
      display: grid;
      gap: var(--space-4);
      padding-block-start: var(--space-6);
      max-inline-size: 800px;
    }
    #faq .faq-item {
      margin-block: 0;
      padding: var(--space-5) var(--space-5) var(--space-4);
      background-color: var(--surface);
      border: 1px solid var(--card-border);
      border-inline-start: 3px solid color-mix(in srgb, var(--c-brand-500) 55%, transparent);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-sm);
      transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
    }
    @media (hover: hover) {
      #faq .faq-item:hover {
        box-shadow: var(--shadow-md);
        border-inline-start-color: var(--accent);
      }
    }
    #faq .faq-item .h4 { margin-block: 0 var(--space-2); font-size: var(--step-1); }
    #faq .faq-item p   { margin-block-end: 0; }

  /* ---- [15] Section eyebrow and title block: pill treatment with no text-transform (case changes wou ---- */
  /* ===== SECTION HEADERS =====
       NOTE: text-transform is deliberately NOT applied here. `Use web data as a
       winning key` and `Our Blog` are body content; uppercasing them changes the
       rendered characters and how a screen reader may announce them, which the
       zero-text-change constraint forbids. (#pricing.pricing .pricing__eyebrow keeps its
       PRE-EXISTING uppercase — removing it would also be a change.) */
    .title-container {
      gap: var(--space-3);
      margin-block-end: var(--space-7);
      max-inline-size: 60rem;
    }
    .title-container > p {
      font-size: var(--step-1);
      color: var(--text-body);
      max-inline-size: 62ch;
      margin-block-end: 0;
    }
    .text-block-9 {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      padding: var(--space-1) var(--space-4);
      border-radius: var(--radius-pill);
      background-color: var(--c-surface-100);
      color: var(--c-brand-700);        /* #1e40d8 on #eff3fb = 6.79:1 (was #8087a6 = 3.54:1 FAIL) */
      font-size: var(--step--1);
      font-weight: 700;
      letter-spacing: .04em;
    }

  /* ---- [16] Quote form and contact card: tie the existing form surface into the new elevation system ---- */
  /* ===== HOW IT WORKS + QUOTE FORM ===== */
    .contact-container {
      padding: var(--space-6) var(--space-5) var(--space-6);
      border: 1px solid var(--card-border);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-lg);
      background-color: var(--surface);
      background-image: linear-gradient(to right,
        var(--c-brand-500) 0%,
        color-mix(in srgb, var(--c-brand-500) 30%, transparent) 100%);
      background-repeat: no-repeat;
      background-size: 100% 4px;
      background-position: 0 0;
    }
    /* Numbered rail for the four steps. counter-increment on the container is safe:
       `purpose` is the only other counter in the sheet (app.css:1016) and this uses
       a distinct name. No text is generated — the rail is a border + dot only. */
    .small-container-2 .small-feature {
      position: relative;
      max-inline-size: none;
      margin-block: 0;
      padding: var(--space-2) 0 var(--space-5) var(--space-6);
      border-inline-start: 2px solid var(--c-line-200);
    }
    .small-container-2 .small-feature:last-child { border-inline-start-color: transparent; padding-block-end: 0; }
    .small-container-2 .small-feature::before {
      content: "";
      position: absolute;
      inset-inline-start: calc(-1 * var(--space-2) - 1px);
      inset-block-start: var(--space-3);
      inline-size: var(--space-4);
      block-size: var(--space-4);
      border-radius: 50%;
      background-color: var(--accent);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-brand-500) 16%, transparent);
    }
    .small-container-2 .small-feature p:first-child strong { color: var(--text-heading); font-size: var(--step-0); }
    @media (forced-colors: active) {
      .contact-container { background-image: none; border: 1px solid CanvasText; }
      .small-container-2 .small-feature::before { background-color: CanvasText; box-shadow: none; }
    }
}
/* =============================================================
   Modern layer 2 — 2026 polish.

   SAFETY RULE FOR THIS WHOLE FILE: no rule here may put content
   into a state where it is unreadable at rest. No opacity:0 on
   anything that carries text, no visibility:hidden, no
   background-clip:text without a @supports guard that keeps a
   real colour. Motion is decoration only.
   ============================================================= */

/* ---- top-level at-rules ----
   @property and @view-transition are deliberately OUTSIDE @layer: both are
   document-scoped registrations rather than style rules, and nesting them in
   a cascade layer risks them being ignored. */

/* Cross-document view transitions: smooth morph between pages instead of a
   white flash. Baseline limited (Chrome 126+); unsupported browsers just
   navigate normally, so there is no failure mode. */
@view-transition { navigation: auto; }

@layer components {
  /* ---- containment safety net ----
     container-type: inline-size applies contain:layout style inline-size, which
     stops an element contents from contributing to its own inline size.
     Inside a grid track (1fr) the width is already definite, so .solutions and
     .purpose-card were fine. But .post-card sits inside .blog_anounce /
     .collection-item, which are display:flex with auto-sized items — there the
     contents WERE the only width source, so the card collapsed to zero and the
     blog and case-study sections rendered as bare vertical borders.
     Giving every container a definite inline size removes the failure mode
     without losing the container queries. */
  .solutions, .post-card, .wwcd, .purpose-card, .analytic, #pricing.pricing .pricing-card {
    inline-size: 100%;
    min-inline-size: 0;
  }


  :root {
    /* A spring-ish easing built with linear(). Baseline widely available
       (Chrome 113, Safari 17.2, Firefox 112). Degrades to `ease` below. */
    --ease-spring: linear(
      0, 0.006, 0.025, 0.101, 0.539 24.8%, 0.721, 0.849, 0.937 45%,
      0.968, 0.991, 1.006, 1.014 62.2%, 1.015, 1.009, 1.003, 1
    );
  }
  @supports not (transition-timing-function: linear(0, 1)) {
    :root { --ease-spring: cubic-bezier(.2, .8, .2, 1); }
  }

  /* ================= view transition choreography ================= */
  @media (prefers-reduced-motion: no-preference) {
    ::view-transition-old(root) { animation: si-vt-out 140ms both; }
    ::view-transition-new(root) { animation: si-vt-in  220ms both; }
  }
  @keyframes si-vt-out { to { opacity: 0; transform: translate3d(0, -8px, 0); } }
  @keyframes si-vt-in  { from { opacity: 0; transform: translate3d(0, 10px, 0); } }

  /* ================= scroll progress rail =================
     Attached to the header, purely decorative, carries no text. */
  .navigation.light { position: relative; }
  .navigation.light::after {
    content: "";
    position: absolute;
    inset-block-end: -1px;
    inset-inline-start: 0;
    block-size: 2px;
    inline-size: 100%;
    transform-origin: 0 50%;
    transform: scaleX(0);
    background-image: linear-gradient(
      90deg,
      var(--c-brand-500) 0%,
      color-mix(in oklab, var(--c-brand-500) 55%, #7ea2ff) 55%,
      #7ea2ff 100%);
    pointer-events: none;
  }
  @supports ((animation-timeline: scroll()) and (animation-range: normal)) {
    @media (prefers-reduced-motion: no-preference) {
      .navigation.light::after {
        animation: si-progress auto linear both;
        animation-timeline: scroll(root block);
      }
    }
  }
  @keyframes si-progress { to { transform: scaleX(1); } }

  /* ================= glow on the recommended tier =================
     Deliberately box-shadow, not a gradient pseudo-element. A conic-gradient
     ring needs either a negative z-index child (which paints ON TOP of the
     card background and would wash out the card) or mask-composite (which
     fills the whole card if masking is unsupported). box-shadow paints
     outside the border box and can never cover content. */
  .pricing-card--popular {
    box-shadow: 0 0 0 2px var(--c-brand-500), var(--shadow-lg);
  }
  /* The pulse is gone. box-shadow is a paint-level property, so animating it
     for ever repainted the whole card on every frame for as long as the tab
     stayed open - and on /web-scraping-price that alone kept Speed Index at
     3.5s. The tier is still the loudest thing on the table: it keeps the 2px
     brand ring and the large shadow, and now lifts on hover. */
  .pricing-card--popular {
    transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
  }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .pricing-card--popular:hover {
      transform: translateY(-2px);
      box-shadow:
        0 0 0 2px #7ea2ff,
        0 0 30px color-mix(in srgb, var(--c-brand-500) 45%, transparent),
        var(--shadow-lg);
    }
  }
  @keyframes si-glow {
    50% {
      box-shadow:
        0 0 0 2px #7ea2ff,
        0 0 30px color-mix(in srgb, var(--c-brand-500) 45%, transparent),
        var(--shadow-lg);
    }
  }

  /* ================= pointer-reactive sheen on primary CTAs =================
     CSS-only: a radial highlight that grows on hover. No JS, no pointer
     tracking, nothing that can obscure the label. */
  .primary-button, .primary-medium-button, .submit-button, .btn {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition-timing-function: var(--ease-spring);
  }
  .primary-button::after,
  .primary-medium-button::after,
  .submit-button::after,
  .btn::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(
      120% 160% at 50% 120%,
      color-mix(in srgb, #fff 26%, transparent) 0%,
      transparent 60%);
    opacity: 0;
    transition: opacity var(--dur) var(--ease);
  }
  .primary-button:hover::after,
  .primary-medium-button:hover::after,
  .submit-button:hover::after,
  .btn:hover::after { opacity: 1; }

  /* ================= card hover with spring easing ================= */
  .solutions, .post-card, .wwcd, .purpose-card, .pricing-card {
    transition-timing-function: var(--ease-spring);
  }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .solutions:hover, .wwcd:hover, .purpose-card:hover {
      transform: translate3d(0, -4px, 0);
    }
    /* :has() — Baseline widely available. Lifts the card when the link
       inside it is hovered or focused, so keyboard users get the same cue. */
    .post-card:has(a:hover), .post-card:has(a:focus-visible) {
      transform: translate3d(0, -4px, 0);
    }
  }

  /* ================= eyebrow gradient text =================
     Guarded: the colour is set first and only replaced when both
     background-clip:text and color-mix are supported, so the label can
     never render transparent-on-transparent. */
  .title-container .text-block-9 { color: var(--accent); }
  @supports (background-clip: text) and (color: color-mix(in oklab, red, blue)) {
    .title-container .text-block-9 {
      background-image: linear-gradient(
        92deg, var(--c-brand-600) 0%, #6f8dff 60%, var(--c-brand-500) 100%);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }
    @media (forced-colors: active) {
      .title-container .text-block-9 { color: CanvasText; background-image: none; }
    }
  }

  /* ================= form polish ================= */
  /* field-sizing grows the textarea with its content instead of scrolling.
     Unsupported browsers keep the fixed min-block-size already set. */
  .textarea { field-sizing: content; max-block-size: 22rem; }

  /* Colour the whole field group once the input is genuinely invalid. */
  .field:has(:user-invalid) > label { color: var(--c-danger-600); }
  .field:has(:user-valid)   > label { color: var(--text-heading); }

  /* ================= reduced motion: hard stop ================= */
  @media (prefers-reduced-motion: reduce) {
    .navigation.light::after,
    .pricing-card--popular::before { animation: none; }
    .navigation.light::after { transform: scaleX(1); }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
    .solutions:hover, .wwcd:hover, .purpose-card:hover,
    .post-card:has(a:hover) { transform: none; }
  }

  /* ================= forced colors ================= */
  @media (forced-colors: active) {
    .pricing-card--popular::before { background: none; border: 2px solid Highlight; }
    .navigation.light::after { background: Highlight; }
    .primary-button::after, .primary-medium-button::after,
    .submit-button::after, .btn::after { background-image: none; }
  }
}
/* =============================================================
   Hero — the "wow" layer.

   SAFETY: entrance animations here are TIME-based, not scroll-driven.
   A time-based animation always runs to completion on load, so an
   opacity:0 start frame can never get stuck the way the view()-timeline
   reveal did on the blog and case-study cards. Under
   prefers-reduced-motion the start frames are not applied at all.
   ============================================================= */

@property --si-hue-shift {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@layer components {

  /* ================= the stage ================= */
  /* Deliberately NOT overflow:clip — legacy sets .main-image.no_anim
     { width:150% } at one breakpoint, so the hero art is meant to bleed past
     the section box. Clipping it would crop the artwork. The decorative
     layers below therefore stay inside inset:0 and rely on their gradient
     stops to fade, rather than on negative offsets that would need clipping. */
  .section.home-hero {
    position: relative;
    isolation: isolate;
  }

  /* Aurora field. Counter-drifting radial blooms mixed in oklab so the
     midtones stay saturated instead of going grey. Pure paint, no layout. */
  .section.home-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
      radial-gradient(38% 52% at 18% 26%,
        color-mix(in oklab, var(--c-brand-500) 30%, transparent) 0%, transparent 70%),
      radial-gradient(42% 46% at 82% 14%,
        color-mix(in oklab, #7ea2ff 34%, transparent) 0%, transparent 72%),
      radial-gradient(36% 40% at 62% 62%,
        color-mix(in oklab, #a8c0ff 26%, transparent) 0%, transparent 68%);
    filter: blur(6px);
  }

  /* Engineering grid — reads as "structured data" without a single image.
     Masked so it dissolves before it reaches the copy. */
  .section.home-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    /* the earlier visual layer also defines this pseudo-element as a round
       blob; neutralise those geometry properties so the grid can go edge to
       edge instead of inheriting aspect-ratio:1 and a capped inline-size */
    inline-size: auto;
    block-size: auto;
    aspect-ratio: auto;
    filter: none;
    background-color: transparent;
    background-image:
      linear-gradient(to right,
        color-mix(in srgb, var(--c-ink-900) 7%, transparent) 1px, transparent 1px),
      linear-gradient(to bottom,
        color-mix(in srgb, var(--c-ink-900) 7%, transparent) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(120% 78% at 50% 0%, #000 0%, transparent 68%);
    mask-image: radial-gradient(120% 78% at 50% 0%, #000 0%, transparent 68%);
  }

  @media (prefers-reduced-motion: no-preference) {
    .section.home-hero::before {
      /* One settling drift, not a loop. The grid used to slide back and forth
         for ever, which kept the hero recompositing and stopped the page ever
         reading as visually complete. */
      animation: si-aurora 2600ms var(--ease) both;
    }
  }
  @keyframes si-aurora {
    from { transform: translate3d(-2%, -1%, 0) scale(1.04); }
    to   { transform: translate3d( 0%,  0%, 0) scale(1);    }
  }

  /* ================= headline ================= */
  .section.home-hero .h1 {
    font-size: var(--step-4);
    line-height: 1.04;
    letter-spacing: -0.025em;
    text-wrap: balance;
  }

  /* Gradient headline, guarded. The solid colour is declared first and only
     replaced inside @supports, so the words can never render transparent
     on an unsupporting engine. */
  .section.home-hero .h1 { color: var(--text-heading); }
  @supports (background-clip: text) and (color: color-mix(in oklab, red, blue)) {
    .section.home-hero .h1 {
      background-image: linear-gradient(
        104deg,
        var(--c-ink-900) 0%,
        var(--c-ink-900) 38%,
        var(--c-brand-600) 78%,
        #6f8dff 100%);
      background-clip: text;
      -webkit-background-clip: text;
      color: transparent;
    }
  }
  @media (forced-colors: active) {
    .section.home-hero .h1 { color: CanvasText; background-image: none; }
  }

  .section.home-hero .subtitle {
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--text-body);
  }

  /* ================= hero image: depth + glow ================= */
  .section.home-hero .main-image { position: relative; }
  .section.home-hero .main-image::before {
    content: "";
    position: absolute;
    inset: 6% 4%;
    z-index: -1;
    border-radius: 50%;
    background-image: radial-gradient(closest-side,
      color-mix(in oklab, var(--c-brand-500) 34%, transparent) 0%, transparent 100%);
    filter: blur(38px);
    pointer-events: none;
  }
  @media (prefers-reduced-motion: no-preference) {
    .section.home-hero .main-image::before {
      /* Blooms once on arrival and stays. It used to pulse for ever behind
         the hero art, repainting a 38px blur on every frame. */
      animation: si-breathe 1100ms var(--ease) both;
    }
  }
  @keyframes si-breathe {
    from { transform: scale(.88); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
  }
  /* si-float is gone on purpose. It drifted the hero <img> up and down for
     ever - and that <img> is the LCP element. An LCP candidate that never
     stops moving never settles, so LCP and Speed Index both stayed pinned to
     the end of the trace no matter how fast the image actually arrived. */

  /* ================= staggered entrance =================
     Time-based. Guaranteed to complete. Only armed when the user has not
     asked for reduced motion, so the start frames never exist otherwise. */
  @media (prefers-reduced-motion: no-preference) {
    .section.home-hero .h1,
    .section.home-hero .subtitle,
    .section.home-hero .primary-button {
      animation: si-hero-in 620ms var(--ease-spring) both;
    }
    .section.home-hero .subtitle       { animation-delay: 90ms;  }
    .section.home-hero .primary-button { animation-delay: 180ms; }
  }
  @keyframes si-hero-in {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
  }

  /* The LCP image must never wait on an entrance animation to become
     visible — it carries fetchpriority=high and loading=eager and is the
     LCP candidate. It floats, but it is never faded in. */
  .section.home-hero img { opacity: 1 !important; }

  /* ================= CTA: brighter, with a travelling sheen ================= */
  .section.home-hero .primary-button {
    background-image: linear-gradient(
      100deg, var(--c-brand-600) 0%, var(--c-brand-500) 52%, #5b82ff 100%);
    border: 0;
  }

  /* ================= stats band =================
     No negative margin pulling it into the hero: that overlap cannot be
     judged without rendering, and the hero height is viewport-dependent. */
  .analytic .h3-2.count { letter-spacing: -0.03em; }

  /* ================= forced colors ================= */
  @media (forced-colors: active) {
    .section.home-hero::before,
    .section.home-hero::after,
    .section.home-hero .main-image::before { display: none; }
    .section.home-hero .primary-button { background-image: none; border: 1px solid ButtonText; }
  }
}
/* =============================================================
   Quote form layout.

   Replaces the two unlayered <style> blocks that lived in
   contact-form.tpl and contact-form-single-page.tpl. Those were
   unlayered, so they outranked every @layer rule; they also pinned
   the mobile field order to plan/resource/name/email, which is the
   ordering this rework reverses.

   The old markup placed controls as direct grid items positioned by
   Webflow node-id rules (#w-node-…{grid-row-start:5}). Wrapping the
   controls in .field wrappers makes those inert, which would have
   floated the submit button and the reCAPTCHA ABOVE the inputs at
   <=479px. Declaring the whole grid here removes that dependency.
   ============================================================= */

@layer components {

  #email-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5) var(--space-5);
    align-items: start;
  }

  /* Anything that should span the full width regardless of column count. */
  #email-form .field--wide,
  #email-form .recaptcha-item,
  #email-form .formit-msg,
  #email-form .form-actions { grid-column: 1 / -1; }

  @media (max-width: 767px) {
    #email-form { grid-template-columns: minmax(0, 1fr); }
  }

  /* Neutralise the legacy node-id placement: those ids no longer exist on
     the controls, but the rules still exist in @layer legacy and would fire
     if any stray id survived a template we have not touched yet. */
  #email-form [class*="w-node-"] { grid-area: auto; }

  #email-form .field { display: grid; gap: var(--space-2); min-inline-size: 0; }

  #email-form label {
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--text-heading);
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
  }

  .field-req {
    color: var(--c-danger-600);
    font-weight: 700;
  }
  .field-opt {
    font-weight: 500;
    font-size: var(--step--1);
    color: var(--text-muted);
    text-transform: none;   /* never re-case: this is authored copy */
  }

  .field-hint {
    font-size: var(--step--1);
    color: var(--text-muted);
    line-height: 1.45;
  }

  /* Error text only occupies space when it actually has something to say. */
  .field-error {
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--c-danger-600);
    line-height: 1.45;
  }
  .field-error:empty { display: none; }

  /* Native validity, surfaced only after the user has interacted with the
     control — :user-invalid, not :invalid, so a pristine required field is
     never flagged on page load. */
  #email-form .field:has(:user-invalid) > label { color: var(--c-danger-600); }
  #email-form :user-invalid {
    border-color: var(--c-danger-600);
    background-color: var(--c-danger-50);
  }
  /* Deliberately NO green :user-valid border. Adding `required` to name and
     message newly qualifies them, and turning three controls green while
     someone types reads as noise rather than reassurance. */

  #email-form .form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
  }
  #email-form .submit-button {
    inline-size: auto;
    min-inline-size: 12rem;
    padding-inline: var(--space-6);
    padding-block: var(--space-4);
    font-size: var(--step-0);
    font-weight: 700;
  }
  .form-reassure {
    margin: 0;
    font-size: var(--step--1);
    color: var(--text-muted);
  }

  /* ---- result messages (was unlayered in both form chunks) ---- */
  .formit-msg:empty { display: none; }
  .formit-msg {
    display: block;
    padding: var(--space-4) var(--space-5);
    margin-block-start: var(--space-4);
    border-radius: var(--radius-md);
    line-height: 1.5;
  }
  .success-message.formit-msg {
    background-color: var(--c-success-50);
    color: var(--c-success-600);      /* 5.48:1 */
  }
  .error-message.formit-msg {
    background-color: var(--c-danger-50);
    color: var(--c-danger-600);       /* 6.31:1 */
  }
  /* /contact-us centred its messages in its own inline block; preserved. */
  .contact-page .formit-msg,
  #email-form.form--single .formit-msg { text-align: center; }

  .formit-loading [type="submit"] { opacity: .6; pointer-events: none; }

  @media (forced-colors: active) {
    .success-message.formit-msg,
    .error-message.formit-msg { border: 1px solid CanvasText; }
    #email-form :user-invalid { border-color: Highlight; }
  }
}
/* =============================================================
   Hero v2 — depth, light and motion.

   Same safety rule as before: nothing here may leave content
   unreadable at rest. Every decorative layer is a pseudo-element
   that carries no text, sits behind in-flow content, and is
   pointer-events:none. Motion is time-based or scroll-linked
   decoration, never a precondition for visibility.
   ============================================================= */

@property --si-sweep {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}

@layer components {

  /* ---------- perspective stage ---------- */
  .section.home-hero .two-col-grid { perspective: 1400px; }

  /* ---------- light shafts, scroll-linked ----------
     A third gradient layer above the aurora, drifting on the scroll
     timeline. Decorative only: if the timeline never runs it simply
     sits at its start position, which is a valid look. */
  .section.home-hero .container { position: relative; }
  .section.home-hero .container::before {
    content: "";
    position: absolute;
    inset: -30% -20% auto -20%;
    block-size: 120%;
    z-index: -1;
    pointer-events: none;
    background-image:
      conic-gradient(from 200deg at 70% 10%,
        transparent 0deg,
        color-mix(in oklab, var(--c-brand-500) 16%, transparent) 26deg,
        transparent 52deg,
        color-mix(in oklab, #7ea2ff 13%, transparent) 88deg,
        transparent 130deg);
    filter: blur(28px);
    opacity: .85;
  }
  @supports ((animation-timeline: scroll()) and (animation-range: normal)) {
    @media (prefers-reduced-motion: no-preference) {
      .section.home-hero .container::before {
        animation: si-shaft auto linear;
        animation-timeline: scroll(root block);
        animation-range: 0 60svh;
      }
    }
  }
  @keyframes si-shaft {
    to { transform: translate3d(0, 8%, 0) rotate(8deg); opacity: .35; }
  }

  /* ---------- film grain ----------
     An inline SVG turbulence tile. No network request, no image decode
     on the LCP path, and it sits above the gradients but below content. */
  .section.home-hero > .container { isolation: isolate; }
  .section.home-hero::marker { content: none; }
  .section.home-hero .two-col-grid::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .5;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
  }
  .section.home-hero .two-col-grid { position: relative; }

  /* ---------- headline: slow light sweep ----------
     Animates background-position only, inside the existing @supports
     guard for background-clip:text. Colour, never geometry. */
  @supports (background-clip: text) and (color: color-mix(in oklab, red, blue)) {
    .section.home-hero .h1 {
      background-image: linear-gradient(
        104deg,
        var(--c-ink-900) 0%,
        var(--c-ink-900) 30%,
        var(--c-brand-600) 55%,
        #8fa9ff 68%,
        var(--c-brand-600) 80%,
        var(--c-ink-900) 100%);
      background-size: 260% 100%;
      background-position: 0% 50%;
    }
    @media (prefers-reduced-motion: no-preference) {
      /* Travels into place once and stops. Looping this meant the largest
         text on the site repainted continuously, and the headline colour was
         a moving target for anyone reading it. */
      .section.home-hero .h1 { animation: si-sweep-bg 1400ms var(--ease) both; }
    }
  }
  @keyframes si-sweep-bg {
    from { background-position: 100% 50%; }
    to   { background-position:  38% 50%; }
  }

  /* ---------- hero art: tilt + data ring ---------- */
  .section.home-hero .main-image {
    transform-style: preserve-3d;
    transform: rotateY(-6deg) rotateX(2deg);
    transition: transform var(--dur-slow) var(--ease-spring);
  }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .section.home-hero .main-image:hover { transform: rotateY(0deg) rotateX(0deg) scale(1.015); }
  }
  @media (prefers-reduced-motion: reduce) {
    .section.home-hero .main-image { transform: none; }
  }

  /* Rotating conic ring behind the art. Sits at z-index:-1 inside the
     .main-image box, so the <img> — in-flow content — always paints on top
     of it. If mask-image is unsupported it degrades to a soft disc, which
     is a look, not a failure. */
  .section.home-hero .main-image::after {
    content: "";
    position: absolute;
    inset: 4%;
    z-index: -1;
    border-radius: 50%;
    pointer-events: none;
    background-image: conic-gradient(
      from 0deg,
      transparent 0deg,
      color-mix(in oklab, var(--c-brand-500) 55%, transparent) 40deg,
      transparent 120deg,
      color-mix(in oklab, #8fa9ff 45%, transparent) 210deg,
      transparent 300deg);
    opacity: .55;
  }
  @supports (mask-image: radial-gradient(#000, #000)) {
    .section.home-hero .main-image::after {
      -webkit-mask-image: radial-gradient(closest-side, transparent 62%, #000 70%, #000 88%, transparent 95%);
      mask-image: radial-gradient(closest-side, transparent 62%, #000 70%, #000 88%, transparent 95%);
      opacity: .85;
    }
  }
  /* Scroll-driven, so it advances only while the page is actually moving and
     costs nothing at rest. Falls back to a static ring where scroll timelines
     are unsupported, which is the same look, just still. */
  @supports ((animation-timeline: scroll()) and (animation-range: normal)) {
    @media (prefers-reduced-motion: no-preference) {
      .section.home-hero .main-image::after {
        animation: si-ring auto linear;
        animation-timeline: scroll(root block);
      }
    }
  }
  @keyframes si-ring { to { rotate: 180deg; } }

  /* ---------- CTA: travelling border beam ---------- */
  .section.home-hero .primary-button {
    position: relative;
    background-image: linear-gradient(
      100deg, var(--c-brand-600) 0%, var(--c-brand-500) 50%, #5b82ff 100%);
    background-size: 200% 100%;
  }
  /* Was a 7s loop on the most important button on the site. Now the gradient
     travels on hover and focus, where the movement actually means something,
     and holds still the rest of the time. */
  .section.home-hero .primary-button {
    background-position: 0% 50%;
    transition: background-position var(--dur-slow) var(--ease),
                transform var(--dur) var(--ease);
  }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .section.home-hero .primary-button:hover { background-position: 100% 50%; }
  }
  .section.home-hero .primary-button:focus-visible { background-position: 100% 50%; }

  /* ---------- forced colors: strip every decorative layer ---------- */
  @media (forced-colors: active) {
    .section.home-hero .container::before,
    .section.home-hero .two-col-grid::before,
    .section.home-hero .main-image::after { display: none; }
    .section.home-hero .main-image { transform: none; }
    .section.home-hero .h1 { animation: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .section.home-hero .container::before,
    .section.home-hero .main-image::after,
    .section.home-hero .primary-button,
    .section.home-hero .h1 { animation: none; }
  }
}
/* =============================================================
   Header v2.

   FIRST: undo a regression this session introduced. The modern-plus
   layer declared `.navigation.light { position: relative }` so the
   scroll-progress rail would have a positioning context. But legacy
   sets `position: fixed` on the same selector, and @layer components
   outranks @layer legacy — so the header silently stopped being
   fixed and scrolled away with the page. `fixed` already establishes
   a containing block for absolutely positioned children, so the
   declaration was both unnecessary and harmful.

   Header height stays 74px. Condensing it on scroll would shift the
   offset every hero and sticky-anchor is measured against, and that
   cannot be judged without rendering.
   ============================================================= */

@layer components {

  /* ---------- restore fixed positioning ---------- */
  .navigation.light {
    position: fixed;
    inset-block-start: 0;
    inset-inline: 0;
    z-index: 1000;
  }

  /* ---------- glass surface that firms up as you scroll ----------
     Only background, blur and shadow animate — never geometry — so a
     stalled or unsupported scroll timeline just leaves the header in
     its initial (already correct) state. */
  .navigation.light {
    background-color: color-mix(in srgb, var(--c-white) 82%, transparent);
    backdrop-filter: saturate(170%) blur(16px);
    -webkit-backdrop-filter: saturate(170%) blur(16px);
    border-block-end: 1px solid color-mix(in srgb, var(--c-line-200) 60%, transparent);
    box-shadow: none;
    transition: background-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
  }
  @supports ((animation-timeline: scroll()) and (animation-range: normal)) {
    .navigation.light {
      animation: si-nav-solidify auto linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 120px;
    }
  }
  @keyframes si-nav-solidify {
    to {
      background-color: color-mix(in srgb, var(--c-white) 96%, transparent);
      border-color: color-mix(in srgb, var(--c-ink-900) 10%, transparent);
      box-shadow: 0 6px 24px color-mix(in srgb, var(--c-ink-900) 10%, transparent);
    }
  }
  @supports not (backdrop-filter: blur(1px)) {
    .navigation.light { background-color: var(--c-white); }
  }

  /* ---------- nav items: sliding underline ----------
     Replaces the legacy full-bleed blue fill on hover, which reversed the
     text to white and read as a button rather than a link. */
  .link-2, .dropdown-toggle-2 {
    position: relative;
    border-radius: var(--radius-md);
    font-weight: 600;
    transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  }
  .link-2::after, .dropdown-toggle-2::after {
    content: "";
    position: absolute;
    inset-inline: var(--space-3);
    inset-block-end: 10px;
    block-size: 2px;
    border-radius: var(--radius-pill);
    background-color: currentColor;
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform var(--dur) var(--ease-spring);
  }
  .link-2:hover::after,
  .link-2:focus-visible::after,
  .link-2.w--current::after,
  .dropdown-toggle-2:hover::after,
  .dropdown-toggle-2:focus-visible::after { transform: scaleX(1); }

  /* Keep the colour readable: legacy flipped these to white on #4e74ff
     (3.99:1). Tint the surface instead and keep the brand text colour. */
  .link-2:hover, .link-2:focus-visible,
  .dropdown-toggle-2:hover, .dropdown-toggle-2:focus-visible {
    background-color: color-mix(in srgb, var(--c-brand-500) 9%, transparent);
    color: var(--accent-hover);            /* 5.81:1 on white */
  }
  .dropdown-toggle-2.w--open {
    background-color: color-mix(in srgb, var(--c-brand-500) 12%, transparent);
    color: var(--accent-hover);
  }
  .dropdown-toggle-2.w--open .text-block-6,
  .dropdown-toggle-2.w--open .w-icon-dropdown-toggle { color: var(--accent-hover); }

  /* ---------- mega-menu surface ---------- */
  .dropdown-list-2.w--open {
    padding: var(--space-2);
    min-inline-size: 17rem;
    background-color: color-mix(in srgb, var(--c-white) 97%, transparent);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
    border: 1px solid color-mix(in srgb, var(--c-ink-900) 8%, transparent);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
  }
  .dropdown-link-2 {
    border-radius: var(--radius-md);
    padding-inline: var(--space-3);
    font-weight: 600;
    color: var(--text-heading);
  }
  .dropdown-link-2:hover,
  .dropdown-link-2:focus-visible {
    background-color: color-mix(in srgb, var(--c-brand-500) 10%, transparent);
    color: var(--accent-hover);
    /* legacy filled it solid #4e74ff with white text = 3.99:1 */
  }

  /* ---------- burger morphs into a close mark ---------- */
  .burger-icon > div {
    transition: transform var(--dur) var(--ease-spring),
                opacity var(--dur-fast) var(--ease);
  }
  .menu-button.w--open .top-burger-line    { transform: translateY(8px) rotate(45deg); }
  .menu-button.w--open .middle-burger-line { opacity: 0; transform: scaleX(.4); }
  .menu-button.w--open .bottom-burger-line { transform: translateY(-8px) rotate(-45deg); }
  .menu-button.w--open { background-color: transparent; }

  /* ---------- CTA in the bar ---------- */
  .buttons-container .primary-small-button.white {
    border: 1px solid color-mix(in srgb, var(--c-brand-500) 40%, transparent);
    border-radius: var(--radius-md);
    font-weight: 700;
    color: var(--accent-hover);
    background-color: color-mix(in srgb, var(--c-brand-500) 7%, transparent);
  }
  .buttons-container .primary-small-button.white:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-brand);
  }

  @media (prefers-reduced-motion: reduce) {
    .navigation.light { animation: none; }
    .link-2::after, .dropdown-toggle-2::after { transition: none; }
    .burger-icon > div { transition: none; }
  }

  @media (forced-colors: active) {
    .navigation.light {
      animation: none;
      backdrop-filter: none;
      background-color: Canvas;
      border-block-end: 1px solid CanvasText;
      box-shadow: none;
    }
    .dropdown-list-2.w--open { backdrop-filter: none; background-color: Canvas; border: 1px solid CanvasText; }
    .link-2::after, .dropdown-toggle-2::after { background-color: LinkText; }
  }
}
/* =============================================================
   Round 2 fixes, from the owner's screenshots.
   ============================================================= */

@layer components {

  /* ---------------------------------------------------------- 1
     CRITICAL — light surfaces nested inside a dark section.

     `#pricing.pricing { --text-heading: #fff; --text-muted: #a9b4cc }`
     is inherited, so it reached INSIDE the white pricing cards:
       .card__name / .card__price / .feat__value -> white on white
       .card__setup / .feat__name -> #a9b4cc on white = 2.90:1
     which is exactly the "plan names and prices are missing" symptom.

     A dark-context token override must always be undone on any lighter
     surface nested within it. Restoring the light token set is enough —
     every consumer reads the token, so nothing needs re-specifying. */
  #pricing.pricing .pricing-card,
  .section.dark .pricing-card,
  .section.dark [data-surface="light"],
  [data-surface="light"] {
    --text-body:    var(--c-ink-600);   /*  7.34:1 on white */
    --text-heading: var(--c-ink-900);   /* 17.87:1 */
    --text-muted:   var(--c-ink-500);   /*  5.67:1 */
    --focus-ring:   var(--c-brand-700);
    --field-border: var(--c-line-500);
  }

  /* ---------------------------------------------------------- 2
     Stats band. Turning the section itself into a centred card left it
     misaligned against everything else on the page. Give the width to an
     inner wrapper instead — the pattern every other section already uses —
     so the section stays full-bleed and the card lines up with .container. */
  .section.dark.statistics {
    max-inline-size: none;
    margin-inline: 0;
    border-radius: 0;
    padding-block: var(--section-pad);
  }
  .section.dark.statistics > .container {
    max-inline-size: 1200px;
    margin-inline: auto;
    padding-inline: var(--space-4);
  }
  .analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: var(--space-5);
  }

  /* ---------------------------------------------------------- 3
     Pagination. The markup is <ul class="pagination">, and the page links
     rendered as run-together text ("123456") with no spacing or targets. */
  ul.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-2);
    margin: var(--space-6) 0 0;
    padding: 0;
    list-style: none;
  }
  ul.pagination li { list-style: none; margin: 0; }
  ul.pagination a,
  ul.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 44px;
    min-block-size: 44px;
    padding-inline: var(--space-3);
    border: 1px solid var(--c-line-200);
    border-radius: var(--radius-md);
    background-color: var(--surface);
    color: var(--text-heading);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                color var(--dur) var(--ease);
  }
  ul.pagination a:hover,
  ul.pagination a:focus-visible {
    border-color: var(--accent);
    background-color: color-mix(in srgb, var(--c-brand-500) 8%, transparent);
    color: var(--accent-hover);
  }
  ul.pagination .active a,
  ul.pagination a.active,
  ul.pagination span.active,
  ul.pagination .current {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-brand);
  }

  /* ---------------------------------------------------------- 4
     Sample card: "Get data sample" carries an inline style="width:100%"
     while "Buy data sample" did not, so the two stacked CTAs had different
     widths. Make every button in that card fill the column. */
  .buy-sample,
  .buy-sample .submit-button,
  .buy-sample .primary-medium-button {
    inline-size: 100%;
  }
  .pricing-card-v-1 .submit-button,
  .pricing-card-v-1 .primary-medium-button,
  .pricing-card-v-2 .submit-button,
  .pricing-card-v-2 .primary-medium-button {
    inline-size: 100%;
    min-inline-size: 0;
    text-align: center;
  }
  /* the sample buttons sit next to each other in the flow; give them rhythm */
  .pricing-card-v-1 .submit-button + .submit-button,
  .pricing-card-v-1 .primary-medium-button + .submit-button {
    margin-block-start: var(--space-3);
  }

  @media (forced-colors: active) {
    ul.pagination a, ul.pagination span { border: 1px solid CanvasText; }
  }
}

@layer components {
  /* legacy pins this to width:40% (70% at one breakpoint), so the Stripe
     button rendered narrower than the "Get data sample" button above it,
     which carries an inline style="width:100%". */
  .price-button-container { inline-size: 100%; }
  .price-button-container .submit-button {
    inline-size: 100%;
    min-inline-size: 0;
    text-align: center;
  }
  .price-button-container p { text-align: center; }
}

@layer components {
  /* ---- tab panes must not be sized by their contents ----
     Legacy `.tabs-content{display:flex}` makes every .w-tab-pane a flex item,
     and a flex item with `width:auto` is sized by its intrinsic content width.
     That worked until .post-card gained `container-type: inline-size`, which
     applies contain:inline-size and makes the card contribute ZERO intrinsic
     width. The whole chain then collapsed: 1170px -> 66px pane -> 2px grid
     tracks, which is why /case-studies/ and /blog/ rendered as bare lines.
     Measured with a same-origin layout probe, not guessed. */
  .tabs-content > .w-tab-pane,
  .w-tab-content > .w-tab-pane { inline-size: 100%; min-inline-size: 0; }

  /* Defence in depth: .post-card lives inside content-sized ancestors on at
     least two templates, so it does not get to be a query container. The one
     container query it powered is promoted to an unconditional rule. */
  .post-card { container-type: normal; }
  .post-content .h3-5 { font-size: var(--step-1); }
}

@layer components {
  /* ---- the `.white` button variant ----
     The group rule above paints every .primary-*-button with the accent
     BACKGROUND, and the .white variant only re-declared `color`. Result:
     accent text on an accent background — an invisible label. It showed up
     as an empty blue box under "See Our Plans" on every scraper page.
     A variant must always restate BOTH halves of the pair. */
  .primary-small-button.white,
  .primary-medium-button.white,
  .primary-button.white {
    background-color: var(--surface);
    color: var(--accent-hover);                     /* 5.81:1 on white */
    border: 1px solid color-mix(in srgb, var(--c-brand-500) 40%, transparent);
  }
  .primary-small-button.white:hover,
  .primary-medium-button.white:hover,
  .primary-button.white:hover {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-brand);
  }

  /* the hero pair should read as one group, not two stacked slabs */
  .buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
  .buttons > .primary-small-button.white { margin-left: 0 !important; }
}
/* =============================================================
   FAQ disclosure.
   Native <details>/<summary>: keyboard operation, find-in-page
   expansion and screen-reader state come for free, and Google
   indexes content inside a closed <details>.
   ============================================================= */

@layer components {

  .faq-blocks {
    display: grid;
    gap: var(--space-3);
    max-inline-size: 52rem;
    margin-inline: auto;
  }

  details.faq-item {
    background-color: var(--surface);
    border: 1px solid var(--c-line-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: border-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease);
  }
  details.faq-item:hover { border-color: color-mix(in srgb, var(--c-brand-500) 30%, transparent); }
  details.faq-item[open] {
    border-color: color-mix(in srgb, var(--c-brand-500) 42%, transparent);
    box-shadow: var(--shadow-md);
  }

  /* summary is the button; strip the UA triangle and draw our own */
  .faq-q {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    cursor: pointer;
    list-style: none;
    min-block-size: 44px;
  }
  .faq-q::-webkit-details-marker { display: none; }
  .faq-q::marker { content: ""; }

  .faq-q > .h4 {
    margin: 0;
    flex: 1;
    font-size: var(--step-1);
    line-height: 1.35;
    color: var(--text-heading);
    text-wrap: pretty;   /* not balance: it sits in a flex box with a set width */
  }

  /* chevron, drawn with borders so forced-colors keeps it */
  .faq-q::after {
    content: "";
    inline-size: .6em;
    block-size: .6em;
    flex: none;
    border-inline-end: 2px solid var(--accent);
    border-block-end: 2px solid var(--accent);
    rotate: 45deg;
    translate: 0 -.15em;
    transition: rotate var(--dur) var(--ease-spring), translate var(--dur) var(--ease);
  }
  details.faq-item[open] .faq-q::after { rotate: 225deg; translate: 0 .15em; }

  .faq-q:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: -3px;
    border-radius: var(--radius-lg);
  }

  .faq-a {
    padding: 0 var(--space-5) var(--space-5);
    color: var(--text-body);
  }
  .faq-a > p { margin: 0; }

  /* Animate the open/close where the engine supports it. interpolate-size
     is what makes height:auto animatable; without it the rule is inert and
     the panel simply snaps, which is the current behaviour anyway. */
  @supports (interpolate-size: allow-keywords) {
    @media (prefers-reduced-motion: no-preference) {
      :root { interpolate-size: allow-keywords; }
      details.faq-item::details-content {
        block-size: 0;
        overflow: hidden;
        transition: block-size var(--dur) var(--ease),
                    content-visibility var(--dur) allow-discrete;
      }
      details.faq-item[open]::details-content { block-size: auto; }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .faq-q::after { transition: none; }
  }

  @media (forced-colors: active) {
    details.faq-item { border: 1px solid CanvasText; box-shadow: none; }
    .faq-q::after { border-color: CanvasText; }
  }
}

@layer components {
  /* ---- retiring container-type entirely ----
     It has now caused three separate defects on this site:
       1. contain:inline-size removed the cards intrinsic width, collapsing
          /case-studies/ and /blog/ to 2px tracks;
       2. the same on .post-card inside a flex ancestor on the homepage;
       3. contain:style scopes CSS counters to the element, so
          .purpose-card::before restarted the counter in every card and all
          eight numbered badges rendered "01".
     What it bought was three font-size tweaks. Not a good trade — the
     queries below are promoted to viewport media queries instead. */
  .solutions, .post-card, .wwcd, .purpose-card, .analytic,
  #pricing.pricing .pricing-card { container-type: normal; }

  .purpose-title { font-size: var(--step-1); }
  .div-block-15 .h3-2 { font-size: var(--step-1); }
  .div-block-24 .heading-6 { font-size: var(--step-0); }
  @media (min-width: 48rem) {
    .purpose-title { font-size: var(--step-2); }
    .div-block-15 .h3-2 { font-size: var(--step-2); }
    .div-block-24 .heading-6 { font-size: var(--step-1); }
  }

  /* the numbered badge, now that the counter is site-wide again */
  .purpose-card::before {
    color: color-mix(in srgb, var(--c-brand-500) 16%, transparent);
    font-variant-numeric: tabular-nums;
  }
}

@layer components {
  /* ================= section rhythm and separation =================
     Sections ran together because everything sat on white with the same
     padding. Alternate the surface, give each band a hairline, and let the
     dark bands keep their own treatment. Nothing here changes text. */

  .section, .section-2 { position: relative; }

  /* a soft tint on every other light band, so the eye gets a boundary */
  .section-2.grey_grad,
  .section-2.grey,
  .section.grey {
    background-color: var(--c-surface-50);
  }

  /* hairline between adjacent light bands */
  .section-2 + .section-2,
  .section + .section-2,
  .section-2 + .section {
    border-block-start: 1px solid color-mix(in srgb, var(--c-ink-900) 6%, transparent);
  }
  /* never draw one against a dark band — it reads as a seam */
  .section.dark + .section-2,
  .section-2 + .section.dark,
  .section.dark + .section,
  .section + .section.dark { border-block-start: 0; }

  /* dark bands get generous rounding so they read as deliberate slabs */
  .section.dark { border-radius: var(--radius-lg); }

  /* section headers: consistent spacing and a measured line length */
  .title-container {
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    text-align: center;
    margin-block-end: var(--space-7);
  }
  .title-container > p { max-inline-size: 62ch; }

  /* the eyebrow reads as a chip rather than floating text */
  .title-container .text-block-9 {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background-color: color-mix(in srgb, var(--c-brand-500) 9%, transparent);
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: .04em;
  }

  /* centred section CTAs get room to breathe */
  .section-cta, .purposes-cta, .cases__more { margin-block-start: var(--space-7); }
}
/* =============================================================
   /contact-us — full visual rebuild.
   Same safety rule: no decorative layer may make content unreadable.
   ============================================================= */

@layer components {

  /* ---------- hero: aurora + grid, same language as the homepage ---------- */
  .contact-hero {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background-color: var(--c-surface-50);
    padding-block: calc(var(--section-pad) + 3rem) var(--section-pad);
  }
  .contact-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    pointer-events: none;
    background-image:
      radial-gradient(42% 60% at 16% 12%,
        color-mix(in oklab, var(--c-brand-500) 26%, transparent) 0%, transparent 70%),
      radial-gradient(46% 54% at 84% 6%,
        color-mix(in oklab, #7ea2ff 28%, transparent) 0%, transparent 72%);
  }
  .contact-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
      linear-gradient(to right, color-mix(in srgb, var(--c-ink-900) 6%, transparent) 1px, transparent 1px),
      linear-gradient(to bottom, color-mix(in srgb, var(--c-ink-900) 6%, transparent) 1px, transparent 1px);
    background-size: 52px 52px;
    -webkit-mask-image: radial-gradient(110% 76% at 50% 0%, #000 0%, transparent 70%);
    mask-image: radial-gradient(110% 76% at 50% 0%, #000 0%, transparent 70%);
  }
  .contact-hero .h2 { font-size: var(--step-4); line-height: 1.06; letter-spacing: -.025em; }
  .contact-hero p { font-size: var(--step-1); max-inline-size: 56ch; margin-inline: auto; }

  /* trust strip */
  .contact-trust {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: var(--space-3); list-style: none;
    margin: var(--space-6) 0 0; padding: 0;
  }
  .contact-trust li {
    display: grid; gap: 2px; justify-items: center;
    padding: var(--space-3) var(--space-5);
    border-radius: var(--radius-lg);
    background-color: color-mix(in srgb, var(--c-white) 72%, transparent);
    backdrop-filter: blur(10px) saturate(150%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border: 1px solid color-mix(in srgb, var(--c-ink-900) 8%, transparent);
    box-shadow: var(--shadow-sm);
  }
  .contact-trust strong { font-size: var(--step-1); color: var(--text-heading); font-weight: 800; }
  .contact-trust span   { font-size: var(--step--1); color: var(--text-muted); }

  /* ---------- form + checklist, side by side ---------- */
  .contact-main { padding-block: var(--section-pad); }
  .contact-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
  }
  @media (max-width: 900px) { .contact-layout { grid-template-columns: minmax(0, 1fr); } }

  .contact-main .contact-container {
    margin: 0 !important;
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background-color: var(--surface);
    border: 1px solid var(--c-line-200);
    box-shadow: var(--shadow-lg);
  }
  .contact-main .contact-container .h2 {
    font-size: var(--step-2);
    margin-block: 0 var(--space-5);
    text-align: start;
  }

  .contact-aside {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background-image: linear-gradient(180deg,
      color-mix(in srgb, var(--c-brand-500) 7%, transparent) 0%,
      color-mix(in srgb, var(--c-brand-500) 2%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--c-brand-500) 18%, transparent);
  }
  .contact-aside .h3-2 { font-size: var(--step-2); margin-block: 0 var(--space-4); }

  .contact-checklist { margin: var(--space-5) 0; display: grid; gap: var(--space-4); }
  .contact-checklist dt {
    font-weight: 700; color: var(--text-heading);
    display: flex; align-items: center; gap: var(--space-3);
  }
  .contact-checklist dt::before {
    content: "";
    inline-size: 1.4em; block-size: 1.4em; flex: none;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--c-brand-500) 14%, transparent);
    background-image: linear-gradient(transparent, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-brand-500) 34%, transparent);
  }
  .contact-checklist dd { margin: 0 0 0 calc(1.4em + var(--space-3)); color: var(--text-body); }

  /* ---------- process steps ---------- */
  .steps-grid {
    display: grid; gap: var(--space-5); list-style: none; margin: 0; padding: 0;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    counter-reset: step;
  }
  .step-card {
    position: relative;
    padding: var(--space-6) var(--space-5) var(--space-5);
    border-radius: var(--radius-lg);
    background-color: var(--surface);
    border: 1px solid var(--c-line-200);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease);
  }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .step-card:hover { transform: translate3d(0, -4px, 0); box-shadow: var(--shadow-md); }
  }
  .step-card::after {
    content: ""; position: absolute; inset-block-start: 0; inset-inline: var(--space-5);
    block-size: 3px; border-radius: var(--radius-pill);
    background-image: linear-gradient(90deg, var(--c-brand-500), #8fa9ff);
  }
  .step-num {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 2.25rem; block-size: 2.25rem;
    border-radius: 50%;
    background-color: color-mix(in srgb, var(--c-brand-500) 12%, transparent);
    color: var(--accent-hover);
    font-weight: 800; font-variant-numeric: tabular-nums;
    margin-block-end: var(--space-3);
  }
  .step-card .h4 { font-size: var(--step-1); margin-block: 0 var(--space-2); }
  .step-card p { margin: 0; }

  /* ---------- details + map ---------- */
  .details-grid {
    display: grid; gap: var(--space-6);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    align-items: stretch;
  }
  @media (max-width: 900px) { .details-grid { grid-template-columns: minmax(0, 1fr); } }

  .details-card {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background-color: var(--c-ink-900);
    color: var(--c-line-200);
    --text-body: var(--c-line-200);
    --text-heading: var(--c-white);
    --text-muted: #a9b4cc;
    --focus-ring: #a8c0ff;
  }
  .details-card .h3-2 { color: var(--c-white); font-size: var(--step-2); margin-block: 0 var(--space-5); }
  .details-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-4); }
  .details-list li {
    display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--space-3);
    align-items: baseline;
    padding-block-end: var(--space-3);
    border-block-end: 1px solid color-mix(in srgb, var(--c-white) 12%, transparent);
  }
  .details-list li:last-child { border-block-end: 0; padding-block-end: 0; }
  .details-list span { color: #a9b4cc; font-size: var(--step--1); font-weight: 600; }
  .details-list a { color: #a8c0ff; text-decoration: none; font-weight: 600; }
  .details-list a:hover { text-decoration: underline; }
  .details-list address { font-style: normal; color: var(--c-line-200); }
  .details-note { margin-block-start: var(--space-5); font-size: var(--step--1); color: #a9b4cc; }
  .details-note a { color: #a8c0ff; }

  .details-map {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--c-line-200);
    box-shadow: var(--shadow-md);
    min-block-size: 100%;
  }
  .details-map .html-embed, .details-map iframe { display: block; inline-size: 100%; block-size: 100%; min-block-size: 360px; }

  .contact-faq { padding-block: var(--section-pad); }

  @media (forced-colors: active) {
    .contact-hero::before, .contact-hero::after, .step-card::after { display: none; }
    .contact-trust li, .step-card, .details-card, .details-map, .contact-aside { border: 1px solid CanvasText; }
  }
}

@layer components {
  /* ================= transitions between sections =================
     Sections met on a hard edge. These are decorative pseudo-elements on
     the section itself — no extra markup, no effect on content. */

  .section-2, .section { position: relative; }

  /* soft vertical fade at the top of every light band that follows another */
  .section-2 + .section-2::before,
  .section-2 + .section::before {
    content: "";
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 5rem;
    z-index: 0;
    pointer-events: none;
    background-image: linear-gradient(
      180deg,
      color-mix(in srgb, var(--c-brand-500) 5%, transparent) 0%,
      transparent 100%);
  }

  /* dark bands get a glow bleeding upward into the band above */
  .section.dark::before {
    content: "";
    position: absolute;
    inset-block-start: -3rem;
    inset-inline: 10%;
    block-size: 6rem;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(38px);
    background-image: radial-gradient(closest-side,
      color-mix(in oklab, var(--c-brand-500) 26%, transparent) 0%, transparent 100%);
  }

  /* keep decorative layers under real content everywhere */
  .section-2 > *, .section > * { position: relative; z-index: 1; }

  @media (forced-colors: active) {
    .section-2 + .section-2::before,
    .section-2 + .section::before,
    .section.dark::before { display: none; }
  }
}

@layer components {
  /* ---- stat counters must fit their card ----
     "1 500 000 000" is 13 characters and was set at the same size as "25",
     so it wrapped onto two lines and collided with its label. Size the
     number against the card, not the viewport, and let the label sit clear. */
  .analytic {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    text-align: center;
  }
  .analytic .h3-2.count {
    margin: 0;
    font-size: clamp(1.5rem, 1rem + 2.2vw, 2.5rem);
    line-height: 1.1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    text-wrap: nowrap;
    max-inline-size: 100%;
    overflow-wrap: normal;
  }
  /* the long one gets its own ceiling so it stays on a single line */
  .analytic:has(.count) .count { font-size: clamp(1.35rem, .9rem + 1.9vw, 2.25rem); }
  .analytic p { margin: 0; font-size: var(--step--1); line-height: 1.35; }
  .analytic .feature-icon.stat { margin-block-end: var(--space-2); }
}

@layer components {
  /* ---- /about-us ---- */
  .section-2.hero-grey, .contact-hero { position: relative; isolation: isolate; overflow: clip; }
  .about-facts { padding-block: var(--section-pad); }
  .about-principles {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background-image: linear-gradient(180deg,
      color-mix(in srgb, var(--c-brand-500) 7%, transparent) 0%,
      color-mix(in srgb, var(--c-brand-500) 2%, transparent) 100%);
    border: 1px solid color-mix(in srgb, var(--c-brand-500) 18%, transparent);
  }
  .about-principles .h3-2 { font-size: var(--step-2); margin-block: 0 var(--space-5); }

  /* leadership cards */
  .team-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(15rem,100%),1fr)); }
  .team-member {
    padding: var(--space-6) var(--space-5);
    border-radius: var(--radius-lg);
    background-color: var(--surface);
    border: 1px solid var(--c-line-200);
    box-shadow: var(--shadow-sm);
    text-align: center;
    transition: transform var(--dur) var(--ease-spring), box-shadow var(--dur) var(--ease);
  }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .team-member:hover { transform: translate3d(0,-4px,0); box-shadow: var(--shadow-md); }
  }
  .team-member .large-avatar {
    margin-inline: auto;
    border-radius: 50%;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand-500) 22%, transparent);
  }
  .team-member .h5 { font-size: var(--step-1); margin-block: var(--space-4) 0; color: var(--text-heading); }
  .team-member .small-text-2 { color: var(--text-muted); }
  .social-container { display: flex; justify-content: center; gap: var(--space-3); }
  .social-link {
    display: inline-flex; align-items: center; justify-content: center;
    inline-size: 40px; block-size: 40px; border-radius: 50%;
    background-color: color-mix(in srgb, var(--c-brand-500) 8%, transparent);
    transition: background-color var(--dur) var(--ease);
  }
  .social-link:hover { background-color: color-mix(in srgb, var(--c-brand-500) 18%, transparent); }

  /* story / mission columns */
  .two-col { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(20rem,100%),1fr)); align-items: center; }
  .two-col img { border-radius: var(--radius-lg); }

  @media (forced-colors: active) {
    .team-member, .about-principles { border: 1px solid CanvasText; }
  }
}

@layer components {
  /* =============================================================
     PROTOTYPE — asymmetric bento for the Solutions section.
     Pure layout: no markup change, no content change. Scoped to
     .my-grid-4 so it can be reverted by deleting this block alone.
     ============================================================= */
  @media (min-width: 62rem) {
    .my-grid-4 {
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      grid-auto-rows: minmax(11rem, auto);
      gap: var(--space-5);
    }
    /* 1 — hero tile, wide and tall */
    .my-grid-4 > .solutions:nth-child(1) { grid-column: span 3; grid-row: span 2; }
    /* 2, 3 — stacked beside it */
    .my-grid-4 > .solutions:nth-child(2) { grid-column: span 3; }
    .my-grid-4 > .solutions:nth-child(3) { grid-column: span 3; }
    /* 4, 5 — a pair */
    .my-grid-4 > .solutions:nth-child(4) { grid-column: span 2; }
    .my-grid-4 > .solutions:nth-child(5) { grid-column: span 4; }
    /* 6, 7, 8 — an even trio */
    .my-grid-4 > .solutions:nth-child(6) { grid-column: span 2; }
    .my-grid-4 > .solutions:nth-child(7) { grid-column: span 2; }
    .my-grid-4 > .solutions:nth-child(8) { grid-column: span 2; }
    /* 9 — full-width closer */
    .my-grid-4 > .solutions:nth-child(9) { grid-column: span 6; }

    /* the big tile earns a different treatment */
    .my-grid-4 > .solutions:nth-child(1) {
      background-image:
        radial-gradient(80% 90% at 100% 0%,
          color-mix(in oklab, var(--c-brand-500) 14%, transparent) 0%, transparent 66%);
    }
    .my-grid-4 > .solutions:nth-child(1) .h3-2 { font-size: var(--step-3); }
    .my-grid-4 > .solutions:nth-child(9) {
      display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5);
      background-image: linear-gradient(100deg,
        color-mix(in srgb, var(--c-brand-500) 8%, transparent) 0%, transparent 60%);
    }
  }

  /* every tile keeps a readable internal rhythm at any span */
  .my-grid-4 > .solutions {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-5);
    justify-content: flex-start;
  }
  .my-grid-4 > .solutions .link { margin-block-start: auto; }
}

@layer components {
  /* ---- big bento tile: fill the height instead of leaving a void ---- */
  @media (min-width: 62rem) {
    .my-grid-4 > .solutions:nth-child(1) {
      justify-content: center;
      gap: var(--space-4);
    }
    .my-grid-4 > .solutions:nth-child(1) p { font-size: var(--step-1); line-height: 1.55; }
    .my-grid-4 > .solutions:nth-child(1) .link { margin-block-start: var(--space-2); }
    /* the full-width closer reads as a band, not a stretched card */
    .my-grid-4 > .solutions:nth-child(9) { justify-content: center; }
  }

  /* ---- bento for Purposes and Case Studies (Advantages stays a plain trio) ---- */
  @media (min-width: 62rem) {
    .purposes-grid--cards {
      grid-template-columns: repeat(6, minmax(0, 1fr));
      grid-auto-rows: minmax(9rem, auto);
    }
    .purposes-grid--cards > .purpose-card:nth-child(1) { grid-column: span 3; }
    .purposes-grid--cards > .purpose-card:nth-child(2) { grid-column: span 3; }
    .purposes-grid--cards > .purpose-card:nth-child(3) { grid-column: span 2; }
    .purposes-grid--cards > .purpose-card:nth-child(4) { grid-column: span 2; }
    .purposes-grid--cards > .purpose-card:nth-child(5) { grid-column: span 2; }
    .purposes-grid--cards > .purpose-card:nth-child(6) { grid-column: span 2; }
    .purposes-grid--cards > .purpose-card:nth-child(7) { grid-column: span 2; }
    .purposes-grid--cards > .purpose-card:nth-child(8) { grid-column: span 2; }

    /* Case studies deliberately keep an even grid. .posts-grid renders both
       the homepage "Latest Case Studies" block and the /case-studies/ listing,
       so an asymmetric layout here would land in two places at once. */
  }

  /* ---- SEO copy blocks on the listing pages ---- */
  .listing-intro {
    max-inline-size: 68ch;
    margin: var(--space-6) auto 0;
    display: grid;
    gap: var(--space-4);
    text-align: start;
  }
  .listing-lede {
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--text-heading);
    font-weight: 600;
  }
  .listing-outro-section { padding-block: var(--section-pad); }
  .listing-outro { max-inline-size: 68ch; margin-inline: auto; display: grid; gap: var(--space-4); }
  .listing-outro .h3-2 { font-size: var(--step-2); margin: 0; }
  .listing-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(16rem,100%),1fr)); }
  .listing-links a {
    display: grid; gap: 2px;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    background-color: var(--surface);
    border: 1px solid var(--c-line-200);
    text-decoration: none;
    transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease-spring);
  }
  .listing-links a:hover { border-color: var(--accent); transform: translate3d(0,-2px,0); }
  .listing-links strong { color: var(--accent-hover); }
  .listing-links span { font-size: var(--step--1); color: var(--text-muted); }
}

@layer components {
  /* =============================================================
     Hero v3 — the legacy hero-shape.svg wave was doing all the
     talking and every effect layered on top was invisible against
     it. Retire the wave as the dominant element and let a real
     gradient field carry the block.
     ============================================================= */
  .section.home-hero {
    background-image: none;                 /* drop the dated wave */
    background-color: var(--c-white);
  }

  /* the field: large, saturated, asymmetric — reads at a glance */
  .section.home-hero::before {
    inset: 0;
    filter: none;
    opacity: 1;
    background-image:
      radial-gradient(58% 78% at 88% 4%,
        color-mix(in oklab, var(--c-brand-500) 62%, transparent) 0%, transparent 62%),
      radial-gradient(46% 62% at 100% 42%,
        color-mix(in oklab, #6f8dff 55%, transparent) 0%, transparent 66%),
      radial-gradient(40% 50% at 66% 96%,
        color-mix(in oklab, #a8c0ff 42%, transparent) 0%, transparent 70%),
      linear-gradient(160deg, transparent 0%, transparent 44%,
        color-mix(in oklab, var(--c-brand-500) 10%, transparent) 100%);
  }

  /* engineering grid, stronger and clipped to the light side */
  .section.home-hero::after {
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(105deg, #000 0%, #000 46%, transparent 74%);
    mask-image: linear-gradient(105deg, #000 0%, #000 46%, transparent 74%);
  }

  /* headline: tighter, larger, with a real optical size */
  .section.home-hero .h1 {
    font-size: clamp(2.6rem, 1.6rem + 4.4vw, 4.6rem);
    line-height: .98;
    letter-spacing: -.035em;
    font-weight: 800;
  }
  .section.home-hero .subtitle { max-inline-size: 46ch; }

  /* CTA row: primary plus a quiet secondary, so the block has a pair */
  .section.home-hero .primary-button {
    padding-inline: var(--space-7);
    padding-block: var(--space-4);
    font-size: var(--step-1);
    border-radius: var(--radius-pill);
    box-shadow: 0 12px 34px color-mix(in srgb, var(--c-brand-500) 34%, transparent);
  }

  /* delivery-format strip: states facts already published on the site and
     gives the empty lower-left area something to hold */
  .small-container-no-anim.hero::after {
    content: "CSV · Excel · JSON · XML · FTP · SFTP · Amazon S3 · Google Cloud";
    display: block;
    margin-block-start: var(--space-6);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid color-mix(in srgb, var(--c-ink-900) 10%, transparent);
    font-size: var(--step--1);
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--text-muted);
  }

  @media (forced-colors: active) {
    .section.home-hero::before, .section.home-hero::after { display: none; }
    .small-container-no-anim.hero::after { content: none; }
  }
}

@layer components {
  /* =============================================================
     /web-scraping-price — the comparison table.
     Pure presentation: no markup, no copy, no plan names touched.
     Scoped to #pricing.section-2 so it cannot reach the homepage
     pricing block, which lives on #pricing.pricing.
     ============================================================= */
  #pricing.section-2 {
    background-color: var(--c-surface-50);
    padding-block: var(--section-pad);
  }
  #pricing.section-2 .pricing__title { color: var(--text-heading); }
  #pricing.section-2 .pricing__subtitle { color: var(--text-body); }
  #pricing.section-2 .pricing__eyebrow {
    display: inline-flex;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background-color: color-mix(in srgb, var(--c-brand-500) 10%, transparent);
    color: var(--accent-hover);
    font-weight: 700;
    font-size: var(--step--1);
    letter-spacing: .06em;
  }

  /* the table itself */
  #pricing.section-2 .pricing-table {
    border-radius: var(--radius-lg);
    overflow: hidden;
    background-color: var(--surface);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--c-line-200);
  }
  #pricing.section-2 .pricing-row { border-block-end: 1px solid var(--c-line-200); }
  #pricing.section-2 .pricing-row:last-child { border-block-end: 0; }
  #pricing.section-2 .pricing-item,
  #pricing.section-2 .pricing-item-title {
    padding: var(--space-4) var(--space-3);
    font-variant-numeric: tabular-nums;
  }
  #pricing.section-2 .pricing-item-title {
    text-align: start;
    font-weight: 600;
    color: var(--text-heading);
  }
  /* zebra so a long row stays readable across the table */
  #pricing.section-2 .pricing-row:nth-of-type(even) {
    background-color: color-mix(in srgb, var(--c-surface-100) 55%, transparent);
  }

  /* the recommended column reads as chosen, not merely tinted */
  #pricing.section-2 .highlighted-column {
    background-color: color-mix(in srgb, var(--c-brand-500) 7%, transparent);
    box-shadow: inset 1px 0 0 color-mix(in srgb, var(--c-brand-500) 32%, transparent),
                inset -1px 0 0 color-mix(in srgb, var(--c-brand-500) 32%, transparent);
    font-weight: 600;
  }

  /* Choose buttons: consistent, full-width in their cell, proper targets */
  #pricing.section-2 .choose-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 100%;
    min-block-size: 44px;
    margin-block-start: var(--space-2);
    padding-inline: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--accent);
    background-color: var(--surface);
    color: var(--accent-hover);
    font-weight: 700;
    text-decoration: none;
    transition: background-color var(--dur) var(--ease),
                color var(--dur) var(--ease),
                transform var(--dur-fast) var(--ease-spring);
  }
  #pricing.section-2 .choose-btn:hover,
  #pricing.section-2 .choose-btn:focus-visible {
    background-color: var(--accent);
    color: var(--text-on-brand);
  }
  #pricing.section-2 .choose-btn:active { transform: translateY(1px); }
  #pricing.section-2 .highlighted-column .choose-btn {
    background-color: var(--accent);
    color: var(--text-on-brand);
  }
  #pricing.section-2 .highlighted-column .choose-btn:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
  }

  /* the discount flags */
  .si-discount-flags { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
  .si-flag {
    min-block-size: 40px;
    display: inline-flex; align-items: center;
    padding-inline: var(--space-4);
    border-radius: var(--radius-pill);
    border: 1px solid var(--c-line-200);
    background-color: var(--surface);
    cursor: pointer;
    font-weight: 600;
    transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  }
  .si-flag:hover { border-color: var(--accent); }
  .si-flag.active {
    background-color: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-brand);
  }

  @media (forced-colors: active) {
    #pricing.section-2 .pricing-table { border: 1px solid CanvasText; }
    #pricing.section-2 .highlighted-column { box-shadow: none; outline: 2px solid Highlight; outline-offset: -2px; }
  }
}

@layer components {
  /* =============================================================
     Listing pages (/case-studies/, /blog/) — editorial layout.
     The intro was a narrow ragged column under a centred H1 with a
     dead margin beside it. Give it a real two-column masthead.
     ============================================================= */
  .section-2.hero:has(.listing-intro) {
    background-color: var(--c-surface-50);
    padding-block: calc(var(--section-pad) + 2rem) var(--section-pad);
    position: relative;
    isolation: isolate;
    overflow: clip;
  }
  .section-2.hero:has(.listing-intro)::before {
    content: "";
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
      radial-gradient(46% 62% at 88% 0%,
        color-mix(in oklab, var(--c-brand-500) 22%, transparent) 0%, transparent 68%),
      linear-gradient(to right, color-mix(in srgb, var(--c-ink-900) 5%, transparent) 1px, transparent 1px),
      linear-gradient(to bottom, color-mix(in srgb, var(--c-ink-900) 5%, transparent) 1px, transparent 1px);
    background-size: auto, 48px 48px, 48px 48px;
    -webkit-mask-image: radial-gradient(120% 90% at 60% 0%, #000 0%, transparent 76%);
    mask-image: radial-gradient(120% 90% at 60% 0%, #000 0%, transparent 76%);
  }

  /* masthead: H1 and lede left, the supporting paragraphs right */
  .section-2.hero:has(.listing-intro) .container-2,
  .section-2.hero:has(.listing-intro) .container {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-7) var(--space-6);
    align-items: start;
  }
  @media (max-width: 900px) {
    .section-2.hero:has(.listing-intro) .container-2,
    .section-2.hero:has(.listing-intro) .container { grid-template-columns: minmax(0,1fr); gap: var(--space-5); }
  }
  .section-2.hero:has(.listing-intro) h1 {
    grid-column: 1;
    text-align: start;
    font-size: clamp(2.4rem, 1.5rem + 3.4vw, 3.8rem);
    line-height: 1.02;
    letter-spacing: -.03em;
    margin: 0;
  }
  .listing-intro {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    max-inline-size: none;
    gap: var(--space-4);
  }
  @media (max-width: 900px) {
    .section-2.hero:has(.listing-intro) h1 { grid-column: 1; }
    .listing-intro { grid-column: 1; grid-row: auto; }
  }
  .listing-lede {
    font-size: var(--step-2);
    line-height: 1.28;
    letter-spacing: -.015em;
    font-weight: 700;
    color: var(--text-heading);
    text-wrap: balance;
  }
  .listing-intro p:not(.listing-lede) { font-size: var(--step-0); line-height: 1.6; }

  /* breadcrumbs sit above the whole masthead */
  .section-2.hero:has(.listing-intro) .breadcrumbs { grid-column: 1 / -1; margin-block-end: var(--space-4); }

  /* ---- the cards themselves ---- */
  .posts-grid { gap: var(--space-6); }
  .post-card {
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--c-line-200);
    box-shadow: var(--shadow-sm);
    transition: transform var(--dur) var(--ease-spring),
                box-shadow var(--dur) var(--ease),
                border-color var(--dur) var(--ease);
  }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .post-card:has(a:hover), .post-card:has(a:focus-visible) {
      transform: translate3d(0,-6px,0);
      box-shadow: var(--shadow-lg);
      border-color: color-mix(in srgb, var(--c-brand-500) 34%, transparent);
    }
  }
  .post-card img { transition: scale var(--dur-slow) var(--ease); }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .post-card:has(a:hover) img { scale: 1.04; }
  }
  .post-content { padding: var(--space-5); gap: var(--space-3); }
  .post-content .h3-5 { font-size: var(--step-1); line-height: 1.25; text-wrap: pretty; }
  .post-content .small-text { font-size: var(--step--1); color: var(--text-muted); }
  /* the read link sits at the bottom edge, consistent across cards */
  .post-content .link { margin-block-start: auto; font-weight: 700; }

  @media (forced-colors: active) {
    .section-2.hero:has(.listing-intro)::before { display: none; }
    .post-card { border: 1px solid CanvasText; }
  }
}

@layer components {
  /* The masthead grid above also caught the card grid, which lives in the
     same container: the cards squeezed into the right half and the third
     column clipped. Put the cards back on their own full-width row. */
  .section-2.hero:has(.listing-intro) .w-dyn-list,
  .section-2.hero:has(.listing-intro) .posts-grid,
  .section-2.hero:has(.listing-intro) .tabs,
  .section-2.hero:has(.listing-intro) .collection-list,
  .section-2.hero:has(.listing-intro) .listing-outro {
    grid-column: 1 / -1;
    inline-size: 100%;
  }
  .section-2.hero:has(.listing-intro) .posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
    gap: var(--space-6);
    margin-block-start: var(--space-7);
  }
  /* masthead columns only apply to the two elements that form it */
  .section-2.hero:has(.listing-intro) .container-2 > :not(h1):not(.listing-intro):not(.breadcrumbs),
  .section-2.hero:has(.listing-intro) .container > :not(h1):not(.listing-intro):not(.breadcrumbs) {
    grid-column: 1 / -1;
  }
}

@layer components {
  /* =============================================================
     Article pages — blog posts and case studies.
     CSS only: no markup, no copy. Long-form reading first.
     ============================================================= */
  .section.hero.blog-post {
    position: relative;
    isolation: isolate;
    overflow: clip;
    background-color: var(--c-surface-50);
    padding-block: calc(var(--section-pad) + 1.5rem) var(--space-7);
  }
  .section.hero.blog-post::before {
    content: "";
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
      radial-gradient(50% 68% at 84% -6%,
        color-mix(in oklab, var(--c-brand-500) 22%, transparent) 0%, transparent 70%),
      linear-gradient(to right, color-mix(in srgb, var(--c-ink-900) 5%, transparent) 1px, transparent 1px),
      linear-gradient(to bottom, color-mix(in srgb, var(--c-ink-900) 5%, transparent) 1px, transparent 1px);
    background-size: auto, 48px 48px, 48px 48px;
    -webkit-mask-image: radial-gradient(120% 100% at 55% 0%, #000 0%, transparent 78%);
    mask-image: radial-gradient(120% 100% at 55% 0%, #000 0%, transparent 78%);
  }

  .post-container { max-inline-size: 46rem; margin-inline: auto; }
  .post-container > .h2 {
    font-size: clamp(2rem, 1.3rem + 2.6vw, 3.1rem);
    line-height: 1.08;
    letter-spacing: -.028em;
    text-wrap: balance;
    margin-block: var(--space-3) var(--space-4);
  }
  .post-container .inline-text {
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background-color: color-mix(in srgb, var(--c-brand-500) 9%, transparent);
    color: var(--accent-hover);
    font-size: var(--step--1);
    font-weight: 600;
  }

  /* ---- the article body ---- */
  .rich-text {
    max-inline-size: 42rem;
    margin-inline: auto;
    font-size: var(--step-0);
    line-height: 1.72;
    color: var(--text-body);
  }
  .rich-text > * + * { margin-block-start: var(--space-5); }
  .rich-text p { text-wrap: pretty; }

  .rich-text h2 {
    font-size: var(--step-2);
    line-height: 1.2;
    letter-spacing: -.02em;
    margin-block-start: var(--space-8);
    padding-block-start: var(--space-5);
    border-block-start: 1px solid var(--c-line-200);
    text-wrap: balance;
  }
  .rich-text h3 {
    font-size: var(--step-1);
    line-height: 1.3;
    margin-block-start: var(--space-7);
    text-wrap: balance;
  }
  .rich-text h2 + p, .rich-text h3 + p { margin-block-start: var(--space-3); }

  .rich-text a {
    color: var(--accent-hover);
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
  }
  .rich-text ul, .rich-text ol { padding-inline-start: var(--space-6); display: grid; gap: var(--space-3); }
  .rich-text li::marker { color: var(--accent); }

  .rich-text blockquote {
    margin-inline: 0;
    padding: var(--space-5) var(--space-6);
    border-radius: var(--radius-lg);
    border-inline-start: 3px solid var(--accent);
    background-color: color-mix(in srgb, var(--c-brand-500) 6%, transparent);
    font-size: var(--step-1);
    line-height: 1.5;
    color: var(--text-heading);
  }

  .rich-text img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
  .rich-text figure { margin-inline: 0; }
  .rich-text figure figcaption {
    margin-block-start: var(--space-3);
    font-size: var(--step--1);
    color: var(--text-muted);
    text-align: center;
  }
  /* full-width figures escape the reading measure, deliberately */
  .rich-text .w-richtext-align-fullwidth { max-inline-size: 52rem; margin-inline: auto; }

  .rich-text table {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--step--1);
    display: block;
    overflow-x: auto;
  }
  .rich-text th, .rich-text td {
    padding: var(--space-3) var(--space-4);
    border-block-end: 1px solid var(--c-line-200);
    text-align: start;
  }
  .rich-text th { color: var(--text-heading); font-weight: 700; }

  .rich-text code {
    padding: .15em .4em;
    border-radius: var(--radius-sm);
    background-color: var(--c-surface-100);
    font-size: .92em;
  }
  .rich-text pre {
    padding: var(--space-5);
    border-radius: var(--radius-lg);
    overflow-x: auto;
    background-color: var(--c-ink-900);
    color: var(--c-line-200);
  }
  .rich-text pre code { background: none; padding: 0; }

  /* reading progress on article pages only */
  @supports ((animation-timeline: scroll()) and (animation-range: normal)) {
    @media (prefers-reduced-motion: no-preference) {
      body:has(.rich-text) .navigation.light::after { animation-range: 0 100%; }
    }
  }

  @media (forced-colors: active) {
    .section.hero.blog-post::before { display: none; }
    .rich-text blockquote { border-inline-start-color: CanvasText; background: none; }
  }
}

@layer components {
  /* ---- listing intro: give the text a real measure ----
     Making the masthead full-width dropped the measure with it, so the
     supporting paragraphs ran ~110 characters per line. The lede stays
     wide because it is short and large; the body goes into two columns,
     which uses the width without stretching the line. */
  .listing-intro { max-inline-size: 72rem; }
  .listing-lede {
    max-inline-size: 26ch;
    font-size: clamp(1.35rem, .9rem + 1.6vw, 2rem);
    line-height: 1.22;
  }
  .listing-body { display: contents; }

  @media (min-width: 62rem) {
    /* the four supporting paragraphs flow as magazine columns */
    .listing-intro > p:not(.listing-lede) {
      break-inside: avoid;
      margin: 0;
    }
    .listing-intro {
      display: block;
      columns: 2;
      column-gap: var(--space-7);
    }
    .listing-intro > .listing-lede {
      column-span: all;
      max-inline-size: 34ch;
      margin-block-end: var(--space-5);
    }
    .listing-intro > p:not(.listing-lede) + p:not(.listing-lede) {
      margin-block-start: var(--space-4);
    }
  }
  @media (max-width: 61.99rem) {
    .listing-intro { max-inline-size: 68ch; }
  }
  .listing-intro > p:not(.listing-lede) {
    font-size: var(--step-0);
    line-height: 1.62;
  }

  /* ---- cards on small screens ----
     One column below 40rem, two between 40 and 62rem, and give the
     image a fixed ratio so the grid does not go ragged. */
  @media (max-width: 61.99rem) {
    .posts-grid,
    .section-2.hero:has(.listing-intro) .posts-grid {
      grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
      gap: var(--space-5);
      margin-block-start: var(--space-6);
    }
  }
  @media (max-width: 40rem) {
    .posts-grid,
    .section-2.hero:has(.listing-intro) .posts-grid {
      grid-template-columns: minmax(0, 1fr);
      gap: var(--space-4);
    }
    .post-content { padding: var(--space-4); }
    .post-content .h3-5 { font-size: var(--step-0); }
    .section-2.hero:has(.listing-intro) h1 { font-size: clamp(1.9rem, 1.2rem + 3vw, 2.6rem); }
    .listing-lede { font-size: var(--step-1); }
  }
  /* keep card images a consistent shape so rows line up */
  .post-card > a:first-child img,
  .post-card .post-image img { aspect-ratio: 16 / 10; object-fit: cover; inline-size: 100%; }
}

@layer components {
  /* ---- the lede was too heavy ----
     700 weight at five lines reads as shouting rather than as an
     introduction. Drop to 500, ease the size, widen the measure so a
     long lede resolves in two or three lines instead of five, and let
     the colour carry a little less contrast than the H1 above it. */
  .listing-lede {
    font-weight: 500;
    font-size: clamp(1.15rem, .95rem + .9vw, 1.5rem);
    line-height: 1.4;
    letter-spacing: -.005em;
    color: var(--c-ink-700);
    text-wrap: pretty;
  }
  @media (min-width: 62rem) {
    .listing-intro > .listing-lede {
      max-inline-size: 58ch;
      margin-block-end: var(--space-6);
    }
  }
  @media (max-width: 61.99rem) {
    .listing-lede { max-inline-size: 46ch; }
  }

  /* the H1 keeps the weight, so the hierarchy stays obvious */
  .section-2.hero:has(.listing-intro) h1 { margin-block-end: var(--space-4); }

  /* thin hairline between the lede and the columns gives the eye a stop */
  @media (min-width: 62rem) {
    .listing-intro > .listing-lede {
      padding-block-end: var(--space-5);
      border-block-end: 1px solid color-mix(in srgb, var(--c-ink-900) 9%, transparent);
    }
  }
}

@layer components {
  /* ---- highlighted column: the header cell is not a body cell ----
     .highlighted-column sits on every cell of the recommended column,
     including the header. The header row is dark navy with white text,
     so the light tint I gave the column painted white on near-white and
     the plan name vanished. Same mistake as the pricing cards: a tint
     applied without checking what colour the text inherits.
     The header keeps a dark, branded fill; only body cells get the tint. */
  #pricing.section-2 .pricing-header-item.highlighted-column {
    background-color: var(--accent);
    color: var(--text-on-brand);
    box-shadow: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
  }
  #pricing.section-2 .pricing-header-item.highlighted-column strong {
    color: var(--text-on-brand);      /* #fff on #3762ff = 4.82:1 */
    font-size: var(--step-1);
  }
  /* the Best Choice pill needs to read against that fill, not blend into it */
  #pricing.section-2 .label-choise1 {
    display: inline-block;
    position: static;
    inline-size: auto;
    margin-block-end: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background-color: var(--c-white);
    color: var(--accent-hover);       /* 5.81:1 on white */
    font-size: var(--step--1);
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
  }
  /* keep the plan name and the pill stacked and centred */
  #pricing.section-2 .pricing-header-item.highlighted-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
  }
}

@layer components {
  /* ---- recommended column header, quieter ----
     A solid bright fill in the middle of a dark header row reads as a
     sticker rather than as emphasis. Keep the cell in the same navy as
     its neighbours and mark it with a brand rule above and a light
     label, so the column is distinguished by structure, not by shouting. */
  #pricing.section-2 .pricing-header-item.highlighted-column {
    background-color: transparent;                 /* inherit the navy row */
    box-shadow: inset 0 3px 0 var(--c-brand-500);
    border-radius: 0;
    padding-block-start: var(--space-3);
  }
  #pricing.section-2 .pricing-header-item.highlighted-column strong {
    color: var(--c-white);
    font-size: var(--step-1);
    letter-spacing: -.01em;
  }
  #pricing.section-2 .label-choise1 {
    background-color: transparent;
    padding: 0;
    margin-block-end: var(--space-1);
    color: #a8c0ff;                                /* 8.6:1 on the navy header */
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    white-space: nowrap;
  }
  /* the body of the column keeps its soft tint and side rules */
  #pricing.section-2 .pricing-item.highlighted-column {
    box-shadow: inset 1px 0 0 color-mix(in srgb, var(--c-brand-500) 30%, transparent),
                inset -1px 0 0 color-mix(in srgb, var(--c-brand-500) 30%, transparent);
  }

  @media (forced-colors: active) {
    #pricing.section-2 .pricing-header-item.highlighted-column {
      box-shadow: none; outline: 2px solid Highlight; outline-offset: -2px;
    }
  }
}

@layer components {
  /* ---- correction ----
     `background-color: transparent` on the header cell did not inherit the
     navy header row — it let the light .highlighted-column tint show
     through, so the plan name went light-on-light again and the cell lost
     its height, letting the price row ride up into it.
     Set the navy explicitly. A cell that must differ from its column needs
     its own value, never `transparent`. */
  #pricing.section-2 .pricing-header-item.highlighted-column {
    background-color: #253057;                 /* the navy of the header row */
    box-shadow: inset 0 3px 0 var(--c-brand-500);
    min-block-size: 5.5rem;
    padding: var(--space-4) var(--space-3);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    overflow: visible;
  }
  #pricing.section-2 .pricing-header-item.highlighted-column strong {
    color: #fff;                               /* 12.6:1 on #253057 */
    font-size: var(--step-1);
    line-height: 1.2;
  }
  #pricing.section-2 .label-choise1 {
    position: static;
    inline-size: auto;
    background: none;
    padding: 0;
    margin: 0;
    color: #a8c0ff;                            /* 6.9:1 on #253057 */
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
  }
}

@layer components {
  /* =============================================================
     Category hubs (/popular-sites/<category>) — the index of every
     site we scrape. Plain text links in four columns read as a
     directory dump; make each one a target you want to click.
     ============================================================= */
  .hub-lead {
    max-inline-size: 68ch;
    margin: var(--space-6) auto 0;
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-lg);
    background-color: color-mix(in srgb, var(--c-brand-500) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--c-brand-500) 16%, transparent);
    font-size: var(--step-0);
    line-height: 1.6;
  }
  .hub-lead p { margin: 0; }

  .platform-index {
    display: grid;
    gap: var(--space-8);
    margin-block-start: var(--space-8);
  }

  .platform-index__group { scroll-margin-block-start: 6rem; }

  .platform-index__heading {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
    padding-block-end: var(--space-3);
    border-block-end: 1px solid var(--c-line-200);
    font-size: var(--step-2);
    line-height: 1.2;
    letter-spacing: -.02em;
    color: var(--text-heading);
  }
  .platform-index__heading::before {
    content: "";
    inline-size: .3rem;
    block-size: 1.25em;
    flex: none;
    border-radius: var(--radius-pill);
    background-image: linear-gradient(180deg, var(--c-brand-500), #8fa9ff);
  }
  .platform-index__count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 2rem;
    padding: .15em .5em;
    border-radius: var(--radius-pill);
    background-color: color-mix(in srgb, var(--c-brand-500) 12%, transparent);
    color: var(--accent-hover);
    font-size: var(--step--1);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
  }

  .platform-index__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--space-2);
    grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
  }
  .platform-index__item { margin: 0; }

  .platform-index__link {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: 44px;
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    color: var(--text-heading);
    font-weight: 500;
    text-decoration: none;
    transition: background-color var(--dur) var(--ease),
                border-color var(--dur) var(--ease),
                color var(--dur) var(--ease),
                transform var(--dur-fast) var(--ease-spring);
  }
  /* a chevron that only appears on approach, so the row stays calm at rest */
  .platform-index__link::after {
    content: "";
    inline-size: .42em; block-size: .42em;
    margin-inline-start: auto;
    border-inline-end: 2px solid currentColor;
    border-block-start: 2px solid currentColor;
    rotate: 45deg;
    opacity: 0;
    translate: -.35em 0;
    transition: opacity var(--dur) var(--ease), translate var(--dur) var(--ease);
  }
  .platform-index__link:hover,
  .platform-index__link:focus-visible {
    background-color: color-mix(in srgb, var(--c-brand-500) 8%, transparent);
    border-color: color-mix(in srgb, var(--c-brand-500) 26%, transparent);
    color: var(--accent-hover);
    transform: translate3d(2px, 0, 0);
  }
  .platform-index__link:hover::after,
  .platform-index__link:focus-visible::after { opacity: 1; translate: 0 0; }

  @media (prefers-reduced-motion: reduce) {
    .platform-index__link, .platform-index__link::after { transition: none; }
    .platform-index__link:hover { transform: none; }
  }
  @media (forced-colors: active) {
    .hub-lead { border: 1px solid CanvasText; background: none; }
    .platform-index__heading::before { background: CanvasText; }
    .platform-index__link:hover { border-color: Highlight; }
  }
}

@layer components {
  /* ---- hub: one axis, and links that look like targets ----
     The H1 and lede were centred while the lead box and every group sat
     hard left in a wider container, so nothing lined up. Constrain the
     whole page to one measure and centre it. */
  .platform-index,
  .hub-lead,
  .section-2.hero:has(.platform-index) .simple-title {
    max-inline-size: 68rem;
    margin-inline: auto;
  }
  .section-2.hero:has(.platform-index) .container-2 { max-inline-size: 72rem; margin-inline: auto; }

  .hub-lead {
    text-align: center;
    padding: var(--space-5) var(--space-6);
  }

  .platform-index { gap: var(--space-7); }

  /* the group header centres its own row rather than hugging the edge */
  .platform-index__heading {
    justify-content: flex-start;
    font-size: var(--step-1);
  }

  /* links become filled tiles: the grid reads as a grid, not as gaps */
  .platform-index__list {
    gap: var(--space-3);
    grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr));
  }
  .platform-index__link {
    background-color: var(--surface);
    border-color: var(--c-line-200);
    box-shadow: var(--shadow-sm);
    padding: var(--space-3) var(--space-4);
    font-weight: 600;
    font-size: var(--step--1);
  }
  .platform-index__link::after { opacity: .35; translate: 0 0; }
  .platform-index__link:hover,
  .platform-index__link:focus-visible {
    background-color: var(--surface);
    border-color: color-mix(in srgb, var(--c-brand-500) 45%, transparent);
    box-shadow: var(--shadow-md);
    transform: translate3d(0, -2px, 0);
  }
  .platform-index__link:hover::after,
  .platform-index__link:focus-visible::after { opacity: 1; }

  @media (prefers-reduced-motion: reduce) {
    .platform-index__link:hover { transform: none; }
  }
  @media (forced-colors: active) {
    .platform-index__link { border-color: CanvasText; box-shadow: none; }
  }
}

@layer components {
  /* The chevron was meant to sit at the far edge of a full-width row, but
     once the links became bordered tiles it landed right after the label
     and read as a stray tick. A bordered tile already signals a target,
     so the arrow is redundant — drop it and let the text centre itself. */
  .platform-index__link::after { content: none; }
  .platform-index__link {
    justify-content: flex-start;
    gap: 0;
    line-height: 1.35;
  }
}

@layer components {
  /* ---- hub: ONE axis, declared once ----
     Measured on the live page: four different left edges (137 / 152 / 169)
     and four different widths (1152 / 1088 / 863 / 820). Every block was
     individually "centred" against a different parent, which is why the
     page read as misaligned no matter how many times it was nudged.
     This block is the single source of truth for hub width. */
  .section-2.hero:has(.platform-index) .container-2 {
    max-inline-size: 1120px;
    margin-inline: auto;
    padding-inline: var(--space-5);
  }
  .section-2.hero:has(.platform-index) .simple-title,
  .section-2.hero:has(.platform-index) .subtitle,
  .hub-lead,
  .platform-index {
    max-inline-size: 100%;
    inline-size: 100%;
    margin-inline: auto;
  }

  /* the intro reads as a lead-in, not as a second headline */
  .section-2.hero:has(.platform-index) .subtitle {
    max-inline-size: 62ch;
    margin-inline: auto;
    font-size: var(--step-0);
    line-height: 1.6;
    color: var(--text-body);
  }

  .hub-lead {
    max-inline-size: 72ch;
    text-align: center;
  }

  /* group headings centre with the rest of the page */
  .platform-index__heading { justify-content: center; text-align: center; }
  .platform-index__heading::before { display: none; }

  /* tile labels centre inside their tile */
  .platform-index__link { justify-content: center; text-align: center; }
}

@layer components {
  /* The lead box still centred against a different parent than the index,
     so their midpoints differed by ~125px. Let the box span the same width
     as the grid and constrain only the text inside it. */
  .hub-lead { max-inline-size: 100%; inline-size: 100%; }
  .hub-lead p { max-inline-size: 72ch; margin-inline: auto; }

  /* two-item categories should not stretch a tile across half the page */
  .platform-index__list { justify-content: center; }
  .platform-index__list:has(> :nth-child(-n+3):last-child) {
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 18rem));
    justify-content: center;
  }
}

@layer components {
  /* ---- purposes grid: drop the fixed bento spans ----
     The spans were written for exactly eight cards on a six-column grid.
     Solution pages render nine, and the ninth got no rule, fell into the
     leftover track and squeezed to a single narrow column with the text
     breaking one word per line. A layout that only works at one item
     count is the wrong tool here — use an auto-fit grid that is correct
     for any number. */
  @media (min-width: 62rem) {
    .purposes-grid--cards {
      grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
      grid-auto-rows: auto;
    }
    .purposes-grid--cards > .purpose-card:nth-child(n) { grid-column: auto; }
  }
  .purpose-card { min-inline-size: 0; }
  .purpose-title { text-wrap: balance; }

  /* ---- buttons must never clip their own label ---- */
  .submit-button, .primary-button, .primary-medium-button, .btn {
    inline-size: auto;
    max-inline-size: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    block-size: auto;
    min-block-size: 44px;
  }
  .price-button-container .submit-button,
  #email-form .submit-button { inline-size: 100%; }

  /* ---- cart form: even field rhythm ---- */
  #cart-form .field, .cart .field { align-content: start; }
  .cart select, select.text-field, select.w-input {
    min-block-size: 44px;
    padding-inline: var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid var(--field-border);
    background-color: var(--surface);
    color: var(--text-heading);
    font-size: var(--step-0);
  }
}

@layer components {
  /* ---- links inside authored prose blocks ----
     Measured on the live hub: .hub-lead a computed to rgb(0,0,238) — the
     user-agent default, i.e. never styled. Visited links then rendered
     purple, which is what looked wrong on the hubs and on the listing
     intros. Give every authored block the brand link treatment. */
  .hub-lead a,
  .listing-intro a,
  .listing-outro a,
  .details-note a,
  .contact-aside a,
  .field-hint a {
    color: var(--accent-hover);          /* 5.81:1 on white */
    text-decoration-thickness: 1px;
    text-underline-offset: .16em;
    font-weight: 600;
  }
  .hub-lead a:visited,
  .listing-intro a:visited,
  .listing-outro a:visited,
  .details-note a:visited { color: var(--accent-hover); }
  .hub-lead a:hover,
  .listing-intro a:hover,
  .listing-outro a:hover { color: var(--c-brand-700); }

  /* the hero art is meant to bleed, but not past the viewport edge */
  .section.home-hero { overflow-x: clip; }
}

@layer components {
  /* ---- .field must not spread its rows ----
     Measured on /cart: a .field grid 257px tall holding 133px of content.
     Grid rows are auto-sized, and align-content defaults to a stretch-like
     `normal`, so the surplus height was shared between label, control and
     hint — which is the ~150px of dead space between them.
     An earlier attempt scoped this to #cart-form and .cart, neither of
     which exists on the page. Declare it on .field itself. */
  .field { align-content: start; }
  #email-form { align-items: start; }
  form.form { align-items: start; }
}


/* =============================================================
   The hidden attribute has to win
   =============================================================
   `.field { display: grid }` outranks the user-agent `[hidden]` rule, so
   #order-other-wrap - the "Your source" field, which is only meant to appear
   after you pick "Other" from the list - rendered on every visit. Measured at
   380x83 sitting in the second column, which is where the odd empty pocket in
   the order form came from. An author `display` will always beat the UA sheet,
   so the guard has to be !important; that is what every reset does and why.
   ============================================================= */
@layer base {
  [hidden] { display: none !important; }
}

@layer components {

  /* =============================================================
     /cart - one task, one column
     =============================================================
     Measured at 1440px before this: h1 at x=135 (width 1170) but the form at
     x=340 (width 760). The form carried its own centred measure while the
     heading and the intro ran the full width of the rich-text block, so the
     page had two different left edges and read as broken rather than centred.
     One measure on the container puts all three on the same axis.
     `:has()` scopes this to the order page without touching markup that 178
     other pages share.
     ============================================================= */
  .section-2.hero:has(#data-sample-order) > .container-2 {
    max-inline-size: 46rem;
    margin-inline: auto;
  }

  /* Single column. #email-form declares two columns behind an id selector,
     so the override needs the id too, otherwise the class loses on
     specificity and /contact-us keeps its two-column grid. */
  .form--single,
  #email-form.form--single {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    align-items: start;
  }

  /* Every direct child spans the single column, whatever it is. Written as a
     child rule rather than a list of class names so a field added to the
     template later cannot land half-width. */
  .form--single > * { grid-column: 1 / -1; min-inline-size: 0; }

  /* ---- the form as a card ---- */
  #data-sample-order {
    background-color: var(--surface);
    border: 1px solid var(--c-line-200);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    box-shadow: var(--shadow-sm);
  }
  @media (max-width: 560px) {
    #data-sample-order { padding: var(--space-4); border-radius: var(--radius-md); }
  }

  /* Label sits closer to its own control than to the next group, so the eye
     groups them correctly rather than pairing a label with the field above. */
  #data-sample-order .field { gap: var(--space-1); align-content: start; }
  #data-sample-order .field > label { margin-block-end: 2px; }
  #data-sample-order .field-hint { margin-block-start: 2px; line-height: 1.45; }

  #data-sample-order .text-field,
  #data-sample-order .textarea {
    inline-size: 100%;
    min-block-size: 44px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--field-border);
    border-radius: var(--radius-md);
    background-color: var(--surface);
    color: var(--text-heading);
    font-size: var(--step-0);
    transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  #data-sample-order .textarea { min-block-size: 8.5rem; resize: vertical; }

  #data-sample-order .text-field:focus-visible,
  #data-sample-order .textarea:focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-color: var(--focus-ring);
  }
  /* Only after the field has been interacted with - :user-invalid, not
     :invalid - so a required field is not painted red before it is touched. */
  #data-sample-order .text-field:user-invalid,
  #data-sample-order .textarea:user-invalid {
    border-color: var(--c-danger-600);
  }

  #data-sample-order .recaptcha-item { margin-block-start: var(--space-1); }

  #data-sample-order .form-actions {
    display: grid;
    gap: var(--space-2);
    justify-items: start;
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--c-line-200);
  }
  #data-sample-order .submit-button {
    inline-size: 100%;
    min-block-size: 48px;
    font-size: var(--step-0);
    font-weight: 700;
  }
  #data-sample-order .form-reassure {
    margin: 0;
    color: var(--text-muted);          /* 5.67:1 on white */
    font-size: var(--step--1);
    line-height: 1.5;
  }

  /* The note under the card is guidance, not part of the form. */
  .section-2.hero:has(#data-sample-order) .details-note {
    margin-block-start: var(--space-4);
    color: var(--text-body);
    font-size: var(--step--1);
  }

  /* Was inline `opacity:.75` on #77809a, i.e. 3.93:1 on white - under the 4.5
     an AA body needs. --text-muted is 5.67:1 and carries the same quietness. */
  .buy-sample-note {
    margin-block-start: var(--space-2);
    margin-block-end: 0;
    font-size: var(--step--1);
    line-height: 1.5;
    color: var(--text-muted);
  }

  /* Setup-fee figure. Was inline #dd2828 - 4.34:1 against the #f1f4ff chip at
     13px bold, and 13px bold is not "large text", so it needed 4.5. The danger
     token is 5.75:1 on that same chip and reads as the same warm red. */
  .fee-month-value { color: var(--c-danger-600); }
}


@layer components {

  /* =============================================================
     FAQ: equal width, smaller blocks
     ============================================================= */

  .faq-blocks {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    gap: var(--space-2);
    max-inline-size: 48rem;
  }

  /* The two FAQ markups in this codebase - details.faq-item (accordion) and
     the plain #faq .faq-item div - are both covered, so a template that still
     uses the older one does not drift away from the newer one. */
  .faq-blocks > .faq-item,
  #faq .faq-blocks > .faq-item {
    inline-size: 100%;
    max-inline-size: none;
    justify-self: stretch;
    box-sizing: border-box;
  }

  /* ---- less bulk ----
     The question row carried 24px of padding on all four sides and set the
     question one step above body size, which made a single line of text
     129px tall. A FAQ is a scan-and-pick list; it should read as a list. */
  .faq-q {
    padding: var(--space-3) var(--space-4);
    gap: var(--space-3);
    min-block-size: 44px;              /* still a comfortable touch target */
  }
  .faq-q > .h4 {
    font-size: var(--step-0);
    line-height: 1.4;
    font-weight: 600;
  }
  .faq-a {
    padding: 0 var(--space-4) var(--space-3);
    font-size: var(--step-0);
    line-height: 1.6;
  }

  /* The plain-div variant gets the same rhythm. */
  #faq .faq-item {
    padding: var(--space-3) var(--space-4);
  }
  #faq .faq-item .h4 {
    font-size: var(--step-0);
    line-height: 1.4;
    margin-block: 0 var(--space-1);
  }

  /* A lighter resting state: the shadow on every row was what made the list
     look heavy. Keep the border, drop the shadow until the row is open. */
  details.faq-item { box-shadow: none; }
  details.faq-item[open] { box-shadow: var(--shadow-sm); }

  @media (max-width: 560px) {
    .faq-q { padding: var(--space-3); }
    .faq-a { padding: 0 var(--space-3) var(--space-3); }
  }
}


@layer components {

  /* =============================================================
     Scraper pages: prose that can be read
     =============================================================
     Scoped to the section ids the scraper templates share
     (universal_scraper, store_scraper, real_estate_scraper, job_scraper,
     travel_scraper) so the centred title blocks elsewhere are untouched.
     ============================================================= */

  #solutions .title-container,
  #about_platform .title-container,
  #why_scrape .title-container,
  #about_platform .title-container.left-align,
  #why_scrape .title-container.left-align {
    max-inline-size: none;
  }

  /* The heading block keeps its centring; the paragraphs do not. */
  #solutions .title-container > p,
  #about_platform .title-container > p,
  #why_scrape .title-container > p,
  #about_platform .title-container > ul,
  #why_scrape .title-container > ul,
  #about_platform .title-container > ol,
  #why_scrape .title-container > ol {
    text-align: start;
    max-inline-size: 68ch;      /* ~68 characters, inside the 45-75 band */
    margin-inline: auto;
  }

  /* Space between paragraphs, not inside them. */
  #solutions .title-container > p + p,
  #about_platform .title-container > p + p,
  #why_scrape .title-container > p + p {
    margin-block-start: var(--space-3);
  }

  /* ---- the capability list ----
     Was centred, so the bullets floated free of the text. Now a proper list
     with a drawn marker, flowing into as many columns as there is room for.
     `columns` balances any number of items - two or twenty - without the
     layout having to know the count. */
  #why_scrape .title-container ul,
  #about_platform .title-container ul {
    list-style-position: outside;
    padding-inline-start: 1.35rem;
    columns: 2 18rem;
    column-gap: var(--space-5);
    max-inline-size: 68ch;
  }
  #why_scrape .title-container ul > li,
  #about_platform .title-container ul > li {
    position: relative;
    margin-block-end: var(--space-2);
    break-inside: avoid;
    text-align: start;
    color: var(--text-body);            /* 6.96:1 on --c-surface-50 */
  }
  @media (forced-colors: active) {
  }

  /* A short accent rule under the section heading gives the band a top edge
     to sit against, instead of text floating in a field of grey. */
  #solutions .title-container > .h2,
  #about_platform .title-container > .h2,
  #why_scrape .title-container > .h3 { position: relative; }
  @media (forced-colors: active) {
  }

  /* #why_scrape used an h3 where the sections around it use h2, so the page
     read as if the section had been demoted. Size it like its neighbours;
     the heading level in the markup is left alone because that is document
     structure, not appearance. */
  #why_scrape .title-container > .h3 {
    font-size: var(--step-2);
    line-height: 1.15;
    color: var(--text-heading);
  }

  /* Left-align the heading block on the two prose-only sections so the
     heading, the rule and the paragraph share one left edge. */
  @media (min-width: 900px) {
    #about_platform .title-container,
    #why_scrape .title-container {
      text-align: start;
      max-inline-size: 68ch;
      margin-inline: auto;
    }
    #about_platform .title-container > p,
    #why_scrape .title-container > p,
    #about_platform .title-container > ul,
    #why_scrape .title-container > ul { margin-inline: 0; }
  }

  /* ---- the paired text/image blocks ----
     The screenshots sat on the page as bare bitmaps. Framing them makes them
     read as product evidence rather than a stray asset. */
  #solutions .two-col-grid { align-items: center; gap: var(--space-6); }
  #solutions .two-col-grid img {
    inline-size: 100%;
    block-size: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--c-line-200);
    box-shadow: var(--shadow-md);
    background-color: var(--surface);
  }
  #solutions .two-col-grid .small-container > p,
  #solutions .two-col-grid .small-container > ul { text-align: start; }
  #solutions .two-col-grid .h2 { text-wrap: balance; }

  /* ---- About ScrapeIt ----
     Half the row was holding a 135px logo. Collapse it to one contained
     block: mark, heading, copy - and let the section close up behind it. */
  #about_scrapeit .two-col-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
    max-inline-size: 60rem;
    margin-inline: auto;
    padding: var(--space-6);
    background-color: var(--surface);
    border: 1px solid var(--c-line-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }
  #about_scrapeit .two-col-grid > .small-container.lastorder {
    order: -1;                      /* mark first, then the words */
    display: flex;
    align-items: center;
  }
  #about_scrapeit .logo-icon { margin: 0; }
  #about_scrapeit .two-col-grid > .small-container > p { text-align: start; max-inline-size: 68ch; }
  #about_scrapeit .two-col-grid > .small-container > .h2 { text-align: start; margin-block-start: 0; }

  @media (max-width: 560px) {
    #about_scrapeit .two-col-grid { padding: var(--space-4); }
  }

  /* ---- vertical rhythm ----
     These bands carried the same tall padding whether they held six
     paragraphs or three lines, which is where the empty space came from.
     Fluid padding keeps the proportion without the dead band. */
  #about_platform.section-2,
  #why_scrape.section-2,
  #about_scrapeit.section-2 {
    padding-block: clamp(2.5rem, 5vw, 4.5rem);
  }
}


@layer components {

  /* The CMS emits empty paragraphs between blocks. They render nothing but
     still carry their margins, so they open gaps nobody asked for - one was
     measured at 0px tall between two 12px margins inside #why_scrape. */
  #solutions .title-container p:empty,
  #about_platform .title-container p:empty,
  #why_scrape .title-container p:empty,
  #about_scrapeit p:empty { display: none; }

  /* ---- About ScrapeIt: a horizontal card ----
     The first pass stacked the mark above the text, which left the right half
     of the card empty. Mark in its own column, words in the other, both
     centred on the same line. `auto` for the mark column means the card fits
     whatever logo is dropped in later rather than a hard-coded 135px. */
  @media (min-width: 640px) {
    #about_scrapeit .two-col-grid {
      grid-template-columns: auto minmax(0, 1fr);
      align-items: center;
      gap: var(--space-6);
      max-inline-size: 54rem;
    }
    #about_scrapeit .two-col-grid > .small-container.lastorder {
      justify-content: center;
      padding-inline-end: var(--space-5);
      border-inline-end: 1px solid var(--c-line-200);
      align-self: stretch;
    }
  }
  /* Let the copy fill its column: the column is already bounded by the card,
     and a 46ch cap left a quarter of the card empty on the right. */
  #about_scrapeit .two-col-grid > .small-container > p { max-inline-size: none; }

  @media (forced-colors: active) {
    #about_scrapeit .two-col-grid { border: 1px solid CanvasText; }
    #about_scrapeit .two-col-grid > .small-container.lastorder {
      border-inline-end-color: CanvasText;
    }
  }
}


@layer components {

  /* ---- one measure, one left edge ----
     The paragraphs were capped in `ch` and the list in `ch` too, but `ch`
     resolves against each element's own font size, so the list came out
     608px wide against the paragraphs' 855px and the two blocks started at
     different x. A shared measure in rem gives them the same box, so the
     prose, the list and the closing paragraph line up.

     The child combinator also missed a short paragraph that the editor had
     nested, so the selectors below are descendant selectors: whatever depth
     the CMS wraps its prose at, running text is left-aligned. */
  #solutions .title-container,
  #about_platform .title-container,
  #why_scrape .title-container { --prose: 53rem; }

  #solutions .title-container p,
  #about_platform .title-container p,
  #why_scrape .title-container p,
  #about_platform .title-container li,
  #why_scrape .title-container li {
    text-align: start;
  }

  #solutions .title-container p,
  #about_platform .title-container p,
  #why_scrape .title-container p,
  #about_platform .title-container ul,
  #why_scrape .title-container ul,
  #about_platform .title-container ol,
  #why_scrape .title-container ol {
    max-inline-size: var(--prose);
    margin-inline: auto;
  }

  /* Headings and the eyebrow stay centred - that reads as deliberate. */
  #solutions .title-container > .text-block-9,
  #solutions .title-container > .h2,
  #about_platform .title-container > .h2,
  #why_scrape .title-container > .h3 { text-align: center; }
}


@layer components {
  /* .title-container is a grid whose items are centred, so a short block
     shrink-wraps to its own text and floats in the middle of the column while
     its long neighbours fill the measure. Measured on /scraper/amazon: the
     lead-in "Here's what you can do with it:" came out x=470 w=325 between two
     blocks at x=209 w=848. text-align was already start - it was the box that
     was the wrong width. Stretch the items and the section shares one edge. */
  #solutions .title-container,
  #about_platform .title-container,
  #why_scrape .title-container { justify-items: stretch; }
}


@layer components {
  /* Auto inline margins on a grid item absorb the free space, which makes the
     item shrink to fit instead of stretching - so `margin-inline: auto` was
     itself the reason the short lead-in still centred while its long
     neighbours filled the measure. Giving every block the same definite width
     removes the ambiguity: each child is exactly one measure wide, so they
     centre identically and share a left edge whatever their content length. */
  #solutions .title-container p,
  #about_platform .title-container p,
  #why_scrape .title-container p,
  #about_platform .title-container ul,
  #why_scrape .title-container ul,
  #about_platform .title-container ol,
  #why_scrape .title-container ol {
    inline-size: min(100%, var(--prose));
    max-inline-size: none;
    margin-inline: auto;
  }
}


@layer components {

  /* =============================================================
     Remaining AA failures, measured
     ============================================================= */

  /* /contact-us: brand blue links sat on the dark ink panel at 3.08:1.
     The brand colour is tuned for white backgrounds; on #0f1729 it has to
     come up, not down. #8fa9ff is 7.90:1 there and is already the light end
     of the brand ramp used by the hero gradient. */
  .section.dark a:not(.w-button):not(.btn),
  [data-surface="dark"] a:not(.w-button):not(.btn),
  .contact-aside a {
    color: #8fa9ff;
  }
  .section.dark a:not(.w-button):not(.btn):hover,
  [data-surface="dark"] a:not(.w-button):not(.btn):hover,
  .contact-aside a:hover {
    color: #c7d4ff;                      /* 12.16:1 on #0f1729 */
  }
  @media (forced-colors: active) {
    .section.dark a, [data-surface="dark"] a, .contact-aside a { color: LinkText; }
  }

  /* /blog listing tabs. The active tab was #4e74ff on white at 3.99:1 and the
     inactive one #8087a6 on #eff3fb at 3.18:1. These are selectable controls,
     not disabled text, so they owe the full 4.5. */
  .tab-link-v-2-tab-1, .tab-link-v-2-tab-2,
  .tab-link-v-2-tab-3, .tab-link-v-2-tab-4,
  .tab-link-v-2-tab-1 > div, .tab-link-v-2-tab-2 > div,
  .tab-link-v-2-tab-3 > div, .tab-link-v-2-tab-4 > div {
    color: var(--c-ink-600);             /* 6.60:1 on #eff3fb, 7.34:1 on white */
  }
  .w-tab-link.w--current,
  .w-tab-link.w--current > div {
    color: var(--accent-hover);          /* #2f56e8, 5.81:1 on white */
    font-weight: 700;
  }

  /* Text read against a background image needs a colour behind it: until the
     image arrives - or if it 404s - there is nothing to read against. Both
     values are sampled from the images themselves, so nothing changes
     visually once they load.
     ctabg_1.webp averages rgb(29,52,112); white on it measures 11.81:1, and
     9.26:1 against its brightest two per cent. */
  .div-block-32 { background-color: #1d3470; }
}


@layer components {
  /* The two links the audit kept reporting live in .details-note inside
     .contact-details, which is a dark panel but carries neither .section.dark
     nor [data-surface="dark"], so the dark-surface rule never reached them.
     Measured: #2f56e8 on #0f1729 is 3.08:1; #8fa9ff on the same ground is
     7.90:1. Scoped to .contact-details because .details-note is also used on
     /cart, where it sits on a light surface and must stay dark blue. */
  .contact-details .details-note a,
  .contact-details .details-list a {
    color: #8fa9ff;
  }
  .contact-details .details-note a:hover,
  .contact-details .details-list a:hover {
    color: #c7d4ff;
  }
  @media (forced-colors: active) {
    .contact-details .details-note a,
    .contact-details .details-list a { color: LinkText; }
  }
}


@layer components {
  /* Ticks via ::marker: one generated glyph per item instead of a positioned
     pseudo-element box, and the list stays a list for screen readers. */
  #why_scrape .title-container ul > li::marker,
  #about_platform .title-container ul > li::marker {
    content: "\2713\00a0";
    color: var(--accent);            /* 4.58:1 on --c-surface-50 */
    font-size: .9em;
  }
  @media (forced-colors: active) {
    #why_scrape .title-container ul > li::marker,
    #about_platform .title-container ul > li::marker { color: CanvasText; }
  }
}


@layer components {
  /* The mobile nav toggle measured 36x36. 2.5.5 asks for 44x44, and it is the
     one control that has to work on a phone. Grown with padding so the burger
     glyph inside keeps its size and the header layout does not move. */
  .menu-button, .w-nav-button {
    min-inline-size: 44px;
    min-block-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Footer navigation links were 19px tall. They are a list of destinations,
     not links inside a sentence, so the inline-link exemption does not apply.
     Padding takes the hit area to 44px without changing the type or the
     spacing between the rows. */
  .text-block-8 a.link-4 {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }
}


@layer components {
  /* Remaining 2.5.5 targets, measured at 390px on /scraper/amazon and /cart:
       a.link            56x28, 85x28, 326x28   ("Learn More" on cards)
       a.pricing__link  139x22
       a.link-block-4    24x25, 44x25           (social marks in the footer)
     These are standalone destinations, not links inside a sentence, so the
     inline exemption does not cover them. Height is raised with padding and
     inline-flex; the type and the surrounding rhythm are untouched. */
  a.link,
  a.pricing__link {
    display: inline-flex;
    align-items: center;
    min-block-size: 44px;
  }
  .link-block-4 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 44px;
    min-block-size: 44px;
  }

  /* `list-style: none` makes WebKit drop the list role, so VoiceOver stops
     announcing "list, 8 items". role="list" is the usual fix but this markup
     comes from a snippet we would rather not fork, so the marker is kept and
     simply made invisible-but-present with a zero-width space. */
  ul.related-platforms { list-style-position: outside; }
  ul.related-platforms > li::marker { content: "\200b"; }
}


@layer components {

  /* =============================================================
     Оформление секций на страницах площадок
     ============================================================= */

  /* ---- кнопка ----
     Регрессия моего же justify-items: stretch - он растянул не только абзацы,
     но и ссылку-кнопку на всю меру. Кнопка размером с абзац читается как
     полоса, а не как действие. Ширина по содержимому, выравнивание по началу.

     Цвет текста задан явно рядом с фоном: у .primary-small-button есть вариант
     .white, и если поменять только фон, надпись останется синей на синем. */
  #solutions .title-container > .w-button,
  #about_platform .title-container > .w-button,
  #why_scrape .title-container > .w-button,
  #solutions .title-container > a[class*="button"],
  #about_platform .title-container > a[class*="button"],
  #why_scrape .title-container > a[class*="button"] {
    justify-self: start;
    inline-size: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 48px;
    padding-inline: var(--space-5);
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
    background-color: var(--c-brand-600);
    color: #fff;                       /* 5.81:1 на --c-brand-600 */
    font-weight: 700;
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: background-color var(--dur) var(--ease),
                box-shadow var(--dur) var(--ease),
                transform var(--dur) var(--ease);
  }
  @media (hover: hover) and (prefers-reduced-motion: no-preference) {
    #about_platform .title-container > a[class*="button"]:hover,
    #why_scrape .title-container > a[class*="button"]:hover,
    #solutions .title-container > a[class*="button"]:hover {
      background-color: var(--c-brand-700);
      box-shadow: var(--shadow-md);
      transform: translateY(-1px);
    }
  }
  @media (forced-colors: active) {
    #solutions .title-container > a[class*="button"],
    #about_platform .title-container > a[class*="button"],
    #why_scrape .title-container > a[class*="button"] {
      border-color: ButtonText;
      color: ButtonText;
      background-color: ButtonFace;
    }
  }

  /* ---- надзаголовок как бейдж ----
     Синий текст над заголовком выглядел недокликнутой ссылкой. Плашка
     объясняет, что это метка раздела, и добавляет секции цвет. */
  #solutions .title-container > .text-block-9 {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    inline-size: auto;
    padding: .35rem .85rem;
    border-radius: var(--radius-pill);
    background-color: color-mix(in srgb, var(--c-brand-500) 12%, transparent);
    color: var(--c-brand-700);         /* 6.12:1 на этой плашке */
    font-size: var(--step--1);
    font-weight: 700;
    letter-spacing: .02em;
    margin-block-end: var(--space-3);
  }
  @media (forced-colors: active) {
    #solutions .title-container > .text-block-9 {
      border: 1px solid CanvasText; background: Canvas; color: CanvasText;
    }
  }

  /* ---- перечни в парных блоках ----
     Списки "что мы собираем" - это спецификация, а не проза. Строки с
     разделителями и галочкой читаются по диагонали. Разделитель у последней
     строки снимается, поэтому число пунктов не имеет значения. */
  #solutions .two-col-grid ul {
    list-style-position: outside;
    padding-inline-start: 1.4rem;
    margin-block: var(--space-2) 0;
  }
  #solutions .two-col-grid ul > li {
    padding-block: .4rem;
    border-block-end: 1px solid var(--c-line-200);
  }
  #solutions .two-col-grid ul > li:last-child { border-block-end: 0; }
  #solutions .two-col-grid ul > li::marker {
    content: "\2713\00a0";
    color: var(--accent);              /* 4.58:1, графика просит 3:1 */
  }
  @media (forced-colors: active) {
    #solutions .two-col-grid ul > li::marker { color: CanvasText; }
  }

  /* ---- «What makes ... unique» как панель ----
     Абзацы висели в пустом поле. Панель даёт им край, а кнопке - основание. */
  #about_platform .title-container {
    background-color: var(--surface);
    border: 1px solid var(--c-line-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: clamp(1.5rem, 3.5vw, var(--space-6));
    max-inline-size: 62rem;
    margin-inline: auto;
  }
  @media (max-width: 560px) {
    #about_platform .title-container { border-radius: var(--radius-md); }
  }

  /* ---- карточка About пошире и с фирменным краем ---- */
  #about_scrapeit .two-col-grid {
    max-inline-size: 62rem;
    border-block-start: 3px solid transparent;
    border-image: linear-gradient(90deg, var(--c-brand-500), #8fa9ff) 1;
    border-image-slice: 1;
  }
  @media (forced-colors: active) {
    #about_scrapeit .two-col-grid { border-image: none; border-block-start-color: CanvasText; }
  }
}


@layer components {
  /* Плашка была залита брендовым цветом на 12 процентов - вычислено
     rgba(55,98,255,0.12), и на светлой секции это почти не читается как
     плашка. Сплошной #e0e7fd - тот же оттенок, но виден; текст #1e40d8
     даёт на нём 6.12:1. */
  /* #e0e7fd на секции #f7f9fd почти совпал с фоном - плашки не было видно.
     Граница даёт край, оставляя заливку спокойной. Текст #1e40d8 на этой
     заливке - 6.12:1. */
  #solutions .title-container > .text-block-9 {
    background-color: #e0e7fd;
    border: 1px solid #b9c9ff;
  }

  /* Кнопка стояла по левому краю панели (x=111), а текст начинается там, где
     начинается мера (x=216). Отступ переносит её на ту же вертикаль: половина
     разницы между шириной панели и мерой, но не меньше нуля - на узком экране
     мера шире контейнера, и отступ обнуляется сам. */
  #solutions .title-container > a[class*="button"],
  #about_platform .title-container > a[class*="button"],
  #why_scrape .title-container > a[class*="button"] {
    margin-inline-start: max(0px, calc((100% - var(--prose)) / 2));
  }
}


@layer components {
  /* Кнопка раздела - по центру панели и заметно шире.
     Ширина задана через min-inline-size, а не фиксированную: длинная подпись
     ("Get a Amazon data sample - EUR 9.99" на других шаблонах) растянет кнопку
     сама, короткая не схлопнется. Отступ сверху отделяет её от последнего
     абзаца, иначе она читается как часть текста. */
  #solutions .title-container > a[class*="button"],
  #about_platform .title-container > a[class*="button"],
  #why_scrape .title-container > a[class*="button"] {
    justify-self: center;
    margin-inline: auto;
    margin-block-start: var(--space-4);
    min-inline-size: 15rem;
    padding-inline: var(--space-6);
    min-block-size: 52px;
    font-size: var(--step-0);
  }
  @media (max-width: 560px) {
    #solutions .title-container > a[class*="button"],
    #about_platform .title-container > a[class*="button"],
    #why_scrape .title-container > a[class*="button"] {
      inline-size: min(100%, 22rem);
    }
  }
}


@layer components {

  /* =============================================================
     About ScrapeIt - крупнее, с воздухом и акцентом
     =============================================================
     border-image красит ВСЕ стороны, у которых есть border-width, а не только
     ту, которой задан. Поэтому вместо одной полосы сверху карточка получила
     резкую синюю рамку по периметру. Полоса теперь рисуется фоном: градиент
     высотой 3px, прижатый к верху, поверх сплошной заливки. Это и выглядит
     аккуратнее, и не трогает границы.
     ============================================================= */
  #about_scrapeit .two-col-grid {
    border-image: none;
    border-block-start: 1px solid var(--c-line-200);
    max-inline-size: 68rem;
    padding: clamp(1.5rem, 4vw, 3rem);
    border-radius: var(--radius-lg);
    background-color: var(--surface);
    background-image:
      linear-gradient(90deg, var(--c-brand-500), #8fa9ff),
      radial-gradient(120% 140% at 100% 0%,
        color-mix(in srgb, var(--c-brand-500) 7%, transparent) 0%, transparent 60%);
    background-repeat: no-repeat, no-repeat;
    background-size: 100% 3px, 100% 100%;
    background-position: top left, top right;
    box-shadow: var(--shadow-md);
  }

  /* Логотип крупнее - в своей колонке он выглядел потерянным. */
  #about_scrapeit .logo-icon {
    inline-size: clamp(9rem, 14vw, 12.5rem);
    block-size: auto;
  }

  /* Текст крупнее: это последний содержательный блок страницы, и читать его
     с кегля мелкого примечания незачем. */
  #about_scrapeit .two-col-grid > .small-container > .h2 {
    font-size: var(--step-2);
    line-height: 1.15;
    margin-block-end: var(--space-3);
  }
  #about_scrapeit .two-col-grid > .small-container > p {
    font-size: var(--step-1);
    line-height: 1.65;
    color: var(--text-body);           /* 7.34:1 на белом */
  }

  /* Разделительная черта между маркой и текстом - тоньше и спокойнее. */
  @media (min-width: 640px) {
    #about_scrapeit .two-col-grid > .small-container.lastorder {
      padding-inline-end: clamp(1.5rem, 3vw, 2.5rem);
      border-inline-end: 1px solid var(--c-line-200);
    }
    #about_scrapeit .two-col-grid { gap: clamp(1.5rem, 3.5vw, 3rem); }
  }

  /* Секция вокруг карточки была вдвое выше самой карточки. */
  #about_scrapeit.section-2 { padding-block: clamp(2rem, 4vw, 3.5rem); }

  @media (forced-colors: active) {
    #about_scrapeit .two-col-grid {
      background-image: none;
      border: 1px solid CanvasText;
    }
  }
}


@layer components {
  /* .small-container несёт собственный предел ширины из legacy: замерено 480px
     в колонке, которой сетка отдавала 703. Из-за этого справа в карточке
     оставалась пустая полоса в 222 пикселя. Колонка теперь занимает всё,
     что ей выделила сетка. */
  #about_scrapeit .two-col-grid > .small-container {
    max-inline-size: none;
    inline-size: 100%;
  }
  #about_scrapeit .two-col-grid > .small-container.lastorder {
    inline-size: auto;
  }
}


@layer components {
  /* =============================================================
     Заголовок героя: кегль по системе + гарантия от обрезки
     =============================================================
     Замерено на /real-estate-scrapers/immoscout24 при вьюпорте 1440:
     кегль 73.6px, колонка героя 34rem = 544px, слово "Immoscout24" заняло
     464px. Это 42px на знак, то есть одно слово длиннее ~12 знаков в колонку
     уже не помещается. Названия площадок приходят из CMS и бывают длиннее:
     "ImmobilienScout24" - 17 знаков, "Nieruchomosci-online.pl" - 23.

     Отдельное правило задавало заголовку clamp(..., 4.6rem) = 73.6px, хотя
     шкала проекта ограничена --step-4 = 3.5rem = 56px. Возвращаем к шкале:
     при 56px в колонку входит 17 знаков, то есть все обычные названия.

     Перенос - страховка на остальное. Никакой кегль не покроет произвольную
     строку из CMS, а break-word ломает по дефису, поэтому
     "Nieruchomosci-online.pl" разойдётся на "Nieruchomosci-" и "online.pl",
     а не обрежется по краю колонки. */
  .section.home-hero .h1 {
    font-size: var(--step-4);
    line-height: 1.03;
    overflow-wrap: break-word;
    hyphens: auto;
  }

  /* Колонке немного шире - справа под неё есть место, и это снимает перенос
     у названий средней длины. */
  @media (min-width: 992px) {
    .small-container-no-anim.hero { max-inline-size: 38rem; }
  }
}


@layer components {
  /* Главная кнопка героя ломалась на две строки, когда рядом стоит длинная
     вторая подпись ("Get a ImmoScout24 data sample - EUR 9.99"): ряд сжимал
     обе. У главной подпись задана в шаблоне и не приходит из CMS, поэтому её
     можно не переносить. Вторая переносится как раньше. */
  .section.home-hero .primary-button { white-space: nowrap; }
}


@layer components {
  /* Сноска на /cart. В контенте ресурса стоял inline opacity:.8, что давало
     #6e7793 на белом - 4.44:1 при кегле 15px, а AA просит 4.5. Inline бьёт
     любой слой, поэтому стиль убран из разметки, цвет берётся токеном:
     --text-muted это 5.67:1 на белом при той же приглушённости. */
  .cart-footnote {
    margin-block-start: var(--space-5);
    font-size: var(--step--1);
    line-height: 1.55;
    color: var(--text-muted);
  }
}