/* ===========================================================================
   Vesopa Hosting — marketing sections
   ---------------------------------------------------------------------------
   The components that only the public pages use: the build-with-AI section, the
   WordPress section, and the email pricing grid. Split out of app.css because
   app.css is the design system — tokens, buttons, cards, forms — and is loaded
   by the panel and the admin too, neither of which will ever render any of
   this.

   Everything here reads the tokens set in app.css (--gap, --section-y, the
   lime scale) rather than inventing its own numbers, so the responsive steps
   defined there move these sections with the rest of the page.

   Palette rule, restated because it is the easiest one to break: #A5C715 is
   1.9:1 against both white and black. It is a fill, a rule, a glow — never
   small text. Brand-coloured type is --lime-ink on white, --lime on near-black.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   Content-plus-aside layout
   ---------------------------------------------------------------------------
   A wide main column with a narrower sidebar — the contact form beside its
   contact details, the checkout form beside its order summary.

   This exists because both of those pages carried the columns as an INLINE
   `style="grid-template-columns:1.5fr 1fr"`. An inline style beats every rule
   in every stylesheet, so no media query could ever collapse them: on a 360px
   phone the sidebar stayed a sidebar, and the email address in it hung 65px
   off the right-hand edge of the document. A class can be overridden; an
   inline style cannot.
   --------------------------------------------------------------------------- */
.split-aside {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--gap-lg);
  align-items: start;
}
@media (max-width: 900px) {
  .split-aside { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Section headers
   --------------------------------------------------------------------------- */
.sec-head { max-width: 62ch; }
.sec-head-center { margin-inline: auto; text-align: center; }
.sec-head .lede { margin-bottom: 0; }

/* ---------------------------------------------------------------------------
   Build-with-AI ("vibe coding")
   ---------------------------------------------------------------------------
   A dark section carrying a mock editor. Deliberately not a screenshot of a
   real tool: we do not own those brands, and a screenshot goes stale the first
   time any of them restyles.
   --------------------------------------------------------------------------- */
.vibe { position: relative; overflow: hidden; isolation: isolate; }
.vibe::before {
  content: '';
  position: absolute; z-index: -1;
  width: 640px; height: 640px; top: -320px; right: -200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(165, 199, 21, .34), transparent 68%);
  filter: blur(90px);
  pointer-events: none;
}

/* The editor mock. */
.editor {
  background: #0d0f0a;
  border: 1px solid #262a1d;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}
.editor-bar {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: #14170f;
  border-bottom: 1px solid #262a1d;
}
.editor-dot { width: 11px; height: 11px; border-radius: 50%; flex: none; background: #33382a; }
.editor-dot:nth-child(3) { background: var(--lime); }
.editor-file {
  margin-left: 8px;
  font-family: var(--mono); font-size: .78rem; color: #7d8570;
}

.editor-body { padding: 18px 18px 22px; }

/* The prompt the user "typed". */
.editor-prompt {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 13px 15px;
  background: rgba(165, 199, 21, .09);
  border: 1px solid rgba(165, 199, 21, .26);
  border-radius: 12px;
  margin-bottom: 16px;
}
.editor-prompt-mark {
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  display: grid; place-items: center;
  background: var(--lime); color: var(--on-lime);
  font-size: .7rem; font-weight: 900;
}
.editor-prompt p {
  margin: 0;
  font-size: .93rem; line-height: 1.55; color: #e4ead6;
}

/* Generated "code". Monospace, dimmed, purely textural — it is scenery, so it
   is aria-hidden in the markup and must never be the only place information
   lives. */
.editor-code {
  font-family: var(--mono); font-size: .79rem; line-height: 1.85;
  color: #6f7862;
  margin: 0 0 18px;
  white-space: pre;
  /* Scrolls inside its own box. Both of these matter: overflow-x alone still
     reports the full content width as the element's min-content size to a
     grid parent, so max-width caps it and the `min-width: 0` rule in app.css
     lets the column shrink to meet it. */
  overflow-x: auto;
  max-width: 100%;
  -webkit-overflow-scrolling: touch;
}
.editor-code .t { color: #a9b795; }
.editor-code .k { color: var(--lime); }
.editor-code .s { color: #c9d6a8; }

/* Each line draws itself in, so the block reads as "being written". */
.editor-code span[data-line] {
  display: block;
  opacity: 0;
  animation: line-in .42s var(--ease) forwards;
}
@keyframes line-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

.editor-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  padding-top: 15px;
  border-top: 1px solid #262a1d;
}
.editor-status {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .82rem; font-weight: 700; color: var(--lime);
}

/* Runtime chips — "we run this". */
.runtimes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }
.runtime {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .13);
  font-size: .84rem; font-weight: 700; color: #d3d8c8;
  transition: transform .2s var(--ease), background .2s var(--ease), border-color .2s var(--ease);
}
.runtime:hover { transform: translateY(-2px); background: rgba(165, 199, 21, .16); border-color: rgba(165, 199, 21, .45); }
.runtime b { color: #fff; font-weight: 800; }

/* ---------------------------------------------------------------------------
   WordPress
   --------------------------------------------------------------------------- */
.wp-panel {
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 26px;
  box-shadow: var(--shadow-2);
}
.wp-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-soft);
}
.wp-row:last-child { border-bottom: 0; padding-bottom: 0; }
.wp-row:first-child { padding-top: 0; }
.wp-row-mark {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--lime-soft); color: var(--lime-deep);
}
.wp-row-mark svg { width: 19px; height: 19px; }
.wp-row-text { min-width: 0; }
.wp-row-text b { display: block; font-size: .95rem; }
.wp-row-text span { font-size: .84rem; color: var(--ink-3); }
.wp-row-state { margin-left: auto; flex: none; }

/* The progress bar on the "updates handled" row. */
.wp-bar { height: 6px; border-radius: 3px; background: var(--bg-3); overflow: hidden; margin-top: 7px; }
.wp-bar i {
  display: block; height: 100%; border-radius: 3px;
  background: linear-gradient(90deg, var(--lime), var(--lime-ink));
  width: 0;
  transition: width 1.1s var(--ease);
}
.is-in .wp-bar i { width: var(--w, 100%); }

/* ---------------------------------------------------------------------------
   Email pricing
   ---------------------------------------------------------------------------
   Two families in one grid, switched by a tab. The tabs are real buttons with
   aria-pressed rather than links, because nothing navigates.
   --------------------------------------------------------------------------- */
.efam {
  display: inline-flex; padding: 5px; gap: 3px;
  background: var(--bg-3); border-radius: 12px;
  margin-bottom: 30px;
}
.efam-btn {
  padding: 10px 20px; border: 0; border-radius: 9px; background: transparent;
  font-size: .92rem; font-weight: 700; color: var(--ink-2); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
  transition: color .2s var(--ease), background .2s var(--ease);
}
.efam-btn[aria-pressed='true'] { background: #fff; color: var(--ink); box-shadow: var(--shadow-1); }
.efam-btn svg { width: 17px; height: 17px; }

.eplans { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--gap); align-items: start; }

.eplan {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 28px 26px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.eplan:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.eplan-featured { border-color: var(--lime); border-width: 2px; box-shadow: 0 12px 40px rgba(165, 199, 21, .15); }
.eplan-badge {
  position: absolute; top: -12px; left: 26px;
  padding: 5px 14px; border-radius: 999px;
  background: var(--lime); color: var(--on-lime);
  font-size: .69rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(165, 199, 21, .38);
}
.eplan-name { font-size: 1.2rem; margin-bottom: 4px; }
.eplan-tagline { font-size: .88rem; color: var(--ink-3); margin-bottom: 18px; }

.eplan-price { display: flex; align-items: flex-start; gap: 2px; }
.eplan-price .cur { font-size: 1.2rem; font-weight: 800; margin-top: 4px; }
.eplan-price .amt { font-size: 2.5rem; font-weight: 900; letter-spacing: -.045em; line-height: 1; }
.eplan-price .frac { font-size: 1.15rem; font-weight: 800; margin-top: 3px; }
.eplan-unit { font-size: .82rem; color: var(--ink-3); margin: 4px 0 0; }
.eplan-total { font-size: .8rem; color: var(--ink-3); margin: 10px 0 20px; min-height: 2.4em; }

.eplan-features { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 9px; }
.eplan-features li { display: flex; gap: 9px; align-items: flex-start; font-size: .88rem; line-height: 1.45; }
.eplan-features svg { width: 15px; height: 15px; flex: none; margin-top: 3px; color: var(--lime-ink); }

/* The mailbox-count stepper. */
.units { display: flex; align-items: center; gap: 0; margin-bottom: 16px; }
.units-btn {
  width: 38px; height: 38px; flex: none;
  border: 1.5px solid var(--rule); background: #fff;
  font-size: 1.2rem; font-weight: 800; line-height: 1; color: var(--ink-2);
  cursor: pointer; display: grid; place-items: center;
  transition: background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
}
.units-btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.units-btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.units-btn:hover:not(:disabled) { background: var(--lime-soft); border-color: var(--lime); color: var(--lime-deep); }
.units-btn:disabled { opacity: .4; cursor: not-allowed; }
.units-input {
  width: 62px; height: 38px; flex: none;
  border: 1.5px solid var(--rule); border-inline: 0;
  text-align: center; font-weight: 800;
  -moz-appearance: textfield;
}
.units-input::-webkit-outer-spin-button, .units-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.units-input:focus { outline: none; border-color: var(--lime); }
.units-label { margin-left: 11px; font-size: .85rem; color: var(--ink-3); }

/* ---------------------------------------------------------------------------
   Free-domain banner
   --------------------------------------------------------------------------- */
.freedom {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 20px 24px;
  border-radius: var(--radius-lg);
  background: linear-gradient(120deg, var(--lime-soft), #fff 70%);
  border: 1.5px solid var(--lime);
}
.freedom-mark {
  flex: none; width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--lime); color: var(--on-lime);
}
.freedom-text { min-width: 240px; flex: 1; }
.freedom-text b { display: block; font-size: 1.05rem; }
.freedom-text span { font-size: .88rem; color: var(--ink-2); }
.freedom-terms { display: flex; gap: 7px; flex-wrap: wrap; }
.freedom-term {
  padding: 5px 12px; border-radius: 999px;
  background: #fff; border: 1px solid var(--lime);
  font-size: .8rem; font-weight: 800; color: var(--lime-deep);
}
.freedom-term.is-off { border-color: var(--rule); color: var(--ink-3); background: var(--bg-2); }

/* ---------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------------
   The tokens in app.css already move padding and gutters. What is left here is
   the handful of places where a layout has to change shape rather than scale.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .editor-code { font-size: .74rem; }
}

@media (max-width: 860px) {
  /* The editor is scenery; below the fold on a stacked layout it earns less
     height. */
  .editor-body { padding: 15px 15px 18px; }
  .vibe::before { display: none; }
}

@media (max-width: 700px) {
  .eplans { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}

@media (max-width: 560px) {
  .efam { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .efam-btn { justify-content: center; padding: 10px 8px; font-size: .86rem; }
  .freedom { padding: 17px 18px; gap: 14px; }
  .freedom-text { min-width: 0; flex-basis: 100%; }
}

@media (max-width: 430px) {
  .editor-code { font-size: .68rem; line-height: 1.7; }
  .editor-prompt { padding: 11px 12px; }
  .editor-prompt p { font-size: .87rem; }
  .eplan { padding: 24px 19px; }
  .eplan-price .amt { font-size: 2.2rem; }
  .runtime { font-size: .78rem; padding: 6px 11px; }
  /* A stepper plus its label does not fit on a 360px screen in one row. */
  .units { flex-wrap: wrap; }
  .units-label { margin: 8px 0 0; flex-basis: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .editor-code span[data-line] { opacity: 1; animation: none; }
  .wp-bar i { transition: none; }
}

/* ===========================================================================
   "Three. Two. Online." — the launch sequence
   ---------------------------------------------------------------------------
   The claim everywhere else on this site is "online in minutes". This section
   is where that stops being a claim and becomes something the visitor watches
   happen: a countdown, three steps with the real elapsed time against each,
   and a browser window that goes from empty to a padlock and a live site.

   The whole thing runs ONCE, when it scrolls into view, and then holds its
   finished state. A loop would turn a demonstration into wallpaper, and the
   second time round nobody is reading it.
   =========================================================================== */
.launch {
  position: relative;
  scroll-margin-top: var(--nav-h);
  padding-block: clamp(54px, 6vw, 76px);
  background: var(--chrome);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.launch h2, .launch h3 { color: #fff; }
.launch .lede { color: #b9bcb0; }

.launch-glow {
  position: absolute; z-index: -1; pointer-events: none;
  width: 720px; height: 720px; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(165,199,21,.16), transparent 62%);
  filter: blur(70px);
}

/* ---- The countdown ------------------------------------------------------ */
.launch-count {
  display: flex; align-items: baseline; justify-content: center;
  gap: clamp(12px, 3vw, 30px);
  margin: 2px 0 2px;
  font-weight: 800; letter-spacing: -.045em; line-height: 1;
}
.launch-num {
  font-size: clamp(2.8rem, 8vw, 5.4rem);
  color: #2f322c;
  transition: color .45s var(--ease), transform .45s var(--ease-out-back),
              text-shadow .45s var(--ease);
}
/* Each numeral lights as the sequence reaches it and stays lit — the point is
   the progression, so dimming the ones already counted would erase it. */
.launch.is-running .launch-num.is-lit {
  color: #fff;
  text-shadow: 0 0 40px rgba(165, 199, 21, .35);
}
.launch-num.is-now { transform: scale(1.08); }

.launch-word {
  font-size: clamp(1.9rem, 5.2vw, 3.4rem);
  color: #2f322c;
  transition: color .5s var(--ease), transform .5s var(--ease-out-back);
}
.launch.is-running .launch-word.is-lit {
  color: var(--lime);
  transform: scale(1.02);
  text-shadow: 0 0 56px rgba(165, 199, 21, .45);
}
.launch-dot {
  width: 9px; height: 9px; border-radius: 50%; flex: none;
  background: #2f322c; align-self: center;
  transition: background .4s var(--ease);
}
.launch.is-running .launch-dot.is-lit { background: var(--lime); }

/* ---- Layout -------------------------------------------------------------
   Steps down the left, the browser window on the right, so the cause and the
   effect are beside each other and the whole argument fits one screen. Stacked
   it ran to nearly two, and the countdown at the top had scrolled away before
   the window at the bottom finished animating — the two halves never appeared
   together, which is the one thing this section needs them to do. */
.launch-head { max-width: 780px; margin-inline: auto; }
.launch-body {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(22px, 3.4vw, 48px);
  align-items: center;
  margin-top: 34px;
}

/* ---- The three steps ---------------------------------------------------- */
.launch-left { min-width: 0; }
.launch-steps { display: grid; gap: 10px; min-width: 0; }
.launch-step {
  position: relative;
  display: flex; align-items: flex-start; gap: 16px;
  padding: 18px 20px;
  border: 1px solid #262a22; border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(255,255,255,.012));
  min-width: 0;
  opacity: .42;
  transform: translateY(8px);
  transition: opacity .5s var(--ease), transform .5s var(--ease),
              border-color .5s var(--ease), background .5s var(--ease);
}
.launch-step.is-on {
  opacity: 1; transform: none;
  border-color: rgba(165, 199, 21, .32);
  background: linear-gradient(180deg, rgba(165,199,21,.075), rgba(255,255,255,.012));
}
.launch-step-mark {
  width: 42px; height: 42px; flex: none; border-radius: 13px;
  display: grid; place-items: center;
  background: #22261e; color: #6f7568;
  transition: background .45s var(--ease), color .45s var(--ease), transform .45s var(--ease-out-back);
}
.launch-step.is-on .launch-step-mark {
  background: var(--lime); color: var(--on-lime); transform: scale(1.04);
}
.launch-step-text { min-width: 0; flex: 1; padding-right: 46px; }
.launch-step h3 { font-size: 1.06rem; margin-bottom: 4px; }
.launch-step p { color: #9ba095; font-size: .88rem; margin: 0; line-height: 1.5; }

/* The elapsed time, which is the whole argument. Tabular figures so the digits
   do not shuffle sideways as they count. */
.launch-step-time {
  position: absolute; top: 18px; right: 20px;
  font-size: .76rem; font-weight: 800; letter-spacing: .06em;
  color: #6f7568; font-variant-numeric: tabular-nums;
  transition: color .45s var(--ease);
}
.launch-step.is-on .launch-step-time { color: var(--lime); }

/* The rail joining the three, filled as the sequence advances. */
.launch-rail {
  position: relative; height: 2px; margin: 16px 0 0;
  background: #24281f; border-radius: 2px; overflow: hidden;
}
.launch-rail i {
  position: absolute; inset: 0 auto 0 0; width: 0;
  background: linear-gradient(90deg, var(--lime-ink), var(--lime));
  border-radius: 2px;
  transition: width 1s var(--ease);
}
.launch.is-done .launch-rail i { width: 100%; }

/* ---- The browser window ------------------------------------------------- */
.launch-browser {
  max-width: 560px; margin: 0 auto; width: 100%;
  border: 1px solid #2a2e26; border-radius: 16px; overflow: hidden;
  background: #16180f;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .45);
}
.launch-bar {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; background: #1d2019; border-bottom: 1px solid #2a2e26;
}
.launch-dots { display: flex; gap: 5px; flex: none; }
.launch-dots i { width: 9px; height: 9px; border-radius: 50%; background: #33382c; display: block; }
.launch-url {
  flex: 1; min-width: 0;
  display: flex; align-items: center; gap: 7px;
  padding: 6px 11px; border-radius: 8px; background: #101208;
  font-family: var(--mono); font-size: .78rem; color: #7e8377;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The padlock appears only when the certificate has actually been issued in
   the sequence — showing it from the start would undersell the one step this
   section exists to make visible. */
.launch-lock {
  flex: none; display: inline-grid; place-items: center;
  width: 15px; height: 15px; color: var(--lime);
  opacity: 0; transform: scale(.6);
  transition: opacity .4s var(--ease), transform .4s var(--ease-out-back);
}
.launch.is-secure .launch-lock { opacity: 1; transform: none; }
.launch.is-secure .launch-url { color: #c9cfbe; }

.launch-screen {
  position: relative; height: 190px;
  display: grid; place-items: center;
  background:
    linear-gradient(180deg, #14160e, #0e100a);
}
.launch-screen-empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  color: #4a4f42; font-size: .82rem;
  transition: opacity .4s var(--ease);
}
.launch-screen-empty i {
  display: block; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid #2a2e26; border-top-color: var(--lime);
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.launch.is-live .launch-screen-empty { opacity: 0; }

/* The "site" that appears: deliberately a wireframe, not a fake screenshot of
   a business that does not exist. */
.launch-site {
  position: absolute; inset: 0; padding: 20px;
  display: flex; flex-direction: column; gap: 11px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.launch.is-live .launch-site { opacity: 1; transform: none; }
.launch-site-bar {
  height: 9px; border-radius: 3px;
  background: linear-gradient(90deg, rgba(165,199,21,.85), rgba(165,199,21,.25));
}
.launch-site-bar.w70 { width: 70%; }
.launch-site-bar.w45 { width: 45%; }
.launch-site-rows { display: grid; gap: 7px; margin-top: 2px; }
.launch-site-rows i { display: block; height: 6px; border-radius: 3px; background: #23271e; }
.launch-site-rows i:nth-child(2) { width: 88%; }
.launch-site-rows i:nth-child(3) { width: 62%; }
.launch-site-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: auto; }
.launch-site-tiles i { display: block; height: 34px; border-radius: 7px; background: #1b1e16; }

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 940px) {
  .launch-body { grid-template-columns: 1fr; gap: 26px; margin-top: 30px; }
  .launch-rail { display: none; }
}
@media (max-width: 560px) {
  .launch-step { padding: 15px 16px; gap: 13px; }
  .launch-step-mark { width: 38px; height: 38px; border-radius: 12px; }
  .launch-step-text { padding-right: 40px; }
}
@media (max-width: 560px) {
  .launch-count { gap: 10px; }
  .launch-dot { width: 7px; height: 7px; }
  .launch-screen { height: 158px; }
  .launch-step-time { top: 18px; right: 18px; }
}

/* Somebody who asked for less motion gets the finished state immediately —
   the information is the three steps and their timings, and none of it lives
   in the animation. */
@media (prefers-reduced-motion: reduce) {
  .launch-num, .launch-word, .launch-dot, .launch-step,
  .launch-lock, .launch-site, .launch-rail i {
    transition: none; animation: none;
  }
  .launch-step { opacity: 1; transform: none; }
  .launch-screen-empty i { animation: none; border-top-color: #2a2e26; }
}