/* normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
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: bold;
}

dfn {
  font-style: italic;
}

h1 {
  font-size: 2em;
  margin: 0.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: -0.5em;
}
sub {
  bottom: -0.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 #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

legend {
  border: 0;
  
  padding: 0;
  
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: bold;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}
td,
th {
  padding: 0;
}

/* ── Global resets ───────────────────────────────────────── */
* {
  -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;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  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;
}
ul, ol {
  margin-top: 0;
  margin-bottom: 10px;
  padding-left: 40px;
}
fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}
button,
[type='button'],
[type='reset'] {
  border: 0;
  cursor: pointer;
  -webkit-appearance: button;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

/* ── Utilities ───────────────────────────────────────────── */
.inline-block {
  max-width: 100%;
  display: inline-block;
}
.list-unstyled {
  padding-left: 0;
  list-style: none;
}
.embed-block:before,
.embed-block:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.embed-block:after {
  clear: both;
}

/* ── Button ──────────────────────────────────────────────── */
.btn-base {
  display: inline-block;
  padding: 9px 15px;
  background-color: #3898ec;
  color: white;
  border: 0;
  line-height: inherit;
  text-decoration: none;
  cursor: pointer;
  border-radius: 0;
}
input.btn-base {
  -webkit-appearance: button;
}

/* ── Forms ───────────────────────────────────────────────── */
.form-block {
  margin: 0 0 15px;
}
.form-done {
  display: none;
  padding: 20px;
  text-align: center;
  background-color: #dddddd;
}
.form-fail {
  display: none;
  margin-top: 10px;
  padding: 10px;
  background-color: #ffdede;
}
.form-input {
  display: block;
  width: 100%;
  height: 38px;
  padding: 8px 12px;
  margin-bottom: 10px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #333333;
  vertical-align: middle;
  background-color: #ffffff;
  border: 1px solid #cccccc;
}
.form-input::placeholder {
  color: #999;
}
.form-input:focus {
  border-color: #3898ec;
  outline: 0;
}
.form-input[disabled],
.form-input[readonly],
fieldset[disabled] .form-input {
  cursor: not-allowed;
}
.form-input[disabled]:not(.form-input-disabled),
.form-input[readonly],
fieldset[disabled]:not(.form-input-disabled) .form-input {
  background-color: #eeeeee;
}
textarea.form-input {
  height: auto;
}

/* ── Container ───────────────────────────────────────────── */
.layout-container {
  margin-left: auto;
  margin-right: auto;
  max-width: 940px;
}
.layout-container:before,
.layout-container:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.layout-container:after {
  clear: both;
}
@media screen and (max-width: 991px) {
  .layout-container { max-width: 728px; }
}
@media screen and (max-width: 479px) {
  .layout-container { max-width: none; }
}

/* ── Dropdown ────────────────────────────────────────────── */
.nav-dropdown {
  display: inline-block;
  position: relative;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  z-index: 900;
}
.nav-dropdown-toggle {
  user-select: none;
  display: inline-block;
  cursor: pointer;
  position: relative;
  vertical-align: top;
  text-decoration: none;
  color: #222222;
  padding: 20px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
  white-space: nowrap;
}
.nav-dropdown-toggle:focus {
  outline: 0;
}
.nav-dropdown-list {
  position: absolute;
  background: #dddddd;
  display: none;
  min-width: 100%;
}
.nav-dropdown-list.is-open {
  display: block;
}

/* ── Nav ─────────────────────────────────────────────────── */
.site-nav {
  position: relative;
  background: #dddddd;
  z-index: 1000;
}
.site-nav:before,
.site-nav:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.site-nav:after {
  clear: both;
}
.nav-brand {
  position: relative;
  float: left;
  text-decoration: none;
  color: #333333;
}
.nav-link {
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  color: #222222;
  padding: 20px;
  text-align: left;
  margin-left: auto;
  margin-right: auto;
}
.nav-menu {
  position: relative;
  float: right;
}
.nav-burger {
  position: relative;
  float: right;
  padding: 18px;
  font-size: 24px;
  display: none;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  tap-highlight-color: rgba(0, 0, 0, 0);
  user-select: none;
}
.nav-burger:focus {
  outline: 0;
}
/* Login/register copy inside the mobile menu; the header buttons are hidden at ≤991px. */
.btn-row.nav-menu-auth { display: none; }
@media screen and (max-width: 991px) {
  .header.site-nav .nav-menu {
    display: none;
    top: 100%;
    left: 0;
    right: 0;
  }
  .header.site-nav .nav-burger { display: block; }
  .header.site-nav .nav-menu.is-open { display: block; }
  body.nav-open { overflow: hidden; }
  .btn-row.nav-menu-auth { display: flex; }
}
@media screen and (max-width: 767px) {
  .nav-brand { padding-left: 10px; }
}

/* ── Tabs ────────────────────────────────────────────────── */
.tabs {
  position: relative;
}
.tabs-nav {
  position: relative;
}
.tab-link {
  position: relative;
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  padding: 9px 30px;
  text-align: left;
  cursor: pointer;
  color: #222222;
  background-color: #dddddd;
}
.tab-link:focus {
  outline: 0;
}
.tabs-body {
  position: relative;
  display: block;
  overflow: hidden;
}
.tab-pane {
  position: relative;
  display: none;
}
@media screen and (max-width: 479px) {
  .tab-link { display: block; }
}

/* ── Rich text ───────────────────────────────────────────── */
.rich-text:before,
.rich-text:after {
  content: " ";
  display: table;
  grid-column-start: 1;
  grid-row-start: 1;
  grid-column-end: 2;
  grid-row-end: 2;
}
.rich-text:after {
  clear: both;
}
.rich-text ol,
.rich-text ul {
  overflow: hidden;
}
.rich-text figure {
  position: relative;
  max-width: 60%;
}
.rich-text figure img {
  width: 100%;
}

/* ── Scroll-in animations ────────────────────────────────── */
/* Content only starts hidden when JS can reveal it and the visitor allows motion. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  [data-animate] {
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  [data-animate],
  [data-animate="fade-up"] {
    transform: translateY(1.5rem);
  }
  [data-animate="fade-in"] {
    transform: none;
  }
  [data-animate="slide-left"] {
    transform: translateX(1.5rem);
  }
  [data-animate="slide-right"] {
    transform: translateX(-1.5rem);
  }
  [data-animate].is-visible {
    opacity: 1;
    transform: none;
  }
}

/* ── Tab active state ────────────────────────────────────── */
.tab-pane.is-active {
  display: block;
}

/* Exo, subset to Latin (U+0020-017F, general punctuation, €, ™, arrows) as WOFF2; preloaded in Layout.astro.
   Full font: fonts/Exo-VariableFont_wght.ttf. */
@font-face {
  font-family: "Exo (NovaSolu)";
  src: url('../fonts/Exo-Variable-latin.woff2') format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* Arial sized to Exo's metrics, so text barely moves when Exo swaps in.
   size-adjust = Exo/Arial average glyph width (~105%); overrides = Exo hhea metrics / size-adjust. */
@font-face {
  font-family: "Exo fallback";
  src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans");
  size-adjust: 105%;
  ascent-override: 95.43%;
  descent-override: 31.14%;
  line-gap-override: 0%;
}

.layout-grid {
  grid-row-gap: 16px;
  grid-column-gap: 16px;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.layout-block {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
  display: block;
}

@media screen and (max-width: 991px) {
  .layout-block {
    max-width: 728px;
  }
}

@media screen and (max-width: 767px) {
  .layout-block {
    max-width: none;
  }
}

body {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-600);
  letter-spacing: 0;
  font-family: "Exo (NovaSolu)", "Exo fallback", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5em;
}

h1 {
  color: var(--color-neutral-800);
  margin-top: .5rem;
  margin-bottom: 2rem;
  font-size: 3.2rem;
  font-weight: 700;
  line-height: 100%;
}

h2 {
  color: var(--color-neutral-800);
  margin-top: .5rem;
  margin-bottom: 1.5rem;
  font-size: 32px;
  font-weight: 700;
  line-height: 100%;
}

h3 {
  color: var(--color-neutral-800);
  margin-top: .5rem;
  margin-bottom: 1rem;
  font-size: 26px;
  font-weight: 700;
  line-height: 30px;
}

h4 {
  color: var(--color-neutral-800);
  margin-top: 10px;
  margin-bottom: .5rem;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
}

p {
  margin-bottom: 0;
  font-size: 1rem;
}

a {
  color: var(--color-primary);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: all .2s;
}

a:hover {
  color: var(--color-secondary);
}

ul {
  margin-top: .25rem;
  margin-bottom: .25rem;
  padding-left: 40px;
}

li {
  padding-top: .125rem;
  padding-bottom: .125rem;
}

.scroll-grid {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  align-items: start;
}

.footer-content-bottom {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  grid-auto-flow: row dense;
  justify-content: space-between;
  place-items: center;
  padding-top: 2rem;
  display: grid;
}

.footer-bottom-start {
  justify-self: start;
}

.footer-bottom-end {
  justify-self: end;
}

.footer-main-content {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: wrap;
  width: 30%;
  margin-right: 4rem;
  display: flex;
}

.container {
  width: 100%;
  max-width: 80rem;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.admin-grid-images-wrapper {
  padding-bottom: 0;
  position: relative;
}

.page-wrapper {
  font-family: "Exo (NovaSolu)", "Exo fallback", Arial, sans-serif;
  font-weight: 500;
}

.timeline-wrapper, .content-wrapper {
  position: relative;
}

.content-wrapper.timeline-scroll {
  position: sticky;
  top: 300px;
}

.home-hero-layout {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 50px;
  display: flex;
}

.footer-logo-container {
  margin-bottom: 20px;
  transition-property: transform;
  transition-duration: .2s;
  display: flex;
}

.footer-logo-container.is-current {
  transition-duration: .2s;
}

.footer-logo-container.is-current:hover {
  transform: none;
}

.content-icon {
  background-color: #fff;
  border-radius: 9px;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  display: flex;
  box-shadow: 1px 1px 3px #0003;
}

.content-icon.content-icon-bordered {
  border: 1px solid var(--color-secondary);
  margin-bottom: 1rem;
}

.heading-sm {
  color: var(--color-neutral-800);
  letter-spacing: normal;
  margin-top: 0;
  margin-bottom: .5rem;
  font-size: 1.2rem;
  line-height: 1.5;
}

.eyebrow {
  background-color: var(--color-neutral-200);
  color: var(--color-primary);
  border-radius: .5rem;
  margin-bottom: .5rem;
  padding: .175rem .5rem;
  font-size: .9rem;
  font-weight: 700;
  line-height: 1.5;
  display: inline-flex;
}

.eyebrow.eyebrow-ghost {
  background-color: var(--color-transparent);
}

.footer-nav-item {
  line-height: 1.111em;
}

.feature-list__item {
  display: flex;
}

@keyframes logo-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.logo-loop {
  background-color: var(--color-neutral-100);
  border-radius: 100px;
  overflow: hidden;
  box-shadow: 1px 1px 5px #0003;
}

.logo-loop-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: logo-marquee 30s linear infinite;
}
.logo-loop-track:hover {
  animation-play-state: paused;
}

.home-cards-link {
  color: #274690;
  background-color: #fff;
  border: 1px solid #d9dbe9;
  border-radius: .5rem;
  align-items: center;
  margin-right: 24px;
  padding: 22px 44px;
  line-height: 1.111em;
  transition: border-color .3s, background-color .3s;
  display: flex;
}

.home-cards-link:hover {
  color: #274690;
  background-color: #f1f4ff;
  border-color: #f1f4ff;
}

.home-cards-link.is-current {
  border-color: var(--color-secondary);
  background-color: #f1f4ff;
  border-radius: .5rem;
}

.split-col.card-split-text {
  max-width: 60%;
}

.split-col.home-hero-text {
  z-index: 1;
  min-width: 31rem;
  max-width: 46%;
  margin-right: 0;
  position: relative;
}

.split-col.cards-image-wrapper {
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 459px;
  display: flex;
  position: relative;
  overflow: visible;
}

.split-col.privacy-left {
  flex-direction: column;
  width: 100%;
  max-width: 16rem;
  margin-right: 4rem;
  display: flex;
  position: sticky;
  top: 100px;
}

.brand {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: center;
  align-items: center;
  padding-left: 0;
  transition-property: transform;
  transition-duration: .2s;
}

.brand.is-current {
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  transition-duration: .2s;
}

.brand.is-current:hover {
  transform: none;
}

.timeline-line {
  background-color: var(--color-primary);
  width: 2px;
  height: 100%;
}

.container-framed {
  z-index: 10;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.container-framed.container-center.mb-4 {
  margin-bottom: 4rem;
}

.home-hero-partners {
  clear: left;
  border: 1px solid var(--color-secondary);
  box-shadow: none;
  border-radius: 100px;
  padding-top: 0;
  padding-bottom: 0;
}

.timeline-step {
  grid-column-gap: 2.5rem;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: max-content 1fr;
}

.header {
  z-index: 999;
  background-color: var(--color-header-bg);
  padding-left: 2rem;
  padding-right: 2rem;
  font-family: "Exo (NovaSolu)", "Exo fallback", Arial, sans-serif;
  font-weight: 500;
  position: sticky;
  inset: 0 0% auto;
}

.img-styled.img-overlay {
  border: 1px solid var(--color-secondary);
  border-radius: 24px;
  width: 100%;
  max-width: 45%;
  position: absolute;
  bottom: 40px;
  right: 38px;
  box-shadow: 0 20px 20px #20248a17;
}

.img-styled.card-link-icon {
  max-width: 18px;
  margin-right: 10px;
}

.img-styled.img-bordered {
  border: 1px solid var(--color-secondary);
  border-radius: .5rem;
  box-shadow: 3px 3px 9px #0003;
}

.img-styled.img-bordered.img-ref-jj {
  max-width: 75%;
}

.img-styled.card-split-icon {
  border-radius: 17px;
  width: 4.625rem;
  min-width: 4.625rem;
  min-height: 4.625rem;
  max-height: 4.625rem;
  margin-bottom: 30px;
}

.img-styled.card-split-image {
  border: 1px solid var(--color-secondary);
  border-radius: .5rem;
  max-width: 79%;
  margin-left: auto;
  box-shadow: 9px 8px 12px #20248a0f;
}

.img-styled.partner-logo {
  width: calc(var(--logo-w) * var(--logo-scale, 1));
  height: calc(70px * var(--logo-scale, 1));
  margin: 0 40px 0 0;
  padding: 0 20px;
  overflow: hidden;
}

/* Widths match the live Webflow site's rendered logo sizes. */

.partner-woo, .partner-webflow, .partner-wordpress { --logo-w: 179px; }

.partner-shopify { --logo-w: 157px; }

.partner-hubspot, .partner-ga, .partner-gads { --logo-w: 135px; }

@media screen and (max-width: 479px) {
  .logo-loop { --logo-scale: .75; }
}

.img-styled.contact-link-icon {
  object-fit: cover;
  border-radius: 20px;
  width: 100%;
}

.img-styled.compare-marker {
  border-radius: 50%;
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  max-height: 32px;
}

.img-styled.img-overlay-ref {
  border: 1px solid var(--color-secondary);
  border-radius: 24px;
  width: 100%;
  max-width: 60%;
  position: relative;
  top: -24px;
  right: -200px;
  box-shadow: 0 20px 20px #20248a17;
}

.heading {
  margin-top: .25rem;
  margin-bottom: 0;
}

.heading.container-center.pad-1 {
  margin-bottom: 1rem;
}

.display-heading {
  color: var(--color-neutral-800);
  margin-top: .5rem;
  margin-bottom: 1.25rem;
  font-family: "Exo (NovaSolu)", "Exo fallback", Arial, sans-serif;
  font-size: 3.625rem;
  line-height: 3.6rem;
}

.display-heading.white-text {
  color: var(--color-neutral-100);
}

.footer-menu-content {
  justify-content: space-between;
  display: flex;
}

.card {
  background-color: #fff;
  border-radius: .5rem;
  overflow: hidden;
  box-shadow: 0 24px 44px #14142b0a;
}

.card.card-split {
  border: 1px solid var(--color-secondary);
  box-shadow: 1px 3px 5px 0 var(--color-secondary);
  background-image: linear-gradient(90deg, #fff 65%, #f1f4ff 65%);
  border-radius: .5rem;
  padding: 1.5rem 1.875rem 1.5rem 3rem;
}

.card.card-compare {
  border: 1px solid var(--color-neutral-400);
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-600);
  position: relative;
  box-shadow: 0 6px 12px #14142b0a;
}

.header-shadow {
  z-index: -99;
  border-bottom: 1px solid var(--color-secondary);
  box-shadow: none;
  opacity: 1;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  position: absolute;
  inset: 0%;
}

.divider {
  background-color: var(--color-secondary);
  width: 100%;
  min-height: 1px;
}

.divider.divider-spaced {
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.feature-list {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  margin-top: 2rem;
  margin-bottom: 2.5rem;
  display: grid;
}

/* Buttons: colour changes on hover; the lift and press live in the Motion section. */
.btn-secondary {
  border: 1px solid var(--color-secondary);
  background-color: var(--color-neutral-200);
  box-shadow: none;
  color: var(--color-neutral-800);
  text-align: center;
  letter-spacing: .01px;
  border-radius: .5rem;
  padding: .75rem 1.4rem;
  line-height: 1.25rem;
  text-decoration: none;
}

.btn-secondary:hover {
  border-color: var(--color-primary);
  background-color: var(--color-accent-lavender);
  color: var(--color-primary);
}

.btn-secondary.is-current {
  border-color: var(--color-primary);
  color: #fff;
  background-color: var(--color-primary);
}

.btn-secondary.btn-neutral {
  background-color: var(--color-neutral-100);
  box-shadow: none;
  color: var(--color-neutral-800);
}

.btn-secondary.btn-neutral:hover {
  background-color: var(--color-neutral-200);
  color: var(--color-primary);
}

.btn-secondary.btn-neutral.is-current {
  background-color: var(--color-primary);
  color: var(--color-neutral-100);
}

.btn-secondary.bg-white {
  background-color: var(--color-neutral-100);
  box-shadow: none;
  letter-spacing: .01em;
  line-height: 1.25rem;
}

.btn-secondary.bg-white:hover {
  background-color: var(--color-neutral-200);
  color: var(--color-primary);
}

.btn-primary {
  color: #fff;
  text-align: center;
  letter-spacing: .01px;
  background-color: var(--color-primary);
  border-radius: .5rem;
  padding: .75rem 1.4rem;
  line-height: 1.25em;
  text-decoration: none;
}

.btn-primary:hover {
  background-color: #1d3670;
  color: #fff;
}

.btn-primary.btn-header {
  letter-spacing: .01em;
  font-size: 1rem;
  line-height: 1.25rem;
}

.btn-primary.mt-1 {
  margin-top: 1rem;
}

.btn-primary.btn-disabled,
.btn-primary.btn-disabled:hover {
  background-color: var(--color-neutral-500);
  cursor: not-allowed;
  position: relative;
}

.btn-primary:focus-visible,
.btn-secondary:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

.btn-primary.mt-2 {
  margin-top: 2rem;
}

.footer-menu-nav-main-wrapper {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  flex-flow: row;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: flex-start;
  width: 100%;
  display: grid;
}

.logo-loop-container {
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  min-width: 103.75rem;
  padding: .625rem 1.25rem;
  display: flex;
  position: relative;
}

.footer {
  border-top: 1px solid var(--color-secondary);
  box-shadow: none;
  padding: 4rem 2rem 2rem;
  position: relative;
  overflow: hidden;
}

.home-cards-tabs {
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  height: 660px;
  margin-top: 2rem;
  display: flex;
}

.footer-nav {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  flex-flow: column;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
}

.footer-menu-wrapper {
  padding-bottom: 1rem;
}

.btn-wrap {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: .5rem;
  display: flex;
}

.btn-wrap.btn-wrap-spaced {
  margin-top: 1rem;
}

.feature-list__marker {
  align-self: flex-start;
  margin-right: .75rem;
  display: flex;
}

.timeline-progress {
  background-color: var(--color-neutral-200);
  width: 2px;
  height: 80%;
  position: absolute;
  top: 10%;
  left: 1.75rem;
  right: auto;
}

.btn-label {
  justify-content: center;
  display: flex;
}

.section {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.section.section-white {
  background-color: #fff;
  padding-top: 6.25rem;
  padding-bottom: 6.25rem;
}

.section.section-white.timeline-pad {
  background-color: var(--color-transparent);
  padding-bottom: 3rem;
}

.section.bg-neutral-200 {
  border: 1px solid var(--color-secondary);
  background-color: var(--color-neutral-200);
  box-shadow: none;
  padding-top: 6rem;
  padding-bottom: 6rem;
  position: relative;
}

.section.bg-neutral-200.section-short {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.section.home-hero {
  padding-top: 1rem;
  position: relative;
  overflow: hidden;
}

.section.hero {
  padding-top: 2rem;
}

.section.bg-primary {
  border: 1px solid var(--color-secondary);
  background-color: var(--color-primary);
  background-image: linear-gradient(90deg, var(--color-secondary), var(--color-transparent));
  color: var(--color-neutral-100);
}

.section.bg-primary.section-hero-pad {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.section.tld-list {
  padding-top: 2rem;
  padding-bottom: 0;
}

.section-block {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.svg-icon-code {
  color: var(--color-primary);
  width: 32px;
  height: 32px;
}

.svg-icon-code.svg-sm {
  width: 24px;
  height: 24px;
}

.timeline-step-wrapper {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.ns-logo {
  width: 180px;
  height: 20px;
  display: inline-flex;
}

.footer-content-top {
  justify-content: space-between;
  margin-bottom: 1rem;
  display: flex;
}

.icon-sm {
  border-radius: 50%;
  width: 1.5rem;
}

.grid-2 {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.grid-2.grid-split {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  grid-template-columns: 40% 1fr;
  align-items: center;
}

.grid-2.pad-2 {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  margin-top: 2rem;
  margin-bottom: 2rem;
}

.icon-bg-wrapper {
  z-index: 1;
  background-color: var(--color-neutral-100);
  margin-top: -1rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
  position: relative;
}

.wrapper-space-between-center {
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.timeline-step-marker {
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  display: flex;
  position: relative;
}

.home-cards-menu {
  text-align: center;
  justify-content: center;
  margin-bottom: 1.875rem;
  display: flex;
}

.footer-nav-link {
  color: var(--color-neutral-800);
  font-weight: 500;
  transition: color .15s;
  display: inline-block;
}

.footer-nav-link:hover {
  color: #274690;
  transform: none;
}

.footer-nav-link.is-current {
  transition: color .15s;
}

.footer-nav-link.is-current:hover {
  transform: none;
}

.page-gutter {
  padding-left: 2rem;
  padding-right: 2rem;
}

.image-wrap {
  align-items: center;
  display: flex;
  overflow: hidden;
  transform: translate(0);
}

.image-wrap.contact-link-icon {
  border-radius: 17px;
  width: 58px;
  min-width: 58px;
  min-height: 58px;
  max-height: 58px;
  margin-right: 18px;
}

.image-wrap.contact-link-icon.footer-logo {
  width: 32px;
  min-width: 32px;
  min-height: 32px;
  max-height: 32px;
  margin-right: .5rem;
}

.form {
  flex: 1;
  grid-template-rows: auto auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  margin-bottom: 0;
}

.centered-wrapper {
  text-align: center;
  flex-direction: column;
  align-items: center;
  display: flex;
}

.svg-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.price-grid {
  grid-column-gap: 2rem;
  grid-row-gap: 2rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 4rem;
}

.price-tier-icon {
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  margin-bottom: 1rem;
  display: flex;
}

.vat-text {
  color: #04102e;
  letter-spacing: 0;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1.4;
}

.badge-text {
  font-size: 14px;
}

.services-compare-feature {
  background-color: #274690;
  border-radius: 100000000px;
  width: 8px;
  min-width: 8px;
  min-height: 8px;
  max-height: 8px;
  margin-right: 10px;
}

.icon-bg {
  border: 1px solid var(--color-secondary);
  color: #274690;
  background-color: #f1f4ff;
  border-radius: 100%;
  justify-content: center;
  align-items: center;
  width: 3.5rem;
  height: 3.5rem;
  display: flex;
}

.icon-bg.inverted {
  background-color: #fff;
  border-color: #5299d3;
  margin-bottom: 1rem;
}

.icon-bg.margin-05 {
  background-color: var(--color-neutral-200);
  margin-bottom: .5rem;
}

.services-compare-row {
  border-bottom: 1px solid #d9dbe9;
  align-items: center;
  display: flex;
  overflow: hidden;
}

.price-tier-title {
  color: #274690;
  letter-spacing: normal;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.25rem;
  line-height: 1.5;
}

.price-tier-amount {
  color: #04102e;
  margin-top: .5rem;
  margin-bottom: .5rem;
  font-size: 2.5rem;
  font-weight: 600;
  line-height: 1.2;
}

.icon-bg-sm {
  border-radius: 14px;
  flex: none;
  justify-content: center;
  align-self: flex-start;
  align-items: center;
  margin-right: .75rem;
  display: flex;
  overflow: hidden;
}

.text-small {
  color: var(--color-neutral-600);
  letter-spacing: normal;
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.5;
}

.price-tier {
  border: 1px solid var(--color-neutral-200);
  border-radius: 1rem;
  padding: 2rem;
  position: relative;
  box-shadow: 0 12px 16px -4px #00000014, 0 4px 6px -2px #10182808;
}

.price-tier.inverted {
  border-color: var(--color-secondary);
  background-color: var(--color-neutral-200);
  box-shadow: 0 0 5px 0 var(--color-secondary);
}

.services-compare-titles {
  border-bottom: 1px solid var(--color-neutral-400);
  background-color: var(--color-neutral-100);
  display: flex;
  overflow: hidden;
}

.services-compare-cell {
  text-align: center;
  justify-content: center;
  align-items: center;
  min-height: 80px;
  padding-left: 1rem;
  padding-right: 1rem;
  display: flex;
}

.services-compare-cell.compare-cell-lg {
  padding-left: 10px;
  padding-right: 10px;
}

.services-compare-cell.inverted {
  background-color: var(--color-neutral-200);
  border: 1px #000;
}

.contact-section {
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  display: flex;
}

.services-compare-grid {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  width: 100%;
  max-width: 72%;
  margin-left: auto;
}

.badge-wrap {
  position: absolute;
  inset: 2rem 2rem auto auto;
}

.listing-item {
  display: flex;
}

.listing-grid {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  margin-top: 1.5rem;
  margin-bottom: 2rem;
  display: grid;
}

.content-narrow-wrap {
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
}

.content-narrow-wrap.card-compare {
  text-align: center;
  max-width: 40rem;
  margin-bottom: 4rem;
  padding-left: 1.5rem;
  padding-right: 1.5rem;
}

.content-narrow-wrap.center-text {
  text-align: center;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
}

.badge {
  color: #274690;
  background-color: #f1f4ff;
  border-radius: 14px;
  padding: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.125em;
  display: inline-block;
}

.badge.inverted {
  background-color: #fff;
  box-shadow: 1px 1px 3px #0003;
}

.price-tier-body {
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  display: flex;
}

.services-compare-feature-wrapper {
  flex: 1;
  align-self: stretch;
  align-items: center;
  padding-left: 2rem;
  padding-right: 0;
  display: flex;
}

.text-bold {
  font-weight: 600;
}

.texture-bg {
  filter: blur(20px);
  background-color: #fff;
  background-image: linear-gradient(#5299d3 1%, #fff 12%, #5299d3 28%, #fff 48%, #5299d3 69%, #fff 82%, #5299d3 98%);
  border-radius: 100%;
  width: 38rem;
  height: 30rem;
  position: absolute;
  bottom: 12px;
  left: -19px;
  transform: skew(-44deg, 10deg);
}

.texture-bg.texture-bg-alt {
  background-image: linear-gradient(#fff 12%, #274690 28%, #fff 48%, #274690 69%, #fff 82%, #274690 98%);
  height: 34rem;
  bottom: -7px;
  left: 0;
  transform: skew(9deg, 21deg);
}

.services-tab-body {
  border: 1px solid var(--color-secondary);
  background-color: var(--color-neutral-100);
  border-radius: .5rem;
}

.analytics-tab {
  border-left: 4px solid var(--color-neutral-100);
  color: var(--color-neutral-600);
  background-color: #0000;
  padding: 1.5rem 2rem;
  transition: all .2s ease-in-out;
  display: block;
}

.analytics-tab:hover {
  border-left-color: var(--color-secondary);
  color: var(--color-neutral-600);
  box-shadow: 8px 6px 14px #0003;
}

.analytics-tab.is-current {
  border-left-color: var(--color-primary);
  background-color: var(--color-neutral-100);
  box-shadow: 8px 6px 14px #0003;
}

.services-tabs {
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 30rem;
  display: flex;
}

.services-tabs-menu {
  grid-column-gap: 20px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.menu-image-text {
  z-index: 3;
  color: var(--color-neutral-600);
}

.container-center {
  text-align: center;
}

.menu-image-container {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: grid;
}

.image-content-wrapper {
  justify-content: center;
  align-items: center;
  min-height: 30rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

.tab {
  max-width: 52rem;
  height: 100%;
  padding: 4rem 2rem;
}

.grid-horizontal {
  grid-column-gap: 2rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: start;
  margin-top: 4rem;
  display: grid;
}

.content-narrow {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 48rem;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.content-narrow.divider-spaced {
  margin-bottom: 2rem;
}

.content-narrow.align-center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.horizontal-content {
  flex-flow: column;
  justify-content: space-between;
  display: flex;
}

.horizontal-content.centered-wrapper.pad-2 {
  grid-column-gap: .25rem;
  grid-row-gap: .25rem;
  padding-bottom: 2rem;
}

.pad-container-2 {
  margin-top: 2rem;
}

.menu-image-body {
  overflow: visible;
}

.grid-4-mini {
  grid-auto-columns: 1fr;
  position: relative;
}

.tos-container {
  position: static;
}

.list-item {
  margin-bottom: 0;
}

.tos-body {
  flex-flow: column;
  justify-content: space-around;
  align-items: flex-start;
  padding-top: 6rem;
  padding-bottom: 0;
  display: flex;
}

.tos-body.no-margin-top {
  justify-content: space-around;
  align-items: flex-start;
  padding-top: 0;
}

.tos-wrapper {
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.privacy-nav-btn {
  border: 1px solid var(--color-secondary);
  box-shadow: 0 0 5px 0 var(--color-secondary);
  color: var(--color-neutral-800);
  text-align: center;
  background-color: #fff;
  border-radius: .5rem;
  margin-bottom: 1rem;
  padding: 1.4rem 1rem;
  line-height: 1.111em;
  transition: border-color .3s, background-color .3s, color .3s;
}

.privacy-nav-btn:hover {
  border-color: var(--color-secondary);
  color: #274690;
  background-color: #f1f4ff;
}

.privacy-nav-btn.is-current {
  background-color: var(--color-primary);
  box-shadow: none;
  color: var(--color-neutral-100);
}

.rich-text {
  grid-column-gap: .5rem;
  grid-row-gap: .5rem;
  flex-flow: column;
  align-items: flex-start;
  margin-bottom: 2rem;
  display: flex;
}

.error-page-wrap {
  justify-content: center;
  align-items: center;
  padding: 1.5rem 1.5rem 8rem;
  display: flex;
  position: relative;
  overflow: hidden;
}

.error-content-bottom {
  margin-top: 2rem;
}

.error-page-content {
  text-align: center;
  max-width: 597px;
  margin-bottom: 0;
}

.error-animation {
  z-index: -1;
  justify-content: center;
  align-items: center;
  max-width: 100%;
  max-height: 20rem;
  display: flex;
  position: relative;
}

.body {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-600);
  font-family: "Exo (NovaSolu)", "Exo fallback", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.5em;
}

.align-center {
  margin-left: auto;
  margin-right: auto;
}

.spacer-3 {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

.row-wrap {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  text-align: center;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.footer-small-link {
  border-right: 1px solid var(--color-neutral-500);
  padding-left: .5rem;
  padding-right: .5rem;
  text-decoration: none;
}

.footer-small-link.last {
  border-right-style: none;
}

.footer-contact-link {
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 1rem;
  display: flex;
}

.domain-search {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-bottom: 0;
}

.domain-search-block {
  flex-flow: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 0 0 1rem;
  display: flex;
}

.domain-search-field {
  border: 1px none var(--color-transparent);
  background-color: var(--color-transparent);
  color: var(--color-neutral-800);
  margin-bottom: 0;
  margin-right: 1rem;
  padding: 0 0 0 0;
}

.domain-search-field:focus {
  border-style: none;
}

.domain-search-field::placeholder {
  color: var(--color-neutral-500);
  font-size: 1rem;
  font-weight: 500;
}

.error-message {
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-100);
  text-align: center;
  border-radius: 14px;
  margin-top: 1rem;
  padding: 1rem;
}

.domain-search-status {
  border: 1px solid var(--color-secondary);
  background-color: var(--color-neutral-200);
  color: var(--color-neutral-800);
  text-align: left;
  border-radius: 14px;
  width: 100%;
  margin-top: 1rem;
  padding: .5rem 0;
  transition: all .15s;
  display: none;
  box-shadow: 1px 2px 5px #0003;
}

.domain-search-status:hover {
  background-color: var(--color-neutral-200);
}

.domain-search-status.status-available {
  background-color: var(--color-neutral-100);
}

.domain-search-status.status-taken {
  background-color: #ffebee;
}

.domain-search-status.status-error {
  background-color: #fff8e1;
}

.domain-search-status.status-unknown {
  background-color: var(--color-neutral-400);
}

.domain-search-input {
  border: 1px solid var(--color-secondary);
  background-color: var(--color-neutral-100);
  box-shadow: 1px 3px 5px 0 var(--color-secondary);
  border-radius: .5rem;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 3rem;
  margin-right: .5rem;
  padding: .5rem 1rem;
  display: flex;
  position: relative;
}

.hero-text {
  color: var(--color-neutral-600);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.2rem;
  font-weight: 500;
}

.hero-text.white-text {
  color: var(--color-neutral-100);
}

.domain-search-panel {
  text-align: left;
  width: 100%;
  max-width: 48rem;
  margin-top: 2rem;
}

.result {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 1rem;
  display: flex;
}

.error {
  font-size: 1.4rem;
}

.grid-4 {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-rows: auto;
  grid-template-columns: 25% 25% 25% 25%;
  grid-auto-columns: 25%;
  margin-top: 2rem;
  display: grid;
}

.feature-card {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  border: 1px solid var(--color-secondary);
  background-color: var(--color-neutral-200);
  box-shadow: none;
  border-radius: .5rem;
  flex-flow: wrap;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: 1.5rem;
  transition: all .2s;
  display: flex;
}

.feature-card:hover {
  box-shadow: 0 0 10px 0 var(--color-primary);
}

.domain-search-svg {
  color: var(--color-neutral-500);
  width: 1.5rem;
  height: 1.5rem;
  margin-right: 6px;
}

.result-block {
  border: 1px solid var(--color-secondary);
  background-color: var(--color-neutral-100);
  text-align: left;
  border-radius: 14px;
  width: 100%;
  margin-top: 1.5rem;
  padding: 1rem;
  box-shadow: 1px 2px 5px #0003;
}

.result-block.error-message {
  color: var(--color-neutral-800);
  text-align: center;
}

.dropdown-icon {
  justify-content: center;
  align-items: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 1rem;
  display: flex;
  position: absolute;
  inset: auto 0% auto auto;
}

.dropdown-link-list {
  grid-column-gap: 0px;
  grid-row-gap: .5rem;
  grid-template-rows: max-content;
  grid-template-columns: 1fr;
  grid-auto-rows: max-content;
  grid-auto-columns: 1fr;
  display: grid;
}

.navbar-dropdown-content {
  width: 100%;
  display: flex;
}

.navbar-menu-button {
  padding: 0;
}

.dropdown-content-wrap {
  z-index: 1;
  flex-flow: column;
  grid-template-rows: max-content;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  place-items: flex-start start;
  display: flex;
  position: relative;
}

.dropdown-content-left {
  grid-column-gap: 2rem;
  grid-row-gap: 0px;
  flex: 1;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  padding: 2rem 2rem 2rem 0;
  display: grid;
}

.dropdown-right-overlay-abso {
  border-left: 1px solid var(--color-secondary);
  background-color: var(--color-neutral-200);
  box-shadow: none;
  min-width: 100vw;
  position: absolute;
  inset: 0% auto 0% 0%;
}

.dropdown-content-right {
  flex: 1;
  grid-template-rows: max-content auto;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: flex-start;
  max-width: 22rem;
  padding-top: 2rem;
  padding-left: 2rem;
  display: flex;
  position: relative;
}

.navbar-container {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  max-width: 80rem;
  height: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
}

.navbar-menu {
  flex: 1;
  justify-content: space-between;
  align-items: center;
  margin-left: 2rem;
  display: flex;
  position: static;
}

.navbar-link {
  color: var(--color-neutral-800);
  transform-style: preserve-3d;
  align-items: center;
  padding: 1.75rem 1rem;
  font-size: 1rem;
  font-weight: 500;
  transition: all .15s;
}

.navbar-link:hover {
  color: var(--color-primary);
  font-weight: 600;
}

.navbar-link.is-current {
  color: var(--color-neutral-800);
}

.navbar-link.is-current:hover {
  color: var(--color-primary);
}

.navbar-menu-dropdownlink {
  font-weight: 500;
  position: static;
}

.navbar-dropdown-toggle {
  color: var(--color-neutral-800);
  align-items: center;
  padding: 1.75rem 2.5rem 1.75rem 1rem;
  font-size: 1rem;
  transition: all .3s;
  display: flex;
}

.navbar-dropdown-toggle:hover {
  color: #344054;
}

/* Panel styles live on the closed state too, so the panel keeps its look while it fades out. */
.navbar-dropdown-list {
  display: none;
  z-index: 99;
  border-top: 1px solid var(--color-secondary);
  border-bottom: 1px solid var(--color-secondary);
  background-color: var(--color-header-bg);
  box-shadow: 0 0 5px 0 var(--color-secondary);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  width: 100vw;
  max-width: 100%;
  padding-left: 2rem;
  padding-right: 2rem;
  position: absolute;
  inset: 5rem auto auto 0%;
  overflow: hidden;
}

.navbar-dropdown-list.is-open {
  display: block;
}

/* A panel that is fading out must not catch the pointer. */
.navbar-dropdown-list:not(.is-open) {
  pointer-events: none;
}

.btn-row {
  grid-column-gap: .75rem;
  grid-row-gap: .75rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: center;
  display: flex;
}

.dropdown-link {
  grid-column-gap: 1rem;
  grid-row-gap: 0px;
  border-style: solid;
  border-width: 1px;
  border-color: var(--color-transparent) var(--color-transparent) var(--color-secondary);
  background-color: var(--color-transparent);
  border-radius: .5rem;
  grid-template-rows: auto;
  grid-template-columns: max-content 1fr;
  grid-auto-columns: 1fr;
  align-items: flex-start;
  padding: .75rem;
  text-decoration: none;
  transition: all .3s;
  display: grid;
}

.dropdown-link:hover {
  border: 1px solid var(--color-secondary);
  background-color: var(--color-neutral-100);
  box-shadow: 1px 2px 10px 0 var(--color-secondary);
}

.dropdown-icon-wrapper {
  flex: none;
}

.dropdown-item-right {
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  font-weight: 400;
  display: flex;
}

.dropdown-text-wrap {
  grid-column-gap: .5rem;
  grid-row-gap: 0px;
  align-items: center;
  margin-bottom: .25rem;
  display: flex;
}

.dropdown-item-heading {
  color: var(--color-neutral-700);
  margin-bottom: .25rem;
  font-weight: 600;
}

.dropdown-item-heading.mb-0 {
  margin-bottom: 0;
}

.badge-new {
  grid-column-gap: .25rem;
  background-color: #e0ffed;
  color: #005a35;
  white-space: nowrap;
  mix-blend-mode: multiply;
  border-radius: 10rem;
  align-items: center;
  padding: .125rem .5rem;
  font-size: .75rem;
  font-weight: 500;
  display: flex;
}

.faq-layout {
  grid-column-gap: 4rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr;
  grid-auto-columns: 1fr;
  align-items: start;
  display: grid;
}

.faq-block {
  border-bottom: 1px solid var(--color-secondary);
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}

.faq-question {
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  display: flex;
}


.faq-container {
  margin-top: 2rem;
}

.accordion-icon_component {
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  justify-content: center;
  align-self: flex-start;
  align-items: center;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  position: relative;
}

.accordion-icon_vertical-line {
  background-color: var(--color-primary);
  border-radius: 1px;
  width: 2px;
  height: .75rem;
  position: absolute;
}

.accordion-icon_horizontal-line {
  background-color: var(--color-primary);
  border-radius: 1px;
  width: .75rem;
  height: 2px;
  position: absolute;
}

.faq-answer {
  overflow: hidden;
  max-height: 0;
}

.faq-block.is-open .faq-answer {
  max-height: 80rem;
}

.faq-block.is-open .accordion-icon_vertical-line {
  opacity: 0;
}

.faq-heading {
  color: var(--color-neutral-800);
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.125rem;
  font-weight: 600;
}

.block-2 {
  width: 100%;
  height: 2rem;
}

.blog-post-image-wrap {
  width: 100%;
  margin: 4rem auto 2rem;
  padding-top: 40%;
  position: relative;
  overflow: hidden;
}

.blog-content-wrap {
  grid-column-gap: 5rem;
  grid-row-gap: 4rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr .5fr;
  grid-auto-columns: 1fr;
  align-items: start;
  margin-top: 2rem;
  display: grid;
}

.blog-post-cta {
  border: 1px solid var(--color-secondary);
  background-color: var(--color-neutral-200);
  box-shadow: 1px 2px 5px 0 var(--color-secondary);
  border-radius: 1rem;
  padding: 2rem 2rem 2.5rem;
  position: sticky;
  top: 8rem;
}

.blog-post-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.blog-post-category-time {
  align-items: center;
  padding-left: .5rem;
  padding-right: .5rem;
  display: flex;
}

.blog-post-category-info {
  background-color: white;
  border-radius: 1rem;
  align-items: center;
  padding: .125rem .5rem;
  font-size: .75rem;
  transition: all .3s;
  display: flex;
}

.blog-post-category-info:hover {
  background-color: var(--color-neutral-100);
}

.blog-post-info-wrap {
  background-color: var(--color-primary);
  color: var(--color-neutral-100);
  mix-blend-mode: multiply;
  border-radius: 10rem;
  align-self: flex-start;
  align-items: center;
  margin-bottom: 2rem;
  padding: .25rem;
  font-size: .75rem;
  display: flex;
}

.content-block {
  text-align: left;
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  display: flex;
}

.div-block {
  grid-column-gap: 21px;
  grid-row-gap: 21px;
  flex-flow: column;
  display: flex;
}

.whois {
  width: 100%;
  margin-top: 1rem;
}

.pad-container-4 {
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-top: 4rem;
  display: flex;
}

.nav-highlight-link {
  border: 1px solid var(--color-secondary);
  background-color: var(--color-neutral-100);
  color: var(--color-neutral-800);
  cursor: pointer;
  border-radius: .5rem;
  flex-flow: column;
  grid-template-rows: auto;
  grid-template-columns: max-content 1fr;
  grid-auto-columns: 1fr;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1rem;
  text-decoration: none;
  transition: all .3s;
  display: flex;
  box-shadow: 1px 2px 3px #0003;
}

.nav-highlight-link:hover {
  box-shadow: 3px 5px 10px 0 var(--color-secondary);
  color: var(--color-neutral-600);
}

.nav-highlight-picture {
  margin-bottom: .5rem;
}

.progress-bar {
  background-color: var(--color-primary);
  border-radius: 14px;
  width: 0%;
  max-width: 30rem;
  height: 8px;
  margin-top: .5rem;
  padding-bottom: 0;
}

.footer-subheading {
  color: #274690;
  margin-bottom: 1rem;
  font-size: .85rem;
  font-weight: 600;
  line-height: 1.5;
}

.result-actions {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.btn-disabled-x {
  color: var(--color-accent-red);
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0%;
}

.result-loader {
  justify-content: center;
  align-items: center;
  margin-right: 2rem;
}

.white-text {
  color: var(--color-neutral-100);
}

.nav-icon-code {
  color: var(--color-primary);
  width: 22px;
  height: 22px;
}

.tld-card {
  border: 1px solid var(--color-secondary);
  background-color: var(--color-neutral-200);
  text-align: center;
  border-radius: .5rem;
  flex-direction: column;
  grid-template-rows: 33% 33% 33%;
  grid-template-columns: 1fr;
  grid-auto-columns: 1fr;
  justify-content: space-between;
  place-items: center;
  width: 100%;
  padding: 1.5rem;
  display: grid;
}

.tld-icon {
  height: 3.5rem;
  margin-top: 1rem;
  margin-bottom: .5rem;
}

.grid-3 {
  grid-column-gap: 1rem;
  grid-row-gap: 1rem;
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  place-items: stretch center;
  margin-top: 2rem;
  margin-bottom: 2rem;
  display: grid;
}

.payment-heading {
  margin-top: 0;
}

.footer-content-half {
  justify-content: space-between;
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: flex;
}

.footer-main-content-right {
  flex-flow: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  width: 50%;
  display: flex;
}

.payment-methods-grid {
  grid-column-gap: .5rem;
  grid-row-gap: 0rem;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.tld-price {
  border-bottom: 1px solid var(--color-secondary);
  color: var(--color-primary);
  font-size: 1.8rem;
  font-weight: 700;
}

.tld-price.white-text {
  color: var(--color-neutral-100);
}

.spacer-05 {
  width: .5rem;
}

.tld-price-wrap {
  margin-top: .5rem;
  margin-bottom: 1rem;
}

.text-span, .text-span-2 {
  font-size: 20px;
}

@media screen and (min-width: 1920px) {
  .brand.is-current {
    position: relative;
  }
}

@media screen and (max-width: 991px) {
  .footer-content-bottom {
    text-align: center;
    flex-flow: row;
  }

  .footer-main-content {
    margin-bottom: 2rem;
    margin-right: 0;
  }

  .admin-grid-images-wrapper {
    flex-flow: column;
    width: 100%;
    padding-bottom: 48px;
    display: flex;
  }

  .home-hero-layout {
    text-align: center;
    flex-direction: column;
    margin-bottom: 83px;
  }

  .footer-logo-container, .footer-logo-container.is-current {
    margin-bottom: 20px;
  }

  .home-cards-link {
    margin-right: 20px;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 16px;
  }

  .split-col.card-split-text {
    text-align: center;
    max-width: 753px;
    margin-bottom: 60px;
    margin-right: 0;
  }

  .split-col.home-hero-text {
    width: 100%;
    min-width: auto;
    max-width: 700px;
    margin-top: 0;
    margin-bottom: 20px;
    margin-right: 0;
  }

  .split-col.cards-image-wrapper {
    max-width: 553px;
  }

  .container-framed {
    flex-direction: column;
    align-items: stretch;
    margin-left: auto;
  }

  .timeline-step {
    grid-column-gap: 24px;
  }

  .header {
    padding-top: .5rem;
    padding-bottom: .5rem;
  }

  .img-styled.img-overlay {
    bottom: 75px;
    right: 40px;
  }

  .img-styled.img-bordered.img-ref-jj {
    max-width: 100%;
  }

  .img-styled.card-split-icon {
    margin-bottom: 40px;
  }

  .img-styled.card-split-image {
    max-width: 50%;
    margin-left: 0;
  }

  .img-styled.img-overlay-ref {
    max-width: 75%;
    top: 0;
    bottom: 75px;
    right: -79px;
  }

  .card.card-split {
    background-image: linear-gradient(#fff 65%, #f1f4ff 65%);
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .btn-secondary.bg-white {
    display: none;
  }

  .btn-primary.btn-header {
    margin-right: 15px;
    display: none;
  }

  .footer-menu-nav-main-wrapper {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
    flex-flow: wrap;
    flex-grow: 0;
    flex-shrink: 1;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    margin-bottom: 2rem;
    display: grid;
  }

  .footer {
    padding-top: 70px;
  }

  .home-cards-tabs {
    height: 100%;
  }

  .btn-wrap {
    justify-content: center;
    align-items: center;
  }

  .section.home-hero {
    padding-top: 4rem;
  }

  .footer-content-top {
    margin-bottom: 0;
  }

  .grid-2 {
    grid-template-columns: 1fr;
    grid-auto-flow: column;
    justify-items: center;
    min-height: auto;
    margin-top: 1.25rem;
  }

  .wrapper-space-between-center {
    flex-direction: column;
  }

  .home-cards-menu {
    margin-right: -20px;
  }

  .price-grid {
    grid-template-columns: 1fr;
  }

  .services-compare-cell {
    padding-left: 20px;
    padding-right: 20px;
  }

  .services-compare-grid {
    direction: ltr;
    word-break: break-all;
    overflow-wrap: normal;
  }

  .content-narrow-wrap.card-compare {
    margin-bottom: 53px;
  }

  .badge {
    margin-bottom: 20px;
  }

  .services-compare-feature-wrapper {
    flex: 0 auto;
    width: 0%;
    padding-left: 20px;
    padding-right: 20px;
  }

  .texture-bg {
    width: 22rem;
    height: 22rem;
    bottom: 83px;
    left: 19px;
  }

  .services-tabs-menu {
    grid-column-gap: 15px;
    grid-row-gap: 15px;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 650px;
  }

  .menu-image-container {
    grid-column-gap: 3rem;
  }

  .grid-horizontal {
    grid-template-columns: 1fr 1fr;
  }

  .grid-4-mini {
    grid-column-gap: 2rem;
  }

  .tos-container {
    min-width: 450px;
  }

  .row-wrap {
    text-align: left;
    flex-flow: wrap;
    align-self: center;
  }

  .grid-4 {
    grid-template-columns: 1fr 1fr;
  }

  .dropdown-icon {
    width: 2rem;
    height: 2rem;
    margin-top: 0;
    margin-bottom: 0;
    margin-right: 0;
    inset: auto 0% auto auto;
  }

  .menu-icon_line-middle-inner {
    width: 4px;
    height: 0;
    padding-bottom: 0;
    padding-right: 0;
  }

  .menu-icon_line-bottom {
    background-color: var(--color-neutral-800);
    border-radius: 1rem;
    width: 24px;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }

  .menu-icon_line-middle {
    background-color: #344054;
    border-radius: 1rem;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 2px;
    margin-top: 6px;
    margin-bottom: 6px;
    padding-bottom: 0;
    padding-right: 0;
    display: flex;
  }

  .menu-icon_line-top {
    background-color: #344054;
    border-radius: 1rem;
    width: 24px;
    height: 2px;
    padding-bottom: 0;
    padding-right: 0;
  }

  .menu-icon_component {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    margin-right: -.5rem;
    padding-bottom: 0;
    padding-right: 0;
    display: flex;
  }

  .dropdown-link-list {
    padding-left: .25rem;
    padding-right: .25rem;
  }

  .navbar-dropdown-content {
    flex-direction: column;
  }

  .navbar-menu-button.is-open {
    background-color: #0000;
  }

  .menu-icon_line-top,
  .menu-icon_line-bottom,
  .menu-icon_line-middle {
    transition: transform .2s ease, opacity .2s ease;
  }

  .navbar-menu-button.is-open .menu-icon_line-top {
    transform: translateY(8px) rotate(45deg);
  }

  .navbar-menu-button.is-open .menu-icon_line-middle {
    opacity: 0;
  }

  .navbar-menu-button.is-open .menu-icon_line-bottom {
    transform: translateY(-8px) rotate(-45deg);
  }

  .dropdown-content-left {
    grid-template-columns: 1fr 1fr;
    padding-left: 0;
    padding-right: 0;
  }

  .dropdown-right-overlay-abso {
    border: 1px solid var(--color-secondary);
    border-radius: 14px;
    min-width: 100%;
  }

  .dropdown-content-right {
    justify-content: center;
    align-items: center;
    max-width: 100%;
    margin-bottom: 1rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-right: 2rem;
  }

  .navbar-menu {
    border-top: 1px solid #f2f4f7;
    -webkit-text-fill-color: inherit;
    background-color: #fff;
    background-clip: border-box;
    align-items: flex-start;
    height: 100vh;
    margin-left: 0;
    padding: 1.5rem 2rem 5rem;
    position: absolute;
    overflow: auto;
  }

  .navbar-menu-left {
    grid-column-gap: 0px;
    grid-row-gap: .5rem;
    flex-direction: column;
    align-items: flex-start;
    display: flex;
  }

  .navbar-link {
    transform: scale3d(1none, 1none, 1none);
    width: 100%;
    padding: .75rem 0;
  }

  .navbar-link:hover {
    transform: none;
  }

  .navbar-menu-dropdownlink {
    width: 100%;
    position: relative;
  }

  .navbar-dropdown-toggle {
    align-items: center;
    padding-top: .75rem;
    padding-bottom: .75rem;
    padding-left: 0;
    display: flex;
  }

  .navbar-dropdown-toggle:hover {
    color: var(--color-primary);
  }

  .navbar-dropdown-list {
    overflow: hidden;
    box-shadow: none;
    color: var(--color-neutral-600);
    border-style: none;
    align-items: flex-start;
    min-width: auto;
    margin-bottom: 1.5rem;
    padding: 0 0 0;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
  }

  .btn-row {
    flex-direction: column-reverse;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    align-items: stretch;
    margin-top: 1.5rem;
  }

  .dropdown-link:hover {
    background-color: #0000;
  }

  .faq-layout {
    grid-column-gap: 3rem;
    grid-row-gap: 4rem;
  }

  .blog-post-image-wrap {
    margin-bottom: 3rem;
    padding-top: 56.25%;
  }

  .blog-content-wrap {
    grid-row-gap: 3rem;
    grid-template-columns: 1fr;
  }

  .blog-post-cta {
    position: static;
  }

  .nav-highlight-link {
    max-width: 400px;
  }

  .footer-content-half {
    margin-bottom: 0;
  }

  .footer-main-content-right {
    width: 60%;
  }

  .payment-methods-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media screen and (max-width: 767px) {
  .scroll-grid {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
  }

  .footer-content-bottom {
    text-align: left;
    flex-flow: column;
    padding-top: 1rem;
  }

  .footer-main-content {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: auto;
    max-width: 100%;
    margin-bottom: 2rem;
  }

  .admin-grid-images-wrapper {
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 95vw;
    padding-bottom: 40px;
    display: flex;
  }

  .home-hero-layout {
    margin-bottom: 66px;
  }

  .footer-logo-container {
    justify-content: center;
    align-items: center;
  }

  .footer-logo-container.is-current {
    margin-bottom: 15px;
  }

  .heading-sm {
    font-size: 1.125rem;
  }

  .home-cards-link {
    justify-content: center;
    margin-bottom: 20px;
    margin-right: 0;
  }

  .split-col.card-split-text {
    margin-bottom: 50px;
  }

  .split-col.cards-image-wrapper {
    max-width: 100%;
  }

  .split-col.privacy-left {
    max-width: 100%;
    margin-bottom: 30px;
    margin-right: 0;
    position: static;
  }

  .header {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .img-styled.img-overlay {
    border-radius: 20px;
  }

  .img-styled.img-bordered {
    border-radius: 20px;
  }

  .img-styled.img-bordered.img-ref-jj {
    max-width: 100%;
  }

  .img-styled.card-split-icon {
    width: 70px;
    min-width: 70px;
    min-height: 70px;
    max-height: 70px;
    margin-bottom: 30px;
  }

  .img-styled.card-split-image {
    border-radius: 26px;
    margin-left: 0;
  }

  .img-styled.img-overlay-ref {
    border-radius: 20px;
  }

  .heading {
    font-size: 1.75rem;
    line-height: 1.4;
  }

  .footer-menu-content {
    grid-column-gap: 1rem;
    grid-row-gap: 1rem;
  }

  .card.card-split {
    background-image: linear-gradient(#fff 70%, #f1f4ff 70%);
    width: auto;
    margin-left: auto;
    margin-right: auto;
    padding-left: 35px;
    padding-right: 35px;
  }

  .footer-logo {
    width: 180px;
  }

  .feature-list {
    margin-top: 1.5rem;
    margin-bottom: 2rem;
  }

  .btn-secondary {
    padding-left: 18px;
    padding-right: 18px;
  }

  .btn-primary.btn-header {
    display: none;
  }

  .footer-menu-nav-main-wrapper {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    grid-template-rows: auto;
    max-width: 100%;
    margin-bottom: 2rem;
  }

  .footer {
    padding-top: 60px;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .footer-nav {
    width: 100%;
    margin-right: 0;
  }

  .btn-wrap {
    justify-content: center;
    align-self: stretch;
    align-items: center;
  }

  .footer-content-top {
    text-align: center;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
  }

  .grid-2 {
    grid-column-gap: 2rem;
    grid-row-gap: 2rem;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: row;
    margin-top: 2rem;
  }

  .grid-2.grid-split {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
  }

  .home-cards-menu {
    flex-direction: column;
    width: 100%;
    max-width: 475px;
    margin-bottom: 20px;
    margin-left: auto;
    margin-right: auto;
  }

  .page-gutter {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .image-wrap.contact-link-icon {
    border-radius: 13px;
    width: 48px;
    min-width: 48px;
    min-height: 48px;
    max-height: 48px;
  }

  .price-grid {
    grid-template-columns: 1fr;
    margin-top: 3rem;
  }

  .vat-text {
    font-size: 1.5rem;
  }

  .services-compare-feature {
    margin-right: 6px;
    display: none;
  }

  .price-tier-title {
    font-size: 1.125rem;
  }

  .price-tier-amount {
    font-size: 2.25rem;
  }

  .price-tier {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  .services-compare-cell {
    min-height: 90px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .services-compare-cell.compare-cell-lg {
    min-height: 104px;
    padding-left: 0;
    padding-right: 0;
  }

  .contact-section {
    display: flex;
  }

  .badge-wrap {
    right: 1.5rem;
  }

  .listing-grid {
    margin-bottom: 2rem;
  }

  .content-narrow-wrap.card-compare {
    margin-bottom: 40px;
  }

  .badge {
    margin-bottom: 15px;
  }

  .services-compare-feature-wrapper {
    width: 26%;
    padding-left: 10px;
    padding-right: 10px;
  }

  .texture-bg {
    bottom: -2px;
    left: 34px;
  }

  .analytics-tab {
    padding-left: 1.5rem;
  }

  .services-tabs {
    height: 100%;
  }

  .services-tabs-menu {
    width: 100%;
  }

  .menu-image-container {
    grid-row-gap: 3rem;
    grid-template-columns: 1fr;
  }

  .image-content-wrapper {
    min-height: auto;
    padding: 1.5rem 1rem;
  }

  .grid-horizontal, .grid-4-mini {
    grid-row-gap: 2.5rem;
    grid-template-columns: 1fr;
  }

  .tos-container {
    min-width: auto;
  }

  .tos-wrapper {
    flex-direction: column;
  }

  .privacy-nav-btn, .privacy-nav-btn.is-current {
    width: auto;
  }

  .row-wrap {
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
  }

  .grid-4 {
    grid-template-columns: 1fr;
    margin-top: 3rem;
    margin-bottom: 3rem;
  }

  .feature-card {
    padding: 1.5rem;
  }

  .dropdown-link-list {
    grid-row-gap: .5rem;
    max-width: none;
  }

  .dropdown-content-left {
    grid-row-gap: 1.5rem;
    flex-direction: column;
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-auto-columns: 1fr;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .dropdown-content-right {
    padding: 2rem 1rem;
  }

  .navbar-menu {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .navbar-link, .navbar-dropdown-toggle {
    font-size: 1rem;
  }

  .badge-new {
    padding: .125rem .5rem;
  }

  .faq-layout {
    grid-column-gap: 0rem;
    grid-row-gap: 0rem;
    grid-template-columns: 1fr;
  }

  .faq-list.first-col {
    border-bottom: 1px solid #eaecf0;
  }

  .faq-container {
    margin-top: 3rem;
  }

  .blog-post-image-wrap {
    margin-top: 3rem;
    margin-bottom: 2rem;
  }

  .blog-post-cta {
    padding: 1.5rem 1.5rem 2rem;
  }

  .blog-post-category-info {
    padding: .125rem .5rem;
    font-size: .75rem;
  }

  .blog-post-info-wrap {
    margin-top: 2rem;
    font-size: .75rem;
  }

  .grid-3 {
    grid-template-columns: 1fr;
    margin-top: 3rem;
    margin-bottom: 3rem;
  }

  .footer-content-half {
    text-align: center;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
  }

  .footer-main-content-right {
    width: 100%;
  }

  .payment-methods-grid {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media screen and (max-width: 479px) {
  h1 {
    font-size: 2.8rem;
  }

  h2 {
    font-size: 2rem;
  }

  p {
    font-size: 16px;
  }

  .scroll-grid {
    grid-template-columns: 1fr;
    grid-auto-flow: column;
  }

  .footer-content-bottom {
    flex-flow: column-reverse;
  }

  .footer-main-content {
    text-align: center;
    margin-bottom: 20px;
  }

  .admin-grid-images-wrapper {
    width: 95vw;
    padding-bottom: 0;
  }

  .content-wrapper.timeline-scroll {
    position: static;
  }

  .home-hero-layout {
    margin-bottom: 55px;
  }

  .footer-logo-container.is-current {
    justify-content: center;
  }

  .home-cards-link {
    padding-left: 20px;
    padding-right: 20px;
  }

  .split-col.privacy-left {
    margin-bottom: 20px;
  }

  .brand {
    margin-right: 15px;
  }

  .container-framed {
    padding-left: 0;
    padding-right: 0;
  }

  .header {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .img-styled.img-overlay {
    bottom: 25px;
    right: 25px;
  }

  .img-styled.card-split-icon {
    border-radius: 15px;
    width: 67px;
    min-width: 67px;
    min-height: 67px;
    max-height: 67px;
    margin-bottom: 20px;
  }

  .img-styled.card-split-image {
    border-radius: 20px;
    max-width: 75%;
  }

  .img-styled.compare-marker {
    width: 27px;
    min-width: 27px;
    min-height: 27px;
    max-height: 27px;
  }

  .img-styled.img-overlay-ref {
    bottom: 25px;
    right: 25px;
  }

  .display-heading {
    font-size: 12vw;
    line-height: 12vw;
  }

  .footer-menu-content {
    flex-flow: column;
    justify-content: center;
    align-items: center;
  }

  .card.card-split {
    background-image: linear-gradient(#fff 80%, #f1f4ff 80%);
    border-radius: 20px;
    padding: 44px 25px 49px;
  }

  .footer-logo {
    width: 170px;
  }

  .btn-secondary {
    padding-left: 20px;
    padding-right: 20px;
    display: block;
  }

  .btn-primary {
    padding-left: 20px;
    padding-right: 20px;
  }

  .footer-menu-nav-main-wrapper {
    text-align: left;
  }

  .footer {
    padding-top: 50px;
  }

  .footer-nav {
    flex-direction: column;
    align-items: flex-start;
    margin-right: 0;
  }

  .section.bg-neutral-200 {
    overflow: hidden;
  }

  .section.home-hero {
    padding-top: 2rem;
  }

  .footer-content-top {
    text-align: center;
  }

  .grid-2 {
    grid-template-rows: auto auto;
    grid-template-columns: 1fr;
    grid-auto-flow: row;
  }

  .image-wrap.contact-link-icon {
    border-radius: 10px;
    width: 40px;
    min-width: 40px;
    min-height: 40px;
    max-height: 40px;
    margin-right: 10px;
  }

  .services-compare-cell {
    min-height: 72px;
    padding-left: 5px;
    padding-right: 5px;
  }

  .services-compare-cell.compare-cell-lg {
    min-height: 83px;
  }

  .services-compare-grid {
    flex: 1;
  }

  .content-narrow-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  .badge {
    font-size: 14px;
  }

  .services-compare-feature-wrapper {
    width: 1%;
    margin-right: 20px;
  }

  .texture-bg {
    width: 18rem;
    height: 18rem;
    bottom: -50px;
    left: -33px;
  }

  .services-tabs {
    height: 100%;
  }

  .services-tabs-menu {
    margin-bottom: 50px;
  }

  .privacy-nav-btn {
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .error-page-content {
    max-width: 37.3125rem;
  }

  .error-animation {
    justify-content: center;
    align-items: center;
    min-width: 100%;
    min-height: 20rem;
    display: flex;
  }

  .row-wrap {
    grid-column-gap: .5rem;
    grid-row-gap: .5rem;
    margin-bottom: 1rem;
  }

  .hero-text {
    font-size: 1.1rem;
  }

  .dropdown-content-wrap {
    width: 100%;
  }

  .dropdown-content-left {
    grid-template-columns: 1fr;
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  .dropdown-content-right {
    max-width: none;
    padding-left: .75rem;
    padding-right: .75rem;
  }

  .dropdown-icon-wrapper {
    -webkit-text-stroke-color: #7f56d9;
  }

  .faq-layout {
    grid-template-columns: 1fr;
  }

  .nav-highlight-link {
    padding: .5rem;
  }

  .footer-content-half {
    text-align: center;
  }

  .footer-main-content-right {
    width: 100%;
  }

  .payment-methods-grid {
    grid-auto-flow: row dense;
  }
}

.feature-list__item,
.listing-item {
  align-self: start;
}

.menu-image-body {
  grid-area: 1 / 1 / 2 / 2;
}

@media screen and (max-width: 767px) {
  .order-first-mobile {
    order: -9999;
  }

  .menu-image-text {
    grid-area: 1 / 1 / 2 / 2;
  }

  .menu-image-body {
    grid-row: 2 / 3;
  }
}

/* ── Icons (src/components/Icon.astro) ─────────────────────
   Line icons take their colour from the wrapper; these wrappers had the blue
   baked into the old SVG files. */
.svg-icon,
.compare-marker,
.icon-sm {
  color: var(--color-primary);
}
.image-wrap.contact-link-icon.footer-logo {
  display: grid;
  place-items: center;
  border: 1px solid var(--color-secondary);
  border-radius: .6rem;
  background: var(--color-accent-lavender);
  color: var(--color-primary);
}

/* ── Motion ──────────────────────────────────────────────────
   Open/close transitions. States are set by custom.js toggling .is-open /
   .is-active / aria-expanded. @starting-style animates elements coming out of
   display:none; browsers without it simply show and hide instantly. */
.navbar-dropdown-toggle[aria-expanded="true"] .dropdown-icon svg {
  transform: rotate(180deg);
}

.btn-primary,
.btn-secondary {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

@media (prefers-reduced-motion: no-preference) {
  /* Buttons: hover lift and click press are in the "Card hover" section */
  .btn-primary,
  .btn-secondary {
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease;
  }

  /* Nav dropdowns: fade and drop in, fade out on close */
  .navbar-dropdown-list {
    opacity: 0;
    transform: translateY(-.5rem);
    transition-property: opacity, transform, display;
    transition-duration: .2s;
    transition-timing-function: ease-out;
    transition-behavior: allow-discrete;
  }
  .navbar-dropdown-list.is-open {
    opacity: 1;
    transform: none;
  }
  @starting-style {
    .navbar-dropdown-list.is-open {
      opacity: 0;
      transform: translateY(-.5rem);
    }
  }
  .dropdown-icon svg {
    transition: transform .2s ease;
  }

  /* Mobile menu: slide down from under the header */
  @media screen and (max-width: 991px) {
    .header.site-nav .nav-menu {
      opacity: 0;
      transform: translateY(-.75rem);
      transition-property: opacity, transform, display;
      transition-duration: .25s;
      transition-timing-function: ease-out;
      transition-behavior: allow-discrete;
    }
    .header.site-nav .nav-menu.is-open {
      opacity: 1;
      transform: none;
    }
    @starting-style {
      .header.site-nav .nav-menu.is-open {
        opacity: 0;
        transform: translateY(-.75rem);
      }
    }
  }

  /* FAQ: open to the answer's real height where the browser can animate to
     height:auto; otherwise fall back to the max-height transition. */
  .faq-answer {
    transition: max-height .3s ease;
  }
  @supports (interpolate-size: allow-keywords) {
    .faq-answer {
      interpolate-size: allow-keywords;
      max-height: none;
      height: 0;
      transition: height .3s ease;
    }
    .faq-block.is-open .faq-answer {
      max-height: none;
      height: auto;
    }
  }
  .accordion-icon_vertical-line {
    transition: transform .25s ease, opacity .25s ease;
  }
  .faq-block.is-open .accordion-icon_vertical-line {
    transform: rotate(90deg);
  }

  /* Tabs: fade the newly shown pane in */
  .tab-pane.is-active {
    animation: tab-pane-in .25s ease-out;
  }
}

@keyframes tab-pane-in {
  from { opacity: 0; transform: translateY(.25rem); }
  to   { opacity: 1; transform: none; }
}

/* ── Home hero ───────────────────────────────────────────────
   Left: domain search with live TLD prices. Right: a browser where a domain
   types itself, search results drop down, then a site builds, with service
   cards floating around. The visual scales with its own width: sizes are
   in em and the font-size follows the container. Decorative, aria-hidden. */
.hero-search {
  display: flex;
  gap: .5rem;
  margin-top: 1.75rem;
  padding: .4rem;
  border: 1px solid var(--color-secondary);
  border-radius: .75rem;
  background: #fff;
  box-shadow: var(--elevation-card), 0 0 0 4px var(--color-neutral-200);
  transition: border-color .2s ease;
}
.hero-search:focus-within { border-color: var(--color-primary); }
.hero-search input[type="text"] {
  flex: 1;
  min-width: 0;
  border: 0;
  padding: .6rem .8rem;
  font: inherit;
  font-size: 1.05rem;
  color: var(--color-neutral-800);
  background: transparent;
}
.hero-search input[type="text"]:focus { outline: none; }
.hero-tlds { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.hero-tlds > span {
  display: inline-flex;
  gap: .35rem;
  padding: .35rem .7rem;
  border-radius: var(--rounded-pill);
  background: var(--color-neutral-200);
  color: var(--color-neutral-600);
  font-size: .9rem;
}
.hero-tlds b { color: var(--color-primary); }
.hero-tlds .tld-price { font: inherit; color: inherit; border: 0; margin: 0; padding: 0; }
/* Room for a price like "99,99" up front, so the chips do not change width when prices arrive. */
.hero-tlds .tld-price { display: inline-block; min-width: 2.7em; text-align: right; }

.hero-visual {
  container-type: inline-size;
  position: relative;
  width: 48%;
  aspect-ratio: 1 / 1;
}
.hero-visual > * { font-size: clamp(9px, 2.6cqi, 16px); }
@media screen and (max-width: 991px) {
  .hero-tlds { justify-content: center; }
  .hero-visual { width: min(100%, 520px); }
}

.hv-stage { position: relative; width: 100%; height: 100%; }
.hv-glow {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 35%, rgba(82, 153, 211, .45), transparent 60%),
    radial-gradient(circle at 70% 65%, rgba(39, 70, 144, .35), transparent 60%),
    radial-gradient(circle at 60% 25%, rgba(225, 228, 255, .9), transparent 55%);
  filter: blur(30px);
}
.hv-check { width: 1.1em; height: 1.1em; color: var(--color-accent-green); flex: none; }

/* Browser */
.hv-browser {
  position: absolute;
  left: 4%;
  top: 16%;
  z-index: 2;
  width: 72%;
  border: 1px solid var(--color-secondary);
  border-radius: 1em;
  background: #fff;
  box-shadow: var(--elevation-image-overlay), var(--elevation-card-colored);
  overflow: hidden;
  text-align: left;
}
.hv-bar {
  display: flex;
  align-items: center;
  gap: .75em;
  padding: .7em 1em;
  background: var(--color-neutral-200);
  border-bottom: 1px solid var(--color-neutral-300);
}
.hv-dots { display: flex; gap: .35em; }
.hv-dots i { width: .6em; height: .6em; border-radius: 50%; }
.hv-dots i:nth-child(1) { background: var(--color-accent-red); }
.hv-dots i:nth-child(2) { background: var(--color-accent-amber); }
.hv-dots i:nth-child(3) { background: var(--color-accent-green); }
.hv-url {
  flex: 1;
  display: flex;
  align-items: center;
  gap: .4em;
  padding: .35em .8em;
  border-radius: 6.25em;
  background: #fff;
  border: 1px solid var(--color-neutral-300);
  color: var(--color-neutral-800);
  font-weight: 500;
  font-size: .95em;
}
.hv-url svg { flex: none; width: .9em; height: .9em; color: var(--color-primary); }
.hv-typed { white-space: nowrap; overflow: hidden; }
.hv-caret { width: 2px; height: 1.1em; background: var(--color-primary); }
.hv-page { position: relative; padding: 1.25em; display: grid; gap: .9em; }
.hv-hero { height: 7.5em; border-radius: .5em; background: linear-gradient(120deg, var(--color-primary), var(--color-secondary)); display: grid; align-content: center; gap: .5em; padding: 0 1.25em; }
.hv-hero i { display: block; height: .7em; width: 55%; border-radius: 1em; background: rgba(255, 255, 255, .85); }
.hv-hero i + i { width: 35%; background: rgba(255, 255, 255, .55); }
.hv-hero i + i + i { width: 5.5em; height: 1.5em; border-radius: .4em; background: var(--color-accent-amber); }
.hv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75em; }
.hv-cards > i { display: block; height: 5.5em; border: 1px solid var(--color-neutral-300); border-radius: .5em; background: #fff; position: relative; }
.hv-cards > i::before { content: ""; position: absolute; left: .7em; top: .7em; width: 1.6em; height: 1.6em; border-radius: .45em; background: var(--color-accent-lavender); }
.hv-cards > i::after { content: ""; position: absolute; left: .7em; right: .7em; bottom: .9em; height: .45em; border-radius: 1em; background: var(--color-neutral-300); }
.hv-lines { display: grid; gap: .45em; }
.hv-lines i { display: block; height: .5em; border-radius: 1em; background: var(--color-neutral-300); }
.hv-lines i:nth-child(2) { width: 85%; }
.hv-lines i:nth-child(3) { width: 60%; }

/* Search results dropping down under the address bar (hidden when not animating) */
.hv-results {
  position: absolute;
  top: 3.2em;
  left: 1em;
  right: 1em;
  z-index: 3;
  border: 1px solid var(--color-secondary);
  border-radius: .75em;
  background: #fff;
  box-shadow: 0 16px 32px rgba(20, 20, 43, .14);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
}
.hv-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: .6em;
  padding: .8em 1em;
  border-bottom: 1px solid var(--color-neutral-200);
  font-size: .95em;
}
.hv-row:last-child { border-bottom: 0; }
.hv-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: var(--color-neutral-800); }
.hv-status { white-space: nowrap; display: flex; align-items: center; gap: .35em; font-size: .85em; font-weight: 600; color: #0a9b3a; }
.hv-cost { font-weight: 700; color: var(--color-primary); }
.hv-row.is-best { background: var(--color-neutral-200); }
.hv-row.is-taken .hv-status { color: var(--color-accent-red); }
.hv-row.is-taken .hv-name,
.hv-row.is-taken .hv-cost { color: var(--color-neutral-500); }

/* Floating service cards */
.hv-card {
  position: absolute;
  z-index: 4;
  border: 1px solid var(--color-neutral-300);
  border-radius: 1em;
  background: #fff;
  box-shadow: 0 18px 40px rgba(20, 20, 43, .10), var(--elevation-card-colored);
  padding: 1em 1.1em;
  color: var(--color-neutral-800);
  text-align: left;
}
.hv-card small { display: block; color: var(--color-neutral-500); font-size: .8em; font-weight: 500; }
.hv-card strong { font-size: 1.35em; }
.hv-domain { right: 0; top: 4%; width: 34%; }
.hv-tld { font-size: 2em; font-weight: 700; color: var(--color-primary); line-height: 1; }
.hv-tld span { color: var(--color-secondary); }
.hv-price { display: flex; align-items: baseline; gap: .3em; margin-top: .5em; }
.hv-stats { left: 0; bottom: 4%; width: 40%; }
.hv-up { color: #0a9b3a; font-weight: 700; font-size: .9em; margin-left: .4em; }
.hv-bars { display: flex; align-items: flex-end; gap: .35em; height: 3.2em; margin-top: .6em; }
.hv-bars i { flex: 1; border-radius: .25em .25em 0 0; background: var(--color-accent-lavender); }
.hv-bars i:nth-child(1) { height: 35%; }
.hv-bars i:nth-child(2) { height: 50%; }
.hv-bars i:nth-child(3) { height: 42%; }
.hv-bars i:nth-child(4) { height: 65%; }
.hv-bars i:nth-child(5) { height: 58%; }
.hv-bars i:nth-child(6) { height: 90%; background: var(--color-primary); }
.hv-backup { right: 2%; bottom: 14%; display: flex; align-items: center; gap: .7em; padding: .75em 1em; }
.hv-backup b { display: block; font-size: .95em; }
.hv-ok { width: 2em; height: 2em; border-radius: 50%; display: grid; place-items: center; background: #dcfce7; color: #0a9b3a; }
.hv-ok svg { width: 1.1em; height: 1.1em; }

/* Narrow visuals (phones): drop the browser below the domain card so the results stay readable. */
@container (max-width: 440px) {
  .hv-browser { top: 27%; }
  .hv-stats { bottom: 0; }
}

/* One 10 s loop: type the domain (0-16 %), results drop down (20-48 %),
   then the faint site sketch fills in (54-90 %) and everything resets. */
@media (prefers-reduced-motion: no-preference) {
  .hv-typed { animation: hv-type 10s steps(13, end) infinite; }
  .hv-caret { animation: hv-blink .8s step-end infinite; }
  .hv-results { animation: hv-results 10s ease-out infinite; }
  .hv-row { animation: hv-row 10s ease-out infinite; }
  .hv-row:nth-child(2) { animation-delay: .25s; }
  .hv-row:nth-child(3) { animation-delay: .5s; }
  .hv-page > * { animation: hv-build 10s ease-out infinite; }
  .hv-page > :nth-child(2) { animation-delay: .25s; }
  .hv-page > :nth-child(3) { animation-delay: .5s; }
  .hv-card { animation: hv-float 7s ease-in-out infinite; }
  .hv-domain { animation-duration: 6s; animation-delay: -2s; }
  .hv-stats { animation-duration: 8s; animation-delay: -4s; }
  .hv-backup { animation-duration: 6.5s; animation-delay: -1s; }
  .hv-bars i { transform-origin: bottom; animation: hv-grow 10s ease-out infinite; }
  .hv-bars i:nth-child(2) { animation-delay: .1s; }
  .hv-bars i:nth-child(3) { animation-delay: .2s; }
  .hv-bars i:nth-child(4) { animation-delay: .3s; }
  .hv-bars i:nth-child(5) { animation-delay: .4s; }
  .hv-bars i:nth-child(6) { animation-delay: .5s; }
  .hv-glow { animation: hv-glow 10s ease-in-out infinite alternate; }
}

@keyframes hv-type {
  0%       { clip-path: inset(0 100% 0 0); }
  16%, 94% { clip-path: inset(0 0 0 0); }
  100%     { clip-path: inset(0 100% 0 0); }
}
@keyframes hv-blink { 50% { opacity: 0; } }
@keyframes hv-results {
  0%, 18%   { opacity: 0; visibility: hidden; transform: translateY(-.5em); }
  22%, 46%  { opacity: 1; visibility: visible; transform: none; }
  52%, 100% { opacity: 0; visibility: hidden; transform: translateY(-.5em); }
}
@keyframes hv-row {
  0%, 20%   { opacity: 0; transform: translateX(.75em); }
  25%, 100% { opacity: 1; transform: none; }
}
@keyframes hv-build {
  0%, 50%   { opacity: .18; }
  58%, 90%  { opacity: 1; }
  97%, 100% { opacity: .18; }
}
@keyframes hv-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
@keyframes hv-grow {
  0%, 55%   { transform: scaleY(.2); }
  70%, 100% { transform: scaleY(1); }
}
@keyframes hv-glow {
  from { transform: scale(1) rotate(0deg); }
  to   { transform: scale(1.08) rotate(20deg); }
}

/* ── Contact page ────────────────────────────────────────────── */
.contact-section { padding-top: 4rem; }
.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 4rem;
  align-items: start;
}
.contact-intro h1 { margin-top: .5rem; margin-bottom: .75rem; }
.contact-methods {
  display: grid;
  gap: .75rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.contact-method {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--color-neutral-300);
  border-radius: 1rem;
  background: #fff;
  color: var(--color-neutral-800);
  text-decoration: none;
  box-shadow: var(--elevation-card);
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
}
.contact-method:hover { border-color: var(--color-secondary); box-shadow: var(--elevation-card-colored); }
.contact-method:focus-visible { outline: 2px solid var(--color-secondary); outline-offset: 2px; }
.contact-method__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--color-secondary);
  border-radius: .8rem;
  background: var(--color-accent-lavender);
  color: var(--color-primary);
}
.contact-method__text { display: grid; gap: .1rem; }
.contact-method__text small { color: var(--color-neutral-500); font-size: .8rem; font-weight: 500; }
.contact-method__text b { font-size: 1.1rem; color: var(--color-primary); }
.contact-method__text span { color: var(--color-neutral-600); font-size: .9rem; }
.contact-company {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 2rem;
  margin: 2rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-neutral-300);
}
.contact-company dt { color: var(--color-neutral-500); font-size: .8rem; font-weight: 500; }
.contact-company dd { margin: 0; color: var(--color-neutral-800); font-size: .95rem; }

.contact-card {
  position: relative;
  padding: 2rem;
  border: 1px solid var(--color-secondary);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: var(--elevation-image-overlay), var(--elevation-card-colored);
}
.contact-card::before {
  content: "";
  position: absolute;
  inset: -2rem -2rem auto auto;
  z-index: -1;
  width: 70%;
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(82, 153, 211, .25), transparent 65%);
  filter: blur(20px);
}
.contact-form { display: grid; gap: 1.1rem; }
.contact-form h2 { margin: 0; font-size: 1.6rem; }
.contact-form__note { margin: -.6rem 0 0; color: var(--color-neutral-500); font-size: .85rem; }
.contact-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.field { display: grid; gap: .4rem; margin: 0; }
.field > span,
.field legend { color: var(--color-neutral-800); font-size: .9rem; font-weight: 600; }
.field input,
.field textarea {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid var(--color-neutral-400);
  border-radius: .6rem;
  background: #fff;
  color: var(--color-neutral-800);
  font: inherit;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.field textarea { resize: vertical; min-height: 8rem; }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-accent-lavender);
}
.topic-field { border: 0; padding: 0; }
.topic-field legend { margin-bottom: .5rem; padding: 0; }
.topic-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.topic-chip { position: relative; margin: 0; cursor: pointer; }
.topic-chip input { position: absolute; opacity: 0; pointer-events: none; }
.topic-chip span {
  display: inline-block;
  padding: .45rem .9rem;
  border: 1px solid var(--color-neutral-400);
  border-radius: var(--rounded-pill);
  color: var(--color-neutral-600);
  font-size: .9rem;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.topic-chip:hover span { border-color: var(--color-secondary); color: var(--color-primary); }
.topic-chip input:checked + span { border-color: var(--color-primary); background: var(--color-primary); color: #fff; }
.topic-chip input:focus-visible + span { outline: 2px solid var(--color-secondary); outline-offset: 2px; }
.consent { display: flex; align-items: flex-start; gap: .6rem; margin: 0; color: var(--color-neutral-600); font-size: .9rem; font-weight: 400; }
.consent input { flex: none; width: 1.1rem; height: 1.1rem; margin-top: .15rem; accent-color: var(--color-primary); }
.consent a { color: var(--color-primary); }
.contact-form__error {
  margin: 0;
  padding: .7rem .9rem;
  border: 1px solid var(--color-accent-red);
  border-radius: .6rem;
  background: #fff1f2;
  color: #b4232f;
  font-size: .9rem;
}
.contact-form__submit { justify-self: start; min-width: 12rem; border: 0; font: inherit; font-weight: 600; cursor: pointer; }
.contact-form__submit:disabled { opacity: .7; cursor: progress; }
.contact-done { display: grid; justify-items: center; gap: .5rem; padding: 3rem 1rem; text-align: center; outline: none; }
.contact-done__icon { color: #0a9b3a; }
.contact-done h2 { margin: .5rem 0 0; }
.contact-done p { max-width: 26rem; margin: 0; color: var(--color-neutral-600); }

@media screen and (max-width: 991px) {
  .contact-layout { grid-template-columns: 1fr; gap: 3rem; }
  .contact-section { padding-top: 3rem; }
}
@media screen and (max-width: 479px) {
  .contact-card { padding: 1.25rem; }
  .contact-form__grid { grid-template-columns: 1fr; }
  .contact-form__submit { justify-self: stretch; }
}
.contact-form[hidden],
.contact-done[hidden] { display: none; }

/* ── Scenes (src/components/scenes/) ────────────────────────
   Illustrations drawn in HTML/CSS in the same style as the home hero. Each scene
   scales with its own width (em + container units); decorative, aria-hidden.
   Reuses .hv-glow, .hv-bar, .hv-dots, .hv-hero, .hv-lines and .hv-card from the hero. */
.scene {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 4;
}
.scene-stage {
  position: absolute;
  inset: 0;
  font-size: clamp(8px, 2.5cqi, 15px);
  text-align: left;
}
.sc-window {
  position: absolute;
  z-index: 2;
  overflow: hidden;
  border: 1px solid var(--color-secondary);
  border-radius: 1em;
  background: #fff;
  box-shadow: var(--elevation-image-overlay), var(--elevation-card-colored);
}
.sc-title { font-weight: 700; font-size: .95em; color: var(--color-neutral-800); }
.sc-muted { color: var(--color-neutral-500); font-size: .8em; font-weight: 500; }
.sc-pill { display: inline-block; padding: .2em .7em; border-radius: 6.25em; font-size: .75em; font-weight: 600; }

/* Web design: desktop + phone, speed score, search result */
.sc-web .sc-window { left: 0; top: 10%; width: 80%; }
.sc-web .sc-page { display: grid; gap: .8em; padding: 1.1em; }
.sc-nav { display: flex; align-items: center; gap: .6em; }
.sc-nav b { width: 2.5em; height: .8em; border-radius: .3em; background: var(--color-primary); }
.sc-nav i { width: 2.2em; height: .4em; border-radius: 1em; background: var(--color-neutral-300); }
.sc-nav i:first-of-type { margin-left: auto; }
.sc-web .hv-hero { height: 6.5em; }
.sc-web .hv-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; }
.sc-web .hv-cards > i { height: 4em; }
.sc-phone {
  position: absolute;
  z-index: 3;
  right: 3%;
  bottom: 2%;
  width: 24%;
  aspect-ratio: 9 / 18;
  padding: .7em .55em;
  border: .35em solid var(--color-neutral-800);
  border-radius: 1.6em;
  background: #fff;
  box-shadow: 0 20px 40px rgba(20, 20, 43, .18);
  display: grid;
  align-content: start;
  gap: .5em;
}
.sc-phone::before { content: ""; justify-self: center; width: 35%; height: .45em; border-radius: 1em; background: var(--color-neutral-800); }
.sc-phone .hv-hero { height: 4.2em; padding: 0 .6em; gap: .3em; }
.sc-phone .hv-hero i { height: .45em; }
.sc-phone .hv-hero i + i + i { width: 2.6em; height: .9em; }
.sc-phone .sc-block { height: 2.4em; border: 1px solid var(--color-neutral-300); border-radius: .4em; }
.sc-speed { right: 20%; top: 0; display: flex; align-items: center; gap: .8em; padding: .8em 1em; }
.sc-gauge { position: relative; width: 3.4em; height: 3.4em; }
.sc-gauge svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sc-gauge circle { fill: none; stroke-width: 3.2; }
.sc-gauge .track { stroke: #dcfce7; }
.sc-gauge .value { stroke: #0a9b3a; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 2; }
.sc-gauge b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.05em; color: #0a9b3a; }
.sc-seo { left: 4%; bottom: 3%; width: 50%; padding: .9em 1.1em; }
.sc-seo .sc-url { display: flex; align-items: center; gap: .4em; font-size: .75em; color: var(--color-neutral-600); }
.sc-seo .sc-url::before { content: ""; width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--color-accent-lavender); border: 1px solid var(--color-secondary); }
.sc-seo .sc-link { margin: .35em 0 .45em; color: #1a0dab; font-size: 1em; font-weight: 600; }
.sc-seo .hv-lines i { height: .4em; }

/* Webshop operations: orders, sales, shipping notification */
.sc-shop .sc-window { left: 0; top: 12%; width: 78%; }
.sc-head { display: flex; align-items: center; justify-content: space-between; padding: .9em 1.1em; border-bottom: 1px solid var(--color-neutral-300); background: var(--color-neutral-200); }
.sc-head .sc-pill { background: #fff; border: 1px solid var(--color-neutral-300); color: var(--color-neutral-600); }
.sc-order {
  display: grid;
  grid-template-columns: 4em 1fr auto 5.5em;
  align-items: center;
  gap: .6em;
  padding: .75em 1.1em;
  border-bottom: 1px solid var(--color-neutral-200);
  font-size: .9em;
  color: var(--color-neutral-800);
}
.sc-order:last-child { border-bottom: 0; }
.sc-order .sc-id { color: var(--color-neutral-500); font-weight: 600; }
.sc-order .sc-sum { font-weight: 700; color: var(--color-primary); }
.sc-order .sc-pill { justify-self: end; }
.sc-order.is-new { background: #fffbeb; }
.st-new { background: #fef3c7; color: #92400e; }
.st-paid { background: var(--color-accent-lavender); color: var(--color-primary); }
.st-sent { background: #dcfce7; color: #166534; }
.st-done { background: var(--color-neutral-200); color: var(--color-neutral-600); }
.sc-sales { right: 0; top: 0; width: 38%; padding: .9em 1.1em; }
.sc-sales strong { display: block; margin-top: .2em; font-size: 1.5em; color: var(--color-neutral-800); }
.sc-sales svg { display: block; width: 100%; height: 2.6em; margin-top: .4em; overflow: visible; }
.sc-sales .sc-line { fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sc-sales .sc-area { fill: var(--color-accent-lavender); stroke: none; }
.sc-toast { right: 2%; bottom: 4%; display: flex; align-items: center; gap: .7em; padding: .75em 1em; }
.sc-toast b { display: block; font-size: .95em; }

/* Platforms: Shopify storefront, WordPress editor, custom-code editor */
.sc-platform { aspect-ratio: 1 / 1; }
.sc-platform .sc-window { left: 4%; top: 12%; width: 90%; height: 76%; display: flex; flex-direction: column; }
.sc-logo { left: 0; top: 0; padding: .6em; }
.sc-logo img { display: block; width: 2.6em; height: 2.6em; object-fit: contain; }
.sc-body { flex: 1; min-height: 0; display: flex; }

.sc-store { --accent: #5e8e3e; --accent-soft: #eef6e6; }
.sc-store .sc-body { flex-direction: column; gap: .8em; padding: 1em; }
.sc-storebar { display: flex; align-items: center; justify-content: space-between; }
.sc-storebar b { font-size: 1em; color: var(--color-neutral-800); }
.sc-cart { position: relative; width: 1.6em; height: 1.6em; color: var(--color-neutral-800); }
.sc-cart svg { width: 100%; height: 100%; }
.sc-cart span { position: absolute; top: -.4em; right: -.5em; display: grid; place-items: center; width: 1.2em; height: 1.2em; border-radius: 50%; background: var(--accent); color: #fff; font-size: .65em; font-weight: 700; }
.sc-products { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6em; }
.sc-product { display: grid; gap: .35em; }
.sc-product > i { display: block; aspect-ratio: 1; border-radius: .5em; background: var(--accent-soft); }
.sc-product:nth-child(2) > i { background: #fdf2e0; }
.sc-product:nth-child(3) > i { background: var(--color-accent-lavender); }
.sc-product small { height: .4em; width: 80%; border-radius: 1em; background: var(--color-neutral-300); }
.sc-product b { font-size: .8em; color: var(--color-neutral-800); }
.sc-product em { font-style: normal; text-align: center; padding: .3em 0; border-radius: .35em; background: var(--accent); color: #fff; font-size: .7em; font-weight: 600; }

.sc-wp { --wp-dark: #1d2327; --wp-blue: #2271b1; }
.sc-wp .hv-bar { background: var(--wp-dark); border-bottom: 0; }
.sc-wp .sc-side { width: 26%; padding: .8em .6em; background: #2c3338; display: grid; align-content: start; gap: .55em; }
.sc-wp .sc-side i { display: block; height: .5em; border-radius: 1em; background: rgba(255, 255, 255, .28); }
.sc-wp .sc-side i.on { background: var(--wp-blue); height: 1.1em; border-radius: .25em; }
.sc-wp .sc-editor { flex: 1; padding: 1em 1.1em; display: grid; align-content: start; gap: .7em; }
.sc-wp .sc-editor .sc-top { display: flex; justify-content: space-between; align-items: center; }
.sc-wp .sc-editor .sc-top em { font-style: normal; padding: .3em .8em; border-radius: .3em; background: var(--wp-blue); color: #fff; font-size: .75em; font-weight: 600; }
.sc-wp .sc-editor h5 { margin: 0; font-size: 1.15em; color: var(--color-neutral-800); }
.sc-wp .sc-media { height: 4.5em; border-radius: .4em; background: linear-gradient(120deg, #dbeafe, #eef2ff); border: 1px dashed #93c5fd; }

.sc-code { --ed-bg: #1b2440; --ed-side: #141b33; }
.sc-code .hv-bar { background: var(--ed-side); border-bottom: 0; }
.sc-code .sc-body { background: var(--ed-bg); }
.sc-files { width: 16%; padding: .9em .6em; background: var(--ed-side); display: grid; align-content: start; gap: .6em; }
.sc-files i { display: block; height: .45em; border-radius: 1em; background: rgba(255, 255, 255, .2); }
.sc-files i:nth-child(odd) { width: 75%; }
.sc-files i.on { background: var(--color-secondary); }
.sc-src { flex: 1; min-width: 0; padding: 0 0 1em; counter-reset: ln; }
.sc-tabs { display: flex; margin-bottom: .8em; background: var(--ed-side); font-size: .7em; font-weight: 600; }
.sc-tabs span { padding: .55em 1.1em; color: rgba(255, 255, 255, .45); }
.sc-tabs span.on { color: #fff; background: var(--ed-bg); box-shadow: inset 0 2px var(--color-accent-amber); }
.sc-code p { display: flex; align-items: center; gap: .45em; height: 1.35em; margin: 0; counter-increment: ln; }
.sc-code p::before { content: counter(ln); width: 2.4em; flex: none; text-align: right; padding-right: .6em; color: rgba(255, 255, 255, .25); font-size: .65em; font-family: ui-monospace, monospace; }
.sc-code p.in1::before { margin-right: 1.2em; }
.sc-code p.in2::before { margin-right: 2.4em; }
.sc-code p i { display: block; height: .5em; border-radius: 1em; }
.sc-code .c-t { background: #82aaff; }
.sc-code .c-a { background: #ffcb6b; }
.sc-code .c-s { background: #c3e88d; }
.sc-code .c-p { background: rgba(255, 255, 255, .35); }
.sc-code .w2 { width: 1.4em; } .sc-code .w3 { width: 2.1em; } .sc-code .w4 { width: 2.8em; }
.sc-code .w5 { width: 3.5em; } .sc-code .w6 { width: 4.2em; } .sc-code .w7 { width: 4.9em; }
.sc-caret { width: .12em; height: 1em; background: #fff; }
.sc-code-speed { right: 0; top: auto; bottom: 2%; }

@media (prefers-reduced-motion: no-preference) {
  .sc-gauge .value { animation: sc-gauge 8s ease-out infinite; }
  .sc-phone { animation: hv-float 7s ease-in-out infinite; }
  .sc-order.is-new { animation: sc-new-order 8s ease-out infinite; }
  .sc-toast { animation: sc-toast 8s ease-out infinite; }
  .sc-sales .sc-line { stroke-dasharray: 300; animation: sc-draw 8s ease-out infinite; }
  .sc-caret { animation: sc-blink 1.1s steps(1) infinite; }
  .sc-product em { animation: sc-cta 6s ease-in-out infinite; }
  .sc-product:nth-child(2) em { animation-delay: 2s; }
  .sc-product:nth-child(3) em { animation-delay: 4s; }
}
@keyframes sc-gauge {
  0%, 8%   { stroke-dashoffset: 100; }
  35%, 100% { stroke-dashoffset: 2; }
}
@keyframes sc-new-order {
  0%, 10%  { opacity: 0; transform: translateY(-.6em); background: #fef3c7; }
  18%      { opacity: 1; transform: none; background: #fef3c7; }
  60%, 100% { opacity: 1; transform: none; background: #fffbeb; }
}
@keyframes sc-toast {
  0%, 30%  { opacity: 0; transform: translateY(.8em); }
  38%, 88% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(.8em); }
}
@keyframes sc-draw {
  0%, 5%   { stroke-dashoffset: 300; }
  40%, 100% { stroke-dashoffset: 0; }
}
@keyframes sc-blink {
  50% { opacity: 0; }
}
@keyframes sc-cta {
  0%, 80%, 100% { transform: none; }
  88%           { transform: scale(1.08); }
}
/* The platform tabs centre their children; the card itself must span the full width. */
.home-cards-tabs > .card-split { align-self: stretch; }
/* Grids centre their items below desktop width; a scene's wrapper must still fill its column. */
.scene-slot { justify-self: stretch; width: 100%; }
.blend-multiply { mix-blend-mode: multiply; }

/* ── Card hover ──────────────────────────────────────────────
   One hover for buttons, the pricing/contact cards and the nav dropdown links:
   blue border + blue offset shadow + 1px lift (the .contact-method hover from /yhteystiedot). */
.privacy-nav-btn,
.home-cards-link,
.dropdown-link,
.nav-highlight-link {
  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease, transform .15s ease;
}
.btn-primary:hover,
.btn-secondary:hover,
.privacy-nav-btn:hover,
.home-cards-link:hover,
.dropdown-link:hover,
.nav-highlight-link:hover {
  border-color: var(--color-secondary);
  box-shadow: var(--elevation-card-colored);
}
.btn-primary.btn-disabled:hover { box-shadow: none; }

/* Nav dropdown links as contact-method cards on hover: same corners (kept tighter at
   rest so the underline stays straight), and the icon
   gets the lavender tile and the heading turns blue. The tile is always there
   (transparent at rest), so nothing moves when it appears. */
.nav-highlight-link,
.dropdown-link:hover { border-radius: 1rem; }
.dropdown-link .svg-icon-code {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid transparent;
  border-radius: .7rem;
  transition: background-color .2s ease, border-color .2s ease;
}
.dropdown-link .dropdown-item-heading { transition: color .2s ease; }
.dropdown-link:hover .svg-icon-code {
  border-color: var(--color-secondary);
  background-color: var(--color-accent-lavender);
}
.dropdown-link:hover .dropdown-item-heading { color: var(--color-primary); }
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .contact-method:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .privacy-nav-btn:hover,
  .home-cards-link:hover,
  .dropdown-link:hover,
  .nav-highlight-link:hover { transform: translateY(-1px); }
  .btn-primary.btn-disabled:hover { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  /* Press on click; after the hover rules so it wins while the pointer is over the button. */
  .btn-primary:active,
  .btn-secondary:active { transform: translateY(0) scale(.98); box-shadow: none; }
  .btn-primary.btn-disabled:active { transform: none; }
}

/* Two contact cards side by side (verkkosivujen-hinta) */
.contact-methods--pair {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  align-self: stretch;
  text-align: left;
}