/*
 * Aorta Landing — stylesheet
 *
 * A hand-authored port of the Tailwind utility classes the React landing page
 * used. Written out rather than pulled from a CDN so the theme is a single
 * self-contained upload: no build step, no runtime compiler, no external
 * request that can fail and leave the page unstyled.
 *
 * Design tokens are lifted verbatim from the original component so the two
 * render identically.
 */

/* ── Tokens ───────────────────────────────────────────────────────────────── */
:root {
  --ink:        #111111;
  --ink-soft:   #1a1a1a;
  --body:       #6b7280;   /* gray-500  */
  --body-dark:  #374151;   /* gray-700  */
  --line:       #f3f4f6;   /* gray-100  */
  --line-200:   #e5e7eb;   /* gray-200  */
  --tint:       #f4f7fe;   /* page wash */
  --wash:       #fafafa;
  --blue:       #2563eb;
  --indigo:     #4f46e5;
  --indigo-700: #4338ca;
  --emerald:    #059669;
  --dark-bg:    #0d0d0f;
  --dark-card:  #141417;
  --dark-line:  #27272a;

  --shell:      1200px;
  --radius-xl:  32px;
  --radius-lg:  24px;
  --radius-md:  16px;

  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, "Noto Sans", sans-serif,
          "Apple Color Emoji", "Segoe UI Emoji";
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The nav is fixed; without this an in-page jump lands under it. */
  scroll-padding-top: 120px;
}

body {
  margin: 0;
  font-family: var(--sans);
  background: var(--tint);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  overflow-x: hidden;
}

body ::selection { background: #dbeafe; }

img, svg { max-width: 100%; display: block; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  border: 0;
  background: none;
  cursor: pointer;
}

h1, h2, h3, h4 { margin: 0; letter-spacing: -0.02em; }
p, ul { margin: 0; }
ul { padding: 0; list-style: none; }

/* ── Layout helpers ───────────────────────────────────────────────────────── */
.shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 24px; }
.shell--narrow  { max-width: 1000px; }
.shell--reviews { max-width: 1100px; }
.shell--faq     { max-width: 800px; }

.section {
  position: relative;
  width: 100%;
  background: #fff;
  padding: 128px 0;
  border-top: 1px solid var(--line);
  text-align: left;
}

.section__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 64px;
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  padding: 6px 16px;
  border: 1px solid var(--line-200);
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  font-size: 14px;
  font-weight: 500;
  color: var(--body-dark);
}
.pill--tint { background: var(--tint); }
.pill--wash { background: var(--wash); }
.pill--dark {
  background: #18181b;
  border-color: #1f2937;
  color: #d1d5db;
}
.pill svg { width: 16px; height: 16px; }

.h2 {
  font-size: clamp(30px, 4.2vw, 48px);
  font-weight: 700;
  color: var(--ink);
  line-height: 1.1;
  margin-bottom: 24px;
}

.lede {
  max-width: 42rem;
  font-size: 17px;
  font-weight: 500;
  color: var(--body);
  line-height: 1.65;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  font-weight: 700;
  transition: transform .2s ease, background-color .2s ease, opacity .2s ease;
}
.btn--dark {
  background: #050505;
  color: #fff;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
}
.btn--dark:hover { background: #000; transform: scale(1.02); }
.btn--dark:active { transform: scale(.98); }

.btn--hero {
  background: #0a0a0a;
  color: #fff;
  padding: 16px 32px;
  font-size: 17px;
  font-weight: 600;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1);
}
.btn--hero:hover { background: #000; transform: scale(1.05); }
.btn--hero:active { transform: scale(.95); }

.btn--block { display: flex; width: 100%; }

/* ── Reveal on scroll (replaces framer-motion) ────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s cubic-bezier(.16, 1, .3, 1),
              transform .8s cubic-bezier(.16, 1, .3, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Respect a user who has asked the OS for less motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .logos__track { animation: none !important; }
  .beam, .feature-card svg path { animation: none !important; }
}

/* ── Top gradient bar + navbar ────────────────────────────────────────────── */
.topbar {
  height: 6px;
  width: 100%;
  background: linear-gradient(to right, #2563eb, #60a5fa, #000);
}

.nav {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  width: 95%;
  max-width: 1100px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, .03);
  padding: 10px 12px 10px 24px;
}

.nav__left { display: flex; align-items: center; gap: 48px; }

.logo {
  display: flex;
  align-items: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #0f172a;
  white-space: nowrap;
}
.logo__dot { font-size: 30px; line-height: 1; margin-right: 2px; }
.logo__sub { font-size: 12px; font-weight: 400; color: #000; margin-left: 4px; margin-top: 8px; }

.nav__links { display: none; align-items: center; gap: 32px; font-size: 15px; font-weight: 500; color: #374151; }
.nav__links a:hover { color: #000; }

.nav__right { display: flex; align-items: center; gap: 24px; padding-right: 4px; font-size: 15px; font-weight: 500; color: #374151; }
.nav__login { display: none; }
.nav__login:hover { color: #000; }

@media (min-width: 640px) { .nav__login { display: block; } }
@media (min-width: 768px) { .nav__links { display: flex; } }

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  z-index: 10;
  margin: 0 auto;
  max-width: 1400px;
  padding: 160px 24px 128px;
  text-align: center;
}

.hero__badge {
  display: inline-block;
  margin-bottom: 32px;
  overflow: hidden;
  border: 1px solid var(--line-200);
  border-radius: 999px;
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  padding: 6px 20px;
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
}

.hero__title {
  margin: 0 auto 24px;
  max-width: 56rem;
  font-size: clamp(40px, 7vw, 80px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
}

.hero__sub {
  margin: 0 auto 40px;
  max-width: 42rem;
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
  font-weight: 500;
  color: var(--body);
}

.hero__cta { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.hero__glow {
  position: absolute;
  top: 50%; left: 50%;
  margin-left: -75px; margin-top: -25px;
  height: 50px; width: 150px;
  border-radius: 999px;
  background: linear-gradient(to right, #2563eb, #000);
  filter: blur(30px);
  opacity: .4;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.hero__note { font-size: 14px; font-weight: 500; color: #9ca3af; }

.mockup {
  width: 100%;
  max-width: 1280px;
  margin: 112px auto 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, .15), 0 0 0 1px rgba(0, 0, 0, .04);
}
.mockup img { width: 100%; border-radius: var(--radius-md); }

/* Faint page vectors behind the hero */
.vectors { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.vectors svg { position: absolute; width: 100%; height: 100%; opacity: .03; }

/* ── Logos marquee ────────────────────────────────────────────────────────── */
.logos {
  position: relative;
  z-index: 30;
  width: 100%;
  margin-top: 80px;
  padding: 96px 0;
  background: var(--wash);
  border-top: 1px solid var(--line);
  text-align: center;
  overflow: hidden;
}
.logos__label { margin-bottom: 48px; font-size: 18px; font-weight: 500; color: #4b5563; }
.logos__viewport {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
}
.logos__track {
  display: flex;
  align-items: center;
  gap: 96px;
  padding: 0 32px;
  white-space: nowrap;
  width: max-content;
  animation: marquee 25s linear infinite;
}
.logos__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
}
.logos__mark { color: #9ca3af; font-weight: 900; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── Feature trio (Why choose us) ─────────────────────────────────────────── */
.trio { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .trio { grid-template-columns: repeat(3, 1fr); } }

.trio__item { display: flex; flex-direction: column; gap: 24px; text-align: left; }
.trio__shot {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 10px 40px -10px rgba(0, 0, 0, .08);
}
.trio__title { font-size: 20px; font-weight: 700; color: #111827; margin-bottom: 12px; }
.trio__desc  { font-size: 15px; font-weight: 500; color: var(--body); line-height: 1.65; }

/* ── Sticky scroll section ────────────────────────────────────────────────── */
.sticky-grid { display: grid; grid-template-columns: 1fr; gap: 64px; align-items: start; }
@media (min-width: 1024px) {
  .sticky-grid { grid-template-columns: 5fr 7fr; gap: 96px; }
  .sticky-grid__aside { position: sticky; top: 160px; height: fit-content; }
}

.sticky-grid__title {
  font-size: clamp(34px, 4.5vw, 52px);
  font-weight: 700;
  line-height: 1.05;
  color: var(--ink);
  margin-bottom: 48px;
}

.tablist { position: relative; display: flex; flex-direction: column; gap: 24px; padding-left: 4px; }
.tablist::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--line);
  border-radius: 999px;
}
.tab {
  position: relative;
  z-index: 1;
  border-left: 3px solid transparent;
  padding: 4px 0 4px 24px;
  font-size: 20px;
  font-weight: 500;
  color: var(--body);
  text-align: left;
  transition: color .2s ease, border-color .2s ease;
}
.tab:hover { color: #111827; }
.tab.is-active { border-left-color: #3b82f6; color: var(--indigo-700); }

.panels { display: flex; flex-direction: column; gap: 128px; padding-bottom: 160px; }
.panel { display: flex; flex-direction: column; gap: 24px; scroll-margin-top: 150px; }
.panel__title { font-size: 26px; font-weight: 700; color: #111827; }
.panel__desc  { font-size: 16px; font-weight: 500; color: var(--body); line-height: 1.65; max-width: 32rem; margin-bottom: 16px; }
.panel__shot  { border: 1px solid var(--line); border-radius: var(--radius-md); background: #fff; overflow: hidden; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1); }

/* ── How it works ─────────────────────────────────────────────────────────── */
.flow {
  position: relative;
  background: var(--wash);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  padding: 24px;
  overflow: hidden;
}
@media (min-width: 1024px) { .flow { padding: 48px; } }

.flow__intro { max-width: 32rem; margin: 16px auto 0; padding: 0 16px; text-align: center; }
.flow__intro h3 { font-size: 20px; font-weight: 700; color: #111827; margin-bottom: 16px; }
.flow__intro p  { font-size: 14px; font-weight: 500; color: var(--body); line-height: 1.65; }

.flow__pipe { display: flex; justify-content: center; height: 32px; margin-top: 24px; }
.flow__pipe span { display: block; width: 1px; height: 100%; background: var(--line-200); }

.flow__cards { display: grid; grid-template-columns: 1fr; gap: 24px; padding-top: 40px; }
@media (min-width: 768px) { .flow__cards { grid-template-columns: repeat(3, 1fr); } }

.flow-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 340px;
  padding: 32px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.flow-card h4 { align-self: flex-start; margin-bottom: 32px; font-size: 17px; font-weight: 700; color: #111827; }
.flow-card__steps { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; padding-top: 8px; }

.chip {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 85%;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--wash);
  font-size: 13px;
  font-weight: 600;
  color: var(--body-dark);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: transform .2s ease;
}
.chip:hover { transform: scale(1.05); }
.chip--lead {
  width: 92%;
  padding: 10px 16px;
  background: #fff;
  color: #1f2937;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1);
  transform: scale(1.05);
  z-index: 1;
}
.chip__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px; width: 20px;
  flex: none;
  border-radius: 999px;
  background: var(--indigo);
  color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
.chip__icon svg { height: 12px; width: 12px; }

/* ── Dark feature grid ────────────────────────────────────────────────────── */
.dark-section {
  position: relative;
  width: 100%;
  padding: 128px 0;
  background: var(--dark-bg);
  border-top: 1px solid #1f1f24;
  overflow: hidden;
  text-align: left;
}
.dark-section .h2 { color: #fff; text-align: center; }
.dark-section .lede { color: #9ca3af; text-align: center; max-width: 28rem; margin-bottom: 64px; }

.beams { position: absolute; inset: 0; display: flex; justify-content: space-between; align-items: center; opacity: .4; pointer-events: none; }
.beam { position: relative; width: 33%; height: 1px; overflow: hidden; display: none; }
.beam--l { background: linear-gradient(to right, transparent, var(--blue)); }
.beam--r { background: linear-gradient(to left,  transparent, var(--blue)); }
.beam::after {
  content: "";
  position: absolute;
  top: 0;
  height: 100%;
  width: 100px;
  background: #fff;
  filter: blur(2px);
}
.beam--l::after { left: 0; animation: sweep-r 2s linear infinite; }
.beam--r::after { right: 0; animation: sweep-l 2s linear infinite 1s; }
@media (min-width: 768px) { .beam { display: block; } }
@keyframes sweep-r { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
@keyframes sweep-l { from { transform: translateX(100%); }  to { transform: translateX(-300%); } }

.feature-grid { display: grid; grid-template-columns: 1fr; gap: 20px; width: 100%; }
@media (min-width: 768px)  { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .feature-grid { grid-template-columns: repeat(4, 1fr); } }

.feature-card {
  padding: 32px;
  border: 1px solid var(--dark-line);
  border-radius: var(--radius-md);
  background: var(--dark-card);
  transition: background-color .2s ease;
}
.feature-card:hover { background: #1a1a1e; }
.feature-card__icon { margin-bottom: 32px; }
.feature-card__icon svg { overflow: visible; }
.feature-card h3 { font-size: 18px; font-weight: 700; color: #fff; margin-bottom: 12px; }
.feature-card p  { font-size: 14px; font-weight: 500; color: #9ca3af; line-height: 1.65; }

/* The stroke-dash cycle the original ran with framer-motion. */
.feature-card svg path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: draw 3s linear infinite;
}
.feature-card svg path:nth-child(2) { animation-duration: 4s; animation-delay: .2s; }
.feature-card svg path:nth-child(3) { animation-duration: 3s; animation-delay: .4s; }
.feature-card svg path:nth-child(4) { animation-duration: 4s; animation-delay: .6s; }
@keyframes draw {
  0%   { stroke-dashoffset: 100; }
  50%  { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: 100; }
}

/* ── Reviews ──────────────────────────────────────────────────────────────── */
.reviews { display: grid; grid-template-columns: 1fr; gap: 24px; text-align: left; }
@media (min-width: 768px)  { .reviews { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .reviews { grid-template-columns: repeat(4, 1fr); } }

.review {
  min-height: 300px;
  padding: 40px;
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
}
.review--stat  { justify-content: center; }
.review--quote { justify-content: space-between; }
@media (min-width: 1024px) { .review--wide { grid-column: span 2; } }

.review--amber  { background: #f59e0b; color: #fff; }
.review--dark   { background: var(--ink-soft); }
.review--indigo { background: var(--indigo); color: #fff; align-items: center; text-align: center; }
.review--plain  {
  background: #fff;
  border: 2px solid #f9fafb;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, .02);
}
.review--soft {
  background: var(--wash);
  border: 1px solid var(--line);
  box-shadow: 0 4px 20px -4px rgba(0, 0, 0, .02);
}

.review__num { font-size: clamp(48px, 5vw, 60px); font-weight: 700; margin-bottom: 16px; line-height: 1; }
.review__num span { font-size: .8em; margin-left: 4px; }
.review__cap { font-size: 14px; font-weight: 500; }
.review--amber .review__cap { font-size: 18px; line-height: 1.25; opacity: .9; }
.review--plain .review__cap { color: var(--body); }
.review--indigo .review__cap { opacity: .9; }

.review__quote { font-size: 22px; font-weight: 700; line-height: 1.55; margin-bottom: 32px; }
.review--dark .review__quote { color: #fff; }
.review--soft .review__quote { color: #1f2937; font-weight: 600; }

.review__by { display: flex; align-items: center; gap: 16px; }
.review__avatar {
  height: 48px; width: 48px;
  flex: none;
  border-radius: 999px;
  background: #d1d5db;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 15px;
  color: #4b5563;
  overflow: hidden;
}
.review--dark .review__avatar { background: #4b5563; color: #e5e7eb; }
.review__name { font-size: 15px; font-weight: 700; }
.review--dark .review__name { color: #fff; }
.review__role { font-size: 13px; font-weight: 500; color: #6b7280; }
.review--dark .review__role { color: #9ca3af; }

/* ── Pricing ──────────────────────────────────────────────────────────────── */
.toggle { display: flex; align-items: center; gap: 16px; font-size: 14px; font-weight: 700; }
.toggle__label { color: var(--body); transition: color .2s ease; }
.toggle__label.is-on { color: #111827; }
.toggle__switch {
  position: relative;
  height: 28px; width: 48px;
  border-radius: 999px;
  background: #000;
  display: flex;
  align-items: center;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .06);
}
.toggle__knob {
  /* display:block matters: this is a <span>, and transform, width and height
     are all ignored on a non-replaced inline box — the knob would sit at the
     wrong size and never slide. */
  display: block;
  height: 20px; width: 20px;
  margin-left: 4px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  transition: transform .3s cubic-bezier(.34, 1.56, .64, 1);
}
.toggle__switch.is-yearly .toggle__knob { transform: translateX(20px); }
.badge-save {
  display: inline-block;
  border-radius: 999px;
  background: var(--emerald);
  padding: 2px 10px;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: 850px;
  width: 100%;
  margin: 0 auto 64px;
  border: 1px solid var(--line-200);
  border-radius: var(--radius-xl);
  background: #fff;
  text-align: left;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}
@media (min-width: 768px) { .plan { flex-direction: row; } }

.plan__tag {
  position: absolute;
  top: 0; right: 0;
  z-index: 1;
  background: #000;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 8px 24px;
  border-bottom-left-radius: var(--radius-md);
}

.plan__main, .plan__list { padding: 32px; }
@media (min-width: 768px) {
  .plan__main { width: 45%; padding: 48px; border-right: 1px solid var(--line); }
  .plan__list { width: 55%; padding: 48px; }
}
.plan__main { border-bottom: 1px solid var(--line); }
@media (min-width: 768px) { .plan__main { border-bottom: 0; } }

.plan__name { font-size: 24px; font-weight: 700; color: #111827; margin-bottom: 8px; }
.plan__blurb { font-size: 15px; font-weight: 500; color: var(--body); line-height: 1.65; margin-bottom: 32px; }
.plan__price { margin-bottom: 4px; }
.plan__price b { font-size: clamp(48px, 6vw, 64px); font-weight: 700; color: #111827; }
.plan__price span { font-size: 18px; font-weight: 600; color: var(--body); }
.plan__cycle { font-size: 14px; font-weight: 500; color: var(--body); margin-bottom: 16px; }

.trial {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  padding: 12px 16px;
  border: 1px solid #d1fae5;
  border-radius: var(--radius-md);
  background: #ecfdf5;
}
.trial svg { height: 16px; width: 16px; flex: none; color: var(--emerald); }
.trial b { display: block; font-size: 13px; font-weight: 700; color: #047857; }
.trial span { font-size: 11px; color: var(--emerald); }

.plan__list h4 { font-size: 14px; font-weight: 700; color: #111827; margin-bottom: 24px; text-transform: uppercase; }
.plan__list ul { display: flex; flex-direction: column; gap: 12px; }
.plan__list li { display: flex; align-items: flex-start; gap: 12px; font-size: 13px; font-weight: 600; color: var(--body-dark); }
.tick {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 20px; width: 20px;
  flex: none;
  margin-top: 2px;
  border-radius: 999px;
  background: var(--line);
  color: #000;
}
.tick svg { height: 12px; width: 12px; }
.plan__fine { margin-top: auto; padding-top: 24px; font-size: 12px; font-weight: 500; font-style: italic; color: #9ca3af; }

.addons { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 900px; margin: 0 auto; }
@media (min-width: 640px)  { .addons { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .addons { grid-template-columns: repeat(3, 1fr); } }

.addon {
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--wash);
  text-align: left;
  transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.addon:hover { background: #fff; border-color: var(--line-200); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1); }
.addon__top { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.addon__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px; width: 36px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
  color: #4b5563;
}
.addon__icon svg { height: 16px; width: 16px; }
.addon__price { font-size: 22px; font-weight: 700; color: #111827; }
.addon__price span { font-size: 13px; font-weight: 600; color: var(--body); }
.addon h4 { font-size: 14px; font-weight: 700; color: #1f2937; margin-bottom: 4px; }
.addon p  { font-size: 12px; font-weight: 500; color: var(--body); }

.addon--byok {
  border: 2px dashed #a7f3d0;
  background: rgba(236, 253, 245, .3);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.addon--byok .addon__icon { background: #d1fae5; border: 0; color: var(--emerald); }
.addon--byok .addon__price { color: #047857; }
.addon--byok h4 { color: #065f46; }
.addon--byok p  { color: var(--emerald); }

.addons__note { text-align: center; margin-top: 32px; font-size: 13px; font-weight: 500; color: #9ca3af; }

/* ── News ─────────────────────────────────────────────────────────────────── */
.news { display: grid; grid-template-columns: 1fr; gap: 32px; text-align: left; }
@media (min-width: 768px) { .news { grid-template-columns: repeat(3, 1fr); } }
.news__item { display: flex; flex-direction: column; cursor: pointer; }
.news__thumb {
  position: relative;
  height: 240px;
  margin-bottom: 24px;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(135deg, #e0e7ff, #f4f7fe);
}
.news__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.news__item:hover .news__thumb img { transform: scale(1.05); }
.news__item h3 { font-size: 19px; font-weight: 700; color: #111827; margin-bottom: 12px; line-height: 1.4; }
.news__item p  { font-size: 14px; font-weight: 500; color: var(--body); line-height: 1.65; }

/* ── FAQ ──────────────────────────────────────────────────────────────────── */
.faq { display: flex; flex-direction: column; gap: 16px; text-align: left; }
.faq__item {
  border: 1px solid #f9fafb;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 2px 10px -4px rgba(0, 0, 0, .02);
  transition: background-color .2s ease, border-color .2s ease;
}
.faq__item.is-open { background: rgba(244, 247, 254, .5); border-color: var(--line); }
.faq__q {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px 32px;
  text-align: left;
  font-size: 17px;
  font-weight: 700;
  color: #111827;
}
.faq__q svg { height: 20px; width: 20px; flex: none; transition: transform .3s ease; }
.faq__item.is-open .faq__q svg { transform: rotate(180deg); }
.faq__a { overflow: hidden; max-height: 0; opacity: 0; transition: max-height .3s ease, opacity .3s ease; }
.faq__item.is-open .faq__a { max-height: 400px; opacity: 1; }
.faq__a > div { padding: 0 32px 32px; max-width: 600px; font-size: 14px; font-weight: 500; color: var(--body); line-height: 1.65; }

/* ── Closing CTA ──────────────────────────────────────────────────────────── */
.cta { position: relative; width: 100%; background: #fff; padding: 96px 0 192px; overflow: hidden; border-top: 0; }
.cta__stage { position: relative; width: 100%; max-width: 1100px; margin: -40px auto 0; padding: 0 24px; display: flex; justify-content: center; }
.cta__frame { position: relative; width: 100%; max-width: 1100px; height: 350px; overflow: hidden; pointer-events: none; }
@media (min-width: 640px) { .cta__frame { height: 450px; } }
.cta__fade  { position: absolute; inset: 33% 0 0; background: linear-gradient(to bottom, transparent, rgba(255,255,255,.8), #fff); }
.cta__floor { position: absolute; inset: auto 0 0; height: 128px; background: #fff; }
.cta__body  { position: relative; z-index: 10; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 24px; margin-top: -40px; }
.cta__glow  {
  position: absolute;
  inset: -4px;
  border-radius: 999px;
  background: linear-gradient(to right, #2563eb, #60a5fa, #000);
  opacity: .3;
  filter: blur(20px);
  transition: opacity .3s ease;
}
.cta__btnwrap { position: relative; }
.cta__btnwrap:hover .cta__glow { opacity: .5; }
.cta__btn {
  position: relative;
  background: var(--ink);
  color: #fff;
  padding: 16px 32px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .3);
  transition: transform .2s ease, background-color .2s ease;
}
.cta__btn:hover { background: #000; transform: scale(1.05); }

/* ── Footer ───────────────────────────────────────────────────────────────── */
.footer { width: 100%; background: #fff; padding: 96px 0 48px; overflow: hidden; }
.footer__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 64px;
  margin-bottom: 80px;
  text-align: left;
}
@media (min-width: 1024px) { .footer__top { flex-direction: row; gap: 32px; margin-bottom: 96px; } }

.footer__brand { display: flex; flex-direction: column; max-width: 320px; }
.footer__brand .logo { margin: 0 0 24px -8px; }
.footer__blurb { font-size: 14px; font-weight: 500; color: var(--body); line-height: 1.65; margin-bottom: 32px; }
.social { display: flex; align-items: center; gap: 12px; }
.social a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 36px; width: 36px;
  border-radius: 999px;
  background: var(--ink-soft);
  color: #fff;
  transition: transform .2s ease;
}
.social a:hover { transform: scale(1.05); }
.social svg { height: 15px; width: 15px; }

.footer__cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px; width: 100%; }
@media (min-width: 768px)  { .footer__cols { grid-template-columns: repeat(3, 1fr); gap: 64px; } }
@media (min-width: 1024px) { .footer__cols { width: auto; gap: 112px; } }
.footer__cols h4 { font-size: 15px; font-weight: 700; color: #111827; margin-bottom: 24px; }
.footer__cols ul { display: flex; flex-direction: column; gap: 16px; font-size: 13px; font-weight: 500; color: var(--body); }
.footer__cols a:hover { color: #111827; }

.footer__rule { position: relative; width: 100%; height: 1px; background: var(--line); margin-bottom: 32px; }
.footer__rule i {
  position: absolute;
  top: -4px;
  height: 8px; width: 8px;
  border: 1px solid var(--line);
  background: #fff;
}
.footer__rule i:first-child { left: -4px; }
.footer__rule i:last-child  { right: -4px; }

.footer__legal { text-align: center; font-size: 13px; font-weight: 500; color: var(--body); padding-bottom: 16px; }
.footer__legal a { text-decoration: underline; }
.footer__legal a:hover { color: var(--indigo); }

/* ── Contact modal ────────────────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal[hidden] { display: none; }
.modal__veil {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  animation: fade .2s ease;
}
.modal__card {
  position: relative;
  width: 100%;
  max-width: 32rem;
  max-height: 92vh;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: #fff;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
  padding: 32px;
  text-align: left;
  animation: pop .25s cubic-bezier(.16, 1, .3, 1);
}
@media (min-width: 640px) { .modal__card { padding: 48px; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pop  { from { opacity: 0; transform: scale(.95) translateY(20px); } to { opacity: 1; transform: none; } }

.modal__close { position: absolute; right: 24px; top: 24px; color: #9ca3af; transition: color .2s ease; }
.modal__close:hover { color: #000; }
.modal h2 { font-size: 30px; font-weight: 700; color: #111827; margin-bottom: 8px; }
.modal__sub { color: var(--body); font-weight: 500; margin-bottom: 32px; }

.form { display: flex; flex-direction: column; gap: 16px; }
.form__row { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .form__row { grid-template-columns: repeat(2, 1fr); } }

.field { position: relative; }
.field > svg {
  position: absolute;
  left: 16px; top: 50%;
  transform: translateY(-50%);
  height: 16px; width: 16px;
  color: #9ca3af;
  pointer-events: none;
}
.field--area > svg { top: 16px; transform: none; }
.field input, .field textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: rgba(244, 247, 254, .5);
  padding: 14px 16px 14px 44px;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  outline: none;
  transition: border-color .2s ease;
}
.field textarea { resize: none; }
.field input:focus, .field textarea:focus { border-color: #000; }

.form__status { padding: 16px; border-radius: var(--radius-md); font-size: 14px; font-weight: 700; }
.form__status--ok  { background: #ecfdf5; color: var(--emerald); }
.form__status--err { background: #fff1f2; color: #e11d48; }

.form__submit {
  width: 100%;
  border-radius: 999px;
  background: #000;
  padding: 16px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  transition: background-color .2s ease, transform .1s ease, opacity .2s ease;
}
.form__submit:hover:not(:disabled) { background: #111827; }
.form__submit:active:not(:disabled) { transform: scale(.98); }
.form__submit:disabled { opacity: .5; cursor: not-allowed; }

.spinner { display: inline-block; height: 18px; width: 18px; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Screen-reader-only text, for the skip link and icon-only buttons. */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}