/* =========================================================================
   ResuMatch — modern flat skin + standardized theme
   Palette: professional white, purple, and light gray.
   A clean, flat layer on top of the Tailwind markup — one soft shadow tier,
   1px borders, no bevels or letterpress — plus a normalization pass that
   folds the app's many accent hues into one purple family so the whole
   system reads as a single theme. Loaded AFTER the Tailwind CDN so it can
   override; !important is used where Tailwind wins.
   ========================================================================= */

:root {
  /* Purple brand ramp */
  --pri-50: #f5f3fb;
  --pri-100: #ece8f8;
  --pri-200: #ddd6f0;
  --pri-300: #c8bce8;
  --pri-500: #9184db;
  --pri-600: #6f5cd0; /* primary */
  --pri-700: #5b48b8; /* hover / strong */
  --pri-800: #4a3a97;
  --pri-950: #2c2555; /* headings */

  /* Neutrals */
  --ink: #322f45;
  --surface: #ffffff;
  --surface-2: #f7f6fc;
  --gray-1: #edeaf4;
  --gray-2: #e4e0ef;
  --line: #d8d3e6;

  --sk-radius: 12px;

  /* Single soft shadow tiers used everywhere */
  --shadow-card: 0 1px 2px rgba(44, 37, 85, 0.06), 0 8px 24px rgba(44, 37, 85, 0.08);
  --shadow-pop: 0 4px 12px rgba(44, 37, 85, 0.1), 0 18px 44px rgba(44, 37, 85, 0.14);
}

/* ---- Desktop surface: near-white with one faint violet glow ---- */
body {
  background-color: #f6f5fa !important;
  background-image: radial-gradient(1100px 520px at 50% -12%, rgba(111, 92, 208, 0.09), transparent 70%) !important;
  color: var(--ink);
}

/* =========================================================================
   Panels & cards — flat white, 1px border, one soft shadow.
   ========================================================================= */
.shadow-panel,
main article,
#matchResultsPanel,
[data-page] > div,
#jobDetailModal > div,
#applyModal > div,
#questionnaireModal > div,
#authOverlay > div {
  border-radius: var(--sk-radius) !important;
  box-shadow: var(--shadow-card) !important;
  border-color: var(--line) !important;
}

main article {
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
main article:hover {
  box-shadow: var(--shadow-pop) !important;
}

/* =========================================================================
   Buttons — flat fills, simple hover/active. Colors come from the Tailwind
   classes (recolored by the standardization layer below).
   ========================================================================= */
button,
.file-button,
label[for="resumeLibUpload"],
label[for="resumePdf"] {
  border-radius: 10px !important;
}

main button,
#authOverlay button:not([data-auth-tab]):not([data-account-type]):not(.sk-auth-back),
#landingOverlay .sk-btn,
#jobDetailModal button,
#applyModal button,
#questionnaireModal button:not([data-pref-option]),
#accountMenu button,
#accountButton {
  text-shadow: none;
  box-shadow: 0 1px 2px rgba(44, 37, 85, 0.08) !important;
  transition: box-shadow 0.12s ease, transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease, filter 0.12s ease;
}

main button:hover,
#applyModal button:hover,
#questionnaireModal button:not([data-pref-option]):hover,
#landingOverlay .sk-btn:hover {
  filter: brightness(1.02);
}

main button:active,
#applyModal button:active,
#questionnaireModal button:not([data-pref-option]):active,
#authOverlay button:not([data-auth-tab]):not([data-account-type]):not(.sk-auth-back):active,
#accountButton:active,
#landingOverlay .sk-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 1px rgba(44, 37, 85, 0.1) !important;
}

/* Segmented pickers (auth tabs, account-type, pref pills) — flat chips;
   active/inactive looks are applied by app.js via Tailwind classes. */
[data-auth-tab],
[data-account-type],
[data-pref-option] {
  border-radius: 8px !important;
  text-shadow: none;
}
.bg-zinc-100.p-1 {
  border-radius: 10px !important;
  box-shadow: none !important;
}

/* =========================================================================
   Inputs — flat field with a clear focus ring.
   ========================================================================= */
input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
textarea,
select {
  border-radius: 9px !important;
  box-shadow: none !important;
  border-color: var(--line) !important;
}
input:focus,
textarea:focus,
select:focus {
  border-color: var(--pri-500) !important;
  box-shadow: 0 0 0 3px rgba(111, 92, 208, 0.18) !important;
}

/* Dashed dropzones — flat tray, dashed border only. */
label[for="resumePdf"],
label[for="resumeLibUpload"] {
  box-shadow: none !important;
  border-radius: 16px !important;
}

/* =========================================================================
   Sidebar — flat light panel with a plain hairline edge.
   ========================================================================= */
#sidebar {
  background-color: #fbfaff !important;
  background-image: none !important;
  border-right: 1px solid var(--line) !important;
  box-shadow: none !important;
}
#sidebarLogo {
  background: transparent;
  box-shadow: none !important;
  border-radius: 12px !important;
}
#sidebar nav a {
  transition: background 0.12s ease, color 0.12s ease;
}
#accountButton,
#accountMenu {
  background-image: none !important;
}
#accountMenu {
  box-shadow: var(--shadow-pop) !important;
}

/* =========================================================================
   THEME STANDARDIZATION
   Fold the app's assorted brand hues (violet / fuchsia / indigo / sky /
   cyan / blue / emerald) into the single purple ramp. Rose (destructive)
   and amber (missing-skill warning) are intentionally left untouched.
   ========================================================================= */

/* --- Text --- */
.text-violet-950, .text-violet-900,
.text-indigo-950,
.text-sky-950, .text-sky-900,
.text-emerald-950, .text-emerald-900 { color: var(--pri-950) !important; }

.text-violet-800, .text-violet-700, .text-violet-600,
.text-indigo-800, .text-indigo-700, .text-indigo-500,
.text-sky-800, .text-sky-700, .text-sky-500,
.text-emerald-700, .text-emerald-600 { color: var(--pri-700) !important; }

.hover\:text-violet-800:hover, .hover\:text-violet-700:hover,
.hover\:text-fuchsia-800:hover { color: var(--pri-800) !important; }

/* --- Backgrounds (light) --- */
.bg-violet-50, .bg-indigo-50, .bg-sky-50 { background-color: var(--pri-50) !important; }
.bg-violet-100, .bg-indigo-100, .bg-sky-100, .bg-emerald-100 { background-color: var(--pri-100) !important; }
.hover\:bg-indigo-50:hover, .hover\:bg-fuchsia-50:hover { background-color: var(--pri-50) !important; }
.hover\:bg-violet-100:hover, .hover\:bg-sky-100:hover { background-color: var(--pri-100) !important; }

/* --- Backgrounds (solid) --- */
.bg-violet-600, .bg-indigo-600, .bg-sky-600, .bg-blue-500 { background-color: var(--pri-600) !important; }
.bg-violet-500\/20, .bg-indigo-500\/20, .bg-sky-500\/20 { background-color: rgba(111, 92, 208, 0.22) !important; }

/* Modal backdrops -> tinted purple instead of indigo. */
.bg-indigo-950\/45 { background-color: rgba(35, 28, 70, 0.45) !important; }

/* --- Borders --- */
.border-violet-500, .border-sky-500, .border-sky-400, .border-emerald-500 { border-color: var(--pri-500) !important; }
.border-violet-200, .border-sky-200, .border-indigo-200, .border-indigo-100,
.border-emerald-300, .border-emerald-200 { border-color: var(--pri-200) !important; }
.hover\:border-violet-500:hover, .hover\:border-violet-400:hover,
.hover\:border-sky-400:hover, .hover\:border-fuchsia-400:hover,
.hover\:border-emerald-500:hover, .hover\:border-emerald-300:hover { border-color: var(--pri-500) !important; }
.focus\:border-violet-500:focus, .focus\:border-sky-500:focus,
.focus\:border-emerald-500:focus { border-color: var(--pri-500) !important; }

/* --- Rings --- */
.ring-violet-100, .ring-violet-200,
.ring-sky-100, .ring-sky-200,
.ring-indigo-100, .ring-indigo-200,
.ring-emerald-100, .ring-emerald-200,
.ring-fuchsia-100 { --tw-ring-color: var(--pri-200) !important; }
.ring-violet-600, .ring-indigo-600, .ring-sky-600 { --tw-ring-color: var(--pri-600) !important; }
.focus\:ring-violet-100:focus, .focus\:ring-violet-200:focus,
.focus\:ring-fuchsia-100:focus, .focus\:ring-sky-100:focus,
.focus\:ring-emerald-100:focus { --tw-ring-color: var(--pri-200) !important; }

/* --- Gradient stops --- (only the value vars are overridden; Tailwind's
   --tw-gradient-stops chain already references them, so the gradients recolor
   automatically. `via` sets stops literally, so those are rebuilt.) */
.from-violet-600, .from-emerald-600, .from-indigo-600 { --tw-gradient-from: var(--pri-600) var(--tw-gradient-from-position) !important; }
.from-violet-700, .from-emerald-700 { --tw-gradient-from: var(--pri-700) var(--tw-gradient-from-position) !important; }
.from-violet-100, .from-emerald-100 { --tw-gradient-from: var(--pri-100) var(--tw-gradient-from-position) !important; }
.from-violet-50, .from-sky-50 { --tw-gradient-from: var(--pri-50) var(--tw-gradient-from-position) !important; }
.from-emerald-500 { --tw-gradient-from: var(--pri-500) var(--tw-gradient-from-position) !important; }

.to-fuchsia-600, .to-sky-600 { --tw-gradient-to: var(--pri-600) var(--tw-gradient-to-position) !important; }
.to-fuchsia-700, .to-sky-700 { --tw-gradient-to: var(--pri-700) var(--tw-gradient-to-position) !important; }
.to-fuchsia-50, .to-sky-50, .to-violet-50, .to-indigo-50, .to-emerald-50 { --tw-gradient-to: var(--pri-50) var(--tw-gradient-to-position) !important; }
.to-sky-100, .to-cyan-100 { --tw-gradient-to: var(--pri-100) var(--tw-gradient-to-position) !important; }
.to-cyan-500 { --tw-gradient-to: var(--pri-500) var(--tw-gradient-to-position) !important; }

.via-fuchsia-50, .via-sky-50 { --tw-gradient-stops: var(--tw-gradient-from), var(--pri-50) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }
.via-fuchsia-100 { --tw-gradient-stops: var(--tw-gradient-from), var(--pri-100) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }

/* Hover gradient variants */
.hover\:from-violet-700:hover, .hover\:from-emerald-700:hover { --tw-gradient-from: var(--pri-700) var(--tw-gradient-from-position) !important; }
.hover\:from-violet-100:hover { --tw-gradient-from: var(--pri-100) var(--tw-gradient-from-position) !important; }
.hover\:to-fuchsia-700:hover, .hover\:to-sky-700:hover { --tw-gradient-to: var(--pri-700) var(--tw-gradient-to-position) !important; }
.hover\:to-sky-100:hover { --tw-gradient-to: var(--pri-100) var(--tw-gradient-to-position) !important; }
.hover\:via-fuchsia-100:hover { --tw-gradient-stops: var(--tw-gradient-from), var(--pri-100) var(--tw-gradient-via-position), var(--tw-gradient-to) !important; }

/* =========================================================================
   Landing page — split hero with an app-preview card.
   ========================================================================= */
#landingOverlay {
  position: fixed;
  inset: 0;
  z-index: 70;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  background-color: #f8f7fc;
  background-image: radial-gradient(1100px 560px at 50% -12%, rgba(111, 92, 208, 0.12), transparent 70%) !important;
}
#landingOverlay.hidden {
  display: none;
}

/* --- Sticky nav --- */
.sk-land-nav {
  position: sticky;
  top: 0;
  z-index: 5;
  background: rgba(248, 247, 252, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(216, 211, 230, 0.7);
}
.sk-land-nav-inner {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.sk-brand {
  display: flex;
  align-items: center;
  min-width: 0;
}
.sk-brand-logo {
  /* Transparent PNG cropped tight to the artwork, so nav scale needs far
     less height than the old white-margin JPEG did. */
  display: block;
  height: 48px;
  width: auto;
  max-width: 340px;
  object-fit: contain;
  object-position: left center;
}

/* --- Hero: split grid --- */
.sk-land-wrap {
  width: min(1120px, calc(100% - 48px));
  margin: 0 auto;
  padding: 48px 0 56px;
  flex: 1;
  display: flex;
  flex-direction: column;
}
.sk-hero {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 56px;
  align-items: center;
  padding-top: 24px;
}
.sk-hero-copy {
  min-width: 0;
}
.sk-eyebrow {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--pri-700);
  background: var(--pri-50);
  border: 1px solid var(--pri-200);
}
.sk-hero h1 {
  margin: 20px 0 0;
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--pri-950);
}
.sk-hero h1 .sk-accent {
  background-image: linear-gradient(92deg, var(--pri-600), #a24bcf);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sk-hero p {
  max-width: 560px;
  margin: 18px 0 0;
  font-size: 17px;
  line-height: 1.65;
  color: #5a5570;
}
.sk-trust {
  margin-top: 18px !important;
  font-size: 13px !important;
  color: #8a84a0 !important;
}

.sk-cta {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.sk-btn {
  appearance: none;
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
}
.sk-btn-primary {
  color: #fff;
  background: var(--pri-600);
  box-shadow: 0 1px 2px rgba(44, 37, 85, 0.12), 0 8px 20px rgba(111, 92, 208, 0.3) !important;
}
.sk-btn-primary:hover {
  background: var(--pri-700);
}
.sk-btn-ghost {
  color: var(--pri-800);
  border-color: var(--line);
  background: #ffffff;
}
.sk-btn-ghost:hover {
  border-color: var(--pri-300);
  background: var(--pri-50);
}
.sk-btn-sm {
  min-height: 40px;
  padding: 0 18px;
  font-size: 14px;
}

/* --- App preview card (decorative) --- */
.sk-preview {
  min-width: 0;
}
.sk-preview-card {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 20px;
  box-shadow: var(--shadow-pop);
}
.sk-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.sk-preview-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--pri-950);
}
.sk-preview-badge {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--pri-700);
  background: var(--pri-50);
  border: 1px solid var(--pri-200);
}
.sk-preview-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--gray-2);
  border-radius: 12px;
  background: #fff;
}
.sk-preview-row + .sk-preview-row {
  margin-top: 10px;
}
.sk-ring {
  --pct: 80;
  flex-shrink: 0;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 800;
  color: var(--pri-800);
  /* white disc over a conic gauge = progress ring without pseudo-elements */
  background:
    radial-gradient(closest-side, #ffffff 73%, transparent 74% 100%),
    conic-gradient(var(--pri-600) calc(var(--pct) * 1%), var(--pri-100) 0);
}
.sk-preview-job {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.sk-preview-role {
  font-size: 14px;
  font-weight: 700;
  color: var(--pri-950);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sk-preview-co {
  margin-top: 1px;
  font-size: 12px;
  color: #8a84a0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sk-preview-bar {
  display: block;
  height: 6px;
  margin-top: 8px;
  border-radius: 999px;
  background: var(--pri-100);
  overflow: hidden;
}
.sk-preview-bar span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--pri-500), var(--pri-700));
}
.sk-preview-pipeline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
}
.sk-chip {
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: #6a6580;
  background: var(--surface-2);
  border: 1px solid var(--line);
}
.sk-chip.is-on {
  color: #fff;
  background: var(--pri-600);
  border-color: var(--pri-600);
}
.sk-chip-arrow {
  color: #b7b1cc;
  font-size: 12px;
}

/* --- Features --- */
.sk-features {
  margin-top: 72px;
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sk-feature {
  padding: 24px;
  border-radius: 14px;
  text-align: left;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.sk-feature:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-pop);
}
.sk-feature-icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  margin-bottom: 14px;
  color: var(--pri-700);
  background: var(--pri-100);
}
.sk-feature h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--pri-950);
}
.sk-feature p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #6a6580;
}

.sk-land-foot {
  margin-top: 56px;
  text-align: center;
  font-size: 13px;
  color: #8a84a0;
}

/* --- Landing sections: how it works, companies, FAQ --- */
.sk-section {
  margin-top: 88px;
}
.sk-section-head {
  max-width: 640px;
  margin: 0 auto 36px;
  text-align: center;
}
.sk-section-head h2,
.sk-split-copy h2 {
  margin: 14px 0 0;
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: var(--pri-950);
}
.sk-section-head p {
  margin: 12px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: #6a6580;
}

.sk-steps {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.sk-step {
  padding: 24px;
  border-radius: 14px;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}
.sk-step-num {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  margin-bottom: 14px;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, var(--pri-500), var(--pri-700));
  box-shadow: 0 6px 14px rgba(111, 92, 208, 0.3);
}
.sk-step h3 {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--pri-950);
}
.sk-step p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #6a6580;
}

.sk-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
.sk-split-copy > p {
  max-width: 520px;
  margin: 14px 0 0;
  font-size: 16px;
  line-height: 1.65;
  color: #5a5570;
}
.sk-checklist {
  margin: 20px 0 26px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}
.sk-checklist li {
  position: relative;
  padding-left: 30px;
  font-size: 15px;
  font-weight: 500;
  color: #4c4762;
}
.sk-checklist li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  top: 0;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 800;
  color: var(--pri-700);
  background: var(--pri-100);
}
.sk-split-panel {
  min-width: 0;
}

.sk-faq {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.sk-faq details {
  background: #ffffff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.sk-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  font-size: 15px;
  font-weight: 700;
  color: var(--pri-950);
}
.sk-faq summary::-webkit-details-marker {
  display: none;
}
.sk-faq summary::after {
  content: "+";
  flex-shrink: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1;
  color: var(--pri-600);
}
.sk-faq details[open] summary::after {
  content: "\2212";
}
.sk-faq details p {
  margin: 0;
  padding: 0 20px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #6a6580;
}

/* --- Closing CTA banner --- */
.sk-banner {
  margin-top: 88px;
  padding: 48px 32px;
  border-radius: 20px;
  text-align: center;
  color: #fff;
  background-image: linear-gradient(115deg, var(--pri-600), #a24bcf);
  box-shadow: 0 18px 44px rgba(111, 92, 208, 0.35);
}
.sk-banner h2 {
  margin: 0;
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  letter-spacing: -0.6px;
}
.sk-banner p {
  max-width: 520px;
  margin: 12px auto 0;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.85);
}
.sk-banner .sk-cta {
  justify-content: center;
}
.sk-btn-light {
  color: var(--pri-700);
  background: #ffffff;
  box-shadow: 0 1px 2px rgba(44, 37, 85, 0.15);
}
.sk-btn-light:hover {
  background: var(--pri-50);
}
.sk-btn-outline-light {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.55);
  background: transparent;
}
.sk-btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* --- Responsive --- */
@media (max-width: 1023px) {
  .sk-hero {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .sk-hero p {
    margin-left: auto;
    margin-right: auto;
  }
  .sk-cta {
    justify-content: center;
  }
  .sk-preview {
    max-width: 460px;
    margin: 0 auto;
    width: 100%;
  }
  .sk-split {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .sk-split-copy > p {
    margin-left: auto;
    margin-right: auto;
  }
  .sk-checklist {
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
  .sk-split-panel {
    max-width: 460px;
    margin: 0 auto;
    width: 100%;
  }
}
@media (max-width: 720px) {
  .sk-land-nav-inner,
  .sk-land-wrap {
    width: calc(100% - 32px);
  }
  .sk-features {
    grid-template-columns: 1fr;
  }
  .sk-features {
    margin-top: 48px;
  }
  .sk-cta .sk-btn {
    flex: 1 1 100%;
  }
  .sk-section {
    margin-top: 56px;
  }
  .sk-steps {
    grid-template-columns: 1fr;
  }
  .sk-banner {
    margin-top: 56px;
    padding: 36px 20px;
  }
}

/* "Back to home" link injected into the auth card. */
.sk-auth-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--pri-700);
  cursor: pointer;
  background: none;
  border: none;
  box-shadow: none !important;
  padding: 0;
}
.sk-auth-back:hover {
  color: var(--pri-800);
}