/* ==========================================================================
   IVDS Cloud — site stylesheet
   Mirrors the customer panel design system (vm.ivds.ir) so the site and the
   panel read as one product.

   Signature: the rack unit. A VPS is measured in U, so every price and spec is
   set in a hairline instrument face with a small engraved unit beside it, the
   way specs are silkscreened on rack hardware. Plan cards carry a U-ruler on
   their leading edge.

   No framework, no jQuery, no build step. One file.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  color-scheme: light;

  --ivds-ink:         #0A1017;
  --ivds-paper:       #F5F7FA;
  --ivds-surface:     #FFFFFF;
  --ivds-surface-2:   #EDF1F6;
  --ivds-line:        #DCE3EC;
  --ivds-line-soft:   #EAF0F6;

  --ivds-text:        #101A26;
  --ivds-muted:       #5B6B7F;
  --ivds-faint:       #8695A6;

  --ivds-signal:      #0EA5E9;
  --ivds-signal-deep: #0369A1;
  --ivds-signal-wash: #E7F6FE;

  --ivds-good:        #0E9F6E;
  --ivds-good-wash:   #E6F7F1;
  --ivds-warn:        #D97706;
  --ivds-warn-wash:   #FEF3E2;
  --ivds-bad:         #DC2626;
  --ivds-bad-wash:    #FDECEC;

  --ivds-r-xs: 6px;
  --ivds-r-sm: 10px;
  --ivds-r:    14px;
  --ivds-r-lg: 20px;

  --ivds-shadow-1: 0 1px 2px rgba(16, 26, 38, .05);
  --ivds-shadow-2: 0 10px 30px -18px rgba(16, 26, 38, .35);
  --ivds-shadow-3: 0 30px 60px -30px rgba(16, 26, 38, .45);

  --ivds-sans: 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif;
  --ivds-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, Consolas, monospace;

  --ivds-wrap: 1180px;
  --ivds-top-h: 64px;
  --ivds-gutter: 1rem;
}

/* ------------------------------------------------------------------ fonts */
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Vazirmatn';
  src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--ivds-sans);
  font-size: 15px;
  line-height: 1.8;
  color: var(--ivds-text);
  background: var(--ivds-paper);
  letter-spacing: -.003em;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#content, .site-main { flex: 1 0 auto; }

img, svg, video, canvas { max-width: 100%; height: auto; }
svg { display: block; }
figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

/* ----------------------------------------------------------------- layouts */
.ivds-wrap {
  width: 100%;
  max-width: var(--ivds-wrap);
  margin-inline: auto;
  padding-inline: var(--ivds-gutter);
  /* max-width alone does not exclude the padding: with box-sizing on the
     global rule both fit, but an explicit cap keeps the header honest when a
     legacy stylesheet changes box-sizing. */
  box-sizing: border-box;
}

/* The page container. Without the max-width the sections stretch across the
   whole viewport and every heading touches an edge. */
.ivds-main {
  width: 100%;
  max-width: var(--ivds-wrap);
  margin-inline: auto;
  padding: 2.2rem var(--ivds-gutter) 3.6rem;
}
.ivds-main--flush { padding-block: 0 3.6rem; }

.ivds-section { padding-block: clamp(2.2rem, 1.4rem + 3vw, 4rem); }
.ivds-section--tight { padding-block: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); }
.ivds-section--surface { background: var(--ivds-surface); border-block: 1px solid var(--ivds-line-soft); }

.ivds-sechead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem 1.5rem;
  flex-wrap: wrap;
  margin-bottom: clamp(1.1rem, .8rem + 1vw, 1.9rem);
}
.ivds-sechead__txt { max-width: 62ch; }
.ivds-sechead h2 { margin: 0 0 .35rem; }
.ivds-sechead p { margin: 0; color: var(--ivds-muted); font-size: .96rem; }
.ivds-sechead__link {
  font-size: .88rem;
  font-weight: 700;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}
.ivds-sechead__link::after { content: "←"; font-family: var(--ivds-mono); }

/* ------------------------------------------------------------- typography */
h1, h2, h3, h4, h5, h6,
.ivds-h1, .ivds-h2, .ivds-h3 {
  font-weight: 700;
  line-height: 1.45;
  letter-spacing: -.018em;
  color: var(--ivds-text);
  margin: 0 0 .6em;
}

h1, .ivds-h1 { font-size: clamp(1.65rem, 1.2rem + 1.9vw, 2.5rem); line-height: 1.32; }
h2, .ivds-h2 { font-size: clamp(1.3rem, 1.08rem + 1vw, 1.75rem); }
h3, .ivds-h3 { font-size: clamp(1.12rem, 1.02rem + .4vw, 1.28rem); }
h4 { font-size: 1.06rem; }
h5 { font-size: .98rem; }
h6 { font-size: .92rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--ivds-signal-deep); text-decoration: none; transition: color .16s ease; }
a:hover { color: var(--ivds-signal); }

strong, b { font-weight: 700; }
small { font-size: .86em; }

hr, .ivds-divider {
  border: 0;
  border-top: 1px solid var(--ivds-line);
  margin: 1.6rem 0;
  opacity: 1;
}

blockquote {
  margin: 1.6rem 0;
  padding: .2rem 1.1rem;
  border-inline-start: 3px solid var(--ivds-signal);
  color: var(--ivds-muted);
  font-size: 1.02rem;
}
blockquote cite { display: block; margin-top: .6rem; font-size: .86rem; color: var(--ivds-faint); font-style: normal; }

code, kbd, samp, pre {
  font-family: var(--ivds-mono);
  direction: ltr;
  unicode-bidi: isolate;
}
code {
  font-size: .87em;
  background: var(--ivds-surface-2);
  border: 1px solid var(--ivds-line-soft);
  border-radius: var(--ivds-r-xs);
  padding: .1em .4em;
}
pre {
  background: var(--ivds-ink);
  color: #D7E3F0;
  border-radius: var(--ivds-r);
  padding: 1rem 1.15rem;
  overflow-x: auto;
  font-size: .85rem;
  line-height: 1.75;
  margin: 1.5rem 0;
  text-align: left;
}
pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; }

/* the instrument face */
.ivds-num {
  font-family: var(--ivds-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.02em;
  direction: ltr;
  unicode-bidi: isolate;
  display: inline-block;
}
.ivds-unit {
  font-family: var(--ivds-sans);
  font-size: .62em;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ivds-faint);
  margin-inline-start: .28em;
  white-space: nowrap;
}
.ivds-eyebrow {
  font-size: .8rem;
  font-weight: 700;
  color: var(--ivds-signal-deep);
  margin: 0 0 .4rem;
}
.ivds-lede { color: var(--ivds-muted); font-size: 1.04rem; max-width: 58ch; }
.ivds-muted { color: var(--ivds-muted); }
.ivds-faint { color: var(--ivds-faint); }
.ivds-small { font-size: .87rem; }
.ivds-tiny  { font-size: .78rem; }
.ivds-mono  { font-family: var(--ivds-mono); }
.ivds-ltr   { direction: ltr; text-align: start; unicode-bidi: isolate; }
.ivds-nowrap { white-space: nowrap; }

/* ---------------------------------------------------------------- surfaces */
.ivds-card {
  background: var(--ivds-surface);
  border: 1px solid var(--ivds-line);
  border-radius: var(--ivds-r);
  box-shadow: var(--ivds-shadow-1);
}
.ivds-card--pad { padding: 1.2rem 1.3rem; }

.ivds-panel {
  background: var(--ivds-surface);
  border: 1px solid var(--ivds-line);
  border-radius: var(--ivds-r-lg);
  box-shadow: var(--ivds-shadow-2);
}

/* dotted spec leader, like a silkscreened label */
.ivds-spec { display: flex; align-items: baseline; gap: .6rem; padding: .34rem 0; }
.ivds-spec__k { color: var(--ivds-muted); font-size: .88rem; white-space: nowrap; }
.ivds-spec__fill { flex: 1 1 auto; border-bottom: 1px dotted var(--ivds-line); transform: translateY(-.28em); min-width: 1.5rem; }
.ivds-spec__v { font-weight: 700; font-size: .92rem; white-space: nowrap; }

/* ----------------------------------------------------------------- buttons */
.ivds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  font-family: inherit;
  font-size: .94rem;
  font-weight: 700;
  line-height: 1.4;
  padding: .64rem 1.15rem;
  border-radius: var(--ivds-r-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease,
              transform .12s ease, box-shadow .16s ease;
  -webkit-tap-highlight-color: transparent;
}
.ivds-btn:active { transform: translateY(1px); }
.ivds-btn:focus-visible { outline: 2px solid var(--ivds-signal); outline-offset: 2px; }

.ivds-btn--primary {
  background: var(--ivds-signal);
  border-color: var(--ivds-signal);
  color: #fff;
  box-shadow: 0 6px 18px -10px rgba(14, 165, 233, .9);
}
.ivds-btn--primary:hover { background: var(--ivds-signal-deep); border-color: var(--ivds-signal-deep); color: #fff; }

.ivds-btn--ink { background: var(--ivds-ink); border-color: var(--ivds-ink); color: #fff; }
.ivds-btn--ink:hover { background: #16202C; border-color: #16202C; color: #fff; }

.ivds-btn--ghost {
  background: transparent;
  border-color: var(--ivds-line);
  color: var(--ivds-text);
}
.ivds-btn--ghost:hover { background: var(--ivds-surface-2); color: var(--ivds-text); }

/* On the dark topbar the ghost variant must invert, or it disappears:
   --ivds-text is near-black on a near-black background. */
.ivds-top .ivds-btn--ghost {
  border-color: rgba(255, 255, 255, .22);
  color: #DCE6F1;
}
.ivds-top .ivds-btn--ghost:hover {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .38);
  color: #fff;
}

.ivds-btn--onink {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
}
.ivds-btn--onink:hover { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); color: #fff; }

.ivds-btn--block { width: 100%; }
.ivds-btn--sm { font-size: .84rem; padding: .4rem .78rem; border-radius: var(--ivds-r-xs); }
.ivds-btn--lg { font-size: 1rem; padding: .86rem 1.5rem; border-radius: var(--ivds-r); }

/* ------------------------------------------------------------------ topbar */
.ivds-top {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--ivds-ink);
  color: #E8EEF6;
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

.ivds-top__in {
  max-width: var(--ivds-wrap);
  margin-inline: auto;
  padding-inline: var(--ivds-gutter);
  min-height: var(--ivds-top-h);
  display: flex;
  align-items: center;
  gap: .65rem;
}

.ivds-brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: #fff;
  font-weight: 700;
  font-size: 1.02rem;
  letter-spacing: -.02em;
  flex: 0 1 auto;
  min-width: 0;
}
.ivds-brand:hover { color: #fff; }
.ivds-brand img {
  height: 42px;
  width: auto;
  max-width: 190px;
  object-fit: contain;
  display: block;
}
.ivds-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* mark: a rack slot with a live LED */
.ivds-mark {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .22);
  background: linear-gradient(160deg, #14243A, #0A111B);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  position: relative;
}
.ivds-mark::before,
.ivds-mark::after {
  content: "";
  position: absolute;
  inset-inline: 5px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .18);
}
.ivds-mark::before { top: 8px; }
.ivds-mark::after  { bottom: 8px; }
.ivds-mark i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ivds-signal);
  box-shadow: 0 0 9px 1px rgba(14, 165, 233, .8);
  position: relative;
  z-index: 1;
}

.ivds-nav { margin-inline-start: auto; }
.ivds-nav ul {
  display: flex;
  align-items: center;
  gap: .1rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ivds-nav li { position: relative; }
.ivds-nav a {
  display: block;
  padding: .5rem .7rem;
  color: #B7C6D6;
  font-size: .9rem;
  font-weight: 700;
  border-radius: var(--ivds-r-xs);
  white-space: nowrap;
  transition: background-color .14s ease, color .14s ease;
}
.ivds-nav a:hover,
.ivds-nav .current-menu-item > a,
.ivds-nav .current-menu-ancestor > a,
.ivds-nav .current_page_item > a { color: #fff; background: rgba(255, 255, 255, .08); }

/* dropdowns */
.ivds-nav ul ul {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  min-width: 230px;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
  background: var(--ivds-surface);
  border: 1px solid var(--ivds-line);
  border-radius: var(--ivds-r-sm);
  box-shadow: var(--ivds-shadow-3);
  padding: .35rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .14s ease, transform .14s ease, visibility .14s;
  z-index: 20;
}
.ivds-nav li:hover > ul,
.ivds-nav li:focus-within > ul { opacity: 1; visibility: visible; transform: none; }
.ivds-nav ul ul a { color: var(--ivds-text); font-weight: 400; padding: .48rem .7rem; }
.ivds-nav ul ul a:hover { background: var(--ivds-surface-2); color: var(--ivds-signal-deep); }
.ivds-nav ul ul ul { top: -.35rem; inset-inline-start: 100%; }

.ivds-top__cta { display: flex; align-items: center; gap: .4rem; margin-inline-start: .5rem; }
.ivds-top__cta .ivds-btn { padding: .46rem .9rem; font-size: .87rem; }

/* burger */
.ivds-burger {
  display: none;
  width: 42px;
  height: 42px;
  margin-inline-start: auto;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--ivds-r-xs);
  background: transparent;
  cursor: pointer;
  padding: 0;
  place-items: center;
}
.ivds-burger span,
.ivds-burger span::before,
.ivds-burger span::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: #DCE6F1;
  transition: transform .18s ease, opacity .18s ease;
}
.ivds-burger span { position: relative; }
.ivds-burger span::before,
.ivds-burger span::after { content: ""; position: absolute; inset-inline-start: 0; }
.ivds-burger span::before { top: -6px; }
.ivds-burger span::after  { top: 6px; }
.nav-open .ivds-burger span { transform: rotate(45deg); }
.nav-open .ivds-burger span::before { transform: rotate(-90deg) translateX(6px); opacity: 0; }
.nav-open .ivds-burger span::after  { transform: rotate(-90deg) translateX(-6px); }

@media (max-width: 991px) {
  .ivds-burger { display: grid; }
  .ivds-nav {
    display: none;
    position: absolute;
    inset-inline: 0;
    top: var(--ivds-top-h);
    background: var(--ivds-ink);
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    padding: .5rem var(--ivds-gutter) 1rem;
    margin: 0;
    max-height: calc(100vh - var(--ivds-top-h));
    overflow-y: auto;
  }
  .nav-open .ivds-nav { display: block; }
  .ivds-nav ul { flex-direction: column; align-items: stretch; gap: 1px; }
  .ivds-nav a { padding: .7rem .6rem; font-size: .95rem; }
  .ivds-nav ul ul {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    background: rgba(255, 255, 255, .04);
    border: 0;
    box-shadow: none;
    padding: .2rem 0 .2rem 0;
    margin-inline-start: .8rem;
  }
  .ivds-nav ul ul a { color: #A9B8C9; padding: .5rem .6rem; }
  .ivds-nav ul ul a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
  .ivds-top__cta { display: none; }
  .ivds-top__in { position: relative; }
}

/* -------------------------------------------------------------------- hero */
.ivds-hero {
  position: relative;
  overflow: hidden;
  border-radius: var(--ivds-r-lg);
  background:
    radial-gradient(120% 130% at 88% -10%, rgba(14, 165, 233, .30) 0%, transparent 55%),
    linear-gradient(150deg, #0A1017 0%, #101B29 58%, #0B1520 100%);
  color: #E8EEF6;
  padding: clamp(1.7rem, 1rem + 3vw, 3.4rem);
  border: 1px solid rgba(255, 255, 255, .07);
}

/* faint rack grid */
.ivds-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to left, rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: linear-gradient(150deg, #000 10%, transparent 72%);
  -webkit-mask-image: linear-gradient(150deg, #000 10%, transparent 72%);
  pointer-events: none;
}

.ivds-hero__in {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.4rem, 1rem + 3vw, 3rem);
  align-items: center;
}
.ivds-hero__in--single { grid-template-columns: minmax(0, 1fr); }

.ivds-hero h1 { color: #fff; margin-bottom: .7rem; max-width: 20ch; }
/* Each half is its own line; without this the second phrase wraps mid-word
   and the right-aligned RTL line looks broken. */
.ivds-hero h1 span,
.ivds-hero h1 em { display: block; }
.ivds-hero h1 em { font-style: normal; color: var(--ivds-signal); }
.ivds-hero p { color: #A9B8C9; max-width: 48ch; font-size: 1.02rem; }

/* Pricing section grouping */
.ivds-plans-block { margin-bottom: 1.7rem; }
.ivds-plans-block:last-of-type { margin-bottom: .9rem; }
.ivds-plans-block__title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--ivds-muted);
  margin: 0 0 .8rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.ivds-plans-block__count {
  font-family: var(--ivds-mono);
  font-size: .74rem;
  font-weight: 700;
  color: var(--ivds-signal-deep);
  background: var(--ivds-signal-wash);
  border-radius: 999px;
  padding: .06rem .48rem;
  line-height: 1.8;
}
.plans-note { margin-top: .4rem; }

.ivds-hero__cta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.6rem; }

.ivds-hero__specs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem 2.2rem;
  margin-top: 2rem;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.ivds-hero__spec b {
  display: block;
  font-family: var(--ivds-mono);
  font-size: 1.35rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.25;
  direction: ltr;
  unicode-bidi: isolate;
}
.ivds-hero__spec span { font-size: .8rem; color: #93A4B8; }

/* the rack illustration */
.ivds-rack {
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--ivds-r);
  background: linear-gradient(170deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .02));
  padding: .7rem;
  display: grid;
  gap: .38rem;
}
.ivds-rack__u {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: rgba(4, 9, 15, .55);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 7px;
  padding: .46rem .6rem;
  font-family: var(--ivds-mono);
  font-size: .72rem;
  color: #8FA5BC;
  direction: ltr;
}
.ivds-rack__u b { color: #E8EEF6; font-weight: 700; }
.ivds-rack__led {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ivds-good);
  box-shadow: 0 0 8px rgba(14, 159, 110, .9);
  flex: 0 0 auto;
}
.ivds-rack__led--busy { background: var(--ivds-signal); box-shadow: 0 0 8px rgba(14, 165, 233, .9); }
.ivds-rack__led--idle { background: #3C4C5E; box-shadow: none; }
.ivds-rack__bar {
  flex: 1 1 auto;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
  min-width: 20px;
}
.ivds-rack__bar i { display: block; height: 100%; border-radius: 2px; background: var(--ivds-signal); }

@media (max-width: 860px) {
  .ivds-hero__in { grid-template-columns: minmax(0, 1fr); }
  .ivds-rack { order: 2; }
}

/* -------------------------------------------------------------- trust strip */
.ivds-trust {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ivds-line);
  border: 1px solid var(--ivds-line);
  border-radius: var(--ivds-r);
  overflow: hidden;
  margin-top: 1rem;
}
.ivds-trust__cell { background: var(--ivds-surface); padding: 1.05rem 1.15rem; display: flex; gap: .8rem; align-items: flex-start; }
.ivds-trust__cell b { display: block; font-size: .93rem; }
.ivds-trust__cell span { font-size: .82rem; color: var(--ivds-muted); }
.ivds-ico {
  width: 34px;
  height: 34px;
  border-radius: var(--ivds-r-xs);
  background: var(--ivds-signal-wash);
  color: var(--ivds-signal-deep);
  display: grid;
  place-items: center;
  flex: 0 0 auto;
}
.ivds-ico svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; }
@media (max-width: 760px) { .ivds-trust { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------- plan cards */
/* Explicit breakpoints, not auto-fit: auto-fit fits five 252px cards into a
   1180px container, which leaves the last card stranded on its own row. */
.ivds-plans {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}
@media (max-width: 1300px) { .ivds-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .ivds-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .ivds-plans { grid-template-columns: minmax(0, 1fr); } }

/* A lone plan should not stretch into a billboard. */
@media (min-width: 992px) {
  .ivds-plans:has(> .ivds-plan:only-child) { grid-template-columns: minmax(252px, 360px); }
}

.ivds-plan {
  position: relative;
  background: var(--ivds-surface);
  border: 1px solid var(--ivds-line);
  border-radius: var(--ivds-r);
  padding: 1.2rem 1.15rem 1.15rem;
  padding-inline-start: 1.75rem; /* room for the U-ruler */
  display: flex;
  flex-direction: column;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

/* the U-ruler on the leading edge */
.ivds-plan::before {
  content: "";
  position: absolute;
  inset-block: .9rem;
  inset-inline-start: .6rem;
  width: 7px;
  border-inline-start: 1px solid var(--ivds-line);
  background-image: repeating-linear-gradient(
    to bottom,
    var(--ivds-line) 0 1px,
    transparent 1px 8px
  );
  background-size: 4px 100%;
  background-repeat: no-repeat;
  opacity: .9;
  transition: border-color .18s ease;
}

.ivds-plan:hover {
  border-color: var(--ivds-signal);
  box-shadow: var(--ivds-shadow-2);
  transform: translateY(-2px);
}
.ivds-plan:hover::before { border-inline-start-color: var(--ivds-signal); }

.ivds-plan--featured { border-color: var(--ivds-signal); box-shadow: 0 0 0 1px var(--ivds-signal), var(--ivds-shadow-2); }
.ivds-plan--featured::after {
  content: "پیشنهاد ما";
  position: absolute;
  top: -.72rem;
  inset-inline-end: 1rem;
  background: var(--ivds-signal);
  color: #fff;
  font-size: .7rem;
  font-weight: 700;
  padding: .16rem .6rem;
  border-radius: 999px;
  letter-spacing: .01em;
}

.ivds-plan__name { font-size: 1.03rem; font-weight: 700; margin: 0 0 .12rem; line-height: 1.5; }
.ivds-plan__virt {
  font-family: var(--ivds-mono);
  font-size: .72rem;
  color: var(--ivds-faint);
  text-transform: uppercase;
  letter-spacing: .06em;
  direction: ltr;
  text-align: start;
  margin-bottom: .1rem;
}

.ivds-plan__price {
  margin: .95rem 0 1.05rem;
  display: flex;
  align-items: baseline;
  gap: .3rem;
  flex-wrap: wrap;
}
.ivds-plan__price b {
  font-family: var(--ivds-mono);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -.03em;
  line-height: 1;
  color: var(--ivds-text);
  direction: ltr;
  unicode-bidi: isolate;
}
.ivds-plan__price span { font-size: .82rem; color: var(--ivds-muted); }

/* four specs, laid out like a rack label */
.ivds-plan__specs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--ivds-line-soft);
  border: 1px solid var(--ivds-line-soft);
  border-radius: var(--ivds-r-sm);
  overflow: hidden;
  margin-bottom: 1rem;
}
.ivds-plan__specs > div { background: var(--ivds-surface); padding: .55rem .7rem; }
.ivds-plan__specs b {
  display: block;
  font-family: var(--ivds-mono);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.35;
  direction: ltr;
  unicode-bidi: isolate;
}
.ivds-plan__specs span { font-size: .71rem; color: var(--ivds-faint); }

.ivds-plan__foot { margin-top: auto; }
.ivds-plan__traffic {
  font-size: .79rem;
  color: var(--ivds-muted);
  margin-bottom: .75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .35rem;
  min-height: 1.6em;
}
.ivds-plan__traffic strong {
  font-family: var(--ivds-mono);
  color: var(--ivds-text);
  white-space: nowrap;
}
/* The saving chip is the widest thing in the card; let it drop to its own
   line rather than overflow the footer. */
.ivds-plan__traffic .ivds-badge {
  font-size: .7rem;
  padding: .14rem .48rem;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------------ badges */
.ivds-badge {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  font-size: .75rem;
  font-weight: 700;
  padding: .2rem .58rem;
  border-radius: 999px;
  line-height: 1.7;
  white-space: nowrap;
}
.ivds-badge--good { background: var(--ivds-good-wash); color: var(--ivds-good); }
.ivds-badge--warn { background: var(--ivds-warn-wash); color: var(--ivds-warn); }
.ivds-badge--bad  { background: var(--ivds-bad-wash);  color: var(--ivds-bad); }
.ivds-badge--info { background: var(--ivds-signal-wash); color: var(--ivds-signal-deep); }
.ivds-badge--plain { background: var(--ivds-surface-2); color: var(--ivds-muted); }
.ivds-badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ------------------------------------------------------------- feature grid */
.ivds-feats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 1px;
  background: var(--ivds-line);
  border: 1px solid var(--ivds-line);
  border-radius: var(--ivds-r);
  overflow: hidden;
}
.ivds-feat { background: var(--ivds-surface); padding: 1.2rem 1.15rem; }
.ivds-feat h3 { font-size: .99rem; margin: .75rem 0 .35rem; }
.ivds-feat p { font-size: .87rem; color: var(--ivds-muted); margin: 0; line-height: 1.75; }

/* ----------------------------------------------------------------- OS grid */
.ivds-os {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: .5rem;
}
.ivds-os__i {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--ivds-surface);
  border: 1px solid var(--ivds-line);
  border-radius: var(--ivds-r-xs);
  padding: .55rem .65rem;
  font-size: .84rem;
  font-weight: 700;
  color: var(--ivds-text);
}
.ivds-os__i:hover { border-color: var(--ivds-signal); color: var(--ivds-signal-deep); }
.ivds-os__i i {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: var(--ivds-signal);
  flex: 0 0 auto;
  opacity: .75;
}

/* ---------------------------------------------------------------- CTAs band */
.ivds-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--ivds-r-lg);
  background:
    radial-gradient(110% 140% at 12% -20%, rgba(14, 165, 233, .28) 0%, transparent 58%),
    linear-gradient(150deg, #0A1017 0%, #101B29 60%, #0B1520 100%);
  border: 1px solid rgba(255, 255, 255, .07);
  color: #E8EEF6;
  padding: clamp(1.5rem, 1rem + 2.4vw, 2.8rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem 2rem;
  flex-wrap: wrap;
}
.ivds-band h2 { color: #fff; margin: 0 0 .35rem; }
.ivds-band p { color: #A9B8C9; margin: 0; max-width: 52ch; }
.ivds-band__cta { display: flex; gap: .55rem; flex-wrap: wrap; }

/* -------------------------------------------------------------- prose / WP */
/* ~72 characters is the readable ceiling; wider and the eye loses the line.
   Centred because the page container is wider than the measure. */
.ivds-prose {
  max-width: 74ch;
  margin-inline: auto;
  font-size: 1.01rem;
  line-height: 1.9;
}
.ivds-prose > *:first-child { margin-top: 0; }
.ivds-prose h2 { margin-top: 2.1em; }
.ivds-prose h3 { margin-top: 1.7em; }
.ivds-prose ul, .ivds-prose ol { padding-inline-start: 1.4rem; margin: 0 0 1.2em; }
.ivds-prose li { margin-bottom: .5em; }
.ivds-prose li::marker { color: var(--ivds-signal); }
.ivds-prose img { border-radius: var(--ivds-r-sm); }
.ivds-prose table, .ivds-prose .wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
  margin: 1.5rem 0;
  background: var(--ivds-surface);
}
.ivds-prose th, .ivds-prose td {
  border: 1px solid var(--ivds-line);
  padding: .62rem .8rem;
  text-align: start;
  vertical-align: top;
}
.ivds-prose th { background: var(--ivds-surface-2); font-weight: 700; }
.ivds-prose tbody tr:nth-child(even) td { background: #FBFCFE; }
.ivds-prose figcaption { font-size: .82rem; color: var(--ivds-faint); text-align: center; margin-top: .5rem; }
.ivds-prose iframe { max-width: 100%; border-radius: var(--ivds-r-sm); }
.wp-caption { max-width: 100%; }
.wp-caption-text { font-size: .82rem; color: var(--ivds-faint); text-align: center; margin-top: .4rem; }
.alignwide { max-width: min(100%, 1000px); margin-inline: auto; }
.alignfull { width: auto; max-width: none; margin-inline: calc(50% - 50vw); }
.ivds-prose .alignfull { width: calc(100% + 2 * (50vw - 50%)); }

/* Gutenberg blocks that the archive of 150 posts actually uses */
.wp-block-group { margin-bottom: 1.2em; }
.wp-block-cover { border-radius: var(--ivds-r-lg); overflow: hidden; }
.wp-block-separator { border: 0; border-top: 1px solid var(--ivds-line); margin: 2rem 0; }
.wp-block-separator.is-style-wide { border-top: 1px solid var(--ivds-line); }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: .6rem; }
.wp-block-button__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ivds-signal);
  color: #fff !important;
  font-weight: 700;
  font-size: .94rem;
  padding: .64rem 1.15rem;
  border-radius: var(--ivds-r-sm);
  text-decoration: none;
  transition: background-color .16s ease;
}
.wp-block-button__link:hover { background: var(--ivds-signal-deep); color: #fff !important; }
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent;
  border: 1px solid var(--ivds-line);
  color: var(--ivds-text) !important;
}
.wp-block-quote { border-inline-start: 3px solid var(--ivds-signal); margin: 1.6rem 0; padding-inline-start: 1.1rem; }
.wp-block-pullquote { border-block: 1px solid var(--ivds-line); padding: 1.5rem 0; text-align: center; }
.wp-block-code { background: var(--ivds-ink); color: #D7E3F0; border-radius: var(--ivds-r); padding: 1rem 1.15rem; overflow-x: auto; }

/* ------------------------------------------------------------------ entries */
.ivds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1rem;
}

.ivds-entry {
  display: flex;
  flex-direction: column;
  background: var(--ivds-surface);
  border: 1px solid var(--ivds-line);
  border-radius: var(--ivds-r);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  height: 100%;
}
.ivds-entry:hover { border-color: var(--ivds-signal); box-shadow: var(--ivds-shadow-2); transform: translateY(-2px); }

.ivds-entry__thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ivds-surface-2); }
.ivds-entry__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.ivds-entry:hover .ivds-entry__thumb img { transform: scale(1.03); }

.ivds-entry__body { padding: .95rem 1.05rem 1.05rem; display: flex; flex-direction: column; flex: 1 1 auto; }
.ivds-entry__meta {
  font-size: .76rem;
  color: var(--ivds-faint);
  display: flex;
  gap: .5rem;
  align-items: center;
  margin-bottom: .45rem;
  flex-wrap: wrap;
}
.ivds-entry__meta span + span::before { content: "·"; margin-inline-end: .5rem; color: var(--ivds-line); }
.ivds-entry__title { font-size: 1.02rem; line-height: 1.55; margin: 0 0 .45rem; }
.ivds-entry__title a { color: var(--ivds-text); }
.ivds-entry__title a:hover { color: var(--ivds-signal-deep); }
.ivds-entry__excerpt { font-size: .87rem; color: var(--ivds-muted); margin: 0 0 .9rem; line-height: 1.8; }
.ivds-entry__more { margin-top: auto; font-size: .84rem; font-weight: 700; display: inline-flex; align-items: center; gap: .3rem; }
.ivds-entry__more::after { content: "←"; font-family: var(--ivds-mono); transition: transform .16s ease; }
.ivds-entry:hover .ivds-entry__more::after { transform: translateX(-3px); }

/* --------------------------------------------------------------- single post */
.ivds-posthead { margin-bottom: 1.6rem; }
.ivds-posthead h1 { margin-bottom: .6rem; }
.ivds-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .9rem;
  font-size: .82rem;
  color: var(--ivds-faint);
  align-items: center;
}
.ivds-meta a { color: var(--ivds-muted); }
.ivds-meta a:hover { color: var(--ivds-signal-deep); }
.ivds-thumb { margin: 0 0 1.8rem; border-radius: var(--ivds-r-lg); overflow: hidden; border: 1px solid var(--ivds-line); }
.ivds-thumb img { width: 100%; display: block; }

.ivds-crumbs { font-size: .8rem; color: var(--ivds-faint); margin-bottom: 1.1rem; display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.ivds-crumbs a { color: var(--ivds-muted); }
.ivds-crumbs a:hover { color: var(--ivds-signal-deep); }
.ivds-crumbs .sep { color: var(--ivds-line); }

.ivds-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1.8rem; }
.ivds-tags a {
  font-size: .78rem;
  font-weight: 700;
  color: var(--ivds-muted);
  background: var(--ivds-surface);
  border: 1px solid var(--ivds-line);
  border-radius: 999px;
  padding: .24rem .7rem;
}
.ivds-tags a:hover { border-color: var(--ivds-signal); color: var(--ivds-signal-deep); }

/* prev / next */
.ivds-adj { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-top: 2.2rem; }
.ivds-adj a {
  display: block;
  background: var(--ivds-surface);
  border: 1px solid var(--ivds-line);
  border-radius: var(--ivds-r);
  padding: .9rem 1rem;
  color: var(--ivds-text);
}
.ivds-adj a:hover { border-color: var(--ivds-signal); }
.ivds-adj span { display: block; font-size: .75rem; color: var(--ivds-faint); margin-bottom: .2rem; }
.ivds-adj b { font-size: .9rem; line-height: 1.6; }
.ivds-adj .next { text-align: end; }
@media (max-width: 620px) { .ivds-adj { grid-template-columns: 1fr; } }

/* layout with sidebar */
.ivds-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 2rem;
  align-items: start;
}
/* No widgets in the sidebar means no sidebar column — otherwise the article
   is squeezed into a 2/3 track with an empty gutter beside it. */
.ivds-split--solo { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 991px) { .ivds-split { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------ widgets/foot */
.ivds-widgets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 1.6rem 2rem;
}

.ivds-widget { font-size: .88rem; }
.ivds-widget h2, .ivds-widget .widget-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--ivds-text);
  margin: 0 0 .8rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--ivds-line-soft);
}
.ivds-widget ul { list-style: none; margin: 0; padding: 0; }
.ivds-widget li { margin-bottom: .45rem; }
.ivds-widget li a { color: var(--ivds-muted); }
.ivds-widget li a:hover { color: var(--ivds-signal-deep); }
.ivds-widget select {
  width: 100%;
  padding: .5rem .65rem;
  border: 1px solid var(--ivds-line);
  border-radius: var(--ivds-r-xs);
  background: var(--ivds-surface);
}
.ivds-widget img { max-width: 100%; }

/* the contact widget the site currently uses */
.ivds-contact { display: grid; gap: .7rem; }
.ivds-field { display: flex; gap: .6rem; align-items: flex-start; }
.ivds-ico-mail  { background-image: none; }
.ivds-txt { font-size: .86rem; line-height: 1.7; }
.ivds-label { display: block; font-size: .73rem; color: var(--ivds-faint); }
.ivds-txt a, .ivds-addr { color: var(--ivds-text); font-weight: 700; }

/* the trust badges sit in a widget — keep them tidy, never crop them */
.ivds-widget .custom-html-widget { line-height: 0; }
.ivds-widget .custom-html-widget img { border-radius: var(--ivds-r-xs); }
.ivds-widget .custom-html-widget a { display: inline-block; }

/* ------------------------------------------------------------------ footer */
.ivds-foot {
  background: var(--ivds-ink);
  color: #A9B8C9;
  padding-block: 2.4rem 1.2rem;
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, .07);
}
.ivds-foot a { color: #A9B8C9; }
.ivds-foot a:hover { color: #fff; }
.ivds-foot .ivds-widgets { border-bottom: 1px solid rgba(255, 255, 255, .09); padding-bottom: 1.8rem; }
.ivds-foot .ivds-widget h2,
.ivds-foot .ivds-widget .widget-title {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, .1);
}
.ivds-foot .ivds-widget li a:hover { color: #fff; }
.ivds-foot .ivds-label { color: #7A8B9F; }
.ivds-foot .ivds-txt a, .ivds-foot .ivds-addr { color: #DCE6F1; }
.ivds-foot .ivds-ico { background: rgba(14, 165, 233, .14); color: #6EC9F2; }

.ivds-foot__bar {
  display: flex;
  flex-wrap: wrap;
  gap: .7rem 1.4rem;
  align-items: center;
  justify-content: space-between;
  padding-top: 1.2rem;
  font-size: .82rem;
}
.ivds-foot__bar p { margin: 0; }
.ivds-foot__bar .site-info a { font-weight: 700; }
.ivds-social { display: flex; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.ivds-social a {
  width: 34px;
  height: 34px;
  border-radius: var(--ivds-r-xs);
  border: 1px solid rgba(255, 255, 255, .14);
  display: grid;
  place-items: center;
  font-size: .75rem;
  font-weight: 700;
  color: #A9B8C9;
}
.ivds-social a:hover { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .3); }

/* ------------------------------------------------------------------- forms */
.ivds-field-row { margin-bottom: 1rem; }
.ivds-label-row { display: block; font-size: .87rem; font-weight: 700; color: var(--ivds-muted); margin-bottom: .4rem; }
.ivds-input, .ivds-select, .ivds-textarea,
input[type="text"], input[type="email"], input[type="url"], input[type="tel"],
input[type="number"], input[type="search"], input[type="password"], select, textarea {
  width: 100%;
  max-width: 100%;
  background: var(--ivds-surface);
  border: 1px solid var(--ivds-line);
  border-radius: var(--ivds-r-sm);
  padding: .62rem .85rem;
  font-size: .95rem;
  color: var(--ivds-text);
  transition: border-color .16s ease, box-shadow .16s ease;
  min-height: 44px;
}
textarea { min-height: 120px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--ivds-faint); }
input:focus, select:focus, textarea:focus {
  outline: 0;
  border-color: var(--ivds-signal);
  box-shadow: 0 0 0 .2rem rgba(14, 165, 233, .16);
}
input[type="submit"], button[type="submit"] {
  width: auto;
  background: var(--ivds-signal);
  border-color: var(--ivds-signal);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  padding: .64rem 1.3rem;
}
input[type="submit"]:hover, button[type="submit"]:hover { background: var(--ivds-signal-deep); border-color: var(--ivds-signal-deep); }

/* search form */
.ivds-search { display: flex; gap: .5rem; }
.ivds-search input[type="search"] { flex: 1 1 auto; }
.ivds-search button {
  flex: 0 0 auto;
  width: auto;
  background: var(--ivds-signal);
  border-color: var(--ivds-signal);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  padding: .6rem 1.1rem;
  border-radius: var(--ivds-r-sm);
  border: 1px solid var(--ivds-signal);
}

/* ------------------------------------------------------------------ tables */
.ivds-table-wrap { overflow-x: auto; border: 1px solid var(--ivds-line); border-radius: var(--ivds-r); background: var(--ivds-surface); }
.ivds-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.ivds-table th, .ivds-table td { padding: .7rem .85rem; text-align: start; border-bottom: 1px solid var(--ivds-line-soft); }
.ivds-table th { background: var(--ivds-surface-2); font-weight: 700; white-space: nowrap; }
.ivds-table tr:last-child td { border-bottom: 0; }

/* ------------------------------------------------------------------ alerts */
.ivds-alert { border-radius: var(--ivds-r); padding: .85rem 1rem; font-size: .89rem; border: 1px solid; display: flex; gap: .6rem; }
.ivds-alert--info { background: var(--ivds-signal-wash); border-color: #BCE6F9; color: #075066; }
.ivds-alert--warn { background: var(--ivds-warn-wash); border-color: #F6DDB4; color: #7A4306; }
.ivds-alert--good { background: var(--ivds-good-wash); border-color: #BFEBD9; color: #075B3F; }

/* ------------------------------------------------------------- pagination */
.ivds-pager { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 2.2rem; align-items: center; }
.ivds-pager .page-numbers {
  display: inline-grid;
  place-items: center;
  min-width: 40px;
  height: 40px;
  padding: 0 .7rem;
  border-radius: var(--ivds-r-xs);
  border: 1px solid var(--ivds-line);
  background: var(--ivds-surface);
  color: var(--ivds-text);
  font-size: .88rem;
  font-weight: 700;
  font-family: var(--ivds-mono);
}
.ivds-pager .page-numbers:hover { border-color: var(--ivds-signal); color: var(--ivds-signal-deep); }
.ivds-pager .page-numbers.current { background: var(--ivds-ink); border-color: var(--ivds-ink); color: #fff; }
.ivds-pager .page-numbers.dots { border: 0; background: transparent; }

/* --------------------------------------------------------------- empty/404 */
.ivds-empty { text-align: center; padding: clamp(2rem, 1rem + 5vw, 4.5rem) 1rem; }
.ivds-empty__code {
  font-family: var(--ivds-mono);
  font-size: clamp(3.2rem, 2rem + 8vw, 6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--ivds-line);
  letter-spacing: -.04em;
  direction: ltr;
}
.ivds-empty h1 { margin: .8rem 0 .5rem; }
.ivds-empty p { color: var(--ivds-muted); max-width: 46ch; margin-inline: auto; }
.ivds-empty__cta { margin-top: 1.4rem; display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }

/* ----------------------------------------------------------------- comments */
.ivds-comments { margin-top: 2.6rem; border-top: 1px solid var(--ivds-line); padding-top: 1.8rem; }
.ivds-comments .comment-list { list-style: none; margin: 0; padding: 0; }
.ivds-comments .comment-list ol { list-style: none; padding-inline-start: 1.6rem; }
.ivds-comments .comment-body { background: var(--ivds-surface); border: 1px solid var(--ivds-line); border-radius: var(--ivds-r); padding: .9rem 1rem; margin-bottom: .8rem; }
.ivds-comments .comment-meta { font-size: .78rem; color: var(--ivds-faint); margin-bottom: .4rem; }
.ivds-comments .comment-author img { border-radius: 50%; margin-inline-end: .4rem; vertical-align: middle; }
.ivds-comments .reply { font-size: .82rem; font-weight: 700; }

/* ---------------------------------------------------------------- utilities */
.ivds-stack-sm > * + * { margin-top: .5rem; }
.ivds-stack > * + * { margin-top: 1rem; }
.ivds-stack-lg > * + * { margin-top: 1.5rem; }
.ivds-cluster { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.ivds-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ivds-hide-sm { display: initial; }
.ivds-only-sm { display: none; }
@media (max-width: 760px) {
  .ivds-hide-sm { display: none !important; }
  .ivds-only-sm { display: initial; }
}

/* ---------------------------------------------------- legacy content guard */
/* The previous theme also shipped a Custom CSS blob (wp-custom-css) written
   against its own markup: fixed pixel widths, full-bleed blocks, absolute
   offsets. It loads on every page and cannot simply be deleted, because the
   old theme is still one click away. Instead, hold the page to the viewport
   here and let the container win. */
html, body { max-width: 100%; }

.ivds-main,
.ivds-wrap,
.ivds-top,
.ivds-foot {
  min-width: 0;
}

/* Anything the legacy CSS parked at a fixed width inside the content column
   is bounded rather than allowed to push the page sideways. */
.ivds-main img,
.ivds-main iframe,
.ivds-main video,
.ivds-main table {
  max-width: 100%;
}

/* Pages written for the old theme carry inline `width:100vw`, negative margins
   and fixed pixel widths. Those were authored for a full-bleed layout and
   overflow this container. Rather than editing 72 pages by hand, bound the
   rendered content here — the markup and the database stay as they are. */
.ivds-prose,
.ivds-prose > div,
.ivds-widget .custom-html-widget {
  overflow-wrap: anywhere;
  min-width: 0;
}
.ivds-prose [style*="100vw"],
.ivds-prose [style*="width: 100vw"] {
  width: 100% !important;
  max-width: 100% !important;
}
.ivds-prose img,
.ivds-prose iframe,
.ivds-prose table,
.ivds-widget img {
  max-width: 100%;
}
.ivds-prose table { display: block; overflow-x: auto; }

/* ---------------------------------------------------------- width guard */
/* The old theme's Customizer CSS sets fixed widths and .container margins that
   push the body wider than the viewport on phones. Nothing in THIS theme needs
   to exceed the viewport, so clamp it here and let the column inset win. */
.ivds-top, .ivds-foot, .ivds-main, .ivds-hero, .ivds-band,
.ivds-trust, .ivds-feats, .ivds-plans, .ivds-plan,
.ivds-section, .ivds-grid, .ivds-entry, .ivds-os {
  max-width: 100%;
}
.ivds-section, .ivds-grid, .ivds-plans, .ivds-feats, .ivds-os { box-sizing: border-box; }

@media (max-width: 560px) {
  .ivds-main { padding-inline: .85rem; }
  .ivds-top__in { padding-inline: .85rem; }
  .ivds-hero { padding: 1.15rem; }
  .ivds-plan { padding: 1rem .9rem 1rem 1.5rem; }
  .ivds-plan__price b { font-size: 1.35rem; }
  .ivds-sechead h2, .ivds-hero h1 { overflow-wrap: anywhere; }
}

/* WordPress core helpers */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  word-wrap: normal !important;
}
.screen-reader-text:focus {
  clip: auto;
  clip-path: none;
  height: auto;
  width: auto;
  background: var(--ivds-surface);
  border-radius: var(--ivds-r-xs);
  box-shadow: var(--ivds-shadow-2);
  color: var(--ivds-text);
  display: block;
  font-size: .9rem;
  font-weight: 700;
  inset-block-start: 6px;
  inset-inline-start: 6px;
  padding: .7rem 1rem;
  z-index: 100000;
}
.alignleft { float: left; margin: 0 1.2rem 1rem 0; }
.alignright { float: right; margin: 0 0 1rem 1.2rem; }
.aligncenter { display: block; margin-inline: auto; }
.sticky .ivds-entry { border-color: var(--ivds-signal); }
.bypostauthor > .comment-body { border-color: var(--ivds-signal); }

/* --------------------------------------------------------------- responsive */
@media (max-width: 991px) {
  :root { --ivds-gutter: .9rem; }
  .ivds-main { padding-block: 1.6rem 2.6rem; }
  .ivds-section { padding-block: 2rem; }
}

@media (max-width: 560px) {
  body { font-size: 14.5px; }
  .ivds-hero { border-radius: var(--ivds-r); }
  .ivds-hero__cta .ivds-btn { flex: 1 1 100%; justify-content: center; }
  .ivds-plan { padding-inline-start: 1.55rem; }
  .ivds-grid { grid-template-columns: 1fr; }
  .ivds-band { border-radius: var(--ivds-r); }
  .ivds-band__cta { width: 100%; }
  .ivds-band__cta .ivds-btn { flex: 1 1 auto; justify-content: center; }
}

/* ------------------------------------------------------------- a11y/motion */
:focus-visible { outline: 2px solid var(--ivds-signal); outline-offset: 2px; border-radius: 4px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* print: invoices and plans should come out clean */
@media print {
  .ivds-top, .ivds-foot, .ivds-burger, .ivds-hero__cta, .ivds-adj, .ivds-comments { display: none !important; }
  body { background: #fff; color: #000; }
  .ivds-card, .ivds-plan, .ivds-entry { border-color: #ccc; box-shadow: none; }
  a { color: #000; text-decoration: underline; }
}