/* ==========================================================================
   TK WebHosts — v3 design system
   Direction (DESIGN-DIRECTION.md): full Hostinger design fidelity — their
   sections, spacing, type treatment, nav/mega-menu, card & plan-card design —
   with ONLY the colours swapped to TKWH's exact brand tokens.
   Type: DM Sans everywhere (Space Grotesk retired in v3).
   Class names from v2 are preserved so all pages restyle without markup churn.
   ========================================================================== */

:root {
  --tk-white: #ffffff;
  --tk-ink: #12202d;
  --tk-muted: #526170;
  --tk-navy: #0d355c;
  --tk-navy-deep: #092844;
  --tk-blue: #0b559f;
  --tk-orange: #f47f32;
  --tk-soft-blue: #edf3f7;
  --tk-line: #d8dee4;

  --font-body: "DM Sans", sans-serif;

  --radius-card: 8px;
  --radius-btn: 4px;
  --radius-panel: 16px;
  --shadow-card: 0 1px 3px rgba(18, 32, 45, 0.06);
  --shadow-card-hover: 0 6px 20px rgba(18, 32, 45, 0.12);
  --shadow-panel: 0 24px 64px rgba(9, 40, 68, 0.22);
  --container: 1180px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--tk-ink);
  background: var(--tk-white);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--tk-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--tk-orange); outline-offset: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 300;
  background: var(--tk-navy-deep); color: var(--tk-white); padding: 10px 18px;
}
.skip-link:focus { left: 12px; top: 12px; }

/* ---- type scale (Hostinger: DM Sans, big friendly headings) -------------- */

h1, h2, h3, .display { font-family: var(--font-body); color: var(--tk-ink); }
h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; }
h3 { font-size: 1.2rem; font-weight: 700; line-height: 1.35; }

.eyebrow {
  font-size: 0.82rem; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--tk-orange); margin-bottom: 14px;
}
.lede { font-size: 1.13rem; color: var(--tk-muted); max-width: 58ch; }

/* ---- layout primitives --------------------------------------------------- */

.container { max-width: var(--container); margin: 0 auto; padding: 0 24px; }

.section { padding: 112px 0; }
.section--compact { padding: 48px 0; }
.section--tint { background: var(--tk-soft-blue); }
.section--dark { background: var(--tk-navy-deep); }
.section--dark h2, .section--dark h3 { color: var(--tk-white); }
.section--dark p, .section--dark .lede { color: rgba(255,255,255,0.82); }

.section-head { max-width: 720px; margin-bottom: 64px; }
.section-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head .lede { margin-top: 16px; }
.section-head--center .lede { margin-left: auto; margin-right: auto; }

.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
/* Consolidated from the identical inline blocks on the VPS, Microsoft 365 and Business Email
   pages ("TODO consolidate into v2.css"). /hosting used the class without the block, so its
   four plans stacked full-width; the pricing pages now reuse those cards too. */
.grid--4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1020px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--4 { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  .section { padding: 72px 0; }
}

/* ---- buttons (Hostinger: squared 4px radius, solid, confident) ----------- */

.btn {
  display: inline-block;
  font-weight: 600; font-size: 1rem;
  padding: 14px 32px;
  border-radius: var(--radius-btn);
  border: 1px solid transparent;
  cursor: pointer; text-align: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn:hover { text-decoration: none; }

.btn--primary { background: var(--tk-blue); color: var(--tk-white); }
.btn--primary:hover { background: var(--tk-navy); }

.btn--accent { background: var(--tk-orange); color: var(--tk-white); }
.btn--accent:hover { background: #d96a20; }

.btn--ghost { background: transparent; color: var(--tk-blue); border-color: var(--tk-blue); }
.btn--ghost:hover { background: var(--tk-soft-blue); }

.section--dark .btn--ghost, .hero--dark .btn--ghost {
  color: var(--tk-white); border-color: rgba(255,255,255,0.6);
}
.section--dark .btn--ghost:hover, .hero--dark .btn--ghost:hover { background: rgba(255,255,255,0.1); }

.btn-note { display: block; margin-top: 14px; font-size: 0.9rem; color: var(--tk-muted); }
.section--dark .btn-note, .hero--dark .btn-note { color: rgba(255,255,255,0.7); }

/* ---- promo strip (Hostinger's thin yellow bar → our orange) -------------- */

.promo-strip {
  background: var(--tk-orange); color: var(--tk-navy-deep);
  text-align: center; font-size: 0.9rem; font-weight: 600;
  padding: 8px 16px;
}
.promo-strip a { color: var(--tk-navy-deep); text-decoration: underline; font-weight: 700; }

/* ---- header + mega menu -------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--tk-white);
  border-bottom: 1px solid var(--tk-line);
}
.site-header__inner { display: flex; align-items: center; gap: 28px; min-height: 64px; position: relative; }
.site-header__logo {
  display: flex; align-items: center;
  width: 174px; flex: 0 0 174px;
}
.site-header__logo img {
  display: block; width: 174px; height: auto; max-width: 100%;
}

.site-header__nav { display: flex; gap: 4px; align-items: center; margin-left: 4px; }
.site-header__nav > a, .megamenu__trigger {
  color: var(--tk-ink); font-weight: 500; font-size: 0.97rem;
  padding: 9px 14px; border-radius: var(--radius-btn);
  background: none; border: none; cursor: pointer; font-family: inherit;
  display: inline-flex; align-items: center; gap: 6px;
}
.site-header__nav > a:hover, .megamenu__trigger:hover { background: var(--tk-soft-blue); text-decoration: none; }
.site-header__nav > a[aria-current="page"] { color: var(--tk-blue); font-weight: 700; }
.megamenu__trigger::after {
  content: ""; width: 8px; height: 8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform 0.15s ease;
}
.megamenu__trigger[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-2px); }

.site-header__end { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.site-header__cta { padding: 10px 22px; font-size: 0.95rem; white-space: nowrap; }
.site-header__signin {
  display: inline-flex; align-items: center; gap: 7px;
  color: var(--tk-ink); font-weight: 500; font-size: 0.97rem; white-space: nowrap;
  padding: 9px 12px; border-radius: var(--radius-btn);
}
.site-header__signin .icon { width: 18px; height: 18px; flex: none; }
.site-header__signin:hover { background: var(--tk-soft-blue); text-decoration: none; }
.site-header--dark .site-header__signin { color: rgba(255,255,255,0.92); }
.site-header--dark .site-header__signin:hover { background: rgba(255,255,255,0.08); }
.site-header__nav .site-header__signin--mobile { display: none; }

.region-switch {
  position: relative; display: block;
}
.locale-selector__trigger {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 38px; padding: 7px 14px;
  color: var(--tk-ink); background: transparent;
  border: 1px solid var(--tk-line); border-radius: 999px;
  font: 700 0.88rem/1 var(--font-body); cursor: pointer;
}
.locale-selector__trigger:hover { background: var(--tk-soft-blue); }
.locale-selector__flag {
  display: inline-grid; place-items: center; flex: 0 0 22px;
  width: 22px; height: 22px; overflow: hidden; border-radius: 50%;
  font-size: 17px; line-height: 1;
}
.locale-selector__chevron {
  width: 7px; height: 7px; margin-left: 1px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform 0.15s ease;
}
.locale-selector__trigger[aria-expanded="true"] .locale-selector__chevron { transform: rotate(-135deg) translateY(-1px); }
.locale-selector__panel {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 180;
  width: min(386px, calc(100vw - 32px)); max-height: min(560px, calc(100vh - 96px));
  overflow-y: auto; padding: 18px;
  color: var(--tk-ink); background: var(--tk-white);
  border: 1px solid var(--tk-line); border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
}
.locale-selector__panel[hidden] { display: none; }
.locale-selector__title { margin: 2px 0 16px; font-size: 1rem; font-weight: 700; line-height: 1.15; }
.locale-selector__search {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
  border: 1px solid var(--tk-line); border-radius: 12px; padding: 0 13px;
  color: var(--tk-muted);
}
.locale-selector__search:focus-within { border-color: var(--tk-blue); box-shadow: 0 0 0 2px rgba(11,85,159,0.12); }
.locale-selector__search input {
  width: 100%; min-height: 42px; padding: 0; border: 0; outline: 0;
  color: var(--tk-ink); background: transparent; font: 500 0.92rem var(--font-body);
}
.locale-selector__panel ul { list-style: none; display: grid; gap: 2px; }
.locale-selector__option a {
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto;
  align-items: center; gap: 10px; padding: 10px 12px;
  color: var(--tk-ink); border-radius: 9px; font-size: 0.93rem;
}
.locale-selector__option a:hover { background: var(--tk-soft-blue); text-decoration: none; }
.locale-selector__option a[aria-current="page"] { background: var(--tk-soft-blue); font-weight: 700; }
.locale-selector__country { font-weight: 600; }
.locale-selector__language { color: var(--tk-muted); }
.locale-selector__check { color: var(--tk-blue); font-weight: 800; }
.locale-selector__empty { padding: 16px 10px 4px; color: var(--tk-muted); text-align: center; }
.region-switch--mobile { display: none; }

/* dark header (used over dark heroes, like Hostinger's) */
.site-header--dark { background: var(--tk-navy-deep); border-bottom-color: rgba(255,255,255,0.12); }
.site-header--dark .site-header__nav > a,
.site-header--dark .megamenu__trigger { color: rgba(255,255,255,0.92); }
.site-header--dark .site-header__nav > a:hover,
.site-header--dark .megamenu__trigger:hover { background: rgba(255,255,255,0.08); }
.site-header--dark .site-header__nav > a[aria-current="page"] { color: var(--tk-white); }
.site-header--dark .locale-selector__trigger { color: var(--tk-white); border-color: rgba(255,255,255,0.28); }
.site-header--dark .locale-selector__trigger:hover { background: rgba(255,255,255,0.08); }
.site-header--dark .site-header__logo img { filter: none; }

/* mega menu panel */
.megamenu { position: static; }
/* The panel is ALWAYS dark, on light and dark headers alike — as Hostinger's is. */
.megamenu__panel {
  display: none;
  position: absolute; left: 50%; right: auto; top: calc(100% + 8px);
  width: min(1600px, calc(100vw - 48px));
  transform: translateX(-50%);
  background: var(--tk-navy-deep);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  padding: 24px;
  grid-template-columns: 240px minmax(0, 1fr) 300px; gap: 24px;
  z-index: 120;
}
.megamenu__panel.is-open { display: grid; }

.megamenu__rail {
  list-style: none; display: grid; gap: 4px; align-content: start;
  border-right: 1px solid rgba(255,255,255,0.12); padding-right: 24px;
}
.megamenu__rail a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; border-radius: 999px;
  color: rgba(255,255,255,0.88); font-weight: 600; font-size: 0.95rem;
}
.megamenu__rail a:hover { background: rgba(255,255,255,0.08); color: var(--tk-white); text-decoration: none; }
.megamenu__rail a.is-active { background: var(--tk-blue); color: var(--tk-white); text-decoration: none; }

.megamenu__groups { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 32px; align-content: start; }
.megamenu__panel.megamenu--tabs-ready .megamenu__groups { display: block; }
.megamenu__panel.megamenu--tabs-ready .megamenu__groups > [role="tabpanel"] { display: none; }
.megamenu__panel.megamenu--tabs-ready .megamenu__groups > [role="tabpanel"].is-active {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 28px; align-content: start;
}
.megamenu__panel.megamenu--tabs-ready .megamenu__groups > [role="tabpanel"] .megamenu__group-label {
  grid-column: 1 / -1;
}
.megamenu__group-label {
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(255,255,255,0.5); margin-bottom: 10px;
}
.megamenu__groups a {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px; border-radius: var(--radius-card);
}
.megamenu__groups a:hover { background: rgba(255,255,255,0.08); text-decoration: none; }
.megamenu__item-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 0.97rem; color: var(--tk-white);
  white-space: nowrap;
}
.megamenu__item-desc { display: block; font-size: 0.86rem; color: rgba(255,255,255,0.6); margin-top: 3px; }

.megamenu__promo {
  background: var(--tk-navy); color: var(--tk-white);
  border-radius: var(--radius-panel); padding: 26px;
  display: flex; flex-direction: column; gap: 12px; align-self: start;
}
.megamenu__promo-kicker { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tk-orange); }
.megamenu__promo .megamenu__promo-title { color: var(--tk-white); font-size: 1.15rem; font-weight: 700; line-height: 1.35; margin: 0; }
.megamenu__promo p { font-size: 0.9rem; color: rgba(255,255,255,0.78); }
.megamenu__promo .btn { margin-top: 6px; width: 100%; }
.megamenu__offers {
  grid-column: 1 / -1;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-card);
  font-weight: 600; font-size: 0.9rem;
}
.megamenu__offers:hover { background: rgba(255,255,255,0.08); text-decoration: none; }

.resources-menu__panel {
  width: min(1040px, calc(100vw - 48px));
  grid-template-columns: minmax(0, 1fr);
}
/* Learn holds two entries, Tools five. Weighting the columns rather than
   splitting them evenly lets Tools run two abreast without either side
   stretching to twice the height of the other. */
.resources-menu__groups {
  display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 2fr);
  gap: 20px 30px; align-content: start;
}
.resources-menu__tools {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 12px; align-content: start;
}
.resources-menu__groups > div {
  min-width: 0;
}
.resources-menu__groups .megamenu__item {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px; border-radius: var(--radius-card);
}
.resources-menu__groups .megamenu__item:hover {
  background: rgba(255,255,255,0.08); text-decoration: none;
}

/* dark-context mega menu follows header surface */
.site-header--dark .megamenu__panel { background: var(--tk-navy-deep); border-color: rgba(255,255,255,0.14); }
.site-header--dark .megamenu__rail a { color: rgba(255,255,255,0.9); }
.site-header--dark .megamenu__rail a:hover, .site-header--dark .megamenu__rail a.is-active { background: rgba(255,255,255,0.08); color: var(--tk-white); }
.site-header--dark .megamenu__groups a:hover { background: rgba(255,255,255,0.08); }
.site-header--dark .megamenu__item-title { color: var(--tk-white); }
.site-header--dark .megamenu__item-desc { color: rgba(255,255,255,0.62); }
.site-header--dark .megamenu__group-label { color: rgba(255,255,255,0.55); }
.site-header--dark .megamenu__promo { background: var(--tk-white); color: var(--tk-ink); }
.site-header--dark .megamenu__promo .megamenu__promo-title { color: var(--tk-ink); }
.site-header--dark .megamenu__promo p { color: var(--tk-muted); }

.nav-toggle { display: none; }

@media (max-width: 1240px) {
  .site-header__nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--tk-white);
    border-bottom: 1px solid var(--tk-line);
    flex-direction: column; align-items: stretch;
    padding: 16px 24px 22px; gap: 6px;
    max-height: calc(100vh - 64px); overflow-y: auto;
  }
  .site-header--dark .site-header__nav { background: var(--tk-navy-deep); }
  .site-header__nav.is-open { display: flex; }
  .site-header__nav > a, .megamenu__trigger { width: 100%; justify-content: flex-start; }
  .megamenu__panel { position: static; width: auto; transform: none; grid-template-columns: 1fr; padding: 8px 6px 14px; border: none; box-shadow: none; border-radius: 0; }
  .megamenu__rail {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    border-right: 0; border-bottom: 1px solid rgba(255,255,255,0.12);
    padding: 0 0 12px; margin-bottom: 4px;
  }
  .megamenu__rail a { border-radius: var(--radius-btn); padding: 9px 10px; }
  .megamenu__groups { grid-template-columns: 1fr; }
  .resources-menu__panel { grid-template-columns: 1fr; }
  .resources-menu__groups { grid-template-columns: 1fr; }
  .resources-menu__tools { grid-template-columns: 1fr; }
  .megamenu__panel.megamenu--tabs-ready .megamenu__groups > [role="tabpanel"].is-active {
    grid-template-columns: 1fr;
  }
  .megamenu__promo { display: none; }
  .site-header__end .region-switch { display: none; }
  .site-header__nav .region-switch--mobile { display: block; width: 100%; margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--tk-line); }
  .site-header--dark .site-header__nav .region-switch--mobile { border-top-color: rgba(255,255,255,0.14); }
  .region-switch--mobile .locale-selector__trigger { width: 100%; justify-content: flex-start; border-radius: var(--radius-btn); }
  .region-switch--mobile .locale-selector__chevron { margin-left: auto; }
  .region-switch--mobile .locale-selector__panel { position: static; width: 100%; max-height: none; margin-top: 8px; box-shadow: none; }
  .site-header__end .site-header__signin { display: none; }
  .site-header__nav .site-header__signin--mobile { display: flex; width: 100%; justify-content: flex-start; }
  .nav-toggle {
    display: block;
    background: none; border: 1px solid var(--tk-line); border-radius: var(--radius-btn);
    padding: 8px 12px; font-size: 1.05rem; cursor: pointer; color: var(--tk-ink);
  }
  .site-header--dark .nav-toggle { color: var(--tk-white); border-color: rgba(255,255,255,0.35); }
}

@media (max-width: 560px) {
  .site-header__inner { gap: 10px; }
  .site-header__logo { width: 138px; flex-basis: 138px; }
  .site-header__logo img { width: 138px; }
  .site-header__end { gap: 8px; min-width: 0; }
  .nav-toggle { padding: 7px 9px; font-size: 0.9rem; }
  .site-header__cta { padding: 9px 10px; font-size: 0.82rem; }
}

@media (max-width: 430px) {
  .site-header__cta { display: none; }
}

/* ---- hero ----------------------------------------------------------------- */

.hero { padding: 88px 0 96px; }
.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.88fr);
  gap: 64px; align-items: start;
}
.hero__copy .lede { margin: 22px 0 28px; }

.hero__checklist { list-style: none; display: grid; gap: 12px; margin-bottom: 32px; }
.hero__checklist li { padding-left: 32px; position: relative; font-size: 1.05rem; }
.hero__checklist li::before {
  content: "✓";
  position: absolute; left: 0; top: 1px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--tk-soft-blue); color: var(--tk-blue);
  font-size: 0.8rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* dark full-bleed hero (Hostinger homepage style) */
.hero--dark { background: var(--tk-navy-deep); }
.hero--dark h1, .hero--dark h2 { color: var(--tk-white); }
.hero--dark .lede { color: rgba(255,255,255,0.82); }
.hero--dark .hero__checklist li { color: rgba(255,255,255,0.9); }
.hero--dark .hero__checklist li::before { background: rgba(255,255,255,0.12); color: var(--tk-orange); }
/* Paid-traffic heroes: the offer line under the buttons and one short review,
   so the offer and some proof sit on the first screen (/email-deliverability). */
.hero__offer { margin-top: 16px; font-size: .95rem; color: rgba(255,255,255,0.78); }
.hero__offer a { color: var(--tk-white); text-decoration: underline; text-underline-offset: 3px; }
.hero__region-note { margin: 18px 0 0; padding-inline-start: 14px; border-inline-start: 2px solid var(--tk-orange); color: rgba(255,255,255,0.84); font-size: .95rem; line-height: 1.55; }
.hero__review {
  margin: 24px 0 0; padding-left: 16px; max-width: 46ch;
  border-left: 3px solid var(--tk-orange);
}
.hero__review-stars { color: var(--tk-orange); letter-spacing: 2px; font-size: .95rem; }
.hero__review blockquote { margin: 6px 0 4px; color: rgba(255,255,255,0.92); font-size: 1rem; line-height: 1.5; }
.hero__review figcaption { font-size: .85rem; color: rgba(255,255,255,0.7); }
/* Buttons sit above the checklist here, so the checklist needs its own top gap. */
.hero--ad .hero__checklist { margin: 28px 0 0; }
@media (max-width: 640px) { .hero--ad { padding-top: 36px; } }
/* Even line lengths, so the last word never sits alone on a phone. */
.hero--ad .hero__headline { text-wrap: balance; }
.hero--ad .lede { text-wrap: pretty; }

.hero--cinematic {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--tk-navy-deep) url("/images/homepage-showcase-poster.jpg") center / cover no-repeat;
}
.hero--cinematic::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(3, 29, 51, 0.98) 0%, rgba(3, 29, 51, 0.88) 44%, rgba(3, 29, 51, 0.68) 100%),
    linear-gradient(0deg, rgba(3, 29, 51, 0.42), rgba(3, 29, 51, 0.08));
  pointer-events: none;
}
.hero--cinematic .hero__inner { position: relative; z-index: 2; }
.hero__background {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  pointer-events: none;
}

.landing-stage {
  padding: 24px clamp(16px, 2vw, 40px);
  background: #080808;
}
.hero--landing {
  min-height: clamp(560px, 68vh, 720px);
  display: flex;
  align-items: center;
  border-radius: 20px;
}
.hero--landing::before {
  background:
    linear-gradient(90deg, rgba(3, 29, 51, 0.84) 0%, rgba(3, 29, 51, 0.58) 46%, rgba(3, 29, 51, 0.22) 100%),
    linear-gradient(0deg, rgba(3, 29, 51, 0.44), rgba(3, 29, 51, 0.04));
}
.hero--landing .hero__inner {
  width: 100%;
  grid-template-columns: minmax(0, 680px);
  align-items: center;
}
.hero--landing .hero__copy { max-width: 680px; }
.hero--landing h1 { font-size: clamp(2.65rem, 5vw, 4.8rem); }
.hero--landing .hero__actions { margin-top: 30px; }
.hero__assurance {
  margin-top: 18px;
  color: rgba(255,255,255,0.9);
  font-size: 0.94rem;
}
.hero__video-toggle {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid rgba(255,255,255,0.42);
  border-radius: 50%;
  background: rgba(5, 18, 29, 0.62);
  color: var(--tk-white);
  font: 700 0.72rem/1 "DM Sans", sans-serif;
  cursor: pointer;
  backdrop-filter: blur(6px);
}
.hero__video-toggle:hover { background: rgba(5, 18, 29, 0.86); }
.hero__video-toggle:focus-visible { outline: 3px solid var(--tk-orange); outline-offset: 3px; }
.hero__video-toggle span { transform: translateY(-0.5px); }
.btn--light {
  background: var(--tk-white);
  border-color: var(--tk-white);
  color: var(--tk-ink);
}
.btn--light:hover { background: #edf3f7; border-color: #edf3f7; color: var(--tk-ink); }

@media (max-width: 900px) {
  .hero--cinematic::before { background: rgba(3, 29, 51, 0.86); }
  .hero--landing::before { background: linear-gradient(90deg, rgba(3, 29, 51, 0.88), rgba(3, 29, 51, 0.52)); }
}

@media (max-width: 640px) {
  .landing-stage { padding: 0; }
  .hero--landing { min-height: 590px; border-radius: 0; }
  .hero--landing .hero__copy { max-width: 100%; }
  .hero--landing .hero__background { object-position: 58% center; }
}

@media (max-width: 900px) { .hero__inner { grid-template-columns: 1fr; } }

/* ---- domain search hero ------------------------------------------------- */

.domain-hero {
  background: var(--tk-navy-deep);
  color: var(--tk-white);
  padding: 104px 0 120px;
}
.domain-hero__inner { max-width: 1100px; text-align: center; }
.domain-hero h1,
.domain-hero h2 { color: var(--tk-white); }
.domain-hero > .container > .lede {
  color: rgba(255,255,255,0.8);
  margin: 20px auto 34px;
}
.domain-search {
  width: min(650px, 100%);
  min-height: 68px;
  margin: 0 auto;
  padding: 8px 9px 8px 20px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  background: var(--tk-white);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.22);
}
.domain-search__icon { width: 22px; height: 22px; color: var(--tk-muted); }
.domain-search input[type="text"] {
  width: 100%;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--tk-ink);
  font: inherit;
  font-size: 1.05rem;
}
.domain-search button {
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--tk-orange);
  color: var(--tk-white);
  font: inherit;
  font-size: 1.35rem;
  cursor: pointer;
}
.domain-search button:hover { background: #d96a20; }
.domain-search__note {
  max-width: 670px;
  margin: 14px auto 0;
  color: rgba(255,255,255,0.66);
  font-size: 0.88rem;
}

/* Search band directly under the hero. The component above is built for a navy
   ground, so on this light band the near-white border has to become visible and
   the deep drop shadow has to lift. */
.domain-strip { background: var(--tk-soft-blue); padding: 48px 0 52px; text-align: center; }
.domain-strip h2 { margin: 0 auto 22px; max-width: 940px; font-size: clamp(1.5rem, 2.4vw, 2.05rem); }
.domain-strip .domain-search { border-color: var(--tk-line); box-shadow: 0 12px 32px rgba(9,40,68,0.10); }
.domain-strip .domain-search__note { color: var(--tk-muted); }
.domain-strip--plain { background: var(--tk-white); border-bottom: 1px solid var(--tk-line); }
.domain-promo-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 18px;
  margin-top: 64px;
  text-align: left;
}
.domain-promo {
  position: relative;
  min-height: 300px;
  padding: 26px;
  border-radius: var(--radius-panel);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  color: var(--tk-white);
}
.domain-promo p { color: rgba(255,255,255,0.82); }
.domain-promo h2 { margin: 8px 0 10px; font-size: clamp(1.45rem, 2.5vw, 2.15rem); }
.domain-promo--primary { background: linear-gradient(135deg, var(--tk-blue), #3679b9); }
.domain-promo--accent {
  background:
    radial-gradient(circle at 80% 15%, rgba(244,127,50,0.82), transparent 36%),
    linear-gradient(145deg, #164e78, var(--tk-navy));
}
.domain-promo--link { background: #173d65; }
.domain-promo--link:hover { text-decoration: none; transform: translateY(-2px); }
.domain-promo__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--tk-orange);
}
.domain-promo__icon .icon { width: 28px; height: 28px; color: var(--tk-white); }
.domain-promo__metric { font-size: 2rem; font-weight: 700; color: var(--tk-white) !important; }
.domain-promo__arrow { position: absolute; top: 20px; right: 22px; font-size: 1.5rem; }
.domain-promo__transfer {
  width: 100%;
  margin: 72px 0 24px;
  padding: 12px 16px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--tk-white);
  color: var(--tk-navy-deep);
  font-weight: 700;
  font-size: 1.15rem;
  box-shadow: 8px 8px 0 rgba(255,255,255,0.16);
}
.domain-promo__transfer .icon { width: 24px; height: 24px; color: var(--tk-blue); }
.domain-value-grid { grid-template-columns: repeat(4, 1fr); }
.domain-tld-card { display: flex; flex-direction: column; min-height: 230px; }
.domain-tld-card__name {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 82px;
  min-height: 48px;
  margin-bottom: 20px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--tk-navy-deep);
  color: var(--tk-white);
  font-size: 1.25rem;
  font-weight: 700;
}
/* The TLD name is the card's heading now, with the price beneath it. The
   pill keeps its 20px gap: `.card h3` (0,1,1) would otherwise outrank the
   single-class rule above and collapse it to 10px. */
.domain-tld-card h3.domain-tld-card__name { margin-bottom: 20px; }
.domain-tld-card__price { display: block; margin-bottom: 10px; font-size: 1.2rem; font-weight: 700; line-height: 1.35; color: var(--tk-ink); }
.domain-tld-card .card__more { margin-top: auto; }
.domain-guide-grid .card__step { color: var(--tk-orange); }
.domain-basics-grid .card { min-height: 220px; }
.domain-price-note { margin-top: 18px; color: var(--tk-muted); font-size: 0.92rem; }
.domain-price-note a { font-weight: 700; }
.domain-consult { background: var(--tk-white); }
.domain-consult__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(340px, 0.8fr);
  align-items: start;
  gap: 72px;
}

@media (max-width: 900px) {
  .domain-promo-grid { grid-template-columns: 1fr 1fr; }
  .domain-promo--primary { grid-column: 1 / -1; }
  .domain-value-grid { grid-template-columns: repeat(2, 1fr); }
  .domain-consult__inner { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 620px) {
  .domain-hero { padding: 72px 0 80px; }
  .domain-search { min-height: 60px; padding-left: 14px; border-radius: 14px; }
  .domain-search button { width: 44px; height: 44px; }
  .domain-promo-grid { grid-template-columns: 1fr; margin-top: 44px; }
  .domain-promo--primary { grid-column: auto; }
  .domain-promo { min-height: 250px; }
  .domain-value-grid { grid-template-columns: 1fr; }
}

/* ---- conversion card ------------------------------------------------------ */

.convert-card {
  background: var(--tk-white);
  border-radius: var(--radius-panel);
  border: 1px solid var(--tk-line);
  box-shadow: var(--shadow-panel);
  padding: 32px 30px;
}
.hero--dark .convert-card { border-color: transparent; }
.convert-card h2 { font-size: 1.3rem; margin-bottom: 8px; color: var(--tk-ink); }
.convert-card__note { font-size: 0.94rem; color: var(--tk-muted); margin-bottom: 22px; }
.convert-card p + p { margin-top: 10px; }

.convert-card form { display: grid; gap: 14px; }
.convert-card label { font-weight: 600; font-size: 0.9rem; display: grid; gap: 6px; color: var(--tk-ink); }
/* display: grid above outranks the hidden attribute; let hidden win. */
.convert-card label[hidden] { display: none; }
.convert-card input[type="file"] {
  font: inherit; font-weight: 400; color: var(--tk-muted); width: 100%; cursor: pointer;
  border: 1px dashed var(--tk-line); border-radius: var(--radius-btn); padding: 12px 14px; background: var(--tk-white);
}
.convert-card input[type="file"]:focus { outline: none; border-color: var(--tk-blue); }
.convert-card input[type="file"]::file-selector-button {
  font: inherit; font-weight: 600; color: var(--tk-blue); cursor: pointer; margin-right: 12px;
  background: var(--tk-soft-blue); border: 1px solid var(--tk-blue); border-radius: var(--radius-btn); padding: 8px 14px;
}
.convert-card input[type="text"],
.convert-card input[type="email"],
.convert-card input[type="tel"],
.convert-card input[type="url"],
.convert-card textarea {
  font: inherit; color: var(--tk-ink);
  border: 1px solid var(--tk-line); border-radius: var(--radius-btn);
  padding: 12px 14px; background: var(--tk-white); width: 100%;
}
.convert-card input:focus, .convert-card textarea:focus {
  outline: none; border-color: var(--tk-blue);
  box-shadow: 0 0 0 3px rgba(11, 85, 159, 0.15);
}
.convert-card__consent {
  margin: 0; font-size: 0.82rem; line-height: 1.45;
  font-weight: 400; color: var(--tk-muted);
}
.convert-card .btn { width: 100%; }
.convert-card__alt { font-size: 0.9rem; color: var(--tk-muted); text-align: center; margin-top: 4px; }
.convert-card__hint { display: block; font-weight: 400; color: var(--tk-muted); }

/* Inline Cal.com calendar (booking-widget.js). The fallback link shows until the
   embed reports linkReady, so the card still books a call without JavaScript. */
.cal-inline { margin: 4px 0; }
.cal-inline__frame { width: 100%; overflow: auto; }
.cal-inline:not(.is-ready) .cal-inline__frame { min-height: 0; }
.cal-inline.is-ready .cal-inline__frame { min-height: 520px; }
/* .btn sets display, which beats the [hidden] attribute, so hide it explicitly. */
.cal-inline [data-cal-fallback][hidden] { display: none; }

/* Careers, laid out like a job site: result cards on /careers, a job listing
   beside a rail of every open job on /careers/{slug}, one form on /careers/apply. */
.careers-breadcrumb { font-size: 0.85rem; color: var(--tk-muted); margin-bottom: 14px; }
.careers-breadcrumb a { color: var(--tk-blue); }
.careers-countries { margin-top: 28px; }
.careers-countries summary h3 { font-size: 1rem; }

.job-meta { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--tk-muted); font-size: 0.92rem; }
.job-meta li { display: inline-flex; align-items: center; gap: 7px; }
.job-meta .icon { width: 18px; height: 18px; flex-shrink: 0; }
.job-list { margin: 10px 0 20px; padding-left: 22px; display: grid; gap: 8px; color: var(--tk-ink); list-style: disc; }
ol.job-list { list-style: decimal; }
.job-list li { padding-left: 4px; }

.job-results { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.job-card { background: var(--tk-white); border: 1px solid var(--tk-line); border-radius: var(--radius-panel); box-shadow: 0 1px 3px rgba(18, 32, 45, 0.08); overflow: hidden; }
.job-card__head { padding: 28px 32px 22px; border-bottom: 1px solid var(--tk-line); }
.job-card__title { font-size: 1.45rem; line-height: 1.3; margin: 0; }
.job-card__title a { color: var(--tk-ink); text-decoration: none; }
.job-card__title a:hover { text-decoration: underline; }
.job-card__body { padding: 20px 32px 28px; }
.job-card__label { font-weight: 600; color: var(--tk-ink); margin: 0; }

.job-view { background: var(--tk-soft-blue); padding: 32px 0 64px; }
.job-view__grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 32px; align-items: start; }
.job-view__grid > .job-detail { grid-column: 2; grid-row: 1; }
.job-view__grid > .job-rail { grid-column: 1; grid-row: 1; }
.job-rail { position: sticky; top: 88px; max-height: calc(100vh - 110px); overflow-y: auto; padding-right: 4px; }
.job-rail__back { display: inline-block; font-weight: 600; color: var(--tk-ink); text-decoration: none; margin-bottom: 16px; }
.job-rail__back:hover { color: var(--tk-blue); }
.job-rail ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.job-rail__item { display: grid; gap: 6px; padding: 16px 18px; background: var(--tk-white); border: 1px solid var(--tk-line); border-radius: var(--radius-card); color: var(--tk-ink); text-decoration: none; }
.job-rail__item:hover { border-color: var(--tk-blue); }
.job-rail__item.is-current { border: 2px solid var(--tk-blue); padding: 15px 17px; }
.job-rail__title { font-size: 1.05rem; line-height: 1.35; }
.job-rail__meta { font-size: 0.85rem; color: var(--tk-muted); }

.job-detail { background: var(--tk-white); border: 1px solid var(--tk-line); border-radius: var(--radius-panel); box-shadow: 0 1px 3px rgba(18, 32, 45, 0.08); }
.job-detail__head { padding: 32px 32px 26px; border-bottom: 1px solid var(--tk-line); }
.job-detail__head h1 { font-size: clamp(1.6rem, 2.6vw, 2rem); line-height: 1.25; margin: 0; }
.job-detail__head .btn { margin-top: 20px; }
.job-detail__body { padding: 28px 32px 36px; }
.job-detail__body h2 { font-size: 1.2rem; margin: 26px 0 0; }
.job-detail__body h2 + p { margin-top: 8px; }
.job-detail__body > p { color: var(--tk-ink); }
.job-detail__note { display: flex; gap: 12px; align-items: flex-start; background: var(--tk-soft-blue); border-radius: var(--radius-card); padding: 14px 18px; font-size: 0.92rem; }
.job-detail__note .icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--tk-blue); }
.job-detail__apply { margin-top: 28px; }

.job-apply h1 { font-size: clamp(1.8rem, 3vw, 2.4rem); margin: 0 0 24px; }
.job-apply__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; align-items: start; }
.job-apply__job { padding: 28px 30px; position: sticky; top: 88px; }
.job-apply__label { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tk-muted); margin: 0 0 6px; }
.job-apply__title { font-size: 1.45rem; font-weight: 600; line-height: 1.3; color: var(--tk-ink); margin: 0; }
.job-apply__meta { color: var(--tk-muted); font-size: 0.92rem; margin: 8px 0 16px; }

@media (max-width: 960px) {
  .job-view__grid, .job-apply__grid { grid-template-columns: 1fr; }
  .job-view__grid > .job-detail, .job-view__grid > .job-rail { grid-column: 1; grid-row: auto; }
  .job-rail, .job-apply__job { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 640px) {
  .job-card__head, .job-card__body, .job-detail__head, .job-detail__body { padding-left: 20px; padding-right: 20px; }
  .job-apply__job { padding: 22px 20px; }
}

/* The card is a light surface wherever it sits. `.section--dark p` and
   `.section--dark .chip` outrank the card's own colours, so without these the
   note, consent line and chips render white-on-white inside a dark section.
   `.hero--dark` never hit this because it deliberately avoids a blanket p rule. */
.section--dark .convert-card p { color: var(--tk-muted); }
.section--dark .convert-card .chip {
  background: var(--tk-white); border-color: var(--tk-line); color: var(--tk-ink);
}

/* ---- multi-step lead form ------------------------------------------------ */

.form-steps__rail {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 6px; margin: 0 0 22px; padding: 0; list-style: none;
}
.form-steps__dot {
  display: grid; justify-items: center; gap: 6px;
  font-size: 0.72rem; font-weight: 600; line-height: 1.25;
  text-align: center; color: var(--tk-muted);
  position: relative;
}
/* Connector sits behind the numbers, drawn from each dot to the next. */
.form-steps__dot:not(:last-child)::after {
  content: ""; position: absolute; top: 13px; left: calc(50% + 18px); right: calc(-50% + 18px);
  height: 2px; background: var(--tk-line);
}
.form-steps__num {
  display: grid; place-items: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--tk-white); border: 2px solid var(--tk-line);
  color: var(--tk-muted); font-size: 0.8rem;
}
.form-steps__dot.is-active { color: var(--tk-ink); }
.form-steps__dot.is-active .form-steps__num {
  border-color: var(--tk-blue); color: var(--tk-blue);
  box-shadow: 0 0 0 3px rgba(11, 85, 159, 0.13);
}
.form-steps__dot.is-done .form-steps__num {
  border-color: var(--tk-blue); background: var(--tk-blue); color: var(--tk-white);
}
.form-steps__dot.is-done:not(:last-child)::after { background: var(--tk-blue); }
.form-steps__lead {
  margin: 0; font-size: 0.88rem; line-height: 1.5; color: var(--tk-muted);
}
.form-steps form[hidden] { display: none; }

.convert-card select {
  font: inherit; color: var(--tk-ink);
  border: 1px solid var(--tk-line); border-radius: var(--radius-btn);
  padding: 12px 14px; background: var(--tk-white); width: 100%;
}
.convert-card select:focus {
  outline: none; border-color: var(--tk-blue);
  box-shadow: 0 0 0 3px rgba(11, 85, 159, 0.15);
}

.checkbox-group { border: 0; padding: 0; margin: 0; display: grid; gap: 10px; }
.checkbox-group legend {
  padding: 0; margin-bottom: 4px;
  font-weight: 600; font-size: 0.9rem; color: var(--tk-ink);
}
/* Override the stacked .convert-card label grid for tick-box rows. */
.checkbox-group label {
  display: flex; align-items: center; gap: 10px;
  font-weight: 400; font-size: 0.9rem; color: var(--tk-ink);
  cursor: pointer;
}
.checkbox-group input[type="checkbox"] {
  width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--tk-blue); margin: 0;
}

/* ---- logo / trust strip --------------------------------------------------- */

.logo-strip { padding: 48px 0 56px; border-top: 1px solid var(--tk-line); }
.logo-strip__label {
  text-align: center; font-size: 0.85rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--tk-muted); margin-bottom: 28px; font-weight: 700;
}
.logo-strip__row { display: flex; flex-wrap: wrap; justify-content: center; gap: 40px 56px; align-items: center; }
.logo-strip__row img {
  height: 34px; width: auto;
  filter: grayscale(1); opacity: 0.55;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.logo-strip__row img:hover { filter: none; opacity: 1; }

.trust-strip { text-align: center; padding: 26px 0; font-size: 0.95rem; color: var(--tk-muted); }
.trust-strip strong { color: var(--tk-ink); }
.trust-strip a { font-weight: 600; }
.trust-strip__stars { color: var(--tk-orange); letter-spacing: 2px; margin-right: 8px; }

/* ---- cards ---------------------------------------------------------------- */

.card {
  background: var(--tk-white);
  border: 1px solid var(--tk-line);
  border-radius: var(--radius-card);
  padding: 28px 26px;
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.18s ease, border-color 0.18s ease;
}
.card:hover { box-shadow: var(--shadow-card-hover); border-color: #c3ccd4; text-decoration: none; }
a.card { display: block; color: inherit; }
a.card:hover { text-decoration: none; }

.card__icon {
  width: 44px; height: 44px; border-radius: var(--radius-card);
  background: var(--tk-soft-blue); color: var(--tk-blue);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; margin-bottom: 16px;
}
.card h3 { margin-bottom: 10px; }
.card p { color: var(--tk-muted); font-size: 0.96rem; }
.card ul { margin: 12px 0 0 18px; color: var(--tk-muted); font-size: 0.94rem; display: grid; gap: 6px; }
.card__more { display: inline-block; margin-top: 16px; font-weight: 700; font-size: 0.95rem; color: var(--tk-blue); }
.card .eyebrow { margin-bottom: 8px; }
.card__kicker, .card__meta {
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--tk-muted); margin-bottom: 6px;
}
.card__tags { margin-top: 14px; font-size: 0.83rem; color: var(--tk-muted); }
.card__tags span,
.quote-card__tags span {
  display: inline-block;
  font-size: 0.8rem; font-weight: 600; color: var(--tk-muted);
  background: var(--tk-soft-blue); border-radius: 999px; padding: 5px 12px;
  margin: 3px 4px 3px 0;
}
.card__outcome { font-weight: 700; color: var(--tk-ink); margin-bottom: 8px; }
.card__step {
  font-size: 1.6rem; font-weight: 700; color: var(--tk-blue);
  margin-bottom: 10px; display: block;
}
.section--tint .card { border-color: transparent; }
.section--tint .card--featured { border-color: var(--tk-blue); }
.card ul li { margin-bottom: 6px; }

/* ---- plan cards (Hostinger pricing pattern) ------------------------------- */

.plan-card { position: relative; display: flex; flex-direction: column; }
.plan-card .btn { width: 100%; margin-top: auto; }
.plan-card__badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--tk-orange); color: var(--tk-white);
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 4px 14px; border-radius: 999px; white-space: nowrap;
}
.card--featured { border: 2px solid var(--tk-blue); }
.price-figure { margin: 14px 0 4px; color: var(--tk-ink); }
.price-figure .price-old {
  display: block; font-size: 0.95rem; color: var(--tk-muted);
  text-decoration: line-through; font-weight: 500;
}
.price-figure .price-now { font-size: 2.4rem; font-weight: 700; line-height: 1.1; }
.price-figure .price-term { font-size: 0.95rem; color: var(--tk-muted); font-weight: 500; }
.plan-list { list-style: none; margin: 16px 0 22px; display: grid; gap: 9px; }
.plan-list li { padding-left: 26px; position: relative; font-size: 0.94rem; color: var(--tk-muted); }
.plan-list li::before { content: "✓"; position: absolute; left: 0; color: var(--tk-blue); font-weight: 700; }

/* Grouped fixed-price packages (web design, 2026-09-30): a websites grid and a shops
   grid, each card with its renewal line, and Custom Build as one wide card beneath
   them, since it is a separate offer rather than a tier. */
.plan-group + .plan-group { margin-top: 56px; }
.plan-group__title { font-size: 1.35rem; margin-bottom: 8px; }
.plan-group__intro { color: var(--tk-muted); max-width: 760px; }
.plan-group__title + .grid,
.plan-group__intro + .grid,
.plan-group__title + .plan-list { margin-top: 26px; }
.plan-group__note { margin-top: 22px; font-size: 0.95rem; color: var(--tk-muted); }
.plan-group .grid .price-figure { font-size: 1.9rem; font-weight: 700; line-height: 1.15; }
.plan-card__renew { margin: auto 0 18px; padding-top: 12px; border-top: 1px solid var(--tk-line); font-size: 0.9rem; font-weight: 600; color: var(--tk-ink); }
.plan-card__renew + .btn { margin-top: 0; }
.plan-group .grid--4 .btn { padding-left: 10px; padding-right: 10px; }
.plan-card--wide { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; gap: 14px 40px; align-items: center; }
.plan-card--wide .plan-list { margin: 0; }
.plan-card--wide .btn { width: auto; margin-top: 0; }
/* body stays LTR on RTL storefronts and components opt in (see the [dir="rtl"] list). */
[dir="rtl"] .plan-group__title,
[dir="rtl"] .plan-group__intro,
[dir="rtl"] .plan-group__note,
[dir="rtl"] .plan-group > .plan-list,
[dir="rtl"] .plan-group ~ .legal-note { direction: rtl; }
/* Google review quotes stay in the reviewer's English on RTL storefronts: let each
   quote take its direction from its own text so the quotation marks and full stops
   land at the right ends. */
[dir="rtl"] .quote-card blockquote { unicode-bidi: plaintext; text-align: start; }
/* The box itself sits in LTR flow, so push the packages heading to the right edge
   where the RTL group titles line up. */
[dir="rtl"] .section-head:has(+ .plan-group),
[dir="rtl"] .plan-group__intro { margin-left: auto; }
@media (max-width: 900px) {
  .plan-card--wide { grid-template-columns: 1fr; }
  .plan-card--wide .btn { width: 100%; }
}

/* ---- chips ---------------------------------------------------------------- */

.chip-row { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-row--center { justify-content: center; }
.hero__copy .chip-row { margin-bottom: 26px; }
.convert-card .chip-row { margin-bottom: 18px; }
.chip {
  display: inline-block; padding: 8px 16px;
  border: 1px solid var(--tk-line); border-radius: 999px;
  font-size: 0.9rem; font-weight: 600; color: var(--tk-ink); background: var(--tk-white);
}

/* ---- stats band ----------------------------------------------------------- */

.stats { padding: 88px 0; }
.stats__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; text-align: center; }
.stats__grid--4 { grid-template-columns: repeat(4, 1fr); }
.stats__num { font-size: clamp(2.6rem, 5vw, 3.6rem); font-weight: 700; color: var(--tk-white); line-height: 1; }
.stats__num em { font-style: normal; color: var(--tk-orange); }
.stats__label { margin-top: 10px; color: rgba(255,255,255,0.75); font-size: 0.98rem; }
/* Readable by default. It used to be 60% white everywhere (dark bands override it to 82%),
   which left 50 of the site's 66 notes (review dates, billing terms) at 1:1 contrast on
   light sections - invisible. Fixed 2026-09-17, measured in the browser before and after. */
.stats__note { text-align: center; margin-top: 34px; font-size: 0.9rem; color: var(--tk-muted); }
.section-head .stats__note, .hero__copy .stats__note { text-align: inherit; }
/* Dark bands: .section--dark p (0.82 white) already wins, so notes keep the colour they had.
   Dark heroes have no paragraph rule, so they get the same value explicitly. */
.hero--dark .stats__note { color: rgba(255,255,255,0.82); }
@media (max-width: 900px) { .stats__grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .stats__grid, .stats__grid--4 { grid-template-columns: 1fr; } }

/* ---- testimonials --------------------------------------------------------- */

.quote-card { display: flex; flex-direction: column; gap: 16px; }
.quote-card__stars { color: var(--tk-orange); letter-spacing: 2px; font-size: 0.95rem; }
.quote-card blockquote { font-size: 1rem; color: var(--tk-ink); }
.quote-card figcaption { font-size: 0.88rem; color: var(--tk-muted); margin-top: auto; }
.quote-card__tags { font-size: 0.82rem; color: var(--tk-muted); }

/* ---- FAQ (Hostinger: hairline rows, right-aligned toggles) ---------------- */

.faq { max-width: 800px; margin: 0 auto; }
.faq details { border-bottom: 1px solid var(--tk-line); }
.faq details:first-of-type { border-top: 1px solid var(--tk-line); }
.faq summary {
  font-weight: 700; font-size: 1.08rem;
  padding: 24px 8px; cursor: pointer; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq summary h3 { margin: 0; font: inherit; color: inherit; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--tk-ink); font-size: 1.5rem; font-weight: 400; flex-shrink: 0; }
.faq details[open] summary::after { content: "–"; }
.faq details p { padding: 0 8px 24px; color: var(--tk-muted); max-width: 68ch; }
.section--tint .faq details { border-color: #d9e2e9; }
/* Two independent stacks, not a grid of rows: opening an answer in one column
   never leaves a gap beside it or reflows the other column. */
.faq--2col { max-width: none; display: grid; grid-template-columns: 1fr 1fr; gap: 0 48px; align-items: start; }
@media (max-width: 860px) {
  .faq--2col { grid-template-columns: 1fr; }
  .faq--2col .faq__col + .faq__col details:first-of-type { border-top: 0; }
}

/* ---- video embed ---------------------------------------------------------- */

.video-embed, .video-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  border-radius: var(--radius-panel); overflow: hidden;
  background: var(--tk-navy-deep);
}
.video-embed iframe, .video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Video reviews (/reviews): Fraser's portrait video in the hero, two landscape cards below.
   Each poster is a link to YouTube; video-reviews.js swaps in the player on click, so no
   YouTube request happens until a visitor chooses to watch. Once playing, the orange button
   becomes a play/pause toggle: always shown while paused, shown on hover while playing.
   Starting one video pauses any other. */
.video-reviews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.video-reviews--2 { grid-template-columns: repeat(2, 1fr); max-width: 980px; margin-inline: auto; }
.video-review {
  display: flex; flex-direction: column;
  background: var(--tk-white); border: 1px solid var(--tk-line);
  border-radius: var(--radius-panel); overflow: hidden;
  box-shadow: var(--shadow-card); transition: box-shadow 0.18s ease;
}
.video-review:hover { box-shadow: var(--shadow-card-hover); }
.video-review__media {
  position: relative; display: block; aspect-ratio: 16 / 9;
  background: var(--tk-navy-deep); overflow: hidden;
}
.video-review__media--portrait { aspect-ratio: 9 / 16; border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); }
.video-review__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
/* Poster only: on the player this overlay would sit over the iframe and swallow the pointer,
   so YouTube's own controls would never reappear. */
a.video-review__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(9, 40, 68, 0) 55%, rgba(9, 40, 68, 0.45) 100%);
}
a.video-review__media:hover img { transform: scale(1.03); }
/* Vertical footage in a landscape card: the sharp poster sits centred over a blurred copy of
   the same file (one image, no presentation variant). */
.video-review__media--pillar img { position: absolute; inset: 0; object-fit: contain; }
.video-review__media--pillar img.video-review__backdrop { object-fit: cover; filter: blur(22px) brightness(0.85); transform: scale(1.15); }
a.video-review__media--pillar:hover img.video-review__backdrop { transform: scale(1.15); }
.video-review__media:focus-visible { outline: 3px solid var(--tk-orange); outline-offset: -3px; }
.video-review__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-review__play {
  position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 68px; height: 68px; border-radius: 50%; border: 0; padding: 0;
  display: grid; place-items: center; cursor: pointer;
  background: var(--tk-orange); box-shadow: 0 8px 24px rgba(9, 40, 68, 0.35);
  transition: transform 0.18s ease, opacity 0.25s ease;
}
.video-review__play svg { width: 28px; height: 28px; fill: var(--tk-white); }
.video-review__play svg.is-play { margin-inline-start: 4px; }
.video-review__media:hover .video-review__play { transform: translate(-50%, -50%) scale(1.08); }
.video-review__play:focus-visible { outline: 3px solid var(--tk-white); outline-offset: 3px; }
.video-review__media.is-playing .video-review__play { opacity: 0; }
@media (hover: hover) {
  .video-review__media.is-playing:hover .video-review__play,
  .video-review__media.is-playing .video-review__play:focus-visible { opacity: 1; }
}
.video-review__time {
  position: absolute; z-index: 1; right: 12px; top: 12px;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(5, 18, 29, 0.78); color: var(--tk-white);
  font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums;
}
.video-review__body { display: flex; flex-direction: column; flex: 1; padding: 24px 26px 26px; }
.video-review__service {
  align-self: flex-start; margin-bottom: 16px; padding: 5px 12px; border-radius: 999px;
  background: var(--tk-soft-blue); color: var(--tk-blue);
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
}
.video-review__quote { margin: 0 0 20px; font-size: 1.06rem; line-height: 1.55; font-weight: 500; color: var(--tk-ink); }
.video-review__who { margin-top: auto; font-size: 0.92rem; color: var(--tk-muted); }
.video-review__who strong { display: block; font-size: 1rem; color: var(--tk-ink); }
.video-review__context {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--tk-line);
  font-size: 0.9rem; color: var(--tk-muted);
}
.hero-video { justify-self: center; width: min(100%, 280px); margin: 0; }
/* Fraser's upload is a 16:9 file with vertical footage centred between black bars, so the
   player is drawn at 16:9 to the box's full height and cropped to the middle third. The
   cropped-off control bar is turned off in video-reviews.js; the orange button replaces it. */
.video-review__media[data-video-crop="pillarbox"] iframe { width: 316.05%; left: -108.025%; }
.hero-video__caption { margin-top: 16px; text-align: center; font-size: 0.9rem; line-height: 1.5; color: var(--tk-muted); }
.hero-video__caption strong { display: block; font-size: 1rem; color: var(--tk-ink); }
.hero-video__stars { display: block; margin-bottom: 4px; color: var(--tk-orange); letter-spacing: 0.12em; }
/* Desktop: cards share row tracks (subgrid), so service tag, quote, name and context line up
   across the cards whatever the quote length. */
@media (min-width: 1025px) {
  @supports (grid-template-rows: subgrid) {
    .video-reviews { row-gap: 0; }
    .video-review { display: grid; grid-row: span 5; grid-template-rows: subgrid; }
    .video-review__body { display: contents; }
    .video-review__body > * { margin-inline: 26px; }
    .video-review__service { margin-top: 24px; justify-self: start; }
    .video-review__context { margin-bottom: 26px; }
  }
}
@media (max-width: 1024px) {
  .video-reviews, .video-reviews--2 { grid-template-columns: 1fr; gap: 24px; }
  .video-review { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .video-review .video-review__media { aspect-ratio: auto; min-height: 100%; }
}
@media (max-width: 900px) {
  .hero-video { width: min(100%, 280px); margin-top: 8px; }
}
@media (max-width: 640px) {
  .video-review { display: flex; }
  .video-review .video-review__media { aspect-ratio: 16 / 9; min-height: 0; }
  .video-review__body { padding: 20px 20px 22px; }
  .video-review__play { width: 58px; height: 58px; }
}
@media (prefers-reduced-motion: reduce) {
  .video-review__media img, .video-review__play { transition: none; }
  a.video-review__media:hover img { transform: none; }
}

/* ---- legal ---------------------------------------------------------------- */

.legal-copy { max-width: 760px; margin: 0 auto; }
.legal-copy h2 { font-size: 1.45rem; margin: 40px 0 14px; }
.legal-copy h3 { margin: 26px 0 10px; }
.legal-copy p { margin-bottom: 14px; color: var(--tk-ink); }
.legal-copy ul, .legal-copy ol { margin: 0 0 14px 22px; display: grid; gap: 6px; }
.legal-note { font-size: 0.9rem; color: var(--tk-muted); border-top: 1px solid var(--tk-line); padding-top: 18px; margin-top: 34px; }

/* ---- detail tables (About company info) ----------------------------------- */

.detail-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.detail-table td { padding: 9px 0; vertical-align: top; }
.detail-table td:first-child { color: var(--tk-muted); width: 42%; padding-right: 14px; }

/* ---- misc shared ----------------------------------------------------------- */

.proof-links { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.content-narrow { max-width: 760px; }
.copy-spaced { margin-bottom: 18px; }
.stack-top-16 { margin-top: 16px; }
.stack-top-22 { margin-top: 22px; }
.stack-top-26 { margin-top: 26px; }
.stack-top-32 { margin-top: 32px; }
.centered-action { margin-top: 32px; text-align: center; }
.portfolio-intro { margin: 0 0 26px; color: var(--tk-muted); max-width: 56ch; }
.cta-phones { margin-top: 22px; font-size: 0.98rem; }
.cta-phones a { font-weight: 700; }
.section--dark .cta-phones { color: rgba(255,255,255,0.8); }
.section--dark .cta-phones a { color: var(--tk-white); }

/* ---- production form states --------------------------------------------- */

.form-honeypot {
  position: absolute !important; left: -9999px !important;
  width: 1px !important; height: 1px !important; overflow: hidden !important;
}
.form-status {
  margin-top: 16px; padding: 14px 16px; border-radius: var(--radius-card);
  font-size: 0.92rem; line-height: 1.45;
}
.form-status[hidden] { display: none; }
.form-status--success { background: #e7f6ec; color: #155b2d; border: 1px solid #b8dfc4; }
.form-status--error { background: #fff0ed; color: #8a2f1d; border: 1px solid #efc4bb; }
.convert-card button[disabled] { cursor: wait; opacity: 0.72; }

/* ---- regional storefronts ---------------------------------------------- */

.offer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.offer-card {
  background: var(--tk-white); border: 1px solid var(--tk-line);
  border-radius: var(--radius-card); padding: 24px;
  display: flex; flex-direction: column; min-height: 100%;
}
.offer-card__price { margin: 14px 0 4px; color: var(--tk-ink); }
.offer-card__price strong { font-size: 2rem; line-height: 1; }
.offer-card__price span { color: var(--tk-muted); font-size: 0.86rem; }
.offer-card .btn { margin-top: auto; width: 100%; }
.local-proof {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: rgba(255,255,255,0.14); border: 1px solid rgba(255,255,255,0.14);
}
.local-proof > div { background: var(--tk-navy-deep); padding: 30px; text-align: center; }
.local-proof strong { display: block; color: var(--tk-white); font-size: 1.35rem; margin-bottom: 6px; }
.local-proof span { color: rgba(255,255,255,0.7); font-size: 0.92rem; }
@media (max-width: 900px) { .offer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) {
  .offer-grid, .local-proof { grid-template-columns: 1fr; }
  .offer-card { padding: 20px; }
}

/* ---- pre-footer CTA band --------------------------------------------------- */

.cta-band { text-align: center; padding: 112px 0 56px; }
.cta-band h2 { font-size: clamp(2rem, 3.6vw, 2.9rem); margin-bottom: 16px; }
.cta-band p { max-width: 56ch; margin: 0 auto 32px; }
.cta-band p:last-child { margin-bottom: 0; }

/* ---- footer (Hostinger anatomy: dark, columns, bottom meta row) ------------ */

.site-footer {
  background: var(--tk-navy-deep);
  color: rgba(255,255,255,0.78);
  padding: 48px 0 36px;
  font-size: 0.95rem;
}
.site-footer a { color: rgba(255,255,255,0.78); }
.site-footer a:hover { color: var(--tk-white); }
.site-footer__directory {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 34px;
  padding-bottom: 56px; border-bottom: 1px solid rgba(255,255,255,0.14);
}
.site-footer__column { min-width: 0; }
.site-footer__brand img {
  display: block; width: 190px; height: auto; max-width: 100%;
  margin: 0 0 22px;
  filter: none;
}
.site-footer__brand { max-width: 520px; }
.site-footer__brand p { max-width: 58ch; }
.site-footer__brand-row {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 36px;
  padding: 44px 0 36px; border-bottom: 1px solid rgba(255,255,255,0.14);
}
.site-footer__brand-row .btn { flex: 0 0 auto; }
/* social row: monochrome brand glyphs in the logo section, as Hostinger does */
.site-footer .site-footer__social { display: flex; flex-wrap: wrap; gap: 4px; margin: 20px 0 0 -8px; }
.site-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--radius-btn);
}
[dir="rtl"] .site-footer .site-footer__social { margin: 20px -8px 0 0; }
.site-footer .site-footer__climate { margin: 16px 0 0; font-size: 0.88rem; }
.site-footer__climate a { display: inline-flex; align-items: flex-start; gap: 8px; }
.site-footer__climate a:hover span { text-decoration: underline; }
.site-footer__climate-icon { flex: 0 0 auto; margin-top: 0.15em; }
.site-footer h4, .site-footer .site-footer__heading {
  font-size: 0.85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--tk-white); margin-bottom: 18px;
}
.site-footer ul { list-style: none; display: grid; gap: 10px; }
.site-footer__directory a { line-height: 1.35; }
.site-footer__legal {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  justify-content: space-between; padding-top: 28px;
  font-size: 0.88rem; color: rgba(255,255,255,0.55);
}
@media (max-width: 1100px) { .site-footer__directory { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .cta-band { padding-bottom: 40px; }
  .site-footer { padding-top: 40px; }
  .site-footer__directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand-row { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 440px) { .site-footer__directory { grid-template-columns: 1fr; } }

/* ---- icons (outline sprite, /icons.svg) ------------------------------------ */

.icon { width: 24px; height: 24px; display: block; }
.card__icon .icon { width: 22px; height: 22px; }
.megamenu__rail .icon { width: 18px; height: 18px; flex-shrink: 0; }
.megamenu__rail a { align-items: center; }
.megamenu__panel .icon { color: var(--tk-white); }
.megamenu__groups .icon { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.megamenu__item { display: flex; gap: 12px; align-items: flex-start; }

/* menu/item badge pills (Hostinger "New"/"Popular") */
.menu-badge {
  display: inline-block; flex: 0 0 auto; white-space: nowrap;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--tk-blue); background: var(--tk-soft-blue);
  border-radius: 999px; padding: 2px 9px;
}
.site-header--dark .menu-badge { background: rgba(255,255,255,0.14); color: var(--tk-white); }

/* ---- long-form page archetypes ------------------------------------------ */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.panel {
  background: var(--tk-white); border: 1px solid var(--tk-line);
  border-radius: var(--radius-card); padding: 32px 30px; box-shadow: var(--shadow-card);
}
.section--tint .panel { border-color: transparent; }
.panel h3 { margin-bottom: 14px; }
.panel > p { color: var(--tk-muted); }
.panel__label,
.feature-row__panel-label {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--tk-muted); margin-bottom: 14px;
}
.panel .plan-list { margin-bottom: 0; }
.panel .detail-table td:first-child { width: 38%; color: var(--tk-ink); font-weight: 600; }
.panel .detail-table tr + tr td { border-top: 1px solid var(--tk-line); padding-top: 14px; }

.plan-list--cols,
.fit-list--cols { grid-template-columns: 1fr 1fr; column-gap: 36px; }
.fit-list { list-style: none; display: grid; gap: 12px; }
.fit-list li { position: relative; padding-left: 28px; color: var(--tk-muted); font-size: 0.98rem; }
.fit-list li::before { content: "\2713"; position: absolute; left: 0; top: 0; color: var(--tk-blue); font-weight: 700; }
.fit-list--no li::before { content: "\2014"; color: var(--tk-orange); }
.split-band { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }
.split-band__copy.section-head { margin-bottom: 0; }
.split-band__copy .lede + p { margin-top: 14px; }
.split-band__copy .stats__note { margin-top: 18px; }
.split-band__media { margin: 0; }
.split-band__media img { width: 100%; height: auto; border-radius: var(--radius-card); }

.feature-row {
  display: grid; grid-template-columns: 1.02fr 0.98fr; gap: 52px;
  align-items: center; padding-bottom: 44px;
}
.feature-row + .feature-row { border-top: 1px solid var(--tk-line); padding-top: 44px; }
.feature-row:last-child { padding-bottom: 0; }
.section--tint .feature-row + .feature-row { border-top-color: #d9e2e9; }
.feature-row--flip .feature-row__copy { order: 2; }
.feature-row__step,
.factor__num {
  display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.11em;
  text-transform: uppercase; color: var(--tk-orange); margin-bottom: 10px;
}
.feature-row h3 { font-size: 1.45rem; margin-bottom: 12px; }
.feature-row p { color: var(--tk-muted); }
.feature-row p + p { margin-top: 12px; }
.feature-row__panel {
  background: var(--tk-white); border: 1px solid var(--tk-line);
  border-radius: var(--radius-card); padding: 26px 24px; box-shadow: var(--shadow-card);
}
.section--tint .feature-row__panel { border-color: transparent; }
.feature-row__panel .plan-list { margin: 0; }

.section--dark .cap-card {
  background: rgba(255,255,255,0.045); border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius-card); padding: 28px 26px;
}
.section--dark .cap-card h3 { color: var(--tk-white); font-size: 1.15rem; margin-bottom: 10px; }
.section--dark .cap-card p,
.section--dark .cap-card .plan-list li { color: rgba(255,255,255,0.78); font-size: 0.96rem; }
.section--dark .cap-card .card__icon { background: rgba(255,255,255,0.1); color: var(--tk-orange); }
.section--dark .cap-card .cap-card__num { font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--tk-orange); margin-bottom: 14px; }
.section--dark .cap-card .plan-list li::before { color: var(--tk-orange); }
.section--dark .panel { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.16); box-shadow: none; }
.section--dark .panel h3 { color: var(--tk-white); }
.section--dark .panel .plan-list li { color: rgba(255,255,255,0.78); }
.section--dark .panel .plan-list li::before,
.section--dark .eyebrow { color: var(--tk-orange); }
.section--dark .panel .btn-note { color: rgba(255,255,255,0.6); }
.section--dark .card h3,
.section--dark .card .card__outcome { color: var(--tk-ink); }
.section--dark .card p { color: var(--tk-muted); }
.section--dark .card .eyebrow { color: var(--tk-orange); }
.section--dark .centered-action .btn + .btn { margin-left: 12px; }
.section--dark .chip { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.22); color: var(--tk-white); }
.stats__note a { color: var(--tk-blue); text-decoration: underline; }
.section--dark .stats__note a, .hero--dark .stats__note a { color: var(--tk-white); }

.table-scroll,
.cmp-wrap,
.resp-table-wrap,
.cs-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare-table { width: 100%; min-width: 760px; border-collapse: collapse; background: var(--tk-white); border: 1px solid var(--tk-line); }
.compare-table th,
.compare-table td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--tk-line); font-size: 0.95rem; }
.compare-table thead th { background: var(--tk-navy-deep); color: var(--tk-white); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.compare-table tbody th { width: 30%; font-weight: 600; color: var(--tk-ink); }
.compare-table tbody td { color: var(--tk-muted); }
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table__service a { font-weight: 700; }
.compare-table__price { white-space: nowrap; color: var(--tk-ink); font-weight: 600; }
.compare-note { margin-top: 24px; font-size: 0.92rem; color: var(--tk-muted); max-width: 74ch; }

.cmp-wrap { border: 1px solid var(--tk-line); border-radius: var(--radius-card); background: var(--tk-white); }
.section--tint .cmp-wrap { border-color: transparent; box-shadow: var(--shadow-card); }
.cmp-table { width: 100%; border-collapse: collapse; min-width: 900px; font-size: 0.93rem; }
.cmp-table th,
.cmp-table td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--tk-line); }
.cmp-table thead th { font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tk-muted); font-weight: 700; background: var(--tk-soft-blue); white-space: nowrap; }
.cmp-table tbody th,
.cmp-table tbody th a { font-weight: 700; color: var(--tk-ink); }
.cmp-table td { color: var(--tk-muted); }
.cmp-table tbody tr:last-child th,
.cmp-table tbody tr:last-child td { border-bottom: 0; }
.cmp-price { color: var(--tk-ink); font-weight: 700; white-space: nowrap; }
.cmp-note { font-size: 0.88rem; color: var(--tk-muted); margin-top: 16px; }
.plan-deck { margin-top: 16px; }
a.chip { text-decoration: none; }
a.chip:hover { border-color: var(--tk-blue); color: var(--tk-blue); }

.resp-table { width: 100%; border-collapse: collapse; font-size: 0.96rem; min-width: 660px; }
.resp-table th { text-align: left; font-size: 0.76rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tk-muted); font-weight: 700; padding: 0 18px 12px 0; border-bottom: 1px solid var(--tk-line); }
.resp-table td { padding: 16px 18px 16px 0; vertical-align: top; border-bottom: 1px solid var(--tk-line); color: var(--tk-muted); }
.resp-table td:first-child { color: var(--tk-ink); font-weight: 600; width: 25%; }
.resp-table td:last-child { padding-right: 0; color: var(--tk-ink); font-weight: 600; width: 28%; }
.section--tint .resp-table th,
.section--tint .resp-table td { border-bottom-color: #d9e2e9; }

.factor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 34px 52px; }
.factor h3 { font-size: 1.1rem; margin-bottom: 8px; }
.factor p { color: var(--tk-muted); font-size: 0.96rem; }
.diag-card h3 { font-size: 1.08rem; margin-bottom: 0; }
.diag-card__label,
.build-card__label { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--tk-blue); }
.diag-card__label { margin-bottom: 6px; }
.diag-card__cause { border-top: 1px solid var(--tk-line); margin-top: 16px; padding-top: 14px; }
.diag-card__cause .diag-card__label { color: var(--tk-muted); }
.section--tint .diag-card__cause { border-top-color: #d9e2e9; }

.build-card h3 { font-size: 1.15rem; }
.build-card__label { margin: 16px 0 8px; }
.build-flow { list-style: none; margin: 0; display: grid; gap: 9px; counter-reset: buildstep; }
.build-flow li { position: relative; padding-left: 32px; font-size: 0.93rem; color: var(--tk-muted); counter-increment: buildstep; }
.build-flow li::before { content: counter(buildstep); position: absolute; left: 0; top: 0; width: 21px; height: 21px; border-radius: 50%; background: var(--tk-navy-deep); color: var(--tk-white); font-size: 0.7rem; font-weight: 700; line-height: 21px; text-align: center; }
.build-card__replaces { border-top: 1px solid var(--tk-line); margin-top: 18px; padding-top: 14px; font-size: 0.9rem; color: var(--tk-muted); }
.section--tint .build-card__replaces { border-top-color: #d9e2e9; }
.surface-row { display: grid; grid-template-columns: 268px 1fr; gap: 28px; padding: 22px 0; align-items: start; }
.surface-row + .surface-row { border-top: 1px solid var(--tk-line); }
.surface-row:first-child { padding-top: 0; }
.surface-row:last-child { padding-bottom: 0; }
.surface-row h3 { font-size: 1.05rem; margin: 0; }
.surface-row p { color: var(--tk-muted); font-size: 0.92rem; margin-top: 6px; }
.surface-row .chip { font-size: 0.85rem; padding: 6px 13px; }

.type-card h3 { font-size: 1.18rem; margin-bottom: 8px; }
.type-card > p { color: var(--tk-muted); }
.type-card .plan-list { margin-bottom: 0; }
.step-card .card__step { line-height: 1; margin-bottom: 8px; }
.step-card h3 { font-size: 1.12rem; margin-bottom: 10px; }
.step-card p { color: var(--tk-muted); font-size: 0.96rem; }
.subhead { margin: 64px 0 24px; max-width: 64ch; }
.subhead h3 { font-size: 1.4rem; }
.subhead p { color: var(--tk-muted); margin-top: 8px; font-size: 0.98rem; }
.build-list { border-top: 1px solid var(--tk-line); }
.build-row { display: grid; grid-template-columns: 0.85fr 2.15fr; gap: 36px; padding: 24px 0; border-bottom: 1px solid var(--tk-line); align-items: start; }
.section--tint .build-list,
.section--tint .build-row { border-color: #d9e2e9; }
.build-row h3 { font-size: 1.08rem; margin-bottom: 6px; }
.build-row p { color: var(--tk-muted); font-size: 0.96rem; }
.build-row .card__meta { margin-bottom: 0; }
.build-row .card__tags { margin-top: 10px; }
.logo-strip__names { text-align: center; margin-top: 26px; font-size: 0.92rem; color: var(--tk-muted); }
.logo-strip__row + .logo-strip__label { margin-top: 40px; }

.cs-scroll { margin-top: 44px; }
.cs-matrix { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 0.94rem; }
.cs-matrix th,
.cs-matrix td { padding: 15px 18px 15px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--tk-line); }
.cs-matrix thead th { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tk-muted); font-weight: 700; }
.cs-matrix tbody th { font-weight: 700; white-space: nowrap; }
.cs-matrix tbody tr:last-child th,
.cs-matrix tbody tr:last-child td { border-bottom: 0; }
.cs-scroll-note { font-size: 0.85rem; color: var(--tk-muted); margin-top: 12px; }

@media (max-width: 860px) {
  .feature-row,
  .split-band { grid-template-columns: 1fr; gap: 26px; }
  .feature-row--flip .feature-row__copy { order: 0; }
  .plan-list--cols,
  .fit-list--cols,
  .factor-grid,
  .surface-row { grid-template-columns: 1fr; }
  .surface-row { gap: 14px; }
  .panel { padding: 26px 22px; }
  .build-row { grid-template-columns: 1fr; gap: 10px; }
}

/* ---- service pricing routes ------------------------------------------ */

.pricing-hero {
  overflow: hidden;
  padding: clamp(82px, 9vw, 126px) 0 76px;
  background:
    radial-gradient(circle at 50% 115%, rgba(54, 122, 246, 0.22), transparent 38%),
    var(--tk-navy-deep);
  color: var(--tk-white);
  text-align: center;
}
.promo-strip + .site-header + main .pricing-hero { padding-top: clamp(68px, 7vw, 104px); }
.pricing-hero .container { max-width: 1260px; }
/* The h1 selector here used to read `.pricing-hero .pricing-hero h1`, which
   matched nothing. Two things followed: the heading fell back to the global
   `h1,h2,h3 { color: var(--tk-ink) }` - a direct rule beats the hero's
   inherited white - leaving it at 1.1:1 on the navy; and the shared eyebrow
   selector absorbed the display type, rendering the kicker larger than the
   title. Split so each element gets its own treatment. */
.pricing-hero .eyebrow {
  color: var(--tk-white);
}
.pricing-hero h1 {
  max-width: 900px;
  margin: 0 auto;
  color: var(--tk-white);
  font-size: clamp(2.8rem, 5.5vw, 4.7rem);
  letter-spacing: -0.055em;
}
.pricing-hero .lede { max-width: 760px; margin: 18px auto 0; color: rgba(255,255,255,0.78); }
.pricing-hero__benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 30px;
  margin-top: 28px;
  color: rgba(255,255,255,0.9);
  font-size: 0.95rem;
}
.pricing-hero__benefits span { white-space: nowrap; }
.pricing-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 46px auto 0;
}
.pricing-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 17px;
  border: 1px solid rgba(255,255,255,0.13);
  border-radius: 999px;
  background: rgba(74, 43, 166, 0.86);
  color: var(--tk-white);
  font-size: 0.89rem;
  font-weight: 700;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 160ms ease, background 160ms ease, color 160ms ease;
}
.pricing-nav__link:hover { transform: translateY(-1px); background: var(--tk-blue); color: var(--tk-white); }
.pricing-nav__link.is-active { background: var(--tk-white); border-color: var(--tk-white); color: var(--tk-ink); }
.pricing-nav__link .icon { width: 18px; height: 18px; color: currentColor; }
.pricing-nav-mobile { display: none; }
.pricing-nav-mobile__field { display: block; }
.pricing-nav-mobile__label {
  display: block;
  margin-bottom: 8px;
  color: rgba(255,255,255,0.78);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pricing-nav-mobile__select {
  width: 100%;
  min-height: 54px;
  padding: 0 52px 0 18px;
  border: 2px solid rgba(255,255,255,0.3);
  border-radius: 14px;
  appearance: none;
  background:
    linear-gradient(45deg, transparent 50%, var(--tk-ink) 50%) calc(100% - 24px) 23px / 7px 7px no-repeat,
    linear-gradient(135deg, var(--tk-ink) 50%, transparent 50%) calc(100% - 17px) 23px / 7px 7px no-repeat,
    var(--tk-white);
  color: var(--tk-ink);
  font: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
}
.pricing-nav-mobile__select:focus-visible {
  outline: 3px solid var(--tk-orange);
  outline-offset: 3px;
}
.pricing-plan { min-width: 0; }
a.pricing-plan { color: inherit; text-decoration: none; }
a.pricing-plan:hover { transform: translateY(-3px); border-color: rgba(54,122,246,0.35); }
.pricing-service-link { margin-top: 30px; text-align: center; font-weight: 700; }
.pricing-service-link a:not(.btn) { color: var(--tk-blue); }
.pricing-domain-search { margin-top: 42px; text-align: center; }
.pricing-domain-search h3 { margin-bottom: 16px; }
.pricing-domain-search .domain-search > .icon { width: 22px; height: 22px; color: var(--tk-muted); }

@media (max-width: 720px) {
  .pricing-hero { padding: 66px 0 52px; text-align: left; }
  .pricing-hero h1,
  .pricing-hero .lede { margin-left: 0; }
  .pricing-hero__benefits { justify-content: flex-start; display: grid; gap: 10px; }
  .pricing-nav {
    justify-content: flex-start;
    flex-wrap: nowrap;
    width: calc(100% + 40px);
    margin-left: -20px;
    padding: 0 20px 8px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
  }
  .pricing-nav__link { scroll-snap-align: start; }
  .pricing-nav-mobile {
    display: block;
    width: 100%;
    margin: 38px 0 0;
    text-align: left;
  }
  .pricing-nav--enhanced { display: none; }
  [dir="rtl"] .pricing-nav-mobile { text-align: right; }
  [dir="rtl"] .pricing-nav-mobile__select {
    padding-right: 18px;
    padding-left: 52px;
    background-position: 17px 23px, 24px 23px, 0 0;
  }
}

/* ---- localized writing systems ----------------------------------------- */

html[lang^="ar"] body { font-family: "Noto Sans Arabic", "DM Sans", sans-serif; }
html[lang^="he"] body { font-family: "Noto Sans Hebrew", "DM Sans", sans-serif; }

/* ---- homepage hero (variant E) + hub sections ---------------------------- */
.hero__copy--platform { max-width: 720px; }
.hero--landing .hero__kicker {
  font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tk-orange); line-height: 1.45; margin: 0 0 16px; max-width: 46ch;
}
.hero__display {
  font-size: clamp(2.65rem, 5vw, 4.8rem); font-weight: 700; line-height: 1.08;
  letter-spacing: -0.02em; color: var(--tk-white); margin: 0 0 28px;
}
/* Homepage audience line: who the site is for, directly under the display line. */
.hero__audience {
  margin: -12px 0 24px; max-width: 60ch;
  color: rgba(255,255,255,0.9); font-size: 1.08rem; line-height: 1.5;
}
/* ---- service hero: keyword kicker as the h1, readable line beneath -------
   Mirrors the homepage pattern in index.html: the small kicker carries the
   keyword phrase and is the h1, while the large readable line below it is a
   paragraph. .hero__display is white for the dark landing hero, so a light
   service hero needs its own ink-coloured headline instead of reusing it. */
.hero:not(.hero--landing) .hero__kicker {
  font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tk-orange); line-height: 1.45; margin: 0 0 14px; max-width: 46ch;
}
.hero__headline {
  font-family: var(--font-body); font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 700;
  line-height: 1.08; letter-spacing: -0.02em; color: var(--tk-ink);
  /* A word longer than the column must not run under the form card beside it:
     "wachstumsorientierte" on /de/website-maintenance/ overhung it by 74px at
     1280-1440px, because .hero__inner's first column is minmax(0, 1.12fr). */
  overflow-wrap: break-word;
}
/* German compounds break at a syllable with a hyphen rather than mid-word, where
   the browser has a German hyphenation dictionary (Chrome on this machine does
   not, so long compounds also carry a ­ in the copy itself). Only German:
   elsewhere the headlines fit and auto-hyphenation would add breaks the design
   never had. */
html[lang^="de"] .hero__headline,
html[lang^="de"] .hero h1,
html[lang^="de"] .hero__kicker { hyphens: auto; }
/* Regional service heroes are .hero--dark, matching .hero--dark h1/h2 above. */
.hero--dark .hero__headline { color: var(--tk-white); }
/* Tool heroes centre their copy inside .section-head--center. Both the kicker and
   the headline are width-capped, and a capped block in a centred container stays
   left unless it is told to centre itself — .lede on line 88 needs the same. */
.section-head--center .hero__kicker,
.section-head--center .hero__headline { margin-left: auto; margin-right: auto; }
/* The pricing hero and the regional domains hero are NOT .hero, so the kicker
   rule above cannot reach them and the heading would render at browser default.
   Repeating the treatment here, rather than widening that selector to bare
   .hero__kicker, is deliberate: the bug recorded at the .pricing-hero h1 comment
   above was one shared selector absorbing another hero's display type. Each hero
   keeps its own scale. */
.pricing-hero .hero__kicker,
.domain-hero .hero__kicker {
  font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tk-orange); line-height: 1.45; margin: 0 0 14px; max-width: 46ch;
}
/* Centred heroes need the capped block centred too: text-align on the parent
   moves the glyphs inside the block, not the block itself, so a 46ch kicker sits
   hard left without this. Each selector has to reach (0,3,0) to match
   `.hero:not(.hero--landing) .hero__kicker` above — :not() carries the
   specificity of its argument, so the obvious two-class selector silently loses
   to it and the margin reverts. */
.hero.domain-hero .hero__kicker,
.hero .section-head--center .hero__kicker,
.hero .section-head--center .hero__headline,
.pricing-hero .hero__kicker,
.domain-hero .hero__kicker { margin-left: auto; margin-right: auto; }
/* Both sit on a dark ground. .domain-hero covers the regional domains page, which
   carries the class alone; the TLD pages add .hero--dark and are covered above. */
.pricing-hero .hero__headline,
.domain-hero .hero__headline { color: var(--tk-white); }
.pricing-hero .hero__headline {
  max-width: 900px; margin-left: auto; margin-right: auto;
  font-size: clamp(2.8rem, 5.5vw, 4.7rem); letter-spacing: -0.055em;
}
.hero__search { margin: 0 0 22px; width: min(560px, 100%); }
.hero__chips { list-style: none; margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.hero__chips a {
  display: block; padding: 7px 15px; border-radius: 999px; text-decoration: none;
  font-size: .9rem; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.26);
}
.hero__chips a:hover { background: rgba(255,255,255,.2); }
.hero__trust {
  list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap;
  gap: 10px 22px; color: rgba(255,255,255,.78); font-size: .88rem;
}
.hero__trust li { position: relative; }
.hero__trust li + li::before {
  content: ""; position: absolute; left: -12px; top: 50%; width: 3px; height: 3px;
  border-radius: 50%; background: rgba(255,255,255,.45);
}
.domain-hub { padding-bottom: 64px; }
.domain-hub .grid { text-align: left; }
.tld-row {
  list-style: none; margin: 26px auto 34px; padding: 0; display: flex;
  flex-wrap: wrap; justify-content: center; gap: 8px;
}
.tld-row a {
  display: block; text-decoration: none; font-weight: 700; font-size: .95rem;
  color: var(--tk-ink); padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(12,18,32,.12); background: #fff;
}
.tld-row a:hover { border-color: var(--tk-orange); color: var(--tk-orange); }
.section-foot { text-align: center; margin-top: 30px; font-weight: 600; }

[dir="rtl"] body { direction: ltr; }
[dir="rtl"] .site-header__inner,
[dir="rtl"] .site-header__nav,
[dir="rtl"] .site-header__end,
[dir="rtl"] .hero__actions,
[dir="rtl"] .megamenu__item,
[dir="rtl"] .hero__copy,
[dir="rtl"] .convert-card,
[dir="rtl"] .section-head,
[dir="rtl"] .card,
[dir="rtl"] .site-footer,
[dir="rtl"] .megamenu__panel,
[dir="rtl"] .locale-selector__panel,
[dir="rtl"] .promo-strip,
[dir="rtl"] .domain-hero,
[dir="rtl"] .domain-strip,
[dir="rtl"] .domain-search,
[dir="rtl"] .domain-promo,
[dir="rtl"] .table-scroll,
[dir="rtl"] .faq,
[dir="rtl"] .tool-panel,
[dir="rtl"] .auth-block,
[dir="rtl"] .cta-band,
[dir="rtl"] .hero__kicker,
[dir="rtl"] .hero__display,
[dir="rtl"] .hero__audience,
[dir="rtl"] .hero__headline,
[dir="rtl"] .hero__chips,
[dir="rtl"] .hero__trust,
[dir="rtl"] .tld-row,
[dir="rtl"] .quote-card,
[dir="rtl"] .btn-note,
[dir="rtl"] .feature-row,
[dir="rtl"] .panel,
[dir="rtl"] .centered-action,
[dir="rtl"] .split-band,
[dir="rtl"] .logo-strip,
[dir="rtl"] .stats,
[dir="rtl"] .cap-card,
[dir="rtl"] .proof-links,
[dir="rtl"] .domain-hub { direction: rtl; }
[dir="rtl"] .compare-table th,
[dir="rtl"] .compare-table td { text-align: right; }
[dir="rtl"] .domain-promo__arrow { right: auto; left: 22px; }
[dir="rtl"] .pricing-hero,
[dir="rtl"] .pricing-nav { direction: rtl; }
[dir="rtl"] .hero__copy,
[dir="rtl"] .convert-card,
[dir="rtl"] .section-head,
[dir="rtl"] .card,
[dir="rtl"] .site-footer,
[dir="rtl"] .megamenu__panel,
[dir="rtl"] .locale-selector__panel,
[dir="rtl"] .hero__kicker,
[dir="rtl"] .hero__display,
[dir="rtl"] .hero__audience,
[dir="rtl"] .hero__headline,
[dir="rtl"] .cap-card,
[dir="rtl"] .domain-hub .grid { text-align: right; }
/* The domain and tool heroes are centred by design, and the blanket right-align
   above pulls only the kicker and headline out of that centre — leaving the badge
   mid-page and the headline hard right on ar/he. Re-centre the two inside those
   containers; (0,3,0) to beat the (0,2,0) rules above. */
[dir="rtl"] .domain-hero__inner .hero__kicker,
[dir="rtl"] .domain-hero__inner .hero__headline,
[dir="rtl"] .section-head--center .hero__kicker,
[dir="rtl"] .section-head--center .hero__headline,
[dir="rtl"] .domain-hero__inner .eyebrow { text-align: center; }
[dir="rtl"] .hero__trust li + li::before { left: auto; right: -12px; }
[dir="rtl"] .hero__checklist li,
[dir="rtl"] .plan-list li,
[dir="rtl"] .fit-list li { padding-left: 0; padding-right: 28px; }
[dir="rtl"] .hero__checklist li::before,
[dir="rtl"] .plan-list li::before,
[dir="rtl"] .fit-list li::before { left: auto; right: 0; }
[dir="rtl"] .locale-selector__panel { right: auto; left: 0; }

/* /promo — offers page.
   Every offer is an exchange: the eyebrow states the trigger, the headline
   states the gift, and the white sheet states the arithmetic — the "written
   quote" this brand promises everywhere, made visible. All offers get the
   same featured treatment; the layout implies no ranking. */
.po { padding: 72px 0 96px; --po-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
.po > .container { display: grid; gap: 28px; }
.hero.po-hero { padding: 88px 0 76px; }
.hero.po-hero .lede { max-width: 880px; }

.po-kicker {
  font-size: 11px; font-weight: 700; line-height: 1.5;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--tk-orange); margin: 0 0 14px;
}

/* Offer panel — navy, pitch left, exchange sheet right */
.po-offer {
  background: var(--tk-navy-deep); color: #fff;
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-panel);
  display: grid;
  grid-template-areas: "primary sheet" "actions sheet";
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  grid-template-rows: auto 1fr;
  column-gap: 56px; row-gap: 0;
  padding: 52px 56px;
}
.po-offer__primary { grid-area: primary; }
.po-offer__actions { grid-area: actions; }
.po-offer h2 { font-size: clamp(28px, 2.8vw, 38px); line-height: 1.14; letter-spacing: -0.02em; color: #fff; margin: 0 0 14px; }
.po-offer__lede { color: #c9d5e1; font-size: 16px; line-height: 1.65; margin: 0 0 12px; }
.po-offer__note { color: #8ba1b6; font-size: 13.5px; line-height: 1.6; margin: 0 0 24px; }
.po-offer__cta { margin: 0 0 24px; }
.po-offer__actions .po-offer__note { margin-top: 12px; }
.po-offer .btn--accent { color: var(--tk-navy-deep); }
.po-offer__meta {
  align-items: center; display: flex; flex-wrap: wrap;
  gap: 8px 10px; margin: 0 0 18px;
}
.po-status {
  background: var(--tk-soft-blue); border-radius: 999px;
  color: var(--tk-navy-deep); font-size: 11px; font-weight: 700;
  letter-spacing: 0.08em; padding: 6px 10px; text-transform: uppercase;
}

/* The exchange sheet — the written quote, itemised */
.po-sheet {
  grid-area: sheet;
  background: var(--tk-white); color: var(--tk-ink);
  border-radius: var(--radius-card);
  padding: 24px 28px 0;
  align-self: center;
  box-shadow: 0 12px 40px rgba(4, 18, 33, 0.35);
}
.po-sheet__title {
  font-family: var(--po-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--tk-muted); margin: 0; padding-bottom: 13px;
  border-bottom: 2px solid var(--tk-ink);
}
.po-row {
  display: grid; grid-template-columns: 82px minmax(0, 1fr) auto;
  grid-template-areas: "label item amt";
  gap: 6px 16px; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--tk-line);
}
.po-row__label { grid-area: label; font-family: var(--po-mono); font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tk-muted); }
.po-row__item { grid-area: item; font-size: 14.5px; line-height: 1.5; }
.po-row__amt { grid-area: amt; font-family: var(--po-mono); font-size: 11px; color: var(--tk-muted); white-space: nowrap; }
.po-row--free {
  border-bottom: 0;
  background: var(--tk-soft-blue);
  margin: 8px -28px 0;
  padding: 15px 28px 17px;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
}
.po-row--free .po-row__label { color: var(--tk-navy); }
.po-row--free .po-row__item { font-weight: 600; }
.po-row__amt--free {
  background: var(--tk-orange); border-radius: 999px;
  color: var(--tk-navy-deep); font-size: 14px; font-weight: 700;
  letter-spacing: 0.08em; line-height: 1; padding: 6px 9px;
  text-transform: uppercase;
}

/* Terms — present, but folded */
.po-terms { border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: 14px; }
.po-terms summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #b9cfe4; }
.po-terms summary::-webkit-details-marker { display: none; }
.po-terms summary::after { content: "▾"; font-size: 9px; transition: transform 0.18s ease; }
.po-terms[open] summary::after { transform: rotate(180deg); }
.po-terms ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.po-terms li { position: relative; padding-inline-start: 14px; font-size: 13px; line-height: 1.55; color: #8ba1b6; }
.po-terms li::before { content: "·"; position: absolute; inset-inline-start: 2px; }

.po summary:focus-visible, .po a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 4px; }

/* Offer artifact — what sits opposite the pitch.
   Deliberately NOT a receipt card: where a real published price exists the
   offer states the price it replaces, and where none exists it states what
   actually happens instead. No borrowed document furniture. */
.po-swap { align-self: center; }
.po-swap__label { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: #8ba1b6; margin: 0 0 10px; }
.po-swap__line { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; margin: 0 0 10px; }
.po-swap__was { font-size: 30px; font-weight: 500; color: #7e94aa; text-decoration: line-through; text-decoration-thickness: 2px; }
.po-swap__now { font-size: clamp(52px, 6vw, 76px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--tk-orange); }
.po-swap__unit { font-size: 0.34em; letter-spacing: 0; margin-inline-start: 4px; }
.po-swap__for { font-size: 17px; font-weight: 600; color: #fff; margin: 0 0 8px; }
.po-swap__foot { font-size: 14px; line-height: 1.6; color: #8ba1b6; margin: 0; max-width: 34ch; }

.po-moves { align-self: center; }
.po-moves__label { font-size: 13px; font-weight: 600; color: #8ba1b6; margin: 0 0 16px; }
.po-moves__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.po-moves__list li { position: relative; padding-inline-start: 30px; font-size: 16px; line-height: 1.5; color: #fff; }
.po-moves__list li::before {
  content: "";
  position: absolute; inset-inline-start: 0; top: 0.42em;
  width: 9px; height: 5px;
  border-inline-start: 2px solid var(--tk-orange);
  border-bottom: 2px solid var(--tk-orange);
  transform: rotate(-45deg);
}
.po-moves__foot { font-size: 14px; line-height: 1.6; color: #8ba1b6; margin: 16px 0 0; max-width: 34ch; }

@media (max-width: 980px) {
  .po-swap, .po-moves { align-self: stretch; }
}

/* Offer FAQ — same folded pattern, on light ground */
.po-faq .po-terms { border-top: 1px solid var(--tk-line); padding: 16px 0; }
.po-faq .po-terms:last-child { border-bottom: 1px solid var(--tk-line); }
.po-faq .po-terms summary { color: var(--tk-ink); font-size: 16px; }
.po-faq .po-terms li { color: var(--tk-muted); font-size: 14.5px; max-width: 820px; }
.po-faq .po-terms li::before { content: none; }
.po-faq .po-terms li { padding-inline-start: 0; }
.po-faq summary:focus-visible { outline: 2px solid var(--tk-blue); outline-offset: 3px; border-radius: 4px; }

@media (prefers-reduced-motion: no-preference) {
  .po-offer { animation: poRise 0.55s cubic-bezier(0.22, 0.7, 0.3, 1) backwards; }
  .po-offer:nth-child(2) { animation-delay: 0.1s; }
  .po-offer:nth-child(3) { animation-delay: 0.18s; }
  @keyframes poRise { from { opacity: 0; transform: translateY(14px); } }
}

@media (max-width: 980px) {
  .po-offer {
    grid-template-areas: "primary" "sheet" "actions";
    grid-template-columns: 1fr; grid-template-rows: auto;
    gap: 26px; padding: 40px 32px;
  }
  .po-offer__actions .po-offer__note { margin-top: 0; }
  .po-sheet { align-self: stretch; }
}
@media (max-width: 760px) {
  .po { padding: 44px 0 64px; }
  .hero.po-hero { padding: 64px 0 56px; }
  .po > .container { gap: 24px; }
  .po-offer { padding: 30px 18px; border-radius: var(--radius-card); }
  .po-sheet { margin-inline: -8px; padding: 18px 18px 0; }
  .po-row { grid-template-columns: 1fr auto; grid-template-areas: "label amt" "item item"; }
  .po-row--free { margin: 8px -18px 0; padding: 13px 18px 15px; }
  .po-row__label { font-size: 11.5px; }
  .po-row__amt { font-size: 12px; }
  .po-offer__cta .btn { justify-content: center; width: 100%; }
  .po-swap__line { flex-wrap: nowrap; gap: 12px; }
  .po-swap__was { font-size: 26px; white-space: nowrap; }
  .po-swap__now { white-space: nowrap; }
}
@media (max-width: 360px) {
  .po-swap__line { align-items: flex-start; flex-direction: column; gap: 6px; }
}

/* TLD pages */
/* Sits below the h1 rather than inside it, so the heading can carry the
   keyword alone. Sized in rem now that it no longer inherits the h1 scale. */
.tld-hero__price { display: block; margin: 10px 0 0; font-size: 1.15rem; font-weight: 700; color: var(--tk-orange); white-space: nowrap; }
.tld-hero__price small { font-size: 0.72em; font-weight: 500; margin-left: 2px; }
.domain-hero .eyebrow a { color: inherit; text-decoration: none; }
.domain-hero .eyebrow a:hover { text-decoration: underline; }
.domain-hero .domain-price-note { color: rgba(255,255,255,0.78); }
/* TLD hero: let the lede span the hero like the price notes below it, instead of the 58ch reading measure. */
.domain-hero .hero__copy > .lede { max-width: none; margin-left: auto; margin-right: auto; }
.tld-filter { margin: 0 0 20px; }
.tld-filter .chip { cursor: pointer; font: inherit; font-size: 0.9rem; font-weight: 600; }
.tld-filter .chip.is-active { background: var(--tk-ink); color: var(--tk-white); border-color: var(--tk-ink); }
.tld-table td:first-child { width: auto; }
.tld-table__name { font-size: 1.1rem; font-weight: 700; text-decoration: none; }
.tld-table__cat { display: block; font-size: 0.78rem; font-weight: 500; color: var(--tk-muted); }
.tld-table td:last-child { width: 1%; white-space: nowrap; }
.tld-table__btn { padding: 6px 14px; font-size: 0.85rem; }
.tld-table--facts { min-width: 0; }
.tld-table--facts td:first-child { width: 40%; }
.tld-table--facts td:last-child { width: auto; white-space: normal; font-weight: 500; }

/* TLD leaf: extension family table and registration steps */
.tld-table--family td:first-child { width: 16%; }
.tld-table--family td:last-child { width: 18%; white-space: nowrap; }
.tld-steps { list-style: none; counter-reset: tld-step; margin: 0; padding: 0; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tld-steps li { counter-increment: tld-step; background: var(--tk-white); border: 1px solid var(--tk-line); border-radius: 14px; padding: 24px; }
.tld-steps li::before { content: counter(tld-step); display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 999px; background: var(--tk-ink); color: var(--tk-white); font-weight: 700; margin-bottom: 14px; }
.tld-steps h3 { margin: 0 0 8px; font-size: 1.08rem; }
.tld-steps p { margin: 0; color: var(--tk-muted); }

/* ── Answer panel ───────────────────────────────────────────────
   The quotable definition block that opens a service page. One per
   page. Deliberately not a .card: a single wide panel with an accent
   rule reads as an answer, not as one item in a grid. */
.answer-panel {
  max-width: 900px;
  margin: 0 auto;
  padding: 44px 48px;
  background: var(--tk-white);
  border: 1px solid var(--tk-line);
  border-left: 4px solid var(--tk-orange);
  border-radius: var(--radius-panel);
}
.answer-panel h2 { margin-bottom: 18px; }
.answer-panel .lede { max-width: none; margin-bottom: 18px; }
.answer-panel > p { max-width: none; color: var(--tk-muted); }
.answer-panel__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px 28px;
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--tk-line);
}
.answer-panel__foot a { font-weight: 700; }
.answer-panel__meta { margin: 0; font-size: 0.88rem; color: var(--tk-muted); }
@media (max-width: 720px) {
  .answer-panel { padding: 30px 24px; border-radius: var(--radius-card); }
}

/* ── Fit split ──────────────────────────────────────────────────
   Two sides of one judgement, not two items in a grid. A single
   divided block, with the "not for you" side set back on tint, so
   the contrast is carried by the structure instead of two matching
   boxes that flatten it. */
.fit-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  background: var(--tk-white);
  border: 1px solid var(--tk-line);
  border-radius: var(--radius-panel);
  overflow: hidden;
}
.fit-split__side { padding: 38px 40px; }
.fit-split__side + .fit-split__side {
  border-left: 1px solid var(--tk-line);
  background: var(--tk-soft-blue);
}
.fit-split h3 { margin-bottom: 20px; }
@media (max-width: 860px) {
  .fit-split { grid-template-columns: 1fr; }
  .fit-split__side { padding: 28px 24px; }
  .fit-split__side + .fit-split__side {
    border-left: 0;
    border-top: 1px solid var(--tk-line);
  }
}
[dir="rtl"] .fit-split__side + .fit-split__side {
  border-left: 0;
  border-right: 1px solid var(--tk-line);
}

/* ── Project card ───────────────────────────────────────────────
   A portfolio card should lead with the work, not with a paragraph
   describing it. Shares .card's frame; the screenshot takes the slot
   the icon occupies elsewhere, so the grid reads as work rather than
   as another set of feature tiles. */
.project-card { display: block; padding: 0; overflow: hidden; color: inherit; }
.project-card:hover { text-decoration: none; }
.project-card__shot {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--tk-soft-blue);
  border-bottom: 1px solid var(--tk-line);
}
.project-card__shot img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}
/* No screenshot on file yet — a deliberate plate, not an empty slot. */
.project-card__shot--none {
  display: flex; align-items: center; justify-content: center;
  padding: 0 24px; text-align: center;
  background: var(--tk-navy-deep);
  color: var(--tk-white); font-weight: 700; font-size: 1.05rem;
}
.project-card__body { padding: 22px 24px 24px; }
.project-card__body h3 { margin-bottom: 6px; transition: color 0.18s ease; }
.project-card:hover h3 { color: var(--tk-blue); }
.project-card:focus-visible { outline: 3px solid var(--tk-blue); outline-offset: 2px; }
.project-card__body .card__meta { overflow-wrap: anywhere; letter-spacing: 0.04em; }

/* ── Quote attribution ──────────────────────────────────────────
   Testimonials were bare text with no visual anchor. The reviewer's
   own Google profile photo carries far more weight than a monogram
   and is verifiable against the public listing the quote came from. */
.quote-card__by { display: flex; align-items: center; gap: 12px; }
.quote-card__avatar {
  flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 50%;
  object-fit: cover;
  background: var(--tk-soft-blue);
}
.quote-card__who { display: flex; flex-direction: column; line-height: 1.35; }
.quote-card__name { font-weight: 700; color: var(--tk-ink); }
.quote-card__place { color: var(--tk-muted); }

/* Client logo strip: marks vary wildly in aspect (one is 4:1, one is
   square), so a fixed height alone lets the widest overflow a phone.
   Bound the width too, and step the whole row down on small screens. */
.logo-strip__row img { max-width: 150px; object-fit: contain; }
@media (max-width: 720px) {
  .logo-strip__row { gap: 24px 28px; }
  .logo-strip__row img { height: 28px; max-width: 38vw; }
}

/* ── Web design page: browser frame + work reel ──────────────────
   Owner lifted the Hostinger-fidelity lock for /website-design only
   (2026-09-04): it is the one page where the page itself is the product
   demo. A website in a browser is the characteristic object in this
   subject's world, so it is the design device here rather than another
   rounded card. The client's real domain sits in the address bar, which
   makes the chrome carry information instead of decorating. */
.browser-frame {
  background: var(--tk-white);
  border: 1px solid var(--tk-line);
  border-radius: 10px;
  overflow: hidden;
}
.browser-frame__bar {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 11px;
  background: #eef1f4;
  border-bottom: 1px solid var(--tk-line);
}
.browser-frame__dots { display: flex; gap: 5px; flex: 0 0 auto; }
.browser-frame__dots i { width: 8px; height: 8px; border-radius: 50%; background: #ccd4db; }
.browser-frame__url {
  flex: 1 1 auto; min-width: 0;
  background: var(--tk-white);
  border-radius: 999px;
  padding: 3px 11px;
  font-size: 0.74rem; color: var(--tk-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.browser-frame__shot { display: block; aspect-ratio: 16 / 10; background: var(--tk-soft-blue); }
/* Homepage service banner (the page's content image): one 1200x630 original, sized by its attributes. */
.home-banner { margin: 0 0 40px; }
.home-banner img { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 18px 40px rgba(9, 40, 68, 0.18); }
.browser-frame__shot img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
}

/* The reel continues the hero's dark band rather than starting a new one,
   so the work reads as bleeding out of the headline instead of sitting in
   a separate strip. One orchestrated motion moment on the page. */
.work-reel { background: var(--tk-navy-deep); padding: 0 0 72px; }
.work-reel__viewport { overflow: hidden; }
/* Three copies, shifted by exactly one. A percentage shift is tied to the
   track's own width, so with two copies the reel ran out of content and
   showed blank once the viewport passed ~3520px — a maximised window on a
   4K or ultrawide display. Shifting by one copy in absolute px makes the
   loop independent of both viewport width and copy count; three copies
   cover any viewport up to 7706px. --reel-shift = 12 * (item + gap), so
   update it whenever a project joins or leaves webDesignProjects. */
.work-reel__track {
  --reel-shift: 3864px;
  display: flex; gap: 22px; width: max-content;
  animation: work-reel-scroll 38s linear infinite;
}
.work-reel__item { flex: 0 0 300px; }
@keyframes work-reel-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(var(--reel-shift) * -1)); }
}
.work-reel:hover .work-reel__track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .work-reel__track { animation: none; }
  .work-reel__viewport { overflow-x: auto; }
}
@media (max-width: 720px) {
  .work-reel { padding-bottom: 48px; }
  .work-reel__item { flex-basis: 240px; }
  .work-reel__track { --reel-shift: 3144px; }
}

/* Project cards: the browser frame IS the card, so there is no second
   border around it and the grid stops reading as twelve identical tiles.
   Projects flagged `feature` span two columns. With twelve projects, wide
   cards at positions 1, 4 and 12 zig-zag (W n / n W / n n n / n n n / n W):
   3 wide + 9 normal fills a three-column grid exactly, with no orphan row.
   At two columns nothing spans, so twelve tiles fill six rows. */
.project-grid .project-card {
  display: block;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  color: inherit;
}
.project-grid .project-card:hover { text-decoration: none; }
.project-grid .browser-frame { transition: transform 0.22s ease, box-shadow 0.22s ease; }
.project-grid .project-card:hover .browser-frame {
  transform: translateY(-3px);
  box-shadow: var(--shadow-card-hover);
}
.project-grid .project-card__body { padding: 18px 2px 0; }
.project-grid .project-card__body h3 { margin-bottom: 8px; transition: color 0.18s ease; }
.project-grid .project-card:hover h3 { color: var(--tk-blue); }
.project-grid .project-card:focus-visible { outline: 3px solid var(--tk-blue); outline-offset: 4px; }
.project-card--feature { grid-column: span 2; }
.project-card--feature .browser-frame__shot { aspect-ratio: 16 / 8.4; }
.project-card--feature .project-card__body h3 { font-size: 1.5rem; }
@media (max-width: 900px) {
  .project-card--feature { grid-column: auto; }
  .project-card--feature .browser-frame__shot { aspect-ratio: 16 / 10; }
}

/* ---- homepage middle sections (2026-09-24 redesign) -----------------------
   Every selector here is scoped to a class only index.html carries
   (.section-head--split, .service-index, .home-*), so no other page changes.
   Copy, headings and links are untouched. Each section takes a different
   shape so the page stops reading as one card grid repeated eight times:
   a service catalogue, open columns, intro-and-rows, a question list, a
   ruled stats band, a connected timeline and an open two-column list. */

.section-head--split {
  max-width: none; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 20px 64px; align-items: end; margin-bottom: 48px;
}
.section-head--split h2,
.section-head--split .lede { margin: 0; }
.section-head--split .eyebrow { grid-column: 1 / -1; margin: 0; }

/* Services: a catalogue, one ruled row per service. */
.service-index { border-top: 1px solid var(--tk-line); }
.service-index > .card {
  display: grid;
  grid-template-columns: 44px minmax(0, 0.9fr) minmax(0, 2fr);
  grid-template-areas: "icon title body" "icon more body";
  grid-template-rows: auto 1fr;
  column-gap: 28px; align-items: start;
  padding: 24px 0; background: none; border: 0; border-bottom: 1px solid var(--tk-line);
  border-radius: 0; box-shadow: none;
}
.service-index .card__icon { grid-area: icon; margin: 0; }
.service-index h3 { grid-area: title; margin: 10px 0 0; font-size: 1.3rem; overflow-wrap: break-word; hyphens: auto; }
.service-index .card__more { grid-area: more; margin-top: 10px; justify-self: start; }
.service-index p { grid-area: body; margin: 10px 0 0; }
.service-index .plan-list { grid-area: list; margin: 10px 0 0; }
.service-index > .card:has(.plan-list) {
  grid-template-columns: 44px minmax(0, 0.9fr) minmax(0, 1.25fr) minmax(0, 1.1fr);
  grid-template-areas: "icon title body list" "icon more body list";
}
.service-index > a.card { color: inherit; }
.service-index > a.card:hover h3,
.service-index > a.card:focus-visible h3 { color: var(--tk-blue); }

/* Domains: three open columns divided by rules instead of three cards. */
.home-columns { gap: 0; }
.home-columns > .card {
  background: none; border: 0; border-inline-start: 1px solid rgba(12, 18, 32, .14); border-radius: 0;
  box-shadow: none; padding: 4px 32px;
}
.home-columns > .card:first-child { border-inline-start: 0; padding-inline-start: 0; }

/* Business email: the intro holds the left column, the three routes run as rows. */
.home-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "head rows" "foot rows"; grid-template-rows: auto 1fr;
  gap: 0 72px; align-items: start;
}
.home-split > .section-head { grid-area: head; margin-bottom: 20px; }
.home-split > .section-foot { grid-area: foot; text-align: start; margin-top: 0; }
.home-rows { grid-area: rows; border-top: 1px solid var(--tk-line); }
.home-rows > .card {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px;
  padding: 24px 0; background: none; border: 0; border-bottom: 1px solid var(--tk-line);
  border-radius: 0; box-shadow: none;
}
.home-rows > .card h3 { grid-column: 1; margin-bottom: 6px; }
.home-rows > .card p { grid-column: 1; }
.home-rows > .card .card__more { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; white-space: nowrap; }

/* Where to start: the questions set large, answered by clicking one. */
.home-questions { gap: 0 48px; }
.home-questions > .card {
  background: none; border: 0; border-top: 2px solid rgba(12, 18, 32, .14); border-radius: 0;
  box-shadow: none; padding: 26px 0 30px; transition: border-color .18s ease;
}
.home-questions > .card .card__icon { display: none; }
.home-questions > .card h3 {
  font-size: clamp(1.3rem, 1.8vw, 1.55rem); line-height: 1.25; margin-bottom: 10px;
  transition: color .18s ease;
}
.home-questions > .card:hover,
.home-questions > .card:focus-visible { border-top-color: var(--tk-orange); }
.home-questions > .card:hover h3,
.home-questions > .card:focus-visible h3 { color: var(--tk-blue); }

/* Stats: figures read left to right, divided by rules. */
.home-stats .stats__grid--4 { text-align: start; gap: 0; }
.home-stats .stats__grid--4 > div { padding: 0 32px; border-inline-start: 1px solid rgba(255, 255, 255, .16); }
.home-stats .stats__grid--4 > div:first-child { padding-inline-start: 0; border-inline-start: 0; }

/* Process: heading on the left, the six steps as one connected sequence. */
.home-process .container {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 0 72px; align-items: start;
}
.home-process .section-head { margin-bottom: 0; }
.home-timeline > .card {
  position: relative; display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 22px;
  padding: 0 0 34px; background: none; border: 0; border-radius: 0; box-shadow: none;
}
.home-timeline > .card::before {
  content: ""; position: absolute; left: 27px; top: 56px; bottom: 0; width: 2px; background: var(--tk-line);
}
.home-timeline > .card:last-child { padding-bottom: 0; }
.home-timeline > .card:last-child::before { display: none; }
.home-timeline .card__step {
  grid-row: 1 / span 2; width: 56px; height: 56px; margin: 0; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.05rem;
  background: var(--tk-white); border: 2px solid var(--tk-blue); color: var(--tk-blue);
  transition: background-color .18s ease, color .18s ease;
}
.home-timeline > .card:hover .card__step { background: var(--tk-blue); color: var(--tk-white); }
.home-timeline h3 { grid-column: 2; margin: 14px 0 6px; }
.home-timeline p { grid-column: 2; max-width: 60ch; }

/* Included with every service: an open two-column list, icon beside the heading. */
.home-included { gap: 0 64px; }
.home-included > .card {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; align-content: start;
  padding: 28px 0; background: none; border: 0; border-top: 1px solid var(--tk-line);
  border-radius: 0; box-shadow: none;
}
.home-included .card__icon { grid-row: 1 / span 3; margin: 0; }
.home-included h3,
.home-included p,
.home-included .card__more { grid-column: 2; }
.home-included h3 { margin: 8px 0; }
.home-included .card__more { margin-top: 12px; justify-self: start; }

/* ar/he storefronts keep <body> LTR and whitelist components as RTL (see the
   [dir="rtl"] list above). The intro-and-rows layout is a component too, so its
   intro sits on the reading-start side. */
[dir="rtl"] .home-split { direction: rtl; }

@media (max-width: 900px) {
  .section-head--split { grid-template-columns: 1fr; gap: 14px; margin-bottom: 36px; }
  /* :has(.plan-list) repeated so this outranks the four-column desktop rule. */
  .service-index > .card,
  .service-index > .card:has(.plan-list) {
    grid-template-columns: 44px minmax(0, 1fr);
    grid-template-areas: "icon title" "body body" "list list" "more more";
    grid-template-rows: auto; row-gap: 12px; column-gap: 16px; align-items: center;
  }
  .service-index h3,
  .service-index p,
  .service-index .plan-list,
  .service-index .card__more { margin: 0; }
  .home-columns { grid-template-columns: 1fr; }
  .home-columns > .card { border-inline-start: 0; border-top: 1px solid rgba(12, 18, 32, .14); padding: 20px 0; }
  .home-columns > .card:first-child { border-top: 0; padding-top: 4px; }
  .home-split { grid-template-columns: 1fr; grid-template-areas: "head" "rows" "foot"; }
  .home-split > .section-foot { margin-top: 24px; }
  .home-process .container { grid-template-columns: 1fr; }
  .home-process .section-head { margin-bottom: 36px; }
  .home-included { grid-template-columns: 1fr; }
  .home-stats .stats__grid--4 { row-gap: 28px; }
  .home-stats .stats__grid--4 > div { padding: 0 24px; }
  .home-stats .stats__grid--4 > div:nth-child(odd) { padding-inline-start: 0; border-inline-start: 0; }
}
@media (max-width: 640px) {
  .home-questions { grid-template-columns: 1fr; }
  .home-rows > .card { grid-template-columns: 1fr; }
  .home-rows > .card .card__more { grid-column: 1; grid-row: auto; margin-top: 10px; }
  .home-stats .stats__grid--4 > div,
  .home-stats .stats__grid--4 > div:nth-child(odd) { padding: 20px 0 0; border-inline-start: 0; border-top: 1px solid rgba(255, 255, 255, .16); }
  .home-stats .stats__grid--4 > div:first-child { padding-top: 0; border-top: 0; }
  .home-timeline > .card { grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; }
  .home-timeline > .card::before { left: 21px; top: 44px; }
  .home-timeline .card__step { width: 44px; height: 44px; font-size: .95rem; }
  .home-timeline h3 { margin-top: 9px; }
}

/* Process on wide screens: one horizontal zigzag. Odd steps sit high with their
   text above, even steps sit low with their text below, so each text block can
   take a third of the width without meeting its neighbour on the same side.
   The step card's box is dissolved (display: contents) so its number, heading
   and paragraph place straight onto the 12-column timeline grid; the SVG path
   joins the node centres at x = 1, 3, 5, 7, 9, 11 (twelfths of the width). */
.home-timeline__path { display: none; }
@media (min-width: 901px) {
  .home-process .container { display: block; }
  .home-process .section-head { margin-bottom: 40px; }
  .home-timeline {
    display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto 56px 28px 56px auto auto;
  }
  .home-timeline__path {
    display: block; grid-column: 1 / -1; grid-row: 3 / 6; width: 100%; height: 100%;
    fill: none; stroke: var(--tk-line); stroke-width: 2; overflow: visible;
  }
  .home-timeline__path polyline { vector-effect: non-scaling-stroke; }
  .home-timeline > .card { display: contents; }
  /* A display:contents card no longer anchors its absolute spine, which then
     measures from the page and draws down the hero. The SVG path replaces it. */
  .home-timeline > .card::before { display: none; }
  .home-timeline .card__step { justify-self: center; position: relative; z-index: 1; }
  .home-timeline h3 { margin: 0 0 6px; padding: 0 14px; }
  .home-timeline p { max-width: none; padding: 0 14px; }

  .home-timeline > .card:nth-child(odd of .card) h3 { grid-row: 1; }
  .home-timeline > .card:nth-child(odd of .card) p { grid-row: 2; margin-bottom: 18px; }
  .home-timeline > .card:nth-child(odd of .card) .card__step { grid-row: 3; }
  .home-timeline > .card:nth-child(even of .card) .card__step { grid-row: 5; }
  .home-timeline > .card:nth-child(even of .card) h3 { grid-row: 6; margin-top: 18px; }
  .home-timeline > .card:nth-child(even of .card) p { grid-row: 7; }

  .home-timeline > .card :is(h3, p) { text-align: center; }
  .home-timeline > .card:nth-child(1 of .card) .card__step { grid-column: 1 / span 2; }
  .home-timeline > .card:nth-child(1 of .card) :is(h3, p) { grid-column: 1 / span 3; text-align: left; padding-left: 0; }
  .home-timeline > .card:nth-child(2 of .card) .card__step { grid-column: 3 / span 2; }
  .home-timeline > .card:nth-child(2 of .card) :is(h3, p) { grid-column: 2 / span 4; }
  .home-timeline > .card:nth-child(3 of .card) .card__step { grid-column: 5 / span 2; }
  .home-timeline > .card:nth-child(3 of .card) :is(h3, p) { grid-column: 4 / span 4; }
  .home-timeline > .card:nth-child(4 of .card) .card__step { grid-column: 7 / span 2; }
  .home-timeline > .card:nth-child(4 of .card) :is(h3, p) { grid-column: 6 / span 4; }
  .home-timeline > .card:nth-child(5 of .card) .card__step { grid-column: 9 / span 2; }
  .home-timeline > .card:nth-child(5 of .card) :is(h3, p) { grid-column: 8 / span 4; }
  .home-timeline > .card:nth-child(6 of .card) .card__step { grid-column: 11 / span 2; }
  .home-timeline > .card:nth-child(6 of .card) :is(h3, p) { grid-column: 10 / span 3; text-align: right; padding-right: 0; }
}

/* Homepage domain picker (index.html only): each extension with its first-year
   price, written at build time from its /tld/ page. domain-picker.js fills in
   the name typed in the search above, so every entry becomes that exact domain
   and links to the portal search for it. */
.tld-picker {
  list-style: none; margin: 26px 0 40px; padding: 0; text-align: start;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.tld-picker__hint { margin: 22px 0 -12px; font-size: .92rem; color: var(--tk-muted); }
.tld-picker__item {
  display: flex; flex-direction: column; gap: 2px; height: 100%; padding: 12px 14px;
  border: 1px solid var(--tk-line); border-radius: 10px; background: var(--tk-white);
  text-decoration: none; transition: border-color .15s ease, background-color .15s ease;
}
.tld-picker__item:hover,
.tld-picker__item:focus-visible { border-color: var(--tk-blue); text-decoration: none; }
.tld-picker__domain { font-weight: 700; font-size: 1.05rem; color: var(--tk-blue); overflow-wrap: break-word; }
.tld-picker__name { color: var(--tk-ink); display: inline-block; max-width: 100%; overflow-wrap: anywhere; }
.tld-picker__price { font-size: .86rem; color: var(--tk-muted); }
.tld-picker.is-live .tld-picker__item { border-color: transparent; background: var(--tk-white); box-shadow: 0 1px 3px rgba(18, 32, 45, .08); }
.tld-picker.is-live .tld-picker__item:hover,
.tld-picker.is-live .tld-picker__item:focus-visible { border-color: var(--tk-blue); }
@media (max-width: 640px) { .tld-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Homepage domain block on a dark stage, so the search stands out between two
   white sections. Scoped to .domain-hub, which only the homepages carry. */
.domain-hub {
  background:
    radial-gradient(ellipse 70% 85% at 50% 0%, rgba(11, 85, 159, .5), transparent 72%),
    var(--tk-navy-deep);
  padding-top: 72px; padding-bottom: 80px;
}
.domain-hub h2, .domain-hub h3 { color: var(--tk-white); }
.domain-hub p { color: rgba(255, 255, 255, .8); }
.domain-hub .domain-search { border-color: transparent; box-shadow: 0 18px 44px rgba(0, 0, 0, .35); }
.domain-hub .domain-search__note, .domain-hub .tld-picker__hint { color: rgba(255, 255, 255, .7); }
.domain-hub .tld-picker__item,
.domain-hub .tld-picker.is-live .tld-picker__item {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); box-shadow: none;
}
.domain-hub .tld-picker__item:hover,
.domain-hub .tld-picker__item:focus-visible,
.domain-hub .tld-picker.is-live .tld-picker__item:hover,
.domain-hub .tld-picker.is-live .tld-picker__item:focus-visible {
  background: rgba(255, 255, 255, .12); border-color: var(--tk-orange);
}
.domain-hub .tld-picker__domain { color: #8cc4ff; }
.domain-hub .tld-picker__name { color: var(--tk-white); }
.domain-hub .tld-picker__price { color: rgba(255, 255, 255, .72); }
.domain-hub .home-columns > .card { border-color: rgba(255, 255, 255, .16); }
.domain-hub .card__more { color: #8cc4ff; }

/* Microsoft 365 pages (2026-10-11): a Microsoft-adjacent palette inside <main> only, so the
   header, footer, logo and orange actions stay TK WebHosts. No Microsoft logos or app icons
   (trademark); colour only. #0F6CBD is Microsoft's Fluent 2 brand blue and the only one that
   keeps text at AA on the tint (4.94:1); #0078D4 fails there (4.15:1), so it is decoration only. */
main.m365-theme { --tk-blue: #0f6cbd; --tk-soft-blue: #eff6fc; }
main.m365-theme .hero--dark {
  background:
    radial-gradient(ellipse 50% 70% at 100% 0%, rgba(40, 168, 234, .30), transparent 70%),
    linear-gradient(120deg, var(--tk-navy-deep) 0%, #0b3a6e 45%, #0f5ea8 100%);
}
/* App names as text chips: colour dots stand in for the app icons we may not use. Lighter
   variants of each app's colour, because the base shades are too dark on navy. */
main.m365-theme .m365-apps { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 0; padding: 0; }
main.m365-theme .m365-apps li {
  display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px;
  font-size: .8rem; font-weight: 600; color: rgba(255, 255, 255, .92);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
}
main.m365-theme .m365-apps li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--app); }
main.m365-theme .m365-apps [data-app="outlook"] { --app: #28a8ea; }
main.m365-theme .m365-apps [data-app="teams"] { --app: #7b83eb; }
main.m365-theme .m365-apps [data-app="word"] { --app: #2b7cd3; }
main.m365-theme .m365-apps [data-app="excel"] { --app: #21a366; }
main.m365-theme .m365-apps [data-app="powerpoint"] { --app: #ed6c47; }
main.m365-theme .m365-apps [data-app="onedrive"] { --app: #50d9ff; }
main.m365-theme .plan-card {
  border-radius: 8px; border-color: #e1dfdd;
  box-shadow: 0 1.6px 3.6px rgba(0, 0, 0, .13), 0 .3px .9px rgba(0, 0, 0, .11);
  transition: box-shadow .15s ease;
}
main.m365-theme .plan-card:hover { box-shadow: 0 6.4px 14.4px rgba(0, 0, 0, .13), 0 1.2px 3.6px rgba(0, 0, 0, .11); }
main.m365-theme .plan-card.card--featured { border: 2px solid #0078d4; }
main.m365-theme .card__icon[data-app] { color: var(--app); background: color-mix(in srgb, var(--app) 12%, #fff); }
main.m365-theme .card__icon[data-app="outlook"] { --app: #0078d4; }
main.m365-theme .card__icon[data-app="teams"] { --app: #5b5fc7; }
main.m365-theme .card__icon[data-app="office"] { --app: #107c41; }
main.m365-theme .card__icon[data-app="onedrive"] { --app: #0364b8; }
main.m365-theme .card__icon[data-app="calendar"] { --app: #038387; }
main.m365-theme .card__icon[data-app="admin"] { --app: #605e5c; }
main.m365-theme .m365-banner { margin: 0 auto 40px; max-width: 960px; }
main.m365-theme .m365-banner img { display: block; width: 100%; height: auto; border-radius: 8px; box-shadow: 0 6.4px 14.4px rgba(0, 0, 0, .13), 0 1.2px 3.6px rgba(0, 0, 0, .11); }