/* ============================================================
   Edge.lt — Stylesheet
   No Tailwind. No build step. Just CSS.
   ============================================================ */

/* ---------- 1. Reset & normalize ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; }
html:focus-within { scroll-behavior: smooth; }
body {
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
[hidden] { display: none !important; }
[x-cloak] { display: none !important; }

/* ---------- 2. Design tokens ---------- */
:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;

  /* Palette */
  --color-bg: #ffffff;
  --color-surface: #fafafa;
  --color-surface-elevated: #ffffff;
  --color-border: #e8e8ed;
  --color-border-hover: #d2d2d7;
  --color-text-primary: #1d1d1f;
  --color-text-secondary: #6e6e73;
  --color-text-muted: #86868b;
  --color-accent: #84cc16;
  --color-accent-hover: #65a30d;
  --color-accent-soft: rgba(132, 204, 22, 0.08);

  /* Primary button: kept as its own tokens so dark mode can flip them
     independently of body text (otherwise a near-white button would get
     near-white text). */
  --btn-primary-bg: #1d1d1f;
  --btn-primary-bg-hover: #000000;
  --btn-primary-text: #ffffff;
  --btn-primary-arrow: rgba(255, 255, 255, 0.6);

  /* Frosted-glass surfaces (fixed domain bar, etc.) */
  --glass-bg: rgba(255, 255, 255, 0.85);

  /* Soft tint backgrounds for feature icons */
  --tint-green-50:  #f0fdf4;
  --tint-blue-50:   #eff6ff;
  --tint-purple-50: #faf5ff;
  --tint-orange-50: #fff7ed;
  --tint-green-600:  #16a34a;
  --tint-blue-600:   #2563eb;
  --tint-purple-600: #9333ea;
  --tint-orange-600: #ea580c;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.08);
  --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.10);

  /* Layout */
  --container-max: 72rem;        /* ~1152px */
  --container-pad: 1rem;
  --container-pad-md: 1.5rem;

  /* Header */
  --header-h: 4rem;              /* 64px */
  --header-h-md: 5rem;           /* 80px */
}

/* ---------- 2b. Dark theme (auto, follows OS setting) ----------
   Only color tokens are overridden; every component reads these vars,
   so the whole UI flips with no per-component dark rules. The accent
   (lime) and button text stay light-on-accent for contrast. */
@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #0b0b0c;
    --color-surface: #161618;
    --color-surface-elevated: #1d1d20;
    --color-border: #2a2a2e;
    --color-border-hover: #3a3a40;
    --color-text-primary: #f5f5f7;
    --color-text-secondary: #a1a1a6;
    --color-text-muted: #6e6e73;

    --color-accent: #a3e635;
    --color-accent-hover: #bef264;
    --color-accent-soft: rgba(163, 230, 53, 0.12);

    /* Primary button inverts to light-on-dark-page */
    --btn-primary-bg: #f5f5f7;
    --btn-primary-bg-hover: #ffffff;
    --btn-primary-text: #0b0b0c;
    --btn-primary-arrow: rgba(11, 11, 12, 0.55);

    /* Feature-icon tints: deepen so colored glyphs stay legible on dark */
    --tint-green-50:  rgba(34, 197, 94, 0.14);
    --tint-blue-50:   rgba(59, 130, 246, 0.14);
    --tint-purple-50: rgba(168, 85, 247, 0.14);
    --tint-orange-50: rgba(249, 115, 22, 0.14);
    --tint-green-600:  #4ade80;
    --tint-blue-600:   #60a5fa;
    --tint-purple-600: #c084fc;
    --tint-orange-600: #fb923c;

    /* Shadows: heavier on dark so elevation still reads */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.55);
    --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.6);
    --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.65);

    --glass-bg: rgba(18, 18, 20, 0.8);
  }
}


body {
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  letter-spacing: normal;
}
p { letter-spacing: -0.003em; line-height: 1.6; }
nav a, footer a { letter-spacing: -0.01em; }

.h1 {
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: -0.022em;
  line-height: 1.1;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
}
.h2 {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.021em;
  line-height: 1.1;
  font-size: clamp(2rem, 4vw, 2.75rem);
}
.h3 {
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: -0.019em;
  line-height: 1.15;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

/* Text color helpers used inline */
.text-muted       { color: var(--color-text-muted); }
.heading-gradient { color: var(--color-text-primary); }

/* Accessible-hidden text (screen-reader only) */
.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;
}

/* Skip-to-content link — visible only when focused via keyboard */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  padding: 10px 16px;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-radius: 0 0 10px 0;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transform: translateY(-100%);
  transition: transform 0.15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
}

/* ---------- 4. Page shell & layout primitives ---------- */
.page-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow: hidden;
}
@supports (overflow: clip) {
  .page-shell { overflow: clip; }
}

.container {
  position: relative;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
@media (min-width: 640px) {
  .container { padding-inline: var(--container-pad-md); }
}

.main { flex-grow: 1; }

/* Vertical rhythm between sections */
section + section { margin-top: 24px; }
@media (min-width: 768px) {
  section + section { margin-top: 48px; }
}
.main > section:last-of-type { margin-bottom: 8px; }
@media (min-width: 768px) {
  .main > section:last-of-type { margin-bottom: 8px; }
}

/* Focus ring for any interactive element */
button:focus-visible,
a:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* ---------- 5. Header ---------- */
.site-header {
  position: absolute;
  width: 100%;
  z-index: 30;
}
.site-header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}
@media (min-width: 768px) {
  .site-header-bar { height: var(--header-h-md); }
}
.site-header-left {
  display: flex;
  align-items: center;
  gap: 2rem; /* 32px = gap-8 */
}
.site-logo { display: inline-flex; }
.site-logo img { max-width: none; }
.site-logo-svg { display: block; height: auto; color: var(--color-text-primary); }

/* Desktop nav links */
.site-nav { display: none; }
@media (min-width: 768px) {
  .site-nav { display: flex; align-items: center; }
}
.site-nav-list {
  display: flex;
  align-items: center;
  gap: 1.5rem; /* 24px = gap-6 */
}
.site-nav-link {
  position: relative;
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 400;
  letter-spacing: -0.01em;
  transition: color 0.15s ease-in-out;
}
.site-nav-link:hover { color: var(--color-accent); }
.site-nav-link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--color-accent);
  transform: translateX(-50%) scale(0);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.site-nav-link:hover::after { transform: translateX(-50%) scale(1); }

/* Right-side utility icon row (signin) — desktop only */
.site-utility-list {
  display: flex;
  align-items: center;
}
.site-icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: var(--color-text-secondary);
  transition: color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  outline: none;
}
.site-icon-link svg { width: 22px; height: 22px; }
.site-icon-link:hover,
.site-icon-link:focus-visible {
  color: var(--color-accent);
  background: var(--color-accent-soft);
}
.site-icon-link:focus-visible {
  box-shadow: 0 0 0 2px rgba(132, 204, 22, 0.25);
}

/* Mobile menu (hamburger button + collapsible nav) */
.mobile-menu {
  display: flex;
  align-items: center;
  margin-left: 1rem;
}
@media (min-width: 768px) {
  .mobile-menu { display: none; }
}
.mobile-menu-toggle {
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  color: var(--color-text-secondary);
  transition: color 0.15s;
}
.mobile-menu-toggle:hover { color: var(--color-accent); }
.mobile-menu-toggle svg {
  width: 1rem;
  height: 1rem;
  fill: currentColor;
  pointer-events: none;
}
.mobile-menu-toggle svg rect {
  transform-origin: center;
  transition: transform 0.3s cubic-bezier(0.5, 0.85, 0.25, 1.1);
}
.mobile-menu-toggle svg rect:nth-child(1) { transform: translateY(-5px); }
.mobile-menu-toggle svg rect:nth-child(2) {
  transition: transform 0.3s cubic-bezier(0.5, 0.85, 0.25, 1.8);
}
.mobile-menu-toggle svg rect:nth-child(3) { transform: translateY(5px); }
.mobile-menu-toggle[aria-expanded="true"] svg rect:nth-child(1) { transform: translateY(0) rotate(315deg); }
.mobile-menu-toggle[aria-expanded="true"] svg rect:nth-child(2) { transform: rotate(45deg); }
.mobile-menu-toggle[aria-expanded="true"] svg rect:nth-child(3) { transform: translateY(0) rotate(135deg); }

.mobile-nav {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 20;
  width: 100%;
  padding-inline: var(--container-pad);
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
}
.mobile-nav.is-open {
  opacity: 1;
}
@media (min-width: 640px) {
  .mobile-nav { padding-inline: var(--container-pad-md); }
}
.mobile-nav-list {
  padding: 0.5rem 1rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  box-shadow: var(--shadow-lg);
}
.mobile-nav-list a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 10px 16px;
  border-radius: 8px;
  color: var(--color-text-secondary);
  font-size: 15px;
  font-weight: 400;
  transition: all 0.15s ease;
}
.mobile-nav-list a:hover {
  color: var(--color-accent);
  background: var(--color-accent-soft);
}
.mobile-nav-list svg { width: 1rem; height: 1rem; }
.mobile-nav-divider {
  padding-top: 8px;
  margin-top: 8px;
  border-top: 1px solid var(--color-border);
}

/* ---------- 6. Hero section ---------- */
.hero-section { /* uses default section + container padding */ }
.hero-section .container { padding-top: 8rem; padding-bottom: 4rem; }
@media (min-width: 768px) {
  .hero-section .container { padding-top: 12rem; padding-bottom: 7rem; }
}
.hero-inner {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
}
.hero-headline-row {
  display: block;
}
.hero-illustration { display: none; }

@media (min-width: 1024px) {
  .hero-inner { max-width: 78rem; }
  .hero-headline-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 2.5rem;
    margin-bottom: 0.5rem;
  }
  .hero-illustration {
    display: block;
    opacity: 0;
    animation: heroIllustrationFadeIn 0.9s ease-out 0.2s forwards;
  }
  .hero-illustration img {
    display: block;
    width: 100%;
    max-width: 22rem;
    height: auto;
  }
  .hero-illustration-left {
    justify-self: end;
  }
  .hero-illustration-right {
    justify-self: start;
  }
}
@media (min-width: 1280px) {
  .hero-illustration img { max-width: 24rem; }
  .hero-headline-row { column-gap: 3rem; }
}

@keyframes heroIllustrationFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .hero-illustration { opacity: 1; animation: none; }
}
.hero-title { padding-bottom: 1.5rem; }
.hero-title br { display: none; }
@media (min-width: 1024px) {
  .hero-title br { display: inline; }
}
.hero-copy {
  font-size: 21px;
  line-height: 1.5;
  font-weight: 400;
  letter-spacing: -0.003em;
  color: var(--color-text-secondary);
  margin-bottom: 2.5rem;
  max-width: 42rem;
  margin-inline: auto;
}
.hero-cta-wrap {
  max-width: 20rem;
  margin-inline: auto;
}
@media (min-width: 640px) {
  .hero-cta-wrap {
    max-width: none;
    display: flex;
    justify-content: center;
  }
}

/* ---------- 7. Buttons ---------- */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 2rem;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border-radius: 12px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.btn-primary:hover {
  background: var(--btn-primary-bg-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-primary:active { transform: scale(0.98); }
.btn-primary .button-arrow {
  margin-left: 0.375rem;
  color: var(--btn-primary-arrow);
  transition: all 0.2s ease;
  letter-spacing: normal;
}
.btn-primary:hover .button-arrow {
  color: var(--btn-primary-text);
  transform: translateX(2px);
}

.btn-soft {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 20px;
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 1.17648;
  font-weight: 400;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: all 0.2s ease;
}
.btn-soft:hover {
  border-color: var(--color-border-hover);
  background: var(--color-bg);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.btn-soft svg { fill: currentColor; }

/* .btn-download — a plain inline text link for PDF downloads on the legal pages.
   Deliberately not a button shape: no border, no padding, no extra height. It sits
   inside doc-cards where extra vertical chrome would push the card taller.
   Font size/weight inherit from the parent (no override) so it matches its context. */
.btn-download {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}
.btn-download:hover { color: var(--color-accent); }

/* ---------- 8. Domain search ---------- */
.domain-search-section {
  position: relative;
  z-index: 25;
}
.domain-search-section .container {
  padding-top: 1rem;
  padding-bottom: 2rem;
}
@media (min-width: 768px) {
  .domain-search-section .container {
    padding-top: 1.5rem;
    padding-bottom: 3rem;
  }
}

/* Fixed banner at bottom of viewport */
.domain-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  z-index: 50;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.06);
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0s linear 0s;
}
.domain-fixed.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.domain-fixed .domain-copy { display: none; }
.domain-fixed .domain-search-content {
  grid-template-columns: minmax(320px, 680px) auto;
  justify-content: center;
  padding: 14px 0;
}

/* Inline domain search (under the hero) */
.domain-inline {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}
.domain-inline.is-visible {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.5s ease, visibility 0s linear 0s;
}
.domain-no-transition { transition: none !important; }

.domain-search-shell {
  background: transparent;
  overflow: hidden;
}
.domain-search-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding-inline: var(--container-pad);
}
@media (min-width: 640px) {
  .domain-search-inner { padding-inline: var(--container-pad-md); }
}
.domain-search-content {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) minmax(300px, 1.15fr) auto;
  gap: 18px;
  align-items: center;
  padding: 24px 0;
}
.domain-search-input {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--color-border);
  border-radius: 9999px;
  background: var(--color-bg);
  color: var(--color-text-primary);
  padding: 0 20px;
  font-size: 16px;
  line-height: 1.3;
  outline: none;
  transition: all 0.2s ease;
}
.domain-search-input::placeholder { color: var(--color-text-muted); }
.domain-search-input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.15);
}
.domain-search-button {
  white-space: nowrap;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border-radius: 9999px;
  padding: 0 24px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all 0.2s ease;
}
.domain-search-button:hover {
  background: var(--color-bg);
  border-color: var(--color-border-hover);
  color: var(--color-text-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.domain-search-button:active { transform: scale(0.98); }

/* Inline button special state: active green */
#domain-inline-btn {
  background: var(--color-accent);
  color: #ffffff;
  transition: all 180ms ease;
}

.domain-copy .tile-title {
  color: var(--color-text-primary);
  font-size: 28px;
  line-height: 1.14;
  font-weight: 500;
  letter-spacing: -0.021em;
  padding-bottom: 4px;
}
.domain-copy .tile-copy {
  color: var(--color-text-secondary);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
}

@media (max-width: 767px) {
  .domain-search-content {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 18px 0;
  }
  .domain-fixed .domain-search-content { grid-template-columns: 1fr; }
  .domain-search-button { width: 100%; }
}

/* Result area */
.domain-result {
  display: none;
  margin-top: 1rem;
  padding: 1rem;
  border-radius: 1rem;
  border: 1px solid var(--color-border);
  transition: all 0.3s ease;
}
.domain-result.is-shown { display: block; }
.domain-result.is-available {
  background: rgba(34, 197, 94, 0.06);
  border-color: rgba(34, 197, 94, 0.2);
}
.domain-result.is-unavailable {
  background: var(--color-surface);
  border-color: var(--color-border);
}
.domain-result-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.domain-result-text { font-size: 17px; }
.domain-result-btn { display: none; }
.domain-result-btn.is-shown { display: inline-flex; }
.domain-suggestions {
  display: none;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
  font-size: 15px;
  color: var(--color-text-secondary);
}
.domain-suggestions.is-shown { display: block; }
.domain-suggestion {
  color: var(--color-text-secondary);
  transition: color 0.15s ease;
  cursor: pointer;
}
.domain-suggestion:hover { color: var(--color-accent); }

/* ---------- 9. Security / two-column feature section ----------
   The actual SSL visual is rendered as a Three.js canvas inside
   .ssl-scene-shell (styles inline in index.html). Only the layout
   shell and feature-list lives here. */
.security-section .container { padding-top: 4rem; padding-bottom: 3rem; }
@media (min-width: 768px) {
  .security-section .container { padding-top: 9rem; padding-bottom: 5rem; }
}
.security-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 768px) {
  .security-grid {
    grid-template-columns: 5fr 7fr;
    gap: 3rem;
  }
}
.security-heading { padding-bottom: 1rem; }
.feature-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 24rem;
}
.feature-item {
  display: flex;
  align-items: flex-start;
  gap: 0.875rem;
}
.feature-icon {
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.feature-icon svg { width: 1rem; height: 1rem; }
.feature-icon-green  { background: var(--tint-green-50);  color: var(--tint-green-600); }
.feature-icon-blue   { background: var(--tint-blue-50);   color: var(--tint-blue-600); }
.feature-icon-purple { background: var(--tint-purple-50); color: var(--tint-purple-600); }
.feature-icon-orange { background: var(--tint-orange-50); color: var(--tint-orange-600); }
.feature-text {
  color: var(--color-text-secondary);
  line-height: 1.6;
  padding-top: 4px;
}

.security-visual { display: flex; align-items: center; justify-content: center; }

/* ---------- 10. Pricing — intro section ----------
   The visual is a Three.js canvas inside .pricing-stage
   (styles inline in index.html). Only the surrounding layout lives here. */
.pricing-intro-section .container { padding-top: 3rem; padding-bottom: 2.5rem; }
@media (min-width: 768px) {
  .pricing-intro-section .container { padding-top: 5rem; padding-bottom: 3rem; }
}
.pricing-split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  align-items: center;
}
@media (min-width: 768px) {
  .pricing-split-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.5rem;
  }
}
@media (min-width: 1024px) {
  .pricing-split-grid { gap: 4rem; }
}
.pricing-visual-column {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.pricing-text-column {
  width: 100%;
  max-width: 28rem;
  min-width: 0;
}
@media (min-width: 768px) {
  .pricing-text-column { justify-self: end; }
  .pricing-visual-column { justify-content: flex-start; }
}
.pricing-intro-heading { padding-bottom: 1rem; }
.pricing-intro-points { display: flex; flex-direction: column; gap: 0.75rem; }
.pricing-intro-lead {
  font-size: 19px;
  line-height: 1.5;
  color: var(--color-text-muted);
}
.pricing-intro-sub {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ---------- 11. Pricing plans grid ---------- */
.pricing-plans-section .container { padding-top: 3rem; padding-bottom: 3rem; margin-bottom: 4rem; }
@media (min-width: 768px) {
  .pricing-plans-section .container { padding-top: 5rem; padding-bottom: 5rem; margin-bottom: 6rem; }
}
.pricing-plans-header {
  max-width: 48rem;
  margin-inline: auto;
  text-align: center;
  padding-bottom: 3rem;
}
@media (min-width: 768px) {
  .pricing-plans-header { padding-bottom: 4rem; }
}
.pricing-plans-header h2 { padding-bottom: 1rem; }
.pricing-plans-sub {
  font-size: 19px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 640px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .pricing-grid { grid-template-columns: repeat(3, 1fr); } }

.pricing-card {
  display: block;
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0 20px 20px 20px;
  text-decoration: none;
  color: inherit;
  transition: all 0.3s ease;
}
.pricing-card:hover {
  background: var(--color-bg);
  border-color: var(--color-accent);
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}
.pricing-card.is-featured {
  border-color: var(--color-accent);
  background: var(--color-bg);
  box-shadow: var(--shadow-md);
}
.pricing-tile { padding: 28px; }
.pricing-title {
  color: var(--color-text-primary);
  font-size: 21px;
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: 0.006em;
  padding-bottom: 4px;
}
.pricing-card:hover .pricing-title,
.pricing-card:hover .price-main { color: var(--color-accent); }

/* Small descriptor under each plan name */
.pricing-subtitle {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.01em;
  padding-bottom: 12px;
  margin-top: -2px;
}

/* "Populiariausias" badge on the featured card */
.pricing-card.is-featured .pricing-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-accent-hover);
  background: var(--color-accent-soft);
  border: 1px solid rgba(132, 204, 22, 0.22);
  border-radius: 999px;
  padding: 4px 10px;
  line-height: 1;
}
.price-row { padding-bottom: 1rem; }
.price-support {
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: 400;
  vertical-align: 14px;   /* lifts the € above the baseline */
  margin-right: 2px;
}
.price-main {
  color: var(--color-text-primary);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.price-period { color: var(--color-text-secondary); font-size: 13px; font-weight: 400; }

.pricing-features { display: flex; flex-direction: column; gap: 0.5rem; }
.pricing-feature {
  display: flex;
  align-items: center;
  font-size: 15px;
  color: var(--color-text-secondary);
}
.pricing-feature svg {
  width: 1rem;
  height: 1rem;
  margin-right: 0.5rem;
  color: var(--color-accent);
  fill: currentColor;
  flex-shrink: 0;
}

.pricing-bottom-cta {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
  padding-bottom: 3rem;
}
@media (min-width: 768px) {
  .pricing-bottom-cta { margin-top: 2.5rem; padding-bottom: 4rem; }
}

/* ---------- 12. Footer ---------- */
footer {
  background: var(--color-surface);
  margin-top: 3rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 1.75rem;
  column-gap: 2rem;
  padding-block: 2rem;
}
@media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(12, 1fr); } }
@media (min-width: 768px) { .footer-grid { padding-block: 2.5rem; } }

.footer-brand {
  grid-column: 1 / -1;
}
@media (min-width: 1024px) {
  .footer-brand { grid-column: span 4; order: 0; }
}
.footer-brand-inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .footer-brand-inner { flex-direction: row; }
}
.footer-logo-wrap { margin-bottom: 1rem; }
@media (min-width: 640px) and (max-width: 1023.98px) {
  .footer-logo-wrap { margin-bottom: 0; }
}
.footer-copyright {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-top: 0.25rem;
}
.footer-social {
  display: flex;
  margin-top: 1.25rem;
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .footer-social { margin-top: 0; }
}
@media (min-width: 1024px) {
  .footer-social { margin-top: 1.5rem; }
}
.social-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  color: var(--color-text-muted);
  transition: color 0.2s ease, transform 0.2s ease;
}
.social-icon:hover {
  color: var(--color-accent);
  transform: translateY(-1px);
}
.social-icon svg { width: 1.25rem; height: 1.25rem; fill: currentColor; }

/* Footer contact row: icon + phone number text */
.footer-contact-row {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  margin-top: 0.625rem;
  flex-wrap: wrap;
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .footer-contact-row { margin-top: 0; }
}
@media (min-width: 1024px) {
  .footer-contact-row { margin-top: 0.75rem; }
}
.footer-contact-row .social-icon {
  margin: 0;
  width: 1.75rem;
  height: 1.75rem;
}
.footer-contact-row .social-icon svg {
  width: 1.1rem;
  height: 1.1rem;
}
.footer-phone-link {
  font-size: 14px;
  color: var(--color-text-secondary);
  letter-spacing: -0.005em;
  transition: color 0.2s ease;
  white-space: nowrap;
  margin-left: 0.125rem;
}
.footer-phone-link:hover { color: var(--color-accent); }

.footer-company-code {
  font-size: 12.5px;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
  letter-spacing: 0.005em;
}

.footer-col {
  grid-column: 1 / -1;
}
@media (min-width: 640px) { .footer-col { grid-column: span 6; } }
@media (min-width: 768px) { .footer-col { grid-column: span 4; } }
@media (min-width: 1024px) { .footer-col { grid-column: span 2; } }

.footer-col h6,
.footer-col .footer-heading {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin-bottom: 0.75rem;
}
.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}
.footer-col a {
  font-size: 14px;
  color: var(--color-text-secondary);
  transition: color 0.2s ease;
}
.footer-col a:hover { color: var(--color-accent); }

/* ============================================================
   13. Hostingas.html — extensions
   These extend existing components rather than duplicating them.
   ============================================================ */

/* --- Page hero (2-col, reuses .security-section + .security-grid) --- */
/* Tighter top spacing than the index hero — content sits close under the header */
.page-hero-2col .container { padding-top: 5.5rem; padding-bottom: 2rem; }
@media (min-width: 768px) {
  .page-hero-2col .container { padding-top: 7rem; padding-bottom: 3rem; }
}
/* Smaller h1 padding-bottom than the standalone hero — keeps copy close to title */
.page-hero-2col .security-heading { padding-bottom: 1rem; }
/* Vertically center the text block and the animation against each other */
.page-hero-2col .security-grid { align-items: center; }

/* Generative infrastructure animation container.
   Sized to visually match the text column — extends slightly beyond it but not much. */
.infra-field {
  width: 100%;
  max-width: 260px;
  aspect-ratio: 1 / 1;
  position: relative;
  margin-inline: auto;
}
@media (max-width: 767px) { .infra-field { max-width: 180px; } }
.infra-field canvas {
  width: 100%;
  height: 100%;
  display: block;
  background: transparent;
  filter: blur(0.15px);
}

/* --- Pricing comparison table --- */
.pricing-compare-section .container { padding-bottom: 4rem; }
@media (min-width: 768px) {
  .pricing-compare-section .container { padding-bottom: 6rem; }
}

/* Wrapper inherits visual language from .pricing-card */
.pricing-compare-wrap {
  border: 1px solid var(--color-border);
  border-radius: 20px;
  background: var(--color-surface);
  overflow: hidden;
}
.pricing-compare-scroll { overflow-x: auto; }

.pricing-compare-table {
  width: 100%;
  min-width: 820px;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 15px;
  color: var(--color-text-primary);
}
.pricing-compare-table .col-feature { width: 24%; }
.pricing-compare-table col:not(.col-feature) { width: 12.666%; }
.pricing-compare-table th,
.pricing-compare-table td {
  padding: 14px 18px;
  text-align: center;
  border-top: 1px solid var(--color-border);
  vertical-align: middle;
}
.pricing-compare-table th:first-child,
.pricing-compare-table td:first-child {
  text-align: left;
  color: var(--color-text-secondary);
  font-weight: 400;
}
.pricing-compare-table thead th {
  font-weight: 400;
  vertical-align: middle;
  border-top: none;
  text-align: center;
}
.pricing-compare-table .pricing-compare-row-names th {
  padding: 22px 6px 18px;
  border-bottom: 1px solid var(--color-border);
}
.pricing-compare-table .pricing-compare-row-prices th {
  padding: 18px 18px 22px;
}
.pricing-compare-table .pricing-compare-row-names th:first-child,
.pricing-compare-table .pricing-compare-row-prices th:first-child {
  text-align: left;
}
.pricing-compare-table .pricing-compare-row-names th:first-child {
  padding-left: 18px;
  padding-right: 18px;
}
/* Hide the bottom border on the first-column header cells (where there's no label) */
.pricing-compare-table .pricing-compare-row-names th:first-child {
  border-bottom-color: transparent;
}
.pricing-compare-plan-name {
  display: block;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.006em;
  color: var(--color-text-primary);
  line-height: 1.22;
}
.pricing-compare-plan-subtitle {
  display: block;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--color-text-muted);
  line-height: 1.3;
  margin-top: 3px;
}
.pricing-compare-plan-price {
  display: block;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
}
.pricing-compare-plan-price .currency {
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-right: 3px;
  vertical-align: 4px;
}
.pricing-compare-plan-price .period {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-left: 3px;
}

/* Featured column (Pro) */
.pricing-compare-table .is-featured { background: var(--color-accent-soft); }
.pricing-compare-table .pricing-compare-row-names .is-featured {
  border-top: 2px solid var(--color-accent);
}
.pricing-compare-table thead .is-featured .pricing-compare-plan-name,
.pricing-compare-table thead .is-featured .pricing-compare-plan-price {
  color: var(--color-accent-hover);
}

/* Merged cell (spans multiple plan columns) — paint the Pro column tint
   behind it so the lime stripe runs continuously through the table.
   Stops depend on how many columns the cell spans. */
.pricing-compare-table .is-merged[colspan="5"] {
  /* Spans columns 3-7 (Nano kept separate). Pro is the 4th of 5 = 60-80%. */
  background: linear-gradient(
    to right,
    transparent 0%,
    transparent 60%,
    var(--color-accent-soft) 60%,
    var(--color-accent-soft) 80%,
    transparent 80%,
    transparent 100%
  );
}
.pricing-compare-table .is-merged[colspan="6"] {
  /* Spans columns 2-7 (all plan columns). Pro is the 5th of 6 = 66.67-83.33%. */
  background: linear-gradient(
    to right,
    transparent 0%,
    transparent 66.666%,
    var(--color-accent-soft) 66.666%,
    var(--color-accent-soft) 83.333%,
    transparent 83.333%,
    transparent 100%
  );
}

/* Hover non-featured rows */
.pricing-compare-table tbody tr:hover td:not(.is-featured) {
  background: var(--color-bg);
}

/* --- Order buttons sit OUTSIDE the table card, aligned to plan columns --- */
.pricing-compare-actions {
  display: grid;
  /* Match the table's <colgroup>: first column 24%, six plan columns 12.666% each */
  grid-template-columns: 24% repeat(6, 12.666%);
  align-items: center;
  margin-top: 18px;
  padding-inline: 1px; /* aligns visually with the table's 1px border */
}
.pricing-compare-action-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}

/* Small dark CTA button — same shape as .btn-primary, scaled down to fit columns */
.btn-primary-sm {
  min-height: 38px;
  padding: 0 18px;
  border-radius: 10px;
  font-size: 13px;
}
.btn-primary-sm .button-arrow {
  margin-left: 6px;
  font-size: 13px;
}

@media (max-width: 767px) {
  .pricing-compare-table { font-size: 13px; min-width: 720px; }

  /* --- Mobile comparison-table usability ---------------------------------
     (1) The feature-label column sticks while plan columns scroll under it,
     so users always see WHAT they're comparing. Every row's first cell is a
     <th> (row header or blank corner), so one selector covers them all.
     A soft right-edge shadow separates it from the moving columns. */
  .pricing-compare-table th:first-child,
  .pricing-compare-table td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--color-surface);
    box-shadow: 10px 0 14px -12px rgba(0, 0, 0, 0.4);
  }
  /* (2) Narrower label column on phones = more plan data in view.
     Labels wrap to two lines where needed. */
  .pricing-compare-table .col-feature { width: 128px; }

  /* (3) Right-edge scroll affordance, pure CSS: a surface-colored "cover"
     (attachment: local — scrolls with content) slides away to reveal a
     subtle shadow (attachment: scroll — pinned to the edge) whenever more
     columns are hidden; at scroll end the cover returns and hides it. */
  .pricing-compare-scroll {
    background:
      linear-gradient(270deg, var(--color-surface) 30%, transparent) right / 44px 100%,
      linear-gradient(270deg, rgba(0, 0, 0, 0.14), transparent) right / 18px 100%;
    background-repeat: no-repeat;
    background-attachment: local, scroll;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .pricing-compare-table th,
  .pricing-compare-table td { padding: 12px 10px; }
  .pricing-compare-table .pricing-compare-row-names th { padding: 14px 4px 12px; }
  .pricing-compare-table .pricing-compare-row-prices th { padding: 12px 10px 14px; }
  .pricing-compare-plan-name { font-size: 14px; }
  .pricing-compare-plan-subtitle { font-size: 11px; margin-top: 2px; }
  .pricing-compare-plan-price { font-size: 20px; }
  /* On mobile the table scrolls horizontally but the buttons don't — give them their own 3-col grid */
  .pricing-compare-actions {
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    padding-inline: 0;
  }
  .pricing-compare-action-cell:first-child { display: none; }
  .btn-primary-sm { padding: 0 10px; font-size: 12px; min-height: 34px; width: 100%; }
}

/* --- Feature tiles: reuses .pricing-card via .is-feature-tile modifier --- */
.feature-tiles-container { padding-bottom: 3rem; }
@media (min-width: 768px) { .feature-tiles-container { padding-bottom: 5rem; } }

.pricing-card.is-feature-tile { padding: 18px 20px; }
.pricing-card.is-feature-tile:hover {
  /* keep the card hover lift, but suppress the lime accent border */
  border-color: var(--color-border-hover);
  background: var(--color-bg);
}
.feature-tile-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.feature-tile-row p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.feature-tile-row strong {
  color: var(--color-text-primary);
  font-weight: 500;
}
.feature-tile-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.feature-tile-icon svg { width: 14px; height: 14px; color: var(--color-accent); }

/* Tagline heading shown directly below the feature cards */
.features-tagline {
  margin-top: 2.5rem;
  text-align: center;
}
@media (min-width: 768px) { .features-tagline { margin-top: 3.5rem; } }
.features-tagline h2 { margin: 0; }

/* --- FAQ ("DUK") section --- */
.faq-section { background: var(--color-surface); }
.faq-section .container { padding-block: 3rem; }
@media (min-width: 768px) { .faq-section .container { padding-block: 5rem; } }

.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 768px) {
  .faq-grid { grid-template-columns: 1fr 1fr; gap: 2rem 3rem; }
}
.faq-item h3 {
  font-size: 21px;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: 0.006em;
  line-height: 1.22;
  margin: 0 0 0.75rem;
}
.faq-item p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text-secondary);
  margin: 0;
}

/* CTA at the bottom of the FAQ section — kicker + text link pattern.
   Intentionally quiet: no button shape, type-only hierarchy.
   Calm invitation to reach out without competing with the primary page CTAs. */
.faq-cta {
  text-align: center;
  margin-top: 3rem;
}
@media (min-width: 768px) { .faq-cta { margin-top: 4rem; } }
/* When the kicker sits right after the hosting plans bottom button
   (e.g. on domenai), pull it up to compensate for the button's own bottom padding. */
.pricing-bottom-cta + .faq-cta { margin-top: 0.5rem; }
@media (min-width: 768px) {
  .pricing-bottom-cta + .faq-cta { margin-top: 1rem; }
}

.faq-cta-kicker {
  margin: 0 0 6px;
  font-size: 15px;
  line-height: 1.4;
  color: var(--color-text-muted);
  letter-spacing: -0.005em;
}
.faq-cta-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.011em;
  color: var(--color-text-primary);
  text-decoration: none;
  padding: 4px 2px;     /* generous tap target without visible chrome */
  transition: color 0.2s ease;
}
.faq-cta-link:hover { color: var(--color-accent); }
.faq-cta-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
  border-radius: 4px;
}
.faq-cta-arrow {
  display: inline-block;
  color: var(--color-text-muted);
  transition: transform 0.2s ease, color 0.2s ease;
}
.faq-cta-link:hover .faq-cta-arrow {
  transform: translateX(3px);
  color: var(--color-accent);
}

/* ============================================================
   13b. Domenai.html — extensions (reuses .pricing-card, .btn-primary)
   The orbit-style visual on this page is rendered as a Three.js canvas
   inside .domain-orbit (canvas + per-page atmospheric styles inline
   in domenai.html). The layout shell below stays here so the container
   stays centered and width-capped on the right side of the hero. */

.domain-orbit {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 767px) { .domain-orbit { max-width: 220px; } }

/* Full-width search bar — reuses .btn-primary for the submit button */
.domain-page-search {
  display: flex;
  gap: 12px;
  width: 100%;
  margin: 0 auto 3rem;
  align-items: stretch;
}
@media (min-width: 768px) { .domain-page-search { margin-bottom: 4rem; } }
.domain-page-search-input {
  flex: 1 1 auto;
  min-height: 52px;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  color: var(--color-text-primary);
  padding: 0 20px;
  font-size: 17px;
  line-height: 1.3;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.domain-page-search-input::placeholder { color: var(--color-text-muted); }
.domain-page-search-input:focus {
  border-color: var(--color-accent);
  background: var(--color-bg);
  box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.18);
}
.domain-page-search-btn {
  flex: 0 0 auto;
  min-height: 52px;
  border-radius: 14px;
}
@media (max-width: 639px) {
  .domain-page-search { flex-direction: column; gap: 10px; }
  .domain-page-search-btn { width: 100%; }
}

/* Cards grid: 4 columns on desktop (8 cards = 4+4), 2 on tablet, 1 on mobile */
.domain-cards-section .container { padding-bottom: 3rem; }
@media (min-width: 768px) { .domain-cards-section .container { padding-bottom: 5rem; } }
.domain-cards-grid { gap: 1rem; }
@media (min-width: 640px) { .domain-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .domain-cards-grid { grid-template-columns: repeat(4, 1fr); } }

/* Domain card: TLD + price + status + CTA stacked.
   Reuses .pricing-card shell + .price-row/.price-support/.price-main/.price-period from section 11. */
.pricing-card.domain-card {
  display: flex;
  flex-direction: column;
  padding: 22px 22px 20px;
}
.pricing-card.domain-card:hover {
  /* Suppress the lime accent border from the base .pricing-card:hover, keep subtle lift */
  border-color: var(--color-border-hover);
  background: var(--color-bg);
}
.domain-card-body {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}
.domain-card-tld {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.006em;
  margin-bottom: 6px;
}
.pricing-card.domain-card.is-available .domain-card-tld {
  color: var(--color-accent-hover);
}

/* Status label under the price ("laisvas" / "užimta") */
.domain-card-status {
  min-height: 18px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--color-text-muted);
  margin-bottom: 12px;
}
.pricing-card.domain-card.is-available .domain-card-status {
  color: var(--color-accent-hover);
  font-weight: 500;
}

/* CTA inside the card sits at the bottom (when card heights stretch in the grid) */
.domain-card-cta {
  align-self: stretch;
  margin-top: auto;
}

/* Disabled CTA — muted, unclickable */
.btn-primary.is-disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.45;
  filter: grayscale(0.2);
  background: var(--color-text-muted);
  box-shadow: none;
  transform: none;
}
.btn-primary.is-disabled:hover {
  transform: none;
  box-shadow: none;
  background: var(--color-text-muted);
}

/* ============================================================
   13c. Kontaktai.html — contact form + alternate-contact tiles
   ============================================================ */

/* --- Hero credentials card + text layout ---
   DOM order: text first, credentials second (so mobile stacks text on top).
   On desktop, we swap them visually so credentials sit LEFT, text sits RIGHT. */
@media (min-width: 768px) {
  .contact-credentials { order: 1; }
  .contact-hero-text   { order: 2; }
}

/* The credentials card — soft surface card with labeled rows */
.contact-credentials {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 18px;
  padding: 22px 24px;
}
.credentials-link {
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}
.credentials-link:hover {
  color: var(--color-accent);
}

/* Form layout: max-width centered, vertical rhythm */
.contact-form {
  width: 100%;
  max-width: 720px;
  margin: 0 auto 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
@media (min-width: 768px) { .contact-form { margin-bottom: 4rem; } }

/* Name + email side-by-side on tablet+ */
.contact-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
@media (min-width: 640px) { .contact-row { grid-template-columns: 1fr 1fr; } }

/* Field block */
.contact-field { display: flex; flex-direction: column; gap: 6px; }
.contact-field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  letter-spacing: -0.005em;
  padding-left: 4px;
}

/* Input wrapper holds icon + input + counter */
.contact-field-wrap {
  position: relative;
  display: flex;
  align-items: center;
  border: 1px solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.contact-field-wrap:focus-within {
  border-color: var(--color-accent);
  background: var(--color-bg);
  box-shadow: 0 0 0 3px rgba(132, 204, 22, 0.18);
}

/* Textarea wrapper aligns icon to top */
.contact-field-wrap-textarea { align-items: stretch; }

/* Icon inside the input */
.contact-field-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 44px;
  height: 52px;
  color: var(--color-text-muted);
}
.contact-field-wrap-textarea .contact-field-icon { height: 52px; align-items: flex-start; padding-top: 16px; }
.contact-field-icon svg { width: 18px; height: 18px; }

/* Input + textarea themselves */
.contact-field-input,
.contact-field-textarea {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  font-size: 16px;
  line-height: 1.4;
  font-family: inherit;
  padding: 14px 70px 14px 0;
  outline: none;
}
.contact-field-input::placeholder,
.contact-field-textarea::placeholder { color: var(--color-text-muted); }
.contact-field-input { min-height: 52px; }
.contact-field-textarea {
  resize: vertical;
  min-height: 140px;
  padding-top: 14px;
  padding-bottom: 36px; /* leave space for the bottom-anchored counter */
}

/* Character counter (top-right for inputs, bottom-right for textarea) */
.contact-field-counter {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}
.contact-field-counter-textarea {
  top: auto;
  bottom: 12px;
  transform: none;
}

/* Validation error message under each field */
.contact-field-error {
  margin: 0;
  padding-left: 4px;
  font-size: 13px;
  color: #b91c1c;
}
.contact-field-input[aria-invalid="true"] + .contact-field-counter,
.contact-field-textarea[aria-invalid="true"] ~ .contact-field-counter { color: #b91c1c; }
.contact-field-wrap:has(input[aria-invalid="true"]),
.contact-field-wrap:has(textarea[aria-invalid="true"]) {
  border-color: #fca5a5;
}

/* Submit button centered */
.contact-submit {
  display: flex;
  justify-content: center;
  margin-top: 0.5rem;
}

/* Alternate-contact cards — extends .pricing-card.is-feature-tile.
   The base is-feature-tile is a <li> tile; here it's an <a> tile, so suppress
   underline/default styles. */
.contact-other-container { padding-bottom: 4rem; }
@media (min-width: 768px) { .contact-other-container { padding-bottom: 6rem; } }

.contact-other-grid { gap: 1rem; }
/* 1 col mobile (default from .pricing-grid), 3 cols on desktop.
   No 2-col tablet variant: would leave a lonely card in row 2. */
@media (min-width: 1024px) { .contact-other-grid { grid-template-columns: repeat(3, 1fr); } }

.contact-other-card { text-decoration: none; }

/* --- Credentials feature-list overrides (used inside the hero card) ---
   The credentials block reuses .feature-list / .feature-item / .feature-text,
   but needs tighter spacing and a 2-line text layout (label + value).
   These overrides keep the look consistent with feature-icons elsewhere. */

/* Match hero grid to feature-card columns: credentials 1/3, text 2/3 */
@media (min-width: 768px) {
  .page-hero-2col .security-grid {
    grid-template-columns: 1fr 2fr;
    align-items: center;
  }
}

/* Drop heading padding-bottom so align-items:center balances symmetrically */
.page-hero-2col .contact-hero-text .security-heading { padding-bottom: 0; }

/* Remove the .feature-list max-width and gap constraints inside the card */
.credentials-feature-list {
  max-width: none;
  gap: 0;
}

/* Each row: no padding-top — line-height alone controls vertical rhythm */
.credentials-feature-list .feature-text {
  padding-top: 0;
  line-height: 1.75;
}

/* Icon aligned to the top of the 2-line text block */
.credentials-feature-list .feature-icon {
  margin-top: 0;
  align-self: flex-start;
}

/* Two-line text inside each credentials row */
.credentials-primary {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 14px;
}
.credentials-secondary {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* ---------- 14. Reduced motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 15. Terms page (salygosirtaisykles.html) ----------
   Only what existing classes can't deliver: aligned numbered list
   layout and a section divider. Card / buttons / pills reuse
   .pricing-card, .btn-primary, .btn-soft. */

.terms-article { max-width: 56rem; margin-inline: auto; color: var(--color-text-secondary); line-height: 1.75; }
.terms-article h3 { margin: 2.5rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); color: var(--color-text-primary); }
.terms-article h3:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.terms-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.875rem; }
.terms-item { display: grid; grid-template-columns: 3rem 1fr; gap: 0.5rem; align-items: baseline; }
.terms-item.is-sub    { grid-template-columns: 3.75rem 1fr; padding-left: 1rem; }
.terms-item.is-subsub { grid-template-columns: 4.5rem  1fr; padding-left: 2rem; }
.terms-item > span:first-child { font-weight: 600; color: var(--color-text-primary); font-variant-numeric: tabular-nums; }

/* ---------- 16. Legal pages — shared layout helpers ----------
   Used by privatumopolitika.html, grazinimopolitika.html, salygosirtaisykles.html.
   Replaces the repeated inline style="..." attributes those pages used to carry. */

/* Hero grid variants (used on .security-grid in the legal-page hero):
   - .is-2-1 = single doc card on the right (title + meta on left, ~⅔/⅓ split)
   - .is-1-1 = two doc cards on the right (50/50 split) */
.security-grid.is-2-1 { grid-template-columns: 2fr 1fr; }
.security-grid.is-1-1 { grid-template-columns: 1fr 1fr; }

/* "Atnaujinta YYYY-MM-DD, Vilnius." meta line under the page title */
.legal-updated-meta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}

/* Wrapper holding 1+ doc-cards in the hero right column.
   On the salygos page two cards sit side-by-side; on the others, a single card. */
.doc-card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}

/* Doc-card — a .pricing-card variant used to advertise a downloadable PDF.
   The inner .pricing-tile inside .doc-card lays its children out as a centered column. */
.pricing-card.doc-card {
  max-width: 340px;
  width: 100%;
}
.doc-card-row .pricing-card.doc-card { flex: 1 1 240px; }

.pricing-card.doc-card .pricing-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1rem;
}

/* Smaller doc title + smaller meta line inside the doc-card.
   Without these the inherited .pricing-title is too large for the card. */
.doc-card-title {
  font-size: 15px;
  padding-bottom: 2px;
}
.doc-card-meta { font-size: 13px; }

/* The download arrow inside .btn-download — spacing from the label text.
   (display/vertical-align are not needed: .btn-download is a flex container.) */
.btn-download svg { margin-right: 0.375rem; }

/* Bottom padding on the terms/policy content section */
.legal-content { padding-bottom: 4rem; }

/* "Back to top" row at the end of the article */
.back-to-top-row {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}
.back-to-top-row .btn-soft svg { margin-right: 0.5rem; }

/* ---------- Footer Payment Strip ---------- */
.footer-payments {
  border-top: 1px solid var(--color-border);
  padding: 1.25rem 0 1.5rem;
}
.footer-payments-inner {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
}
.footer-payments-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-right: 1.25rem;
  white-space: nowrap;
  flex-shrink: 0;
}
.footer-payment-logos {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.footer-payment-logo {
  display: flex;
  align-items: center;
  opacity: 0.55;
  transition: opacity 0.2s ease;
  filter: grayscale(100%);
}
.footer-payment-logo:hover {
  opacity: 0.85;
  filter: grayscale(0%);
}
/* Light mode: dark logos on light surface — keep as-is */
.footer-payment-logo img {
  height: 22px;
  width: auto;
  display: block;
}
/* PayPal uses its own dark blue, keep it */
.footer-payment-logo.logo-paypal img { height: 20px; }
/* Paysera logo is white — invert in light mode */
.footer-payment-logo.logo-paysera img {
  filter: invert(1) brightness(0.45);
  height: 20px;
}
@media (prefers-color-scheme: dark) {
  /* Dark mode: invert black logos to white */
  .footer-payment-logo.logo-paypal img,
  .footer-payment-logo.logo-stripe img {
    filter: invert(1) brightness(0.9);
  }
  /* Paysera is already white — un-invert */
  .footer-payment-logo.logo-paysera img {
    filter: none;
    height: 20px;
  }
}
/* Dark mode via data attribute (in case site uses JS toggle) */
[data-theme="dark"] .footer-payment-logo.logo-paypal img,
[data-theme="dark"] .footer-payment-logo.logo-stripe img {
  filter: invert(1) brightness(0.9);
}
[data-theme="dark"] .footer-payment-logo.logo-paysera img {
  filter: none;
}