/* ==========================================================================
   Yekshop marketing site — single stylesheet.
   Everything you normally want to change lives in the :root block below.
   Layout uses CSS logical properties, so the RTL/LTR flip is one attribute.
   ========================================================================== */

/* IRANSansX, the font of the platform's sign-in pages and seller panel, so the
   site and the panel read as one place. One variable file for every weight; its
   Latin digits stay Latin. Vazirmatn stands behind it, as it does there. */
@font-face {
  font-family: IRANSansX;
  src: url(../fonts/IRANSansX.woff2) format('woff2');
  font-weight: 100 1000;
  font-display: swap;
}

@font-face {
  font-family: Vazirmatn;
  src: url(../fonts/Vazirmatn.woff2) format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/* --- Design tokens -------------------------------------------------------- */
:root {
  /* Surfaces */
  --canvas: #f8fcfc;        /* page background — cool white */
  --paper: #ffffff;         /* cards, header, inputs */
  --sand: #edf8f8;          /* quiet fills, alternating bands */

  /* Text */
  --ink: #152221;           /* headings, primary text */
  --ink-2: #375c64;         /* body text on paper */
  --muted: #4d6c73;         /* secondary text, captions */

  /* Lines */
  --line: #dceeed;          /* default border */
  --line-2: #bfd9d8;        /* stronger border, hover */

  /* Accent — approved Design D deep teal and mint. */
  --accent: #005452;
  --accent-dark: #003f3e;   /* hover / active */
  --accent-soft: #e1f5f3;   /* tinted backgrounds */
  --accent-tint: #c7efeb;   /* headline highlight */

  /* Secondary accent — saffron, used sparingly */
  --gold: #a8761f;
  --gold-soft: #f8f0dd;

  /* Status */
  --danger: #a32f24;
  --danger-soft: #fbeae8;
  --ok: #1f6b45;
  --ok-soft: #e6f2ea;

  /* Shape */
  --r-sm: 10px;
  --r: 20px;
  --r-lg: 26px;
  --r-full: 999px;

  /* Base depth; the Design D sheet refines shared component shadows. */
  --shadow-sm: 0 1px 2px rgba(31, 26, 14, .05);
  --shadow: 0 2px 4px rgba(31, 26, 14, .04), 0 10px 26px -14px rgba(31, 26, 14, .18);
  --shadow-lg: 0 4px 10px rgba(31, 26, 14, .05), 0 26px 56px -22px rgba(31, 26, 14, .26);

  /* Rhythm */
  --wrap: 1280px;
  --gutter: 20px;
  --section-y: 96px;

  color-scheme: light;
  font-family: IRANSansX, Vazirmatn, Tahoma, system-ui, sans-serif;
  font-synthesis: none;
}

/* --- Base ---------------------------------------------------------------- */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.95;
  font-weight: 450;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; }
img { display: block; height: auto; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { color: var(--ink); font-weight: 800; text-wrap: balance; }
p { text-wrap: pretty; }
h1 { font-size: clamp(31px, 5.1vw, 52px); line-height: 1.4; letter-spacing: -.6px; }
h2 { font-size: clamp(24px, 3.3vw, 35px); line-height: 1.55; letter-spacing: -.4px; }
h3 { font-size: 19px; line-height: 1.7; font-weight: 750; }
h4 { font-size: 16px; line-height: 1.7; font-weight: 700; }

/* Latin strings (emails, URLs, plan codes) inside Persian prose. */
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

::selection { background: var(--accent-tint); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: fixed;
  inset-block-start: -100px;
  inset-inline-start: 16px;
  z-index: 200;
  background: var(--paper);
  color: var(--ink);
  padding: 12px 20px;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
  transition: inset-block-start .18s ease;
}
.skip-link:focus { inset-block-start: 14px; }

/* --- Layout -------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section-sm { padding-block: calc(var(--section-y) * .62); }
.band { background: var(--sand); }

.section-head { max-width: 640px; margin-block-end: 52px; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head p { margin-block-start: 14px; color: var(--muted); font-size: 17px; }

/* Small label above a heading: accent dot + short text. */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .2px;
  margin-block-end: 16px;
}
.eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}
.section-head.center .eyebrow { justify-content: center; }

.lead { font-size: 18px; color: var(--muted); line-height: 2; }

/* Accent highlight behind one word of a headline. Drawn as a background so
   it sits under the glyphs in any stacking context. */
.marker {
  white-space: nowrap;
  padding-inline: .12em;
  background-image: linear-gradient(var(--accent-tint), var(--accent-tint));
  background-repeat: no-repeat;
  /* Vazirmatn's content box reaches ~0.27em below the glyph ink, so the band is
     offset from the bottom edge to land across the descenders and baseline. */
  background-size: 100% .34em;
  background-position: left 0 bottom .22em;
}

/* --- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 13px 26px;
  border-radius: var(--r-full);
  font-weight: 700;
  font-size: 15px;
  line-height: 1.5;
  border: 1px solid transparent;
  transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn .icon { width: 19px; height: 19px; flex: none; }

.btn-solid { background: var(--accent); color: #fff; }
.btn-solid:hover { background: var(--accent-dark); }

.btn-outline { border-color: var(--line-2); color: var(--ink); background: var(--paper); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }

.btn-quiet { color: var(--ink); padding-inline: 16px; }
.btn-quiet:hover { color: var(--accent); }

.btn-block { width: 100%; }
.btn-lg { padding: 16px 34px; font-size: 16px; }


/* Inline text link with an arrow. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent);
  font-weight: 700;
  font-size: 15px;
}
.link-arrow .icon { width: 17px; height: 17px; transition: transform .16s ease; }
.link-arrow:hover .icon { transform: translateX(4px); } /* RTL: arrow points left */

/* --- Header -------------------------------------------------------------- */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 60;
  background: rgba(250, 248, 244, .88);
  backdrop-filter: blur(12px);
  border-block-end: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
.site-header.is-stuck {
  border-block-end-color: var(--line);
  background: rgba(250, 248, 244, .95);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 74px;
}

.brand { display: inline-flex; align-items: center; gap: 11px; flex: none; }
.brand-mark { width: 34px; height: 34px; display: block; flex: none; }
.brand-mark-shape { fill: var(--accent); }
.brand-name { font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -.3px; }
/* The sign-in header's own line (text-xl), so the brand is exactly the mark's height. */
.site-header .brand-name { line-height: 1.4; }

.nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: 18px;
  margin-inline-end: auto;
}
.nav a {
  padding: 9px 15px;
  border-radius: var(--r-full);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  transition: background-color .16s ease, color .16s ease;
}
.nav a:hover { background: var(--sand); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }

.nav-cta { display: none; }

.header-actions { display: flex; align-items: center; gap: 8px; flex: none; }

.menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: var(--r-sm);
  align-items: center;
  justify-content: center;
  color: var(--ink);
  border: 1px solid var(--line);
  background: var(--paper);
}
.menu-btn .icon { width: 22px; height: 22px; }
.menu-btn .icon-close { display: none; }
.menu-btn[aria-expanded="true"] .icon-open { display: none; }
.menu-btn[aria-expanded="true"] .icon-close { display: block; }

/* --- Hero ---------------------------------------------------------------- */
.hero { padding-block: 72px 88px; position: relative; overflow: hidden; }
.hero::before {
  /* one soft accent wash behind the mock, no gradient banding */
  content: "";
  position: absolute;
  inset-block-start: -170px;
  inset-inline-end: -180px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: var(--accent-soft);
  opacity: .5;
  filter: blur(10px);
  z-index: -1;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 56px;
  align-items: center;
}
.hero-copy h1 { margin-block-end: 22px; }
.hero-copy .lead { max-width: 30em; }

.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 34px; }

.hero-notes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-block-start: 26px;
  font-size: 14px;
  color: var(--muted);
}
.hero-notes li { display: inline-flex; align-items: center; gap: 7px; }
.hero-notes .icon { width: 17px; height: 17px; color: var(--accent); flex: none; }

/* Browser-window mock: pure CSS, no screenshots to keep or re-export. */
.mock {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  direction: rtl;
}
.mock-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 13px 16px;
  border-block-end: 1px solid var(--line);
  background: var(--sand);
}
.mock-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--line-2); flex: none; }
.mock-url {
  margin-inline-start: 10px;
  flex: 1;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  padding: 4px 14px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.mock-body { display: grid; grid-template-columns: 74px minmax(0, 1fr); min-height: 316px; }

.mock-side {
  border-inline-end: 1px solid var(--line);
  padding: 16px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 13px;
  background: #fdfcfa;
}
.mock-side span {
  width: 34px;
  height: 8px;
  border-radius: var(--r-full);
  background: var(--line);
}
.mock-side span:first-child { background: var(--accent); width: 34px; height: 9px; }

.mock-main { padding: 18px; }
.mock-hero {
  height: 86px;
  border-radius: var(--r-sm);
  background: var(--accent-soft);
  border: 1px dashed #9dbcab;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent-dark);
}
.mock-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-block-start: 14px; }
.mock-card { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px; background: var(--paper); }
.mock-thumb { height: 52px; border-radius: 7px; background: var(--sand); margin-block-end: 9px; }
.mock-card b { display: block; height: 7px; border-radius: var(--r-full); background: var(--line-2); margin-block-end: 6px; }
.mock-card i { display: block; height: 7px; width: 55%; border-radius: var(--r-full); background: var(--line); }

/* The floating "saved" pill on the mock. */
.mock-pill {
  position: absolute;
  inset-block-end: 26px;
  inset-inline-start: 26px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  box-shadow: var(--shadow);
  padding: 9px 17px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  animation: float 5s ease-in-out infinite;
}
.mock-pill .icon { width: 17px; height: 17px; color: var(--ok); }
.mock-wrap { position: relative; }

@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}

/* --- Trust strip --------------------------------------------------------- */
.strip { border-block: 1px solid var(--line); background: var(--paper); }
.strip-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 46px;
  padding-block: 26px;
}
.strip-label { font-size: 14px; color: var(--muted); }
.strip-logos { display: flex; flex-wrap: wrap; gap: 14px 34px; justify-content: center; }
.strip-logos li {
  font-size: 17px;
  font-weight: 800;
  color: var(--ink);
  opacity: .42;
  transition: opacity .16s ease;
}
.strip-logos li:hover { opacity: .8; }

/* --- Numbered steps ------------------------------------------------------ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 30px 28px 32px;
  position: relative;
}
.step-num {
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--line-2);
  display: block;
  margin-block-end: 18px;
}
.step h3 { margin-block-end: 8px; }
.step p { color: var(--muted); font-size: 15px; }
.step:hover .step-num { -webkit-text-stroke-color: var(--accent); }

/* --- Feature cards ------------------------------------------------------- */
.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.feature {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px 26px;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.feature:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-3px); }
.feature-ico {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--accent-soft);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-block-end: 18px;
}
.feature-ico .icon { width: 23px; height: 23px; }
.feature-media {
  display: block;
  margin: -10px -10px 20px;
  border-radius: calc(var(--r) - 6px);
  overflow: hidden;
  background: var(--sand);
  aspect-ratio: 16 / 10;
}
.feature-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.feature h3 { margin-block-end: 7px; }
.feature p { color: var(--muted); font-size: 15px; }

/* --- Split showcase ------------------------------------------------------ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.split-copy h2 { margin-block-end: 16px; }
.checks { margin-block-start: 26px; display: grid; gap: 14px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; }
.checks .icon {
  width: 21px;
  height: 21px;
  color: var(--accent);
  flex: none;
  margin-block-start: 5px;
}
.checks b { display: block; color: var(--ink); font-weight: 700; }
.checks span { color: var(--muted); font-size: 14.5px; }

/* Editor panel mock used beside the split copy. */
.panel {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 22px;
}
.panel-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  padding-block-end: 14px;
  border-block-end: 1px solid var(--line);
  margin-block-end: 16px;
}
.panel-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  margin-block-end: 10px;
  background: #fdfcfa;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.panel-item:last-child { margin-block-end: 0; }
.panel-item.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-dark); }
.panel-grip { color: var(--line-2); display: flex; flex: none; }
.panel-grip .icon { width: 17px; height: 17px; }
.panel-item.is-active .panel-grip { color: var(--accent); }
.panel-tag {
  margin-inline-start: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  background: var(--sand);
  border-radius: var(--r-full);
  padding: 2px 11px;
}
.panel-item.is-active .panel-tag { background: #fff; color: var(--accent-dark); }

/* --- Pricing ------------------------------------------------------------- */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.plan {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.plan.is-featured {
  border-color: var(--accent);
  box-shadow: var(--shadow-lg);
  position: relative;
}
.plan-badge {
  position: absolute;
  inset-block-start: -13px;
  inset-inline-start: 50%;
  transform: translateX(50%);
  background: var(--accent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  padding: 4px 16px;
  border-radius: var(--r-full);
  white-space: nowrap;
}
.plan h3 { margin-block-end: 6px; }
.plan-note { color: var(--muted); font-size: 14px; min-height: 3.6em; }
.plan-price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 7px;
  margin-block: 18px 6px;
  padding-block-start: 18px;
  border-block-start: 1px solid var(--line);
}
.plan-price b { font-size: 33px; font-weight: 800; color: var(--ink); line-height: 1.3; }
.plan-price span { font-size: 14px; color: var(--muted); }
/* The period is what makes the number a monthly price, so it reads plainer than the currency. */
.plan-price .plan-period { font-weight: 700; color: var(--ink-2); }
.plan-cycle { font-size: 13px; color: var(--muted); margin-block-end: 24px; }
.plan-list { display: grid; gap: 11px; margin-block-end: 28px; font-size: 14.5px; }
.plan-list li { display: flex; gap: 10px; align-items: flex-start; }
.plan-list .icon { width: 19px; height: 19px; color: var(--accent); flex: none; margin-block-start: 4px; }
.plan-list li.off { color: var(--muted); }
.plan-list li.off .icon { color: var(--line-2); }
.plan .btn { margin-block-start: auto; }

.pricing-foot {
  margin-block-start: 26px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

/* --- Testimonials -------------------------------------------------------- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.quote {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
}
.quote-mark { color: var(--accent); font-size: 40px; line-height: 1; font-weight: 800; margin-block-end: 6px; }
.quote p { font-size: 15.5px; color: var(--ink-2); }
.quote-by { display: flex; align-items: center; gap: 12px; margin-block-start: 22px; padding-block-start: 20px; border-block-start: 1px solid var(--line); }
.avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--sand);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 15px;
  flex: none;
}
.quote-by b { display: block; font-size: 14.5px; color: var(--ink); font-weight: 700; line-height: 1.6; }
.quote-by span { font-size: 13px; color: var(--muted); }

/* --- Stats --------------------------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat {
  text-align: center;
  padding: 26px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--paper);
}
.stat b { display: block; font-size: 33px; font-weight: 800; color: var(--accent); line-height: 1.4; }
.stat span { font-size: 14px; color: var(--muted); }

/* --- CTA band ------------------------------------------------------------ */
.cta {
  background: var(--ink);
  color: #fff;
  border-radius: var(--r-lg);
  padding: 62px 48px;
  text-align: center;
}
.cta h2 { color: #fff; margin-block-end: 14px; }
.cta p { color: #cfc9bb; max-width: 44em; margin-inline: auto; }
.cta .hero-cta { justify-content: center; margin-block-start: 30px; }
.cta .btn-outline { background: transparent; border-color: #4a453a; color: #fff; }
.cta .btn-outline:hover { border-color: #fff; color: #fff; }

/* --- Footer -------------------------------------------------------------- */
.site-footer { background: var(--paper); border-block-start: 1px solid var(--line); padding-block: 62px 0; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.3fr; gap: 42px; }
.footer-brand p { color: var(--muted); font-size: 14.5px; margin-block-start: 16px; max-width: 30em; }
.footer-col h4 { margin-block-end: 16px; font-size: 15px; }
.footer-col li { margin-block-end: 10px; }
.footer-col a, .footer-col span { color: var(--muted); font-size: 14.5px; transition: color .16s ease; }
.footer-col a:hover { color: var(--accent); }

.social { display: flex; gap: 9px; margin-block-start: 20px; }
.social a {
  width: 38px;
  height: 38px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  transition: color .16s ease, border-color .16s ease;
}
.social a:hover { color: var(--accent); border-color: var(--accent); }
.social .icon { width: 19px; height: 19px; }

.footer-bottom {
  margin-block-start: 48px;
  border-block-start: 1px solid var(--line);
  padding-block: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: space-between;
  font-size: 13.5px;
  color: var(--muted);
}

/* --- Page header (inner pages) ------------------------------------------- */
.page-head { padding-block: 64px 52px; border-block-end: 1px solid var(--line); background: var(--paper); }
.page-head h1 { font-size: clamp(28px, 4.2vw, 42px); margin-block-end: 14px; }
.page-head p { color: var(--muted); font-size: 17px; max-width: 46em; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font-size: 13.5px; color: var(--muted); margin-block-end: 18px; }
.crumbs a:hover { color: var(--accent); }
.crumbs .sep { opacity: .5; }

/* --- Forms --------------------------------------------------------------- */
.field { margin-block-end: 20px; }
.field > label {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
  margin-block-end: 8px;
}
.field .hint { display: block; font-size: 13px; color: var(--muted); font-weight: 450; margin-block-start: 3px; }

.input, .select, .textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 13px 15px;
  font-size: 15px;
  line-height: 1.8;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--muted); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.textarea { min-height: 148px; resize: vertical; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236e6759' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 14px center;
  background-size: 18px;
  padding-inline-start: 44px;
}

/* Phone and other Latin-entry inputs stay LTR even on an RTL page. */
.input-ltr { direction: ltr; text-align: left; font-variant-numeric: tabular-nums; letter-spacing: .5px; }

.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea { border-color: var(--danger); }
.field.has-error .input:focus { box-shadow: 0 0 0 3px var(--danger-soft); }

.error-msg {
  display: none;
  align-items: center;
  gap: 7px;
  color: var(--danger);
  font-size: 13.5px;
  font-weight: 600;
  margin-block-start: 7px;
}
.field.has-error .error-msg { display: flex; }
.error-msg .icon { width: 16px; height: 16px; flex: none; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }

.form-note {
  font-size: 13.5px;
  color: var(--muted);
  margin-block-start: 16px;
  line-height: 1.9;
}

.alert {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border-radius: var(--r-sm);
  padding: 15px 17px;
  font-size: 14.5px;
  margin-block-end: 24px;
  border: 1px solid;
}
.alert .icon { width: 20px; height: 20px; flex: none; margin-block-start: 5px; }
.alert-ok { background: var(--ok-soft); border-color: #bfdccb; color: #175134; }
.alert-info { background: var(--gold-soft); border-color: #e8d5a8; color: #6d4c12; }
.alert b { display: block; font-weight: 700; }

/* --- Contact page -------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 380px; gap: 48px; align-items: start; }
.card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 34px;
}
.card > h2 { font-size: 24px; margin-block-end: 8px; }
.card > .lead { font-size: 15.5px; margin-block-end: 28px; }

.contact-list { display: grid; gap: 14px; }
.contact-item {
  display: flex;
  gap: 15px;
  align-items: flex-start;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px;
}
.contact-item .feature-ico { margin-block-end: 0; width: 42px; height: 42px; border-radius: 12px; }
.contact-item h3 { font-size: 16px; margin-block-end: 3px; }
.contact-item p, .contact-item a { color: var(--muted); font-size: 14.5px; }
.contact-item a:hover { color: var(--accent); }

.map {
  margin-block-start: 14px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--sand);
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 34px 34px;
  height: 208px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  padding: 18px;
}

/* --- FAQ ----------------------------------------------------------------- */
.faq-search { position: relative; max-width: 480px; margin-block-end: 34px; }
.faq-search-field { position: relative; }
.faq-search-field .input {
  display: block;
  padding-inline-start: 46px;
  text-align: start;
}
.faq-search-field > .icon {
  position: absolute;
  inset-inline-start: 16px;
  inset-block-start: 50%;
  transform: translateY(-50%);
  width: 19px;
  height: 19px;
  color: var(--muted);
  pointer-events: none;
}

.faq-group { margin-block-end: 44px; }
.faq-group > h2 { font-size: 21px; margin-block-end: 18px; }

.qa {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  margin-block-end: 10px;
  overflow: hidden;
  transition: border-color .16s ease;
}
.qa[open] { border-color: var(--line-2); }
.qa summary {
  list-style: none;
  cursor: pointer;
  padding: 19px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
  line-height: 1.8;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--accent); }
.qa summary .icon {
  margin-inline-start: auto;
  width: 20px;
  height: 20px;
  color: var(--muted);
  flex: none;
  transition: transform .2s ease;
}
.qa[open] summary .icon { transform: rotate(180deg); color: var(--accent); }
.qa-body { padding: 0 24px 22px; color: var(--muted); font-size: 15px; }
.qa-body p + p { margin-block-start: 12px; }
.qa-body a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

.faq-empty {
  display: none;
  text-align: center;
  padding: 52px 20px;
  color: var(--muted);
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
}

/* --- About page ---------------------------------------------------------- */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

.timeline { border-inline-start: 2px solid var(--line); padding-inline-start: 30px; display: grid; gap: 34px; }
.tl-item { position: relative; }
.tl-item::before {
  content: "";
  position: absolute;
  inset-inline-start: -38px;
  inset-block-start: 9px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--canvas);
  border: 3px solid var(--accent);
}
.tl-year { font-size: 14px; font-weight: 800; color: var(--accent); }
.tl-item h3 { margin-block: 3px 6px; }
.tl-item p { color: var(--muted); font-size: 15px; }

.team { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.member {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 22px;
  text-align: center;
}
.member .avatar {
  width: 62px;
  height: 62px;
  font-size: 21px;
  margin-inline: auto;
  margin-block-end: 15px;
  background: var(--accent-soft);
  color: var(--accent-dark);
}
.member h3 { font-size: 16.5px; }
.member span { font-size: 13.5px; color: var(--muted); }

.prose p { margin-block-end: 18px; color: var(--ink-2); }
.prose p:last-child { margin-block-end: 0; }

/* --- Toast --------------------------------------------------------------- */
.toast {
  position: fixed;
  inset-block-end: 26px;
  inset-inline-start: 50%;
  transform: translate(50%, 22px);
  background: var(--ink);
  color: #fff;
  padding: 13px 24px;
  border-radius: var(--r-full);
  font-size: 14.5px;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  z-index: 300;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  max-width: calc(100vw - 40px);
  text-align: center;
}
.toast.show { opacity: 1; transform: translate(50%, 0); }

/* --- Responsive ---------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --section-y: 72px; }
  .hero-grid, .split, .contact-grid { grid-template-columns: 1fr; gap: 44px; }
  .features, .steps, .plans, .quotes { grid-template-columns: repeat(2, 1fr); }
  .team { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .plan.is-featured { order: -1; }
  .stats { grid-template-columns: repeat(2, 1fr); }
}

/* The header follows the platform's sign-in header (Storeforge's
   auth-layout.tsx) at every width: the links stay in the row down to 768px,
   and below it fold behind the menu button into a panel under the row. */
@media (max-width: 1024px) {
  /* No room for the quiet button beside the links and the main button. */
  .header-actions .btn-quiet { display: none; }
}

@media (max-width: 767px) {
  .nav { display: none; }
  .menu-btn { display: flex; }
  .header-actions { margin-inline-start: auto; }

  /* The open panel is the header's own last row, as there: it pushes the page
     down instead of lying over it, so it needs no shadow or bottom edge, only
     the line above it. The row keeps its height while the panel wraps under. */
  .header-inner { flex-wrap: wrap; row-gap: 0; }
  .header-actions { min-height: 74px; }
  .nav.is-open {
    display: block;
    order: 1;
    flex: 0 0 calc(100% + 2 * var(--gutter));
    margin: 0 calc(var(--gutter) * -1);
    padding: 12px var(--gutter);
    max-height: calc(100vh - 75px - var(--wp-admin--admin-bar--height, 0px));
    max-height: calc(100dvh - 75px - var(--wp-admin--admin-bar--height, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--paper);
    border-block-start: 1px solid var(--line);
  }
  /* The main button, which the row has no room for at this width. */
  .nav.is-open .nav-cta {
    display: flex;
    width: 100%;
    margin-block-start: 8px;
    padding: 13px 26px;
    border-radius: var(--r-full);
    font-weight: 700;
    color: #fff;
  }
  .nav.is-open .nav-cta:hover { background: var(--accent-dark); color: #fff; }
  .site-header { position: sticky; }
}

@media (max-width: 767px) {
  :root { --gutter: 16px; --section-y: 60px; }
  body { font-size: 15.5px; }
  .features, .steps, .plans, .quotes, .values, .team, .form-row, .stats { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero { padding-block: 44px 62px; }
  .cta { padding: 44px 24px; border-radius: var(--r); }
  .card { padding: 26px 20px; }
  .hero-cta .btn, .hero-cta { width: 100%; }
  .header-actions .btn-solid { display: none; }
  .footer-bottom { justify-content: center; text-align: center; }
  .strip-inner { gap: 14px 24px; }
  .mock-body { grid-template-columns: 56px minmax(0, 1fr); }
  .mock-row { grid-template-columns: repeat(2, 1fr); }
  .mock-card:last-child { display: none; }
  .hero::before { display: none; }
}

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

@media print {
  .site-header, .site-footer, .cta, .toast, .menu-btn { display: none !important; }
  body { background: #fff; }
}

/* ==========================================================================
   WordPress + Elementor additions
   Everything below this line was added when the static template became a
   theme. The blocks above are the original design, untouched.
   ========================================================================== */

/* An element the markup hides stays hidden, whatever display its class sets. */
[hidden] { display: none !important; }

/* --- Accessibility helpers ----------------------------------------------- */
.sr-only,
.screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.screen-reader-text:focus {
  position: fixed;
  inset-block-start: 14px;
  inset-inline-start: 16px;
  z-index: 200;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  background: var(--paper);
  color: var(--ink);
  padding: 12px 20px;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-lg);
}

/* --- Navigation built from a WordPress menu ------------------------------ */
.nav .nav-list { display: flex; align-items: center; gap: 4px; }
.nav li { position: relative; }
.nav li > a {
  display: block;
  padding: 9px 15px;
  border-radius: var(--r-full);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-2);
  transition: background-color .16s ease, color .16s ease;
}
.nav li > a:hover { background: var(--sand); color: var(--ink); }
.nav .current-menu-item > a,
.nav .current_page_item > a,
.nav .current-menu-ancestor > a,
.nav li > a[aria-current="page"] { color: var(--accent); background: var(--accent-soft); }

.nav .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-inline-start: 7px;
  vertical-align: 1px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: .55;
}

.nav .sub-menu {
  position: absolute;
  inset-block-start: calc(100% + 6px);
  inset-inline-start: 0;
  min-width: 212px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: 8px;
  display: grid;
  gap: 2px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 70;
}
.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.nav .sub-menu li > a { border-radius: var(--r-sm); font-size: 14.5px; font-weight: 600; }
.nav .sub-menu .sub-menu { inset-block-start: -9px; inset-inline-start: 100%; }

.submenu-toggle { display: none; }

/* The open panel's links: the sign-in header's, 8px 12px on a 10px radius,
   15px, 4px apart. */
@media (max-width: 767px) {
  .nav.is-open .nav-list { flex-direction: column; align-items: stretch; gap: 4px; }
  .nav.is-open li > a { padding: 8px 12px; border-radius: var(--r-sm); font-size: 15px; }
  .nav.is-open .menu-item-has-children > a::after { display: none; }
  .nav.is-open .sub-menu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    border-inline-start: 2px solid var(--line);
    border-radius: 0;
    margin-inline-start: 12px;
    padding: 2px 0;
    display: none;
  }
  .nav.is-open li.is-expanded > .sub-menu { display: grid; }
  .nav.is-open .menu-item-has-children { display: grid; grid-template-columns: 1fr auto; }
  .nav.is-open .menu-item-has-children > .sub-menu { grid-column: 1 / -1; }
  .submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    color: var(--muted);
  }
  .submenu-toggle .icon { width: 18px; height: 18px; transition: transform .16s ease; }
  .is-expanded > .submenu-toggle .icon { transform: rotate(180deg); color: var(--accent); }
}

/* --- Header additions ---------------------------------------------------- */
.site-header.is-static { position: relative; }
.brand-logo { max-height: 42px; width: auto; display: block; }
.brand-mark-fallback { flex: none; }

/* --- Elementor bridge ---------------------------------------------------- */
.elementor-widget-container > .section-head:last-child { margin-block-end: 0; }
.elementor-element .wrap { padding-inline: 0; }
.elementor-section.elementor-section-boxed > .elementor-container { max-width: var(--wrap); }
body.elementor-editor-active .yek-empty-hint {
  border: 1px dashed var(--line-2);
  border-radius: var(--r);
  padding: 22px;
  color: var(--muted);
  text-align: center;
  font-size: 14.5px;
}

/* Hero band. The wash is a real element rather than a pseudo-element, because
   Elementor already uses ::before and ::after on its containers for background
   overlays and would win the cascade. */
.yek-hero { overflow: hidden; }
/* Elementor controls overflow through this variable and otherwise resets it. */
.elementor-element.yek-hero { --overflow: hidden; }
.hero-grid { position: relative; }
.hero-wash {
  position: absolute;
  inset-block-start: -170px;
  inset-inline-end: -180px;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: var(--accent-soft);
  opacity: .5;
  filter: blur(10px);
  pointer-events: none;
  z-index: 0;
}
.hero-grid > .hero-copy,
.hero-grid > .mock-wrap,
.hero-grid > .hero-media { position: relative; z-index: 1; }

@media (max-width: 767px) {
  .hero-wash { display: none; }
}

/* Page header band used by the page-head widget. */
.yek-page-head { background: var(--paper); border-block-end: 1px solid var(--line); }
.page-head-body h1 {
  font-size: clamp(28px, 4.2vw, 42px);
  margin-block-end: 14px;
}
.page-head-body > p { color: var(--muted); font-size: 17px; max-width: 46em; }
.page-head-body.is-center { text-align: center; }
.page-head-body.is-center .crumbs { justify-content: center; }
.page-head-body.is-center > p { margin-inline: auto; }

/* --- Images that replace the drawn placeholders -------------------------- */
.avatar img,
.member .avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}
.avatar.has-image { padding: 0; overflow: hidden; background: var(--sand); }
.strip-logos li img { max-height: 30px; width: auto; opacity: .75; }
.strip-logos li:hover img { opacity: 1; }
.hero-media img,
.split-media img { border-radius: var(--r-lg); box-shadow: var(--shadow-lg); width: 100%; }
.feature-ico img { width: 23px; height: 23px; object-fit: contain; }
.feature-ico.is-image { background: transparent; border-color: transparent; }

/* Split media column keeps the panel's breathing room. */
.split-media { display: block; }

/* --- Contact form states -------------------------------------------------- */
.yek-form-busy { opacity: .6; pointer-events: none; }
.honey-field {
  position: absolute !important;
  inset-inline-start: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* --- Blog, archive and single templates ---------------------------------- */
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.post-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.post-card:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-3px); }
.post-card .thumb { background: var(--sand); aspect-ratio: 16 / 9; }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card .body { padding: 22px; display: flex; flex-direction: column; gap: 9px; flex: 1; }
.post-card h2 { font-size: 19px; line-height: 1.7; }
.post-card .meta { font-size: 13px; color: var(--muted); display: flex; gap: 12px; flex-wrap: wrap; }
.post-card p { color: var(--muted); font-size: 14.5px; }
.post-card .link-arrow { margin-block-start: auto; padding-block-start: 8px; }

.entry { max-width: 780px; margin-inline: auto; }
.entry-thumb { border-radius: var(--r-lg); overflow: hidden; margin-block-end: 30px; }
.entry-meta { font-size: 13.5px; color: var(--muted); display: flex; gap: 14px; flex-wrap: wrap; margin-block-end: 18px; }
.entry-content { font-size: 16.5px; }
.entry-content > * + * { margin-block-start: 20px; }
.entry-content h2 { margin-block-start: 34px; }
.entry-content h3 { margin-block-start: 26px; }
.entry-content ul, .entry-content ol { padding-inline-start: 24px; }
.entry-content ul { list-style: disc; }
.entry-content ol { list-style: decimal; }
.entry-content li { margin-block-end: 8px; }
.entry-content a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.entry-content img, .entry-content iframe { border-radius: var(--r); }
.entry-content blockquote {
  border-inline-start: 3px solid var(--accent);
  padding-inline-start: 20px;
  color: var(--ink-2);
  font-size: 17px;
}
.entry-content pre {
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 18px;
  overflow: auto;
  direction: ltr;
  text-align: left;
}
.entry-content code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92em; }
.entry-content table { width: 100%; border-collapse: collapse; }
.entry-content th, .entry-content td { border: 1px solid var(--line); padding: 10px 14px; text-align: start; }
.entry-content th { background: var(--sand); }
.entry-footer { margin-block-start: 34px; padding-block-start: 24px; border-block-start: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.tag-list { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-list a {
  font-size: 13px;
  color: var(--muted);
  background: var(--sand);
  border-radius: var(--r-full);
  padding: 5px 13px;
}
.tag-list a:hover { color: var(--accent); }

.alignwide { margin-inline: calc(var(--gutter) * -1); }
.alignfull { margin-inline: calc(50% - 50vw); max-width: 100vw; width: 100vw; }
.aligncenter { margin-inline: auto; display: block; }
.alignleft { float: inline-start; margin-inline-end: 22px; margin-block-end: 14px; }
.alignright { float: inline-end; margin-inline-start: 22px; margin-block-end: 14px; }
.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-element-caption { font-size: 13.5px; color: var(--muted); text-align: center; margin-block-start: 8px; }
.sticky .post-card { border-color: var(--accent); }

.pagination { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-block-start: 48px; }
.pagination .page-numbers {
  min-width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--paper);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.pagination .page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.pagination .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; }

.comments { max-width: 780px; margin-inline: auto; margin-block-start: 56px; }
.comments h2 { font-size: 21px; margin-block-end: 22px; }
.comment-list { display: grid; gap: 18px; }
.comment-list .children { display: grid; gap: 18px; margin-block-start: 18px; padding-inline-start: 26px; border-inline-start: 2px solid var(--line); }
.comment-body {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 20px 22px;
}
.comment-meta { display: flex; align-items: center; gap: 11px; margin-block-end: 10px; font-size: 13.5px; color: var(--muted); }
.comment-meta img { border-radius: 50%; }
.comment-author { color: var(--ink); font-weight: 700; }
.comment-reply-link { color: var(--accent); font-weight: 600; font-size: 13.5px; }
.comment-form .submit { margin-block-start: 8px; }

.sidebar { display: grid; gap: 26px; align-content: start; }
.sidebar .widget {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px;
}
.sidebar .widget-title { font-size: 16px; margin-block-end: 14px; }
.sidebar ul { display: grid; gap: 9px; }
.sidebar li a { color: var(--muted); font-size: 14.5px; }
.sidebar li a:hover { color: var(--accent); }
.content-sidebar { display: grid; grid-template-columns: 1fr 300px; gap: 48px; align-items: start; }

.empty-state { text-align: center; padding-block: 40px; }
.empty-state p { color: var(--muted); margin-block: 10px 24px; }
.error-code { font-size: clamp(72px, 16vw, 148px); font-weight: 800; color: var(--accent-tint); line-height: 1; }

.search-form-inline { display: flex; gap: 10px; max-width: 480px; margin-inline: auto; }
.search-form-inline .input { flex: 1; }

@media (max-width: 1024px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
  .content-sidebar { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 767px) {
  .post-grid { grid-template-columns: 1fr; }
}

/* --- Widget markup that the original template expressed with tag names ---- */
/* The widgets let an editor pick the heading level, so the look has to come
   from a class rather than from h1/h2. */
.hero-copy .hero-title {
  color: var(--ink);
  font-weight: 800;
  text-wrap: balance;
  font-size: clamp(31px, 5.1vw, 52px);
  line-height: 1.4;
  letter-spacing: -.6px;
  margin-block-end: 22px;
}
.hero-grid.is-single { grid-template-columns: 1fr; }

.section-head div.section-title,
.split-copy div.split-title {
  color: var(--ink);
  font-weight: 800;
  font-size: clamp(24px, 3.3vw, 35px);
  line-height: 1.55;
  letter-spacing: -.4px;
}
.split-copy .split-title { margin-block-end: 16px; }

/* A heading aligned to the end hugs that edge, the mirror of the default. */
.section-head.end { margin-inline-start: auto; }

.alert-danger { background: var(--danger-soft); border-color: #e7c3bd; color: #7d241b; }

.icon-image { width: 23px; height: 23px; object-fit: contain; display: block; }
.feature-ico .icon-image { width: 100%; height: 100%; }

/* Stats inside a panel keep the strip's type, only tighter. */
.panel .stats { gap: 14px; }

.map.is-image,
.map.is-embed {
  background-image: none;
  padding: 0;
  overflow: hidden;
  height: auto;
  display: block;
}
.map.is-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.map.is-embed iframe { display: block; width: 100%; }

.footer-legal a { color: var(--muted); font-size: 13.5px; }
.footer-legal a:hover { color: var(--accent); }

/* A section widget dropped straight into a container should not inherit the
   bottom margin Elementor gives stacked widgets when it is the only child. */
.elementor-widget-yekshop-logos .strip-inner { padding-block: 26px; }

/* The FAQ search icon sits over the input, below its label. */
.faq-search .hint[data-faq-count] { min-height: 1.2em; }

/* WordPress prints the comment fields with its own markup, so the field styles
   are matched by element rather than by the .input class. */
.comment-form p { margin-block-end: 18px; }
.comment-form label { display: block; margin-block-end: 8px; font-weight: 700; color: var(--ink); font-size: 14.5px; }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--r-sm);
  padding: 13px 16px;
  font-size: 15px;
  color: var(--ink);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.comment-form input[type="text"]:focus,
.comment-form input[type="email"]:focus,
.comment-form input[type="url"]:focus,
.comment-form textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
  outline: none;
}
.comment-form textarea { min-height: 148px; resize: vertical; }
.comment-form .comment-form-cookies-consent { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--muted); }
.comment-form .comment-form-cookies-consent label { margin: 0; font-weight: 450; color: inherit; }
.comment-form .comment-form-cookies-consent input { width: auto; }
.comment-notes, .comment-form .logged-in-as { font-size: 13.5px; color: var(--muted); }
.comment-form .required { color: var(--danger); }

/* Flexible widget contents must be able to shrink inside Elementor columns. */
.hero-grid > *, .split > *, .contact-grid > *, .footer-grid > *,
.form-row > *, .elementor-widget-container { min-width: 0; }
.footer-contact, .contact-item, .qa-body, .prose { overflow-wrap: anywhere; }
.mock-url { min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 767px) {
  /* 16px keeps touch keyboards from zooming the page when a field is focused. */
  .input, .select, .textarea,
  .comment-form input[type="text"],
  .comment-form input[type="email"],
  .comment-form input[type="url"],
  .comment-form textarea { font-size: 16px; }
  .btn { max-width: 100%; white-space: normal; text-align: center; }
  .mock-hero { padding: 12px; text-align: center; }
  .brand-logo { max-width: min(55vw, 240px); object-fit: contain; }
}