/* MyPoint VPN theme: light paper, emerald accent, split hero with a chat, dark "under the hood" block. */

.theme-mypointvpn {
  --bg: #f6f4ee;
  --bg-alt: #eeebe2;
  --surface: #fffdf8;
  --border: #ddd8cb;
  --text: #16201c;
  --muted: #5c6862;
  --accent: #0d8a5f;
  --accent-strong: #0a6e4c;
  --lime: #c8f169;
  --ink: #0f1a16;
  --surface-hover: #fff;
  --accent-soft: rgba(13, 138, 95, .1);
  --accent-line: var(--accent);
  --on-accent: #fff;
  --code-bg: #0f1a16;
  --code-text: #e9f1ec;
  --nav-bg: rgba(246, 244, 238, .85);
  --hero-bg:
    radial-gradient(40rem 26rem at 85% 20%, rgba(200, 241, 105, .45), transparent 70%),
    var(--bg);
  --radius: 1.1rem;
  --font: 'Manrope', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}
.theme-mypointvpn h1,
.theme-mypointvpn h2 { font-family: 'Unbounded', 'Manrope', sans-serif; font-weight: 700; letter-spacing: -.01em; }
.theme-mypointvpn h3 { font-weight: 800; }
.theme-mypointvpn code { background: rgba(13, 138, 95, .1); padding: .05em .35em; border-radius: .35em; font-size: .9em; }

/* nav */
.theme-mypointvpn .nav__logo { font-family: 'Unbounded', sans-serif; font-weight: 700; }
.theme-mypointvpn .nav__logo::before {
  content: ""; display: inline-block; width: .6rem; height: .6rem; margin-right: .5rem;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 .25rem rgba(13, 138, 95, .2);
  vertical-align: middle;
}

/* hero: text left, chat right */
.theme-mypointvpn .hero {
  text-align: left;
}
.theme-mypointvpn .hero--split .wrap {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 3rem; align-items: center;
}
.theme-mypointvpn .hero__title { margin-inline: 0; max-width: 16ch; font-size: clamp(2rem, 5vw, 3.1rem); line-height: 1.12; }
.theme-mypointvpn .hero__lead { margin-inline: 0; }
.theme-mypointvpn .hero__cta { justify-content: flex-start; }
.theme-mypointvpn .badge { border-color: var(--accent); color: var(--accent-strong); background: var(--surface); }
.theme-mypointvpn .btn { background: var(--surface); border-color: var(--border); color: var(--text); border-radius: 999px; }
.theme-mypointvpn .btn--primary { background: var(--ink); border-color: var(--ink); color: var(--lime); }
.theme-mypointvpn .btn--primary:hover { background: var(--accent-strong); color: #fff; }
@media (max-width: 820px) {
  .theme-mypointvpn .hero--split .wrap { grid-template-columns: 1fr; gap: 2.5rem; }
}

.chat {
  display: flex; flex-direction: column; gap: .55rem;
  padding: 1.1rem; border-radius: 1.4rem;
  background: var(--ink); color: #e9f1ec;
  box-shadow: 0 1.5rem 3rem -1.5rem rgba(15, 26, 22, .5);
  transform: rotate(1.2deg);
}
.chat__title { margin: 0 0 .3rem; color: #8fa39a; font-size: .8rem; text-align: center; }
.chat__msg {
  margin: 0; max-width: 85%; padding: .55rem .85rem;
  border-radius: 1rem; font-size: .92rem; line-height: 1.45;
}
.chat__msg--bot { align-self: flex-start; background: #1d2b25; border-bottom-left-radius: .3rem; }
.chat__msg--me { align-self: flex-end; background: var(--lime); color: var(--ink); border-bottom-right-radius: .3rem; font-weight: 600; }
.theme-mypointvpn .chat code { background: none; padding: 0; font-size: .95em; }
@media (max-width: 820px) { .chat { transform: none; } }

/* features */
.theme-mypointvpn .section--alt { background: var(--bg-alt); }
.theme-mypointvpn .card { background: var(--surface); box-shadow: 0 1px 0 var(--border); }
.theme-mypointvpn .card h3 { color: var(--text); }
.theme-mypointvpn .card code { background: rgba(13, 138, 95, .1); }
.theme-mypointvpn .card--link:hover { border-color: var(--accent); }
.theme-mypointvpn .card--link h3 { color: var(--accent-strong); }

/* get started: big numbered steps */
.start {
  list-style: none; margin: 2rem 0 0; padding: 0; counter-reset: s;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem;
}
.start li { counter-increment: s; position: relative; padding: 4.2rem 1.25rem 1.25rem; border-top: 3px solid var(--ink); }
.start li::before {
  content: counter(s, decimal-leading-zero); position: absolute; top: .9rem; left: 1.25rem;
  font: 700 2.2rem/1 'Unbounded', sans-serif; color: var(--accent);
}
.start p { margin: .5rem 0 0; color: var(--muted); }

/* note */
#note { padding-top: 0; }
.note {
  padding: 1.5rem 1.75rem; border-radius: var(--radius);
  background: var(--lime); color: var(--ink);
}
.note h2 { font-size: 1.25rem; }
.note p { margin: .6rem 0 0; max-width: 52rem; }
.theme-mypointvpn .note code { background: rgba(15, 26, 22, .1); }

/* under the hood */
.engine { background: var(--ink); color: #e9f1ec; }
.engine .section__lead { color: #a9bab2; }
.engine code { background: rgba(200, 241, 105, .12) !important; color: var(--lime); }
.engine__kicker {
  margin: 0 0 .5rem; color: var(--lime);
  font: 600 .8rem/1 'JetBrains Mono', monospace; text-transform: uppercase; letter-spacing: .12em;
}
.engine__list {
  list-style: none; margin: 2rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: .75rem 2rem;
}
.engine__list li { position: relative; padding-left: 1.4rem; color: #d3ddd8; }
.engine__list li::before { content: "›"; position: absolute; left: 0; color: var(--lime); font-weight: 800; }
.engine__callout {
  margin-top: 2.5rem; padding: 1.25rem 1.5rem;
  border: 1px solid rgba(200, 241, 105, .35); border-radius: var(--radius);
  background: rgba(200, 241, 105, .06);
}
.engine__callout h3 { color: var(--lime); font-size: 1.1rem; }
.engine__callout p { margin: .5rem 0 0; color: #d3ddd8; }

/* community + footer */
.theme-mypointvpn .grid--4 { grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
.theme-mypointvpn .footer { background: var(--bg-alt); }