/* ==========================================================
   RESET STYLE
   ========================================================== */

/* reset.css */
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default margin and padding */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

/* Remove list styles */
ol,
ul {
  list-style: none;
}

/* Remove default quotes */
blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}

/* Tables still need 'cellspacing="0"' in the markup */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* Remove default button styles */
button,
input,
select,
textarea {
  margin: 0;
  padding: 0;
  background: none;
  border: none;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  line-height: inherit;
}

/* Remove outline on focused elements */
:focus {
  outline: 0;
}

/* Reset anchor styles */
a {
  color: inherit;
  text-decoration: none;
}

/* Make images and embedded objects responsive */
embed,
object,
video {
  max-width: 100%;
  height: auto;
}

/* Remove default fieldset styles */
fieldset {
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

/* Remove iOS input shadows */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
textarea {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

/* Remove autofill background color */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px white inset !important;
}

/* Remove spinner from number inputs */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Remove clear button from search inputs */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

/* Remove default styles for progress elements */
progress {
  vertical-align: baseline;
}

/* Correct cursor style for clickable elements */
[role="button"],
button {
  cursor: pointer;
}

/* Remove tap highlight on mobile */
a,
button,
input,
textarea,
select {
  -webkit-tap-highlight-color: transparent;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}

body.body--lock {
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden;
}

.mobile-menu {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================
    TOKENS
   ========================================================== */
/* ==========================================================
   TOKENS.CSS — DESIGN SYSTEM (1920 BASE)
   Rules:
   - Only 4 breakpoints: 1440 / 1024 / 768 / 480
   - Typography/padding/spacing via tokens vars
   ========================================================== */

:root {

  /* ===== Breakpoints (reference only) ===== */
  --bp-1440: 1440px;
  --bp-1024: 1024px;
  --bp-768: 768px;
  --bp-480: 480px;

  /* ===== Colors ===== */
  --White: #ffffff;
  --Gray: #4a4a4a;
  --DarkGray: #2d2d2d;
  --GreenLight: #b5d9a7;

  /* ===== Layout (1920 baseline, responsive via tokens) ===== */
  --container: 1600px;
  --pad-x: 80px;
  --section-py: 140px;

  /* ===== Typography (fluid; avoids oversizing on ~1512px Mac screens) ===== */
  --font-body: "Overused Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --h1: clamp(56px, 4.6vw, 92px);
  --h1-lh: clamp(62px, 5.0vw, 104px);

  --h2: clamp(38px, 2.8vw, 56px);
  --h2-lh: clamp(44px, 3.2vw, 64px);

  --h3: clamp(28px, 1.9vw, 38px);
  --h3-lh: clamp(34px, 2.3vw, 44px);

  --text: clamp(18px, 1.15vw, 22px);
  --text-lh: clamp(28px, 1.8vw, 34px);

  --small: clamp(16px, 0.95vw, 18px);
  --small-lh: clamp(24px, 1.45vw, 28px);

  /* ===== Spacing scale ===== */
  --gap-1: 10px;
  --gap-2: 18px;
  --gap-3: 28px;
  --gap-4: 40px;
  --gap-5: 60px;
  --gap-6: 84px;
  --gap-7: 120px;

  /* ===== Radius ===== */
  --radius-1: 8px;
  --radius-2: 16px;
  --radius-3: 24px;
  --radius-4: 40px;

  /* ===== Borders ===== */
  --border-1: 1px;
  --border-2: 2px;

  /* ===== Buttons ===== */
  --btn-h: 64px;
  --btn-fs: var(--text);
  --btn-px: 40px;

  /* ===== Inputs ===== */
  --input-h: 60px;
  --input-py: 14px;
  --input-px: 18px;
  --input-fs: var(--text);
  --input-lh: var(--text-lh);
  --input-radius: var(--radius-1);

  /* ===== Header ===== */
  --header-h: 88px;
  --header-pad-y: 28px;

  /* ===== Z-index ===== */
  --z-header: 1000;
  --z-modal: 2000;

  /* ===== Effects ===== */
  --shadow-1: 0 8px 30px rgba(0, 0, 0, 0.12);
  --shadow-2: 0 14px 60px rgba(0, 0, 0, 0.16);
}

/* ==========================================================
   <= 1440px (MacBook / Laptop)
   ========================================================== */

@media (max-width: 1440px) {
  :root {
    --container: 1200px;
    --pad-x: 40px;
    --section-py: 96px;

    --h1: 56px;
    --h1-lh: 62px;

    --h2: 38px;
    --h2-lh: 44px;

    --h3: 28px;
    --h3-lh: 34px;

    --text: 18px;
    --text-lh: 28px;

    --small: 15px;
    --small-lh: 22px;

    --btn-h: 52px;
    --btn-fs: 18px;
    --btn-px: 32px;

    --input-h: 46px;
    --input-py: 11px;
    --input-px: 16px;

    --header-h: 68px;
    --header-pad-y: 20px;

    --gap-5: 48px;
    --gap-6: 64px;
    --gap-7: 96px;
  }
}


/* ==========================================================
   <= 1024px (Tablet Landscape / Small Laptop)
   ========================================================== */

@media (max-width: 1024px) {
  :root {
    --container: 920px;
    --pad-x: 32px;
    --section-py: 84px;

    --h1: 44px;
    --h1-lh: 50px;

    --h2: 32px;
    --h2-lh: 38px;

    --h3: 24px;
    --h3-lh: 30px;

    --text: 16px;
    --text-lh: 24px;

    --small: 14px;
    --small-lh: 20px;

    --btn-h: 48px;
    --btn-fs: 16px;
    --btn-px: 24px;

    --input-h: 44px;
    --input-py: 10px;
    --input-px: 14px;

    --header-h: 64px;
    --header-pad-y: 18px;

    --gap-6: 56px;
    --gap-7: 80px;
  }
}


/* ==========================================================
   <= 768px (Tablet Portrait)
   ========================================================== */

@media (max-width: 768px) {
  :root {
    --container: 680px;
    --pad-x: 24px;
    --section-py: 72px;

    --h1: 34px;
    --h1-lh: 38px;

    --h2: 28px;
    --h2-lh: 32px;

    --h3: 22px;
    --h3-lh: 28px;

    --text: 16px;
    --text-lh: 24px;

    --small: 14px;
    --small-lh: 20px;

    --btn-h: 46px;
    --btn-fs: 16px;
    --btn-px: 22px;

    --input-h: 42px;
    --input-py: 10px;
    --input-px: 14px;

    --header-h: 60px;
    --header-pad-y: 16px;

    --gap-5: 40px;
    --gap-6: 48px;
    --gap-7: 64px;

    --radius-4: 28px;
  }
}


/* ==========================================================
   <= 480px (Mobile)
   ========================================================== */

@media (max-width: 480px) {
  :root {
    --container: 100%;
    --pad-x: 18px;
    --section-py: 60px;

    --h1: 30px;
    --h1-lh: 34px;

    --h2: 24px;
    --h2-lh: 28px;

    --h3: 20px;
    --h3-lh: 26px;

    --text: 15px;
    --text-lh: 22px;

    --small: 13px;
    --small-lh: 18px;

    --btn-h: 44px;
    --btn-fs: 15px;
    --btn-px: 18px;

    --input-h: 42px;
    --input-py: 10px;
    --input-px: 12px;

    --header-h: 56px;
    --header-pad-y: 14px;

    --gap-4: 24px;
    --gap-5: 32px;
    --gap-6: 40px;
    --gap-7: 48px;

    --radius-4: 24px;
  }
}

/* ==========================================================
    BASE
   ========================================================== */

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  max-width: none;
  background-color: #282828;
  font-family: var(--font-body);
  font-size: var(--text);
  line-height: var(--text-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  display: flex;
  flex-direction: column;
}

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

/* =========================================
   LAYOUT SYSTEM
========================================= */

.section {
  width: 100%;
}

.section-pad {
  padding-bottom: var(--section-py);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  padding-top: var(--pad-x);
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  box-sizing: border-box;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--gap-4);
}

.row {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* =========================================
   GRID SYSTEM
========================================= */

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-4);
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-4);
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-4);
}

@media (max-width: 1024px) {
  .grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .grid-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {

  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   TYPOGRAPHY
========================================= */

h1 {
  font-size: var(--h1);
  line-height: var(--h1-lh);
  margin: 0;
}

h2 {
  font-size: var(--h2);
  line-height: var(--h2-lh);
  margin: 0;
}

h3 {
  font-size: var(--h3);
  line-height: var(--h3-lh);
  margin: 0;
}

p {
  margin: 0;
  font-size: var(--text);
  line-height: var(--text-lh);
}

.text-small {
  font-size: var(--small);
  line-height: var(--small-lh);
}

/* =========================================
   BUTTON SYSTEM
========================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-h);
  padding: 0 var(--btn-px);
  border: none;
  border-radius: 7px;
  font-size: var(--btn-fs);
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease;
}

.btn-primary {
  position: relative;
  background: linear-gradient(360deg, #00ad8c 0%, #00755f 51%);
  color: #ffffff;
  overflow: hidden;
  z-index: 1;
}

.btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(360deg, #00624f 0%, #005d4b 97%);
  opacity: 0;
  z-index: -1;
  border-radius: inherit;
}

.btn-primary:hover::before {
  opacity: 1;
}

.btn-secondary {
  position: relative;
  background: #474747;
  color: #ffffff;
  overflow: hidden;
  z-index: 1;
}

.btn-secondary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(360deg, #00624f 0%, #005d4b 97%);
  opacity: 0;
  z-index: -1;
  border-radius: inherit;
}

.btn-secondary:hover::before {
  opacity: 1;
}

/* =========================================
   HERO BASE
========================================= */

.hero {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 2;
}

/* =========================================
   UTILITY SPACING
========================================= */

.mt-1 {
  margin-top: var(--gap-1);
}

.mt-2 {
  margin-top: var(--gap-2);
}

.mt-3 {
  margin-top: var(--gap-3);
}

.mt-4 {
  margin-top: var(--gap-4);
}

.mt-5 {
  margin-top: var(--gap-5);
}

.mb-1 {
  margin-bottom: var(--gap-1);
}

.mb-2 {
  margin-bottom: var(--gap-2);
}

.mb-3 {
  margin-bottom: var(--gap-3);
}

.mb-4 {
  margin-bottom: var(--gap-4);
}

.mb-5 {
  margin-bottom: var(--gap-5);
}

/* =========================================
   FULL-BLEED BACKGROUND SECTIONS
========================================= */

.section-dark {
  background: #111111;
  color: #ffffff;
}

.section-accent {
  background: #00ad8c;
  color: #ffffff;
}

/* ============================================================
   INPUTS — CANON (token-first with safe fallbacks)
   ============================================================ */

.input-box,
.step-3-card-number-field-input,
.step-3-cvv-field-input,
.step-3-native-select,
.step-3-native-select-date {
  font-family: var(--font-body);
  font-size: var(--input-fs, var(--text));
  line-height: var(--input-lh, var(--text-lh));
  color: var(--White);

  border: 1px solid var(--White);
  border-radius: var(--input-radius, 7px);
  background: transparent;
  outline: none;
  box-sizing: border-box;
}

.input-box,
.step-3-native-select {
  width: 100%;
  min-height: var(--input-h, 52px);
  padding: var(--input-py, 14px) var(--input-px, 18px);
}

/* controls with "centered" text (brand trigger, card number wrapper, cvv wrapper) */
.step-3-card-number-field-input,
.step-3-cvv-field-input,
.step-3-native-select-date {
  min-height: var(--input-h, 52px);
  padding: 0 var(--input-px, 18px);
}

/* ==========================================================
    STYLE
   ========================================================== */


@font-face {
  font-family: "Overused Grotesk";
  src: url("/fonts/OverusedGrotesk-VF.woff2") format("woff2 supports variations"),
    url("/fonts/OverusedGrotesk-VF.woff2") format("woff2-variations");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

.success-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background-color: #DFF5E3;
  border-radius: 8px;
  padding: 16px 24px;
  max-width: 400px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease-out;
}

.success-box.show {
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.success-box.hide {
  opacity: 0;
  transform: translate(-50%, -60%);
}

.success-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.success-icon {
  flex-shrink: 0;
}

.success-title {
  color: #1B5E20;
  font-size: var(--text);
  font-weight: 500;
  line-height: var(--text-lh);
}

.success-messages {
  margin-top: 8px;
}

.success-messages p {
  color: #1E4D2B;
  margin: 4px 0;
  text-align: center;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.error-box {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  background-color: #FDD3D0;
  border-radius: 8px;
  padding: 16px 24px;
  max-width: 400px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease-out;
}

.error-box.show {
  opacity: 1;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}

.error-box.hide {
  opacity: 0;
  transform: translate(-50%, -60%);
}

.error-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.error-icon {
  flex-shrink: 0;
}

.error-title {
  color: #EC221F;
  font-size: var(--text);
  font-weight: 500;
  line-height: var(--text-lh);
}

.error-messages {
  margin-top: 8px;
}

.error-messages p {
  color: #282828;
  margin: 4px 0;
  text-align: center;
}

html,
body {
  overflow-x: hidden;
}


body.no-scroll,
body.no-scroll * {
  overscroll-behavior: contain;
}

body[style*="overflow: hidden"] {
  height: 100vh;
}

.website-header {
  width: 100%;
  padding-top: 60px;
  padding-bottom: 60px;
  position: relative;
  z-index: 3;
}

.header-container {
  max-width: var(--container);
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  box-sizing: border-box;
  margin: 0 auto;
}

.header-left-menu,
.header-right-menu {
  display: flex;
  align-items: center;
  gap: 1vw;
  flex: 1;
}

.header-right-menu {
  justify-content: flex-end;
}

.header-logo-container {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-logo {
  width: 264px;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.header-logo img {
  max-width: 100%;
  height: auto;
}

.menu-item-wrapper {
  position: relative;
  padding-bottom: 10px;
  margin-bottom: -10px;
}

.menu-item {
  padding: 0 10px;
  height: 48px;
  border-radius: 7px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.menu-item:hover {
  background: #3a3a3a;
}

.menu-text {
  color: white;
  font-size: var(--text);
  font-weight: 400;
  line-height: var(--text-lh);
}

.header-login {
  color: white;
  font-size: var(--text);
  font-weight: 600;
  line-height: var(--text-lh);
  cursor: pointer;
  margin-left: var(--gap-6);
  white-space: nowrap;
}

.login-text {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.login-text:hover {
  color: #ccc;
}

.header-bottom-line {
  background-color: white;
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 94%;
  height: 2px;
  transform: translateX(-50%);
  max-width: 1810px;
}

.fixed-header {
  width: 100%;
  max-width: var(--container);
  height: 64px;
  position: fixed;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(12.5px);
  border-radius: 100px;
  z-index: 1000;
  transition: top 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.fixed-header.active {
  top: var(--gap-3);
}

.fixed-header .header-container {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.fixed-header .header-left-menu,
.fixed-header .header-right-menu {
  display: flex;
  align-items: center;
  gap: 64px;
  flex: 1;
}

.fixed-header .header-right-menu {
  justify-content: flex-end;
}

.fixed-header .header-logo-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 0;
  margin: 0 20px;
}

.fixed-header .header-logo {
  width: 154px;
  height: 34px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fixed-header .header-logo img {
  max-width: 100%;
  height: auto;
}

.fixed-header .menu-item-wrapper-fixed {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
}

.fixed-header .menu-item-fixed {
  padding: 0 10px;
  height: 48px;
  border-radius: 7px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.fixed-header .menu-text {
  color: var(--White, white);
  font-size: var(--text);
  font-weight: 400;
  line-height: var(--text-lh);
}

.fixed-header .dropdown-item {
  width: 100%;
  justify-content: center;
  display: flex;
  flex-direction: column;
  color: var(--White, white);
  font-size: var(--text);
  font-weight: 400;
  line-height: var(--text-lh);
  word-wrap: break-word;
  text-decoration: none;
  transition: color 0.3s ease;
}

.fixed-header .dropdown-item:hover {
  color: #ccc;
}

.fixed-header .header-login {
  color: var(--White, white);
  font-size: var(--text);
  font-weight: 600;
  line-height: var(--text-lh);
  cursor: pointer;
  margin-left: 64px;
  white-space: nowrap;
}

.fixed-header .login-text {
  color: inherit;
  text-decoration: none;
  transition: color 0.3s ease;
}

.fixed-header .login-text:hover {
  color: #ccc;
}

.fixed-header .header-bottom-line {
  display: none;
}

.mobile-menu {
  display: none;
}

.grid-item {
  display: flex;
  flex-direction: column;
  max-width: 560px;
  width: 100%;
}

.title {
  color: #fff;
  font-weight: 400;
  margin: 0;
}

.description {
  position: relative;
  margin-bottom: 1rem;
  color: #afbcb8;
  font-weight: 400;
  max-width: 100%;
}

.description::before {
  content: url("../img/ico/quotes-1.svg");
  position: absolute;
  left: -20px;
  top: 0;
  transform: translateY(-50%);
}

.description::after {
  content: url("../img/ico/quotes-2.svg");
  position: absolute;
  right: 0%;
  top: 100%;
  transform: translateY(-50%);
}

.link {
  color: #b5d9a7;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.link:hover {
  text-decoration: underline;
}

.image {
  width: 100%;
  height: auto;
  border-radius: 0.5rem;
}

@media (max-width: 1440px) {
  .website-header {
    padding-top: 60px;
    padding-bottom: 40px;
  }

  .header-container {
    padding: 0 40px;
  }

  .header-left-menu,
  .header-right-menu {
    gap: 24px;
  }

  .menu-item {
    height: 44px;
    padding: 0 12px;
  }

  .dropdown-menu {
    width: 260px;
    padding: 18px 20px;
    gap: 14px;
  }

  .header-logo {
    width: 200px;
    height: auto;
  }

  .header-login {
    margin-left: 20px;
  }

  .fixed-header {
    height: 52px;
  }

  .fixed-header .header-container {
    padding: 0 40px;
  }

  .fixed-header .header-left-menu,
  .fixed-header .header-right-menu {
    gap: 24px;
  }

  .fixed-header .menu-item-fixed {
    height: 44px;
    padding: 0 12px;
  }

  .fixed-header .header-logo {
    width: 115px;
    height: auto;
  }

  .fixed-header .dropdown-menu {
    width: 260px;
    padding: 18px 20px;
    gap: 14px;
  }

  .fixed-header .header-login {
    margin-left: 20px;
  }
}

@media (max-width: 1024px) {
  .website-header {
    padding-top: 52px;
    padding-bottom: 36px;
  }

  .header-container {
    padding: 0 28px;
  }

  .header-left-menu,
  .header-right-menu {
    gap: 20px;
  }

  .menu-item {
    height: 42px;
    padding: 0 10px;
  }

  .dropdown-menu {
    width: 280px;
    padding: 18px 20px;
    gap: 14px;
  }

  .header-logo {
    width: 190px;
    height: auto;
  }

  .header-login {
    margin-left: 16px;
  }

  .fixed-header {
    height: 54px;
  }

  .fixed-header .header-container {
    padding: 0 28px;
  }

  .fixed-header .header-left-menu,
  .fixed-header .header-right-menu {
    gap: 20px;
  }

  .fixed-header .menu-item-fixed {
    height: 42px;
    padding: 0 10px;
  }

  .fixed-header .header-logo {
    width: 120px;
    height: auto;
  }

  .fixed-header .dropdown-menu {
    width: 280px;
    padding: 18px 20px;
    gap: 14px;
  }

  .fixed-header .header-login {
    margin-left: 16px;
  }
}

@media (max-width: 768px) {
  .grid-item {
    max-width: 560px;
    margin: 0 auto;
  }

  .header-bottom-line {
    display: none;
  }

  .mobile-menu {
    display: block;
  }

  .fixed-header {
    display: none;
  }

  .website-header {
    padding: 20px 20px;
    position: relative;
    background-color: initial;
    z-index: 3000;
  }

  .header-container {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 0;
    position: relative;
    z-index: 3001;
  }

  .header-logo-container {
    order: 2;
    flex: 0 1 auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: auto;
    pointer-events: none;
  }

  .header-logo-container a {
    pointer-events: auto;
  }

  .header-logo {
    width: 120px;
    height: 30px;
  }

  .header-left-menu {
    order: 3;
    flex: 1;
    justify-content: flex-end;
    gap: 0;
  }

  .header-right-menu {
    order: 1;
    flex: 1;
    justify-content: flex-start;
    gap: 0;
  }

  .menu-item-wrapper {
    display: none;
  }

  .burger-menu {
    position: relative;
    width: 30px;
    height: 20px;
    cursor: pointer;
    transition: transform 0.3s ease;
    display: block;
  }

  .burger-line {
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background-color: white;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease, top 0.3s ease, bottom 0.3s ease;
  }

  .burger-line:nth-child(1) {
    top: 0;
  }

  .burger-line:nth-child(2) {
    top: 50%;
    transform: translateY(-50%);
  }

  .burger-line:nth-child(3) {
    bottom: 0;
  }

  .burger-menu.active .burger-line:nth-child(1) {
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
  }

  .burger-menu.active .burger-line:nth-child(2) {
    opacity: 0;
  }

  .burger-menu.active .burger-line:nth-child(3) {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%) rotate(-45deg);
  }

  .mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    right: auto;
    width: 100%;
    height: 100vh;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    inset: 0;
    z-index: 2999;
    padding: 110px 20px 20px;
    box-sizing: border-box;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .mobile-menu::-webkit-scrollbar {
    display: none;
  }

  .mobile-menu.active {
    transform: translateX(0);
  }

  .mobile-menu-container {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
  }

  .mobile-menu-item {
    width: 100%;
    color: white;
    text-decoration: none;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    text-align: left;
    border-radius: 6px;
    transition: background-color 0.2s ease;
  }

  .mobile-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .mobile-login-item {
    width: 100%;
    color: white;
    text-decoration: none;
    padding: 12px 14px;
    margin-top: 18px;
    border-radius: 6px;
    display: block;
    text-align: left;
    transition: background-color 0.2s ease;
  }

  .mobile-login-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
  }

  .mobile-menu-item a,
  .mobile-login-item a,
  .mobile-login-item button,
  .mobile-menu-button {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    text-align: left;
  }
}

@media (max-width: 480px) {
  .website-header {
    padding: 16px 16px;
  }

  .header-logo {
    width: 110px;
    height: 26px;
  }

  .burger-menu {
    width: 28px;
    height: 18px;
  }

  .burger-line {
    height: 2px;
  }

  .mobile-menu {
    padding: 96px 16px 16px;
  }

  .section {
    padding: 16px;
  }

  .grid-item {
    max-width: 100%;
  }
}

.footer {
  background-color: #004437;
  padding: 60px 30px;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 60px;
  width: 100%;
  margin-top: auto;
}

.footer-content {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  box-sizing: border-box;
}

.footer-columns {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 60px;
}

.footer-column-logo {
  flex: 0 0 auto;
}

.footer-column-logo img {
  max-width: 220px;
  height: auto;
}

.footer-column {
  display: flex;
  flex-direction: column;
  gap: 32px;
  min-width: 180px;
}

.footer-column-title {
  color: #b5d9a7;
  font-size: var(--text);
  font-weight: 600;
  line-height: var(--text-lh);
}

.footer-links {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-link {
  color: white;
  font-size: var(--text);
  font-weight: 400;
  line-height: var(--text-lh);
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.3s;
  max-width: 100%;
  word-break: break-word;
}

.footer-link:hover {
  text-decoration-color: white;
}

.footer-divider {
  width: 100%;
}

.footer-divider svg {
  width: 100%;
  height: auto;
}

.footer-bottom {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  box-sizing: border-box;
}

.footer-copyright {
  color: white;
  font-size: var(--small);
  font-weight: 400;
  line-height: var(--small-lh);
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.footer-legal-link {
  color: white;
  font-size: var(--small);
  font-weight: 400;
  line-height: var(--small-lh);
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.3s;
}

.footer-legal-link:hover {
  text-decoration-color: white;
}

@media (max-width: 1440px) {
  .footer {
    height: auto;
    padding: 56px 40px;
    gap: 36px;
  }

  .footer-columns {
    width: 100%;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
  }

  .footer-column-logo {
    margin-right: 0;
    width: 100%;
    text-align: center;
    margin-bottom: 28px;
  }

  .footer-column-logo img {
    max-width: 180px;
    height: auto;
  }

  .footer-column {
    gap: 24px;
  }

  .footer-links {
    gap: 18px;
  }

  .footer-bottom {
    width: 100%;
    flex-direction: column;
    gap: 22px;
    align-items: flex-start;
  }

  .footer-copyright {
    width: 100%;
    order: 2;
  }

  .footer-legal-links {
    width: 100%;
    justify-content: flex-start;
    gap: 22px;
    order: 1;
    flex-wrap: wrap;
  }
}

@media (max-width: 1024px) {
  .footer {
    padding: 48px 28px;
    gap: 30px;
  }

  .footer-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 32px;
    width: 100%;
  }

  .footer-column-logo {
    grid-column: 1 / -1;
    margin-bottom: 18px;
    text-align: center;
  }

  .footer-column {
    gap: 18px;
  }

  .footer-links {
    gap: 14px;
  }

  .footer-bottom {
    gap: 18px;
  }
}

@media (max-width: 768px) {
  .footer {
    padding: 40px 20px;
    gap: 22px;
    align-items: flex-start;
  }

  .footer-columns {
    grid-template-columns: 1fr 1fr;
    gap: 22px 22px;
  }

  .footer-column-logo {
    text-align: left;
  }

  .footer-column-logo img {
    max-width: 150px;
  }

  .footer-bottom {
    gap: 16px;
    align-items: flex-start;
  }

  .footer-legal-links {
    gap: 14px;
  }
}

@media (max-width: 480px) {
  .footer {
    padding: 32px 16px;
    gap: 18px;
  }

  .footer-columns {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .footer-column-logo {
    margin-bottom: 12px;
    text-align: left;
  }

  .footer-column-logo img {
    max-width: 140px;
  }

  .footer-column {
    gap: 14px;
  }

  .footer-links {
    gap: 10px;
  }

  .footer-bottom {
    gap: 14px;
  }

  .footer-legal-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .footer-legal-link {
    width: auto;
  }
}

/* =========================================
   PAGES
========================================= */

/* =========================================
   ACCOUNT
========================================= */
.panel__line--inline {
  display: flex;
  align-items: center;
  gap: var(--gap-2);
  flex-wrap: wrap;
}

.inline-form {
  display: inline;
  margin: 0;
}

.link-btn {
  color: var(--GreenLight);
}

.dashboard-sidebar {
  width: 100%;
  max-width: 360px;
  background: #464646;
  padding: var(--gap-5) var(--gap-3);
  flex-shrink: 0;
  border-top-left-radius: var(--radius-1);
  border-bottom-left-radius: var(--radius-1);
  box-sizing: border-box;
}

.dashboard-main {
  flex: 1;
  padding: var(--gap-5);
  background: #333333;
  border-top-right-radius: var(--radius-1);
  border-bottom-right-radius: var(--radius-1);
  box-sizing: border-box;
  min-width: 0;
}

.user-info-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-6);
}

.user-avatar-circle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid transparent;
  background: linear-gradient(to right, #b5d9a7, #00aa89) border-box;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  overflow: hidden;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}

.avatar-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  transition: opacity 0.3s;
}

.upload-avatar-btn,
.remove-avatar-btn {
  z-index: 2;
}

.initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--h3);
  line-height: var(--h3-lh);
  font-weight: 500;
  color: var(--White);
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: var(--DarkGray);
}

.upload-avatar-btn {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  border: none;
  background: #333;
  border-radius: 50%;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
  cursor: pointer;
}

.upload-avatar-btn .icon-upload {
  fill: white;
}

.remove-avatar-btn {
  position: absolute;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  border: none;
  background: #333;
  border-radius: 50%;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s;
  cursor: pointer;
}

.remove-avatar-btn .icon-delete {
  fill: white;
}

.user-avatar-circle:hover .upload-avatar-btn,
.user-avatar-circle:hover .remove-avatar-btn {
  opacity: 1;
}

.user-avatar-circle[data-has-avatar="true"] .initials,
.user-avatar-circle[data-has-avatar="true"] .upload-avatar-btn {
  display: none;
}

.user-avatar-circle[data-has-avatar="false"] .remove-avatar-btn {
  display: none;
}

.user-full-name {
  text-align: center;
  font-size: var(--text);
  line-height: 1.2;
  font-weight: 700;
  color: var(--White);
}

.navigation-menu {
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
}

.nav-menu-item {
  display: flex;
  align-items: center;
  gap: var(--gap-1);
  padding: var(--gap-2) var(--gap-3);
  border-radius: var(--radius-1);
  font-size: var(--text);
  font-weight: 700;
  color: var(--White);
  text-decoration: none;
  transition: background-color 0.3s;
}

.nav-menu-item:hover {
  background-color: #282828;
}

.nav-menu-item.active {
  background-color: #282828;
}

.title-and-description {
  display: flex;
  align-items: center;
  gap: var(--gap-6);
  margin-bottom: var(--gap-4);
  flex-wrap: wrap;
}

.content-main-title {
  width: auto;
  font-size: var(--h1);
  line-height: var(--h1-lh);
  font-weight: 400;
  color: var(--White);
  margin: 0;
}

.content-description-text {
  font-size: var(--text);
  line-height: var(--text-lh);
  font-weight: 400;
  color: var(--White);
  position: relative;
  display: inline-block;
  padding: 0 var(--gap-3);
  margin: 0;
  max-width: 100%;
}

.content-description-text::before {
  content: url("../img/ico/quotes-1.svg");
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
}

.content-description-text::after {
  content: url("../img/ico/quotes-2.svg");
  position: absolute;
  right: 0%;
  top: 100%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
}

.popup-confirm-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.9);
  display: none;
  z-index: var(--z-modal);
}

.popup-confirm-container {
  width: 100%;
  max-width: 450px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--z-modal);
  display: none;
  border-radius: var(--radius-1);
  overflow: hidden;
  padding: 1px;
  box-sizing: border-box;
  background: linear-gradient(135deg, #b5d9a7, #00aa89);
}

.popup-confirm-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-5);
  background-color: #282828;
  border-radius: calc(var(--radius-1) - 2px);
  padding: var(--gap-5);
  box-sizing: border-box;
}

.popup-confirm-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: var(--gap-2);
}

.popup-confirm-title {
  align-self: stretch;
  text-align: center;
  color: white;
  font-size: var(--text);
  line-height: var(--text-lh);
  font-weight: 600;
  word-wrap: break-word;
}

.popup-confirm-message {
  width: 100%;
  max-width: 350px;
  text-align: center;
  color: white;
  font-size: var(--text);
  line-height: var(--text-lh);
  font-weight: 400;
  word-wrap: break-word;
}

.cards-desktop {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  gap: var(--gap-4);
  flex-wrap: wrap;
  margin: 0 auto;
}

.card-desktop {
  border-radius: var(--radius-1);
  width: 100%;
  max-width: 456px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-1);
  position: relative;
  padding: 1px;
  background: linear-gradient(135deg, #b5d9a7, #00aa89);
  box-sizing: border-box;
}

.card-desktop>.content-desktop {
  width: 100%;
  height: 100%;
  background: #282828;
  border-radius: calc(var(--radius-1) - 2px);
  padding: var(--gap-5) var(--gap-4);
  box-sizing: border-box;
}

.details-desktop {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-3);
  width: 100%;
}

.title-desktop {
  text-align: center;
  color: #b5d9a7;
  font-size: var(--h3);
  line-height: var(--h3-lh);
  font-weight: 600;
  width: 100%;
}

.remaining-desktop {
  color: white;
  font-size: var(--text);
  line-height: var(--text-lh);
  font-weight: 400;
  width: 100%;
}

.selector-desktop {
  width: 100%;
  position: relative;
}

.dropdown-trigger {
  width: 100%;
  height: var(--input-h);
  border-radius: var(--input-radius);
  outline: var(--border-2) white solid;
  outline-offset: calc(var(--border-2) * -1);
  background: transparent;
  color: white;
  font-size: var(--input-fs);
  line-height: var(--input-lh);
  font-family: var(--font-body);
  padding: 0 var(--input-px);
  display: flex;
  align-items: center;
  cursor: pointer;
  justify-content: space-between;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

.price-desktop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  font-size: var(--text);
  line-height: var(--text-lh);
  color: white;
  font-weight: 600;
  gap: var(--gap-2);
}



.cards-mobile {
  display: none;
}

@media (max-width: 768px) {
  .mobile-dashboard-main {
    display: block;
    padding: var(--gap-3);
    box-sizing: border-box;
  }

  .cards-desktop {
    display: none;
  }

  .cards-mobile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--gap-2);
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
  }

  .card-mobile {
    width: 100%;
    padding: var(--gap-3);
    background: #282828;
    border-radius: var(--radius-1);
    outline: var(--border-1) #b5d9a7 solid;
    outline-offset: calc(var(--border-1) * -1);
    box-sizing: border-box;
  }

  .inner-mobile {
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: var(--gap-3);
    display: flex;
    box-sizing: border-box;
  }

  .header-mobile {
    align-self: stretch;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: var(--gap-2);
    display: flex;
  }

  .title-mobile {
    align-self: stretch;
    text-align: center;
    color: #b5d9a7;
    font-size: var(--small);
    line-height: var(--small-lh);
    font-weight: 700;
  }

  .remaining-mobile {
    align-self: stretch;
    color: white;
    font-size: var(--small);
    line-height: var(--small-lh);
    font-weight: 400;
  }

  .selector-mobile {
    align-self: stretch;
    height: var(--input-h);
    padding-left: var(--input-px);
    padding-right: var(--input-px);
    border-radius: var(--input-radius);
    outline: var(--border-2) white solid;
    outline-offset: calc(var(--border-2) * -1);
    display: flex;
    align-items: center;
    position: relative;
    box-sizing: border-box;
  }

  .price-mobile {
    align-self: stretch;
    justify-content: space-between;
    align-items: center;
    gap: var(--gap-2);
    display: flex;
  }

  .price-label-mobile,
  .price-value-mobile {
    color: white;
    font-size: var(--small);
    line-height: var(--small-lh);
    font-weight: 700;
  }

  .price-value-mobile {
    text-align: right;
  }

  .mobile-title {
    align-self: stretch;
    color: white;
    font-size: var(--text);
    line-height: var(--text-lh);
    font-weight: 400;
    margin-bottom: var(--gap-3);
  }

  .mobile-content {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: var(--gap-3);
    display: flex;
  }

  .mobile-description {
    position: relative;
    text-align: left;
    width: 100%;
    max-width: 420px;
    color: #afbcb8;
    font-size: var(--small);
    line-height: var(--small-lh);
    font-weight: 400;
    word-wrap: break-word;
    padding: 0 var(--gap-2);
    box-sizing: border-box;
  }

  .mobile-description::before {
    content: url("../img/ico/quotes-1.svg");
    position: absolute;
    left: 0;
    top: 0;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
  }

  .mobile-description::after {
    content: url("../img/ico/quotes-2.svg");
    position: absolute;
    right: 0%;
    top: 100%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
  }

  .dashboard-sidebar {
    max-width: 100%;
    margin: 0 auto;
    border-top-right-radius: var(--radius-1);
    border-bottom-right-radius: var(--radius-1);
  }



  .user-info-section {
    gap: var(--gap-3);
  }

  .popup-confirm-container {
    width: calc(100% - (var(--pad-x) * 2));
    max-width: 420px;
  }

  .popup-confirm-content {
    gap: var(--gap-4);
  }

  .nav-menu-item {
    font-size: var(--small);
    line-height: var(--small-lh);
  }
}

@media (max-width: 480px) {
  .cards-mobile {
    max-width: 100%;
  }

  .popup-confirm-container {
    width: calc(100% - (var(--pad-x) * 2));
    max-width: 100%;
  }
}

/* =========================================
   Billing Monitor
========================================= */
.bm-wrap {
  max-width: 1400px;
  width: 100%;
}

.bm-table-wrap {
  width: 100%;
  overflow: auto;
  border-radius: 7px;
  background: #282828;
  outline: 1px #474747 solid;
  outline-offset: -1px;
}

.bm-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 980px;
}

.bm-table th,
.bm-table td {
  padding: 14px 16px;
  border-bottom: 1px solid #3a3a3a;
  vertical-align: top;
  color: white;
  font-size: 16px;
}

.bm-table th {
  color: #b5d9a7;
  font-size: 16px;
  font-weight: 700;
  text-align: left;
  background: #1f1f1f;
  position: sticky;
  top: 0;
  z-index: 1;
}

.bm-muted {
  color: #afbcb8;
}

.bm-bad {
  color: #ff8a80;
}

.bm-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #1f1f1f;
  outline: 1px #3a3a3a solid;
  outline-offset: -1px;
}

.bm-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  width: 100%;
}

.bm-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 180px;
  flex: 1;
}

.bm-label {
  color: #afbcb8;
  font-size: 14px;
}

.bm-input {
  height: 48px;
  border-radius: 7px;
  outline: 2px white solid;
  outline-offset: -2px;
  background: transparent;
  color: white;
  padding: 0 14px;
  font-size: 16px;
}

.bm-actions {
  display: flex;
  gap: 12px;
  align-items: flex-end;
}

.bm-reset {
  color: #b5d9a7;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: text-decoration-color .2s;
}

.bm-reset:hover {
  text-decoration-color: #b5d9a7;
}

/* Pagination (laravel links) a bit readable on dark */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.pagination a,
.pagination span {
  padding: 10px 14px;
  border-radius: 7px;
  outline: 1px #474747 solid;
  outline-offset: -1px;
  color: white;
  background: #282828;
  font-size: 16px;
}

.pagination .active span {
  background: #1f1f1f;
  color: #b5d9a7;
}


/* =========================================
   Billing Information
========================================= */
.billing-info-container {
  width: 100%;
  max-width: 820px;
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
  margin-bottom: var(--gap-6);
}

.billing-card-item {
  width: 100%;
  min-height: 120px;
  padding: var(--gap-4);
  background: #282828;
  border-radius: var(--radius-2);
  display: flex;
  align-items: center;
  border: 1px solid transparent;
  box-sizing: border-box;
}

.billing-card-item-add,
.billing-card-item-empty {
  transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.billing-card-item-add {
  cursor: pointer;
}

.billing-card-item-add:hover,
.billing-card-item-empty:hover {
  background: #2f2f2f;
}

.billing-card-item-add:hover {
  border-color: #b5d9a7;
}

.billing-card-item-add:focus-visible {
  outline: none;
  border-color: #b5d9a7;
  box-shadow: 0 0 0 2px rgba(181, 217, 167, 0.28);
}

.billing-card-content {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-4);
}

.billing-details {
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
}

.billing-card-number {
  color: #ffffff;
  font-size: var(--h3);
  line-height: var(--h3-lh);
  font-weight: 600;
  font-family: inherit;
}

.billing-expiry {
  color: #ffffff;
  font-size: var(--text);
  line-height: var(--text-lh);
  opacity: 0.9;
}

.billing-actions {
  display: flex;
  gap: var(--gap-3);
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 auto;
}

.badge-default {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1;
  margin-left: 10px;
  background: rgba(0, 173, 140, 0.15);
  color: #00ad8c;
  border: 1px solid rgba(0, 173, 140, 0.35);
}

.billing-history-container {
  width: 100%;
  border-radius: var(--radius-1);
  padding: 2px;
  background: linear-gradient(135deg, #b5d9a7, #00aa89);
}

.billing-header-row,
.billing-data-row {
  width: 100%;
  display: grid;
  grid-template-columns: 175px 1fr 260px 150px 150px;
}

.billing-header-row {
  background: #282828;
  border-top-left-radius: var(--radius-1);
  border-top-right-radius: var(--radius-1);
}

.billing-data-row {
  background: #2a2a2a;
}

.billing-cell,
.billing-cell-data {
  border-left: 1px solid #666666;
  border-top: 1px solid #666666;
}

.billing-cell-content,
.billing-status-cell {
  width: 100%;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.billing-cell-text {
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-size: var(--text);
  line-height: var(--text-lh);
  font-weight: 600;
}

.billing-cell-data-text,
.billing-cell-data-center {
  width: 100%;
  color: #ffffff;
  font-size: var(--text);
  line-height: var(--text-lh);
  font-weight: 400;
  text-align: left;
}

.billing-cell-data-center.paid {
  color: #00ad8c;
  font-weight: 600;
}

.billing-cell-data-center.failed,
.billing-cell-data-center.declined {
  color: #ff6b6b;
  font-weight: 600;
}

.billing-cell-data-center.trial {
  color: #ffbe5c;
  font-weight: 600;
}

.pm-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  z-index: 9999;
  padding: 24px var(--pad-x);
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.pm-modal.is-open {
  display: block;
}

.pm-modal__dialog {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  background: #2b2b2b;
  border-radius: 16px;
  padding: 22px;
}

.pm-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.pm-modal__title {
  color: #ffffff;
  font-size: 20px;
  font-weight: 600;
}

.pm-modal__close {
  background: transparent;
  border: 0;
  color: #ffffff;
  font-size: 22px;
  cursor: pointer;
}

.pm-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.pm-form__field--full {
  grid-column: 1 / -1;
}

.pm-form__divider {
  grid-column: 1 / -1;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  margin-top: 8px;
  padding-top: 12px;
}

.pm-form__label {
  display: block;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 8px;
}

.pm-form__input,
.pm-form__select {
  width: 100%;
  height: 44px;
  box-sizing: border-box;
  color: #ffffff;
  background: #1f1f1f;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  font-family: inherit;
}

.pm-form__input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.pm-form__input:focus,
.pm-form__select:focus {
  border-color: rgba(0, 173, 140, 0.65);
  box-shadow: 0 0 0 3px rgba(0, 173, 140, 0.18);
}

.pm-form__actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  margin-top: 16px;
}

@media (max-width: 768px) {
  .dashboard-sidebar {
    display: none !important;
  }

  .dashboard-container {
    display: block;
  }

  .billing-card-content {
    flex-direction: column;
    align-items: stretch;
  }

  .billing-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .billing-header-row {
    display: none;
  }

  .billing-data-row {
    grid-template-columns: 1fr;
    padding: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
  }

  .billing-cell-data {
    border-left: 0;
    border-top: 0;
  }

  .billing-cell-content,
  .billing-status-cell {
    justify-content: space-between;
  }

  .billing-cell-data[data-label] .billing-cell-content::before,
  .billing-cell-data[data-label] .billing-status-cell::before {
    content: attr(data-label);
    color: rgba(255, 255, 255, 0.7);
    font-size: 12px;
    font-weight: 600;
    margin-right: 12px;
  }

  .pm-form__grid {
    grid-template-columns: 1fr;
  }
}

/* =========================================
   Profile
========================================= */

.dashboard-container {
  width: 100%;
  max-width: var(--container);
  margin-left: auto;
  margin-right: auto;
  /* padding-left: var(--pad-x);
  padding-right: var(--pad-x); */
  box-sizing: border-box;
  display: flex;
  align-items: stretch;
}

.dashboard-main {
  flex: 1;
  min-width: 0;
}

.profile-container {
  width: 100%;
  max-width: 820px;
}

.profile-section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-4);
}

.section-title {
  margin-top: var(--gap-5);
  margin-bottom: var(--gap-3);
  color: var(--White);
  font-size: var(--h3);
  line-height: var(--h3-lh);
  font-weight: 600;
}

.field-email-pending {
  gap: 8px;
}

.field-email-pending .control {
  gap: 0;
  margin-bottom: 0;
}

.field-email-pending .input {
  margin-bottom: 0;
}

.email-pending-help {
  margin-top: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: rgba(255, 255, 255, 0.68);
  font-size: var(--small);
  line-height: 1.4;
}

.email-pending-text {
  margin: 0;
}

.email-pending-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.email-pending-actions form {
  margin: 0;
  display: inline;
}

.link-btn {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  line-height: inherit;
  color: #b5d9a7;
  cursor: pointer;
  text-decoration: none;
}

.link-btn:hover {
  text-decoration: underline;
}

.link-danger {
  color: #ff8a80;
}

.link-danger:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .dashboard-container {
    display: block;
  }

  .dashboard-sidebar {
    display: none !important;
  }

  .dashboard-main {
    width: 100%;
  }

  .profile-container {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .profile-section {
    gap: var(--gap-3);
  }

  .section-title {
    margin-top: var(--gap-4);
  }
}



/* ==============================
     FPDS QUERY HERO
  ============================== */

.fpds-query-hero {
  width: 100%;
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  background-image: url("../img/main/fpds-big.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  border-bottom: 2px solid #00ad8c;
  border-bottom-left-radius: var(--radius-4);
  border-bottom-right-radius: var(--radius-4);
  overflow: hidden;
}

.fpds-query-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
}

.fpds-query-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--gap-5);
}

.fpds-query-hero .container {
  padding-top: var(--section-py);
  padding-bottom: var(--section-py);
  position: relative;
  z-index: 2;
}

.fpds-query-title {
  color: #fff;
  font-size: var(--h1);
  line-height: var(--h1-lh);
  font-weight: 600;
  margin: 0;
}

.fpds-query-subtitle-container {
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
}



.fpds-query-subtitle {
  text-align: center;
  color: #afbcb8;
  font-size: var(--h2);
  line-height: var(--h2-lh);
  font-weight: 400;
  max-width: 900px;
  width: 100%;
  margin: 0;
}

/* ==============================
     QUERY FEATURES
  ============================== */
.query-features-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--gap-6);
  box-sizing: border-box;
}

.query-features-header {
  width: 100%;
  max-width: var(--container);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--gap-6);
}

.query-features-title {
  display: inline-flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.query-features-heading {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #fff;
  font-size: var(--h2);
  line-height: var(--h2-lh);
  font-weight: 400;
  word-wrap: break-word;
  margin: 0;
}

.query-features-grid {
  width: 100%;
  max-width: var(--container);
  padding: var(--gap-4);
  background: #333333;
  border-radius: 7px;
  box-sizing: border-box;
  position: relative;
  isolation: isolate;

  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-5);
  align-items: start;
}

.query-features-grid::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #b5d9a7 0%, #00aa89 100%);
  border-radius: 8px;
  z-index: -1;
}

.query-features-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #333333;
  border-radius: 7px;
  z-index: -1;
}

.query-divider {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 216px;
  z-index: 1;
}

.query-divider-1 {
  left: 25%;
  background: linear-gradient(to left, #008d71 10%, #b5d9a7 85%, transparent 0%);
}

.query-divider-2 {
  left: 50%;
  background: linear-gradient(to left, #008d71 10%, #b5d9a7 85%, transparent 0%);
}

.query-divider-3 {
  left: 75%;
  background: linear-gradient(to left, #008d71 10%, #b5d9a7 85%, transparent 0%);
}

.query-feature-card {
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: var(--gap-4);
  position: relative;
  z-index: 2;
}

.query-feature-icon img {
  width: 100px;
  height: 100px;
}

.query-feature-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--gap-3);
  text-align: center;
}

.query-feature-description {
  width: 100%;
  max-width: 220px;
  margin: 0 auto;
  text-align: center;
  color: #b5d9a7;
  font-size: var(--text);
  line-height: var(--text-lh);
  font-weight: 400;
  word-wrap: break-word;
}

.trial-note {
  margin-top: var(--gap-2);
  font-size: var(--small);
  line-height: var(--small-lh);
  color: rgba(255,255,255,0.7);
  text-align: center;
}

/* ==============================
     USE CASES
  ============================== */

.use-cases__title {
  font-weight: 400;
  font-size: var(--h2);
  line-height: var(--h2-lh);
  color: #ffffff;
  flex-grow: 0;
  padding: var(--section-py) 0 0 0;
  margin: 0;
}

.use-cases__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--gap-4);
  padding: var(--section-py) 0;
  box-sizing: border-box;
}

.use-case-card {
  position: relative;
  isolation: isolate;
  padding: var(--gap-5) var(--gap-6);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-sizing: border-box;
  border-radius: 7px;
  min-height: 280px;
}

.use-case-card::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #b5d9a7 0%, #00aa89 100%);
  border-radius: 8px;
  z-index: -1;
}

.use-case-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #464646;
  border-radius: 7px;
  z-index: -1;
}

.use-case-card__title {
  font-weight: 700;
  font-size: var(--h3);
  line-height: var(--h3-lh);
  text-align: center;
  color: #ffffff;
  margin: 0 0 var(--gap-2) 0;
}

.use-case-card__description {
  font-weight: 300;
  font-size: var(--text);
  line-height: var(--text-lh);
  text-align: center;
  color: #ffffff;
  margin: 0;
}

/* ==============================
     PREVIEW
  ============================== */

.preview-container {
  max-width: var(--container);
  margin: 0 auto;
  width: 100%;
  padding: var(--section-py) var(--pad-x);
  box-sizing: border-box;
}

.preview-title {
  font-weight: 400;
  font-size: var(--h2);
  line-height: var(--h2-lh);
  color: #ffffff;
  margin: 0 0 var(--gap-3) 0;
}

.preview-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--gap-3);
  padding: var(--gap-2) 0;
  flex-wrap: wrap;
}

/* ==============================
     MEDIA QUERIES (CANON)
  ============================== */

/* --- <= 1440px --- */
@media (max-width: 1440px) {

  .fpds-query-hero {
    background-image: url("../img/main/fpds.webp");
  }

  .query-features-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap-4);
  }

  .query-feature-card {
    max-width: 260px;
  }
}

/* --- <= 1024px --- */
@media (max-width: 1024px) {
  .query-divider {
    display: none;
  }

  /* IMPORTANT: do NOT turn cards into 45% width flex items (breaks grid) */
  .query-feature-card {
    width: 100%;
    max-width: none;
  }

  .query-features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .use-cases__container {
    flex-direction: column;
    align-items: flex-start;
  }

  .use-cases__grid {
    width: 100%;
    grid-template-columns: 1fr 1fr;
    padding-top: var(--gap-6);
    padding-bottom: var(--section-py);
  }

  .preview-actions {
    justify-content: flex-start;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
    min-width: 0;
  }
}

/* --- <= 768px --- */
@media (max-width: 768px) {

  /* Keep your mobile hero behavior, but tokens for typography */
  .fpds-query-hero {
    border-radius: 0 0 40px 40px;
    border-bottom: #00ad8c solid 1px;
    position: relative;
    z-index: 1;
    padding: var(--gap-6) var(--pad-x);
  }

  .fpds-query-container {
    padding-top: var(--gap-7);
    gap: var(--gap-6);
  }

  .fpds-query-subtitle {
    font-size: var(--text);
    line-height: var(--text-lh);
    max-width: 100%;
  }


  /* Features: mobile stacking */
  .query-features-container {
    gap: var(--gap-5);
  }

  .query-features-heading {
    width: auto;
  }

  .query-features-grid {
    grid-template-columns: 1fr;
    padding: var(--gap-4) var(--gap-3);
    border: 1px solid #b5d9a7;
    gap: 0;
  }

  .query-feature-card {
    padding: var(--gap-5) 0;
  }

  .query-feature-card:not(:last-child)::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 5%;
    right: 5%;
    height: 1px;
    background: linear-gradient(to right,
        transparent 0%,
        #b5d9a7 15%,
        #b5d9a7 85%,
        transparent 100%);
  }

  .query-feature-description {
    max-width: 280px;
  }

  /* Use cases: single column */
  .use-cases__grid {
    grid-template-columns: 1fr;
    padding-top: var(--gap-4);
  }

  .use-case-card {
    width: 100%;
    padding: var(--gap-5) var(--gap-4);
    min-height: 260px;
  }

  /* Preview: stack */
  .preview-container {
    padding: var(--gap-6) var(--pad-x);
  }

  .preview-actions {
    width: 100%;
  }
}

/* --- <= 480px --- */
@media (max-width: 480px) {
  .fpds-query-hero {
    padding-left: 16px;
    padding-right: 16px;
  }

  .query-features-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .preview-container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .query-feature-icon img {
    width: 88px;
    height: 88px;
  }

  .btn-primary,
  .btn-secondary {
    width: 100%;
    min-width: 0;
  }
}

/* ==============================
     FPDS QUERY OVERVIEW
  ============================== */
.hero--spaced {
  width: 100%;
  margin-top: var(--gap-5);
  margin-bottom: var(--gap-5);
}

.hero__container {
  display: flex;
  gap: var(--gap-6);
  position: relative;
  justify-content: flex-start;
  align-items: flex-start;
}

.hero__title-block {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.hero__title-block h1 {
  color: #ffffff;
  font-weight: 400;
}

.hero__features-block {
  display: flex;
  flex-direction: column;
  gap: var(--gap-4);
}

.hero__features-block h3 {
  width: 100%;
  max-width: 320px;
  color: #ffffff;
  font-weight: 600;
  word-wrap: break-word;
}

.hero__features-block p {
  width: 100%;
  max-width: 320px;
  color: #ffffff;
  font-weight: 400;
  position: relative;
  word-wrap: break-word;
}

.hero__quotes-1 {
  position: absolute;
  left: calc(var(--gap-2) * -1);
  top: calc(var(--gap-2) * -1);
  width: 20px;
  height: 20px;
}

.hero__quotes-2 {
  position: absolute;
  right: var(--gap-5);
  bottom: calc(var(--gap-2) * -1);
  width: 20px;
  height: 20px;
}

.comparison {
  margin: var(--gap-2) 0;
}

.comparison__container {
  width: 100%;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.comparison__table-container {
  width: 100%;
  overflow-x: auto;
}

.comparison__table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  --cmp-icon: var(--icon-md, 22px);
}

.comparison__table th {
  background-color: #333333;
  color: #ffffff;
  font-weight: 600;
  text-align: center;
  padding: var(--gap-2);
  border: var(--border-1) solid #b5d9a7;
}

.comparison__table td {
  color: #ffffff;
  padding: var(--gap-2);
  border: var(--border-1) solid #b5d9a7;
}

.comparison__table td:nth-child(2),
.comparison__table td:nth-child(3) {
  text-align: center;
  vertical-align: middle;
}

.comparison__table td:nth-child(2) img,
.comparison__table td:nth-child(3) img {
  display: block;
  margin: 0 auto;
  width: var(--cmp-icon);
  height: var(--cmp-icon);
  object-fit: contain;
}

.comparison__table td:first-child {
  font-weight: 500;
  padding-left: var(--gap-2);
}

.comparison__table .partial {
  text-align: center;
  font-weight: 500;
}

.pricing-section {
  width: 100%;
  padding-bottom: var(--section-py);
  margin-bottom: var(--gap-6);
}

.pricing-header {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex: 1;
 padding-bottom: var(--gap-6);
}

.pricing-title {
  color: #ffffff;
  font-weight: 400;
  max-width: 240px;
}

.pricing-cards {
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  gap: var(--gap-6);
  flex: 2;
}

.pricing-card {
  position: relative;
  width: 100%;
  max-width: 458px;
  min-height: 560px;
  padding: var(--gap-4);
  background: #333333;
  border-radius: var(--radius-1);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--gap-3);
  box-sizing: border-box;
}

.pricing-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(105deg, #b5d9a7, #00aa89);
  border-radius: var(--radius-1);
  z-index: -1;
}

.plan-price {
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--gap-1);
  text-align: center;
}

.price-amount {
  font-size: var(--h1);
  line-height: var(--h1-lh);
  font-weight: 400;
  color: #b5d9a7;
}

.price-period {
  font-size: var(--h3);
  line-height: var(--h3-lh);
  font-weight: 400;
  color: #b5d9a7;
}

.card-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: var(--gap-3);
}

.card-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: var(--gap-3);
}

.plan-name {
  text-align: center;
  color: #ffffff;
  font-weight: 600;
}

.plan-features {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  gap: var(--gap-2);
}

.feature {
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-weight: 400;
}

.yearly-card {
  position: relative;
}

.discount-badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(40%, -40%);
  width: 88px;
  height: 88px;
  z-index: 5;
}

.badge-circle {
  width: 100%;
  height: 100%;
  background: linear-gradient(107deg, #b5d9a7 0%, #00aa89 98%);
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

.badge-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.save-text {
  color: #000000;
  font-size: var(--small);
  line-height: var(--small-lh);
  font-weight: 600;
}

.discount-percent {
  color: #000000;
  font-weight: 600;
}

@media (max-width: 1440px) {
  .hero__container {
    gap: var(--gap-5);
  }

  .pricing-cards {
    gap: var(--gap-5);
  }

  .pricing-card {
    max-width: 360px;
    min-height: 460px;
  }

  .comparison__table {
    --cmp-icon: var(--icon-md, 20px);
  }
}

@media (max-width: 1024px) {
  .hero__container {
    flex-direction: column;
    gap: var(--gap-4);
  }

  .hero__features-block h3,
  .hero__features-block p {
    max-width: 520px;
  }

  .comparison__table {
    --cmp-icon: var(--icon-md, 18px);
  }

  /* .pricing-content {
    flex-direction: column;
    align-items: center;
    gap: var(--gap-5);
  } */

  .pricing-header {
    justify-content: center;
  }

  .pricing-title {
    max-width: 100%;
    text-align: center;
  }

  .pricing-cards {
    justify-content: center;
    width: 100%;
  }

  .discount-badge {
    right: -20px;
    top: -20px;
    width: 84px;
    height: 84px;
  }
}

@media (max-width: 768px) {
  .hero {
    margin-bottom: 0;
  }

  .hero__quotes-1,
  .hero__quotes-2 {
    width: 10px;
    height: 10px;
  }

  .hero__quotes-1 {
    top: -10px;
    left: -10px;
  }

  .hero__quotes-2 {
    top: 40px;
    right: 100px;
    bottom: auto;
  }

  .comparison__table {
    --cmp-icon: var(--icon-md, 16px);
  }

  .pricing-section {
    margin-bottom: var(--gap-5);
  }

  .pricing-title {
    text-align: left;
  }

  .pricing-cards {
    flex-direction: column;
    align-items: center;
    gap: var(--gap-7);
  }

  .pricing-card {
    width: 100%;
    min-height: 0;
    padding: var(--gap-4);
  }

  .discount-badge {
    width: 72px;
    height: 72px;
    transform: translate(30%, -30%);
  }
}

@media (max-width: 480px) {

  .hero__features-block h3,
  .hero__features-block p {
    max-width: 100%;
  }

  .comparison__table {
    --cmp-icon: var(--icon-md, 15px);
  }

  .pricing-card {
    max-width: 330px;
    padding: var(--gap-3);
  }

  .discount-badge {
    right: -10px;
  }
}

/* ==============================
     Checkout
  ============================== */
/* ---- reusable container ---- *
/* 3 pages layout (desktop default: 2 columns) */
.checkout-page,
.form-item,
.payment-container {
  display: flex;
  justify-content: space-between;
  gap: var(--gap-7);
  padding-top: var(--section-py);
  padding-bottom: var(--gap-3);
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  box-sizing: border-box;
}

.payment-container {
  padding-top: var(--gap-6);
  padding-bottom: var(--section-py);
  gap: var(--gap-6);
}

/* ---- headers ---- */
.checkout-header,
.active-step-2-header,
.step-3-header {
  display: flex;
  flex-direction: column;
  gap: var(--gap-6);
}

.checkout-title {
  font-style: normal;
  font-weight: 400;
  font-size: var(--h2);
  line-height: var(--h2-lh);
  color: var(--White);
  margin: 0;
}

/* ============================================================
   PROGRESS (DESKTOP DEFAULT: vertical)
   ============================================================ */

.checkout-progress-container,
.active-step-2-progress-container,
.step-3-progress-container {
  width: 251px;
  height: 229px;
  position: relative;
  display: flex;
  gap: var(--gap-5);
}

.checkout-progress-indicator,
.active-step-2-progress-indicator,
.step-3-progress-indicator {
  width: 24px;
  height: 100%;
  position: relative;
  flex-shrink: 0;
}

.checkout-progress-line,
.active-step-2-progress-line,
.step-3-progress-line {
  position: absolute;
  left: 50%;
  top: 12px;
  transform: translateX(-50%);
  width: 2px;
  height: 209px;
  background: #AFBCB8;
}

.checkout-progress-step,
.active-step-2-progress-step,
.step-3-progress-step {
  width: 16px;
  height: 16px;
  position: absolute;
  left: 4px;
  background: #282828;
  border-radius: 50%;
  border: 1px solid #AFBCB8;
}

/* active */
.checkout-progress-step.checkout-active-step,
.active-step-2-active-progress-step,
.step-3-active-progress-step {
  width: 24px;
  height: 24px;
  left: 0;
  background: #B5D9A7;
  border: none;
}

/* vertical step positions */
.checkout-progress-step:nth-child(2),
.active-step-2-progress-step:nth-child(2) {
  top: 4.5px;
}

.checkout-progress-step:nth-child(3),
.active-step-2-progress-step:nth-child(3),
.step-3-progress-step:nth-child(3) {
  top: 116px;
}

.checkout-progress-step:nth-child(4),
.active-step-2-progress-step:nth-child(4),
.step-3-progress-step:nth-child(4) {
  top: 210px;
}

.step-3-active-progress-step {
  top: 210px;
}

/* step text */
.checkout-step-content,
.active-step-2-step-content,
.step-3-step-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-5);
}

.checkout-step-item,
.active-step-2-step-item,
.step-3-step-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.checkout-step-item.checkout-active .checkout-step-number,
.active-step-2-active-item .active-step-2-step-number,
.step-3-active-item .step-3-step-number {
  color: #B5D9A7;
  font-size: var(--h3);
  line-height: var(--h3-lh);
  font-weight: 400;
}

.checkout-step-item:not(.checkout-active) .checkout-step-number,
.active-step-2-step-item:not(.active-step-2-active-item) .active-step-2-step-number,
.step-3-step-item:not(.step-3-active-item) .step-3-step-number {
  color: #AFBCB8;
  font-size: var(--text);
  line-height: var(--text-lh);
  font-weight: 400;
}

.checkout-step-item.checkout-active .checkout-step-title,
.active-step-2-active-item .active-step-2-step-title,
.step-3-active-item .step-3-step-title {
  color: var(--White);
  font-size: var(--h2);
  line-height: var(--h2-lh);
  font-weight: 600;
  margin: 0;
}

.checkout-step-item:not(.checkout-active) .checkout-step-title,
.active-step-2-step-item:not(.active-step-2-active-item) .active-step-2-step-title,
.step-3-step-item:not(.step-3-active-item) .step-3-step-title {
  color: #AFBCB8;
  font-size: var(--h3);
  line-height: var(--h3-lh);
  font-weight: 400;
  margin: 0;
}

/* ---- right column wrappers ---- */
.checkout-order-review-container,
.step-3-payment-form-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--gap-6);
  width: min(1180px, 100%);
}

.checkout-order-review-container {
  gap: var(--gap-4);
}

/* ---- order section ---- */
.checkout-order-section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
  width: 100%;
}

.checkout-order-item-card {
  background-color: #333333;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: var(--gap-3);
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  border-radius: var(--radius-1);
}

.checkout-order-item-card::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #b5d9a7 0%, #00aa89 100%);
  border-radius: calc(var(--radius-1) + 1px);
  z-index: -1;
}

.checkout-order-item-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #333333;
  border-radius: var(--radius-1);
  z-index: -1;
}

.checkout-order-item-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap-2);
}

.checkout-product-name,
.checkout-product-price {
  font-style: normal;
  font-weight: 600;
  font-size: var(--h2);
  line-height: var(--h2-lh);
  color: #B5D9A7;
  margin: 0;
}

.checkout-product-type,
.checkout-product-frequency {
  font-weight: 400;
  font-size: var(--text);
  line-height: var(--text-lh);
  color: #AFBCB8;
  margin: 0;
}

.checkout-order-item-pricing {
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
  align-items: flex-end;
}

.checkout-order-item-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

.checkout-payment-breakdown {
  display: flex;
  justify-content: flex-end;
  width: min(600px, 100%);
}

.checkout-payment-calculations {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.checkout-total-summary {
  display: flex;
  justify-content: space-between;
  position: relative;
}

.checkout-total-label,
.checkout-total-amount {
  font-weight: 600;
  font-size: var(--h2);
  line-height: var(--h2-lh);
  color: var(--White);
  margin: 0;
}

/* ---- form step 2 ---- */
.form-container {
  display: inline-flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--gap-7);
  width: min(1180px, 100%);
}

.form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
  flex: 1;
  align-items: flex-end;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
  width: 100%;
}

.form-label {
  font-family: var(--font-body);
  font-size: var(--h3);
  line-height: var(--h3-lh);
  font-weight: 600;
  color: var(--White);
}

.optional {
  font-weight: 400;
}

/* ============================================================
   INPUTS — CANON (use tokens.css input scale)
   ============================================================ */

.input-box::placeholder {
  color: rgba(255, 255, 255, .55);
}

/* ============================================================
   PAYMENT CARD (STEP 3)
   ============================================================ */

.step-3-payment-form-section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
  width: min(1180px, 100%);
}

.step-3-payment-form-card {
  background: #333333;
  border-radius: var(--radius-3);
  padding: var(--gap-6);
  width: min(560px, 100%);
  margin: 0 auto;
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
}

.step-3-payment-form-card::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, #b5d9a7 0%, #00aa89 100%);
  border-radius: calc(var(--radius-3) + 2px);
  z-index: -1;
}

.step-3-payment-form-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #333333;
  border-radius: var(--radius-3);
  z-index: -1;
}

.step-3-card-form-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-4);
}

/* card number row */
.step-3-card-number-field {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  width: 100%;
  min-width: 0;
}

.step-3-card-number-with-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}

.step-3-card-brand-inline-img {
  width: 42px;
  height: auto;
  flex: 0 0 auto;
}

.step-3-card-number-field-input {
  flex: 1;
  min-width: 0;
  min-height: var(--input-h);
  padding: 0 var(--input-px);
  display: flex;
  align-items: center;
}

/* row 2 */
.step-3-form-fields-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--gap-3);
  width: 100%;
  min-width: 0;
}

.step-3-expiry-date-field,
.step-3-cvv-code-field {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.step-3-date-fields {
  display: flex;
  gap: 12px;
  min-width: 0;
}

.step-3-month-select-field,
.step-3-year-select-field {
  min-height: var(--input-h);
  flex: 0 0 auto;
}

.step-3-month-select-field
.step-3-year-select-field {
  min-height: var(--input-h);
  padding: 0 var(--input-px);
  min-width: 88px;
  gap: 8px;
}

.step-3-cvv-field-input {
  width: 110px;
  min-height: var(--input-h);
  padding: 0 var(--input-px);
  display: flex;
  align-items: center;
}

.step-3-field-label {
  color: var(--White);
  font-size: var(--text);
  line-height: var(--text-lh);
  font-family: var(--font-body);
  font-weight: 400;
  white-space: nowrap;
}

.step-3-form-input-field {
  background: transparent;
  border: none;
  outline: none;
  color: var(--White);
  font-size: var(--input-fs);
  line-height: var(--input-lh);
  font-family: var(--font-body);
  width: 100%;
  min-width: 0;
}

.step-3-form-input-field::placeholder {
  color: rgba(255, 255, 255, .7);
}

.step-3-cvv-field-input .step-3-form-input-field {
  text-align: center;
}

/* native selects (keep consistent) */
.step-3-native-select {
  width: 100%;
}

.step-3-native-select option {
  background: #333333;
  color: var(--White);
}

.step-3-native-select-date {
  width: 100%;
  min-height: var(--input-h);
  padding: 0 var(--input-px);
  background-color: #333333;
}

.step-3-native-select-date option {
  background-color: #333333;
  color: var(--White);
}

/* security area */
.step-3-security-info-section {
  display: flex;
  gap: var(--gap-3);
  align-items: flex-start;
}

.step-3-payment-methods-icons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  max-width: 140px;
}

.step-3-security-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  min-width: 0;
}

.step-3-security-description,
.step-3-legal-terms {
  color: var(--White);
  font-size: var(--small);
  line-height: var(--small-lh);
  font-family: var(--font-body);
  margin: 0;
}

.step-3-terms-link {
  color: var(--White);
  text-decoration: underline;
  cursor: pointer;
}

/* submit */
.step-3-payment-submit-section {
  display: flex;
  flex-direction: column;
  gap: var(--gap-4);
  align-items: flex-start;
}

/* ---- token method block ---- */
.pm-choice-card {
  background: #2f2f2f;
  border-radius: var(--radius-3);
  padding: var(--gap-5);
  margin-bottom: var(--gap-5);
  border: 1px solid rgba(255, 255, 255, .14);
  width: 100%;
  box-sizing: border-box;
}

.pm-choice-title {
  color: var(--White);
  font-size: var(--h3);
  line-height: var(--h3-lh);
  font-weight: 600;
  margin: 0 0 var(--gap-4) 0;
}

.pm-row {
  display: flex;
  gap: var(--gap-4);
  align-items: flex-start;
  padding: var(--gap-1) var(--gap-2);
  border-radius: 18px;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .12);
  margin-bottom: var(--gap-2);
  transition: all .2s ease;
}

.pm-row:hover {
  border-color: rgba(181, 217, 167, .6);
  background: #333;
}

.pm-radio {
  margin-top: 6px;
  transform: scale(1.3);
}

.pm-row-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pm-main {
  color: var(--White);
  font-size: var(--h4);
  line-height: var(--h3-lh);
  font-weight: 600;
  margin: 0;
}

.pm-sub {
  color: #AFBCB8;
  font-size: var(--text);
  line-height: var(--text-lh);
  margin: 0;
}

.pm-badge {
  display: inline-block;
  margin-left: 12px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(181, 217, 167, .22);
  color: #B5D9A7;
  font-size: var(--text);
  line-height: var(--text-lh);
  font-weight: 600;
}

.pm-hint {
  color: #AFBCB8;
  font-size: var(--text);
  line-height: var(--text-lh);
  margin-top: var(--gap-3);
}



/* ============================================================
   RESPONSIVE (CANON BREAKPOINTS ONLY)
   ============================================================ */

/* --- <= 1440px --- */
@media (max-width: 1440px) {

  .checkout-page,
  .form-item,
  .payment-container {
    gap: var(--gap-6);
  }

  .checkout-order-item-card {
    padding: var(--gap-2);
  }
}

/* --- <= 1024px --- */
@media (max-width: 1024px) {

  .checkout-page,
  .form-item,
  .payment-container {
    gap: var(--gap-5);
  }

  .checkout-order-review-container,
  .step-3-payment-form-container {
    align-items: stretch;
  }

  .step-3-form-fields-row {
    flex-wrap: wrap;
    row-gap: var(--gap-2);
  }

}

/* --- <= 768px --- */
@media (max-width: 768px) {

  .checkout-page,
  .form-item,
  .payment-container {
    flex-direction: column;
    padding-top: var(--gap-6);
    padding-bottom: var(--gap-3);
    gap: var(--gap-5);
  }

  .checkout-title {
    text-align: left;
  }

  /* PROGRESS: stable horizontal */
  .checkout-progress-container,
  .active-step-2-progress-container,
  .step-3-progress-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--gap-2);
    align-items: flex-start;
  }

  .checkout-progress-indicator,
  .active-step-2-progress-indicator,
  .step-3-progress-indicator {
    width: 100%;
    height: 28px;
    position: relative;
  }

  .checkout-progress-line,
  .active-step-2-progress-line,
  .step-3-progress-line {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: 2px;
    background: #AFBCB8;
  }

  .checkout-progress-step,
  .active-step-2-progress-step,
  .step-3-progress-step {
    top: 50% !important;
    transform: translateY(-50%) !important;
  }

  .checkout-progress-step:nth-child(2),
  .active-step-2-progress-step:nth-child(2),
  .step-3-progress-step:nth-child(2) {
    left: 0 !important;
  }

  .checkout-progress-step:nth-child(3),
  .active-step-2-progress-step:nth-child(3),
  .step-3-progress-step:nth-child(3) {
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .checkout-progress-step:nth-child(4),
  .active-step-2-progress-step:nth-child(4),
  .step-3-progress-step:nth-child(4) {
    left: 100% !important;
    transform: translate(-100%, -50%) !important;
  }

  .step-3-active-progress-step {
    top: 50% !important;
    left: 100% !important;
    transform: translate(-100%, -50%) !important;
  }

  /* step labels row */
  .checkout-step-content,
  .active-step-2-step-content,
  .step-3-step-content {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    gap: 10px;
  }

  .checkout-step-item,
  .active-step-2-step-item,
  .step-3-step-item {
    align-items: center;
    text-align: center;
    flex: 1;
  }

  /* right column blocks */
  .checkout-order-review-container {
    align-items: center;
    width: 100%;
  }

  .checkout-order-section {
    width: 100%;
    max-width: 420px;
  }

  .checkout-payment-breakdown {
    width: 100%;
    max-width: 420px;
    justify-content: center;
  }

  /* form step */
  .form-container {
    width: 100%;
    flex-direction: column;
    gap: var(--gap-5);
    align-items: center;
  }

  .form-fields {
    width: 100%;
    align-items: center;
    gap: var(--gap-4);
  }

  .form-group {
    width: 100%;
    max-width: 420px;
  }

  /* payment step */
  .step-3-payment-form-container {
    align-items: center;
    width: 100%;
    gap: var(--gap-5);
  }

  .step-3-payment-form-section {
    width: 100%;
    max-width: 480px;
  }

  /* keep tokens-driven input sizing; only layout changes below */
  .step-3-card-number-field {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .step-3-form-fields-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: start;
  }

  .step-3-expiry-date-field {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .step-3-date-fields {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .step-3-month-select-field
  .step-3-year-select-field {
    min-width: 0;
    width: 100%;
  }

  .step-3-cvv-code-field {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .step-3-cvv-field-input {
    width: 100%;
  }

  .step-3-payment-methods-icons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 9px;
    max-width: 120px;
  }

  .step-3-payment-submit-section {
    width: 100%;
    align-items: center;
  }

  /* checkout size */
  .checkout-progress-container {
    width: 100%;
    max-width: 420px;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--gap-3);
    align-items: stretch;
  }

  .checkout-progress-indicator {
    width: 100%;
    height: 24px;
    position: relative;
    flex-shrink: 0;
  }

  .checkout-progress-line {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: 2px;
    background: #afbcb8;
  }

  .checkout-progress-step {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50% !important;
    background: #282828;
    border: 1px solid #afbcb8;
    border-radius: 50%;
    transform: translateY(-50%) !important;
  }

  .checkout-progress-step.checkout-active-step {
    width: 24px;
    height: 24px;
    background: #b5d9a7;
    border: none;
  }

  .checkout-progress-step:nth-child(2) {
    left: 0 !important;
  }

  .checkout-progress-step:nth-child(3) {
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .checkout-progress-step:nth-child(4) {
    left: 100% !important;
    transform: translate(-100%, -50%) !important;
  }

  .checkout-step-content {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-2);
    align-items: start;
  }

  .checkout-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
  }

  .checkout-step-number {
    font-size: var(--small);
    line-height: var(--small-lh);
  }

  .checkout-step-title {
    font-size: var(--small) !important;
    line-height: var(--small-lh) !important;
    font-weight: 600;
    margin: 0;
  }

  .checkout-order-review-container {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    gap: var(--gap-3);
    align-items: stretch;
  }

  .checkout-order-section {
    width: 100%;
    max-width: 100%;
    gap: var(--gap-2);
  }

  .checkout-order-item-card {
    width: 100%;
    padding: var(--gap-3);
    border-radius: var(--radius-1);
  }

  .checkout-order-item-card::before {
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
  }

  .checkout-order-item-details {
    gap: 6px;
  }

  .checkout-order-item-pricing {
    gap: var(--gap-2);
  }

  .checkout-product-name,
  .checkout-product-price {
    font-size: var(--h3);
    line-height: var(--h3-lh);
  }

  .checkout-product-type,
  .checkout-product-frequency {
    font-size: var(--small);
    line-height: var(--small-lh);
  }

  .checkout-order-item-actions img {
    width: 18px;
    height: 18px;
  }

  .checkout-payment-breakdown {
    width: 100%;
    max-width: 100%;
    justify-content: stretch;
  }

  .checkout-payment-calculations {
    width: 100%;
  }

  .checkout-total-summary {
    width: 100%;
    align-items: center;
    gap: var(--gap-2);
  }

  .checkout-total-label,
  .checkout-total-amount {
    font-size: var(--h3);
    line-height: var(--h3-lh);
  }

  .pm-choice-card {
    width: 100%;
    padding: var(--gap-3);
    margin-top: 0 !important;
    border-radius: var(--radius-2);
  }

  .pm-choice-title {
    font-size: var(--h3);
    line-height: var(--h3-lh);
    margin-bottom: var(--gap-3);
  }

  .pm-row {
    padding: var(--gap-2);
    gap: var(--gap-2);
    border-radius: var(--radius-1);
    margin-bottom: var(--gap-2);
  }

  .pm-radio {
    margin-top: 4px;
    transform: scale(1.15);
  }

  .pm-main {
    font-size: var(--text);
    line-height: var(--text-lh);
  }

  .pm-sub,
  .pm-hint {
    font-size: var(--small);
    line-height: var(--small-lh);
  }

  .pm-badge {
    margin-left: 8px;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1;
  }
  .active-step-2-progress-container {
    width: 100%;
    max-width: 420px;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--gap-3);
    align-items: stretch;
  }

  .active-step-2-progress-indicator {
    width: 100%;
    height: 24px;
    position: relative;
    flex-shrink: 0;
  }

  .active-step-2-progress-line {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: 2px;
    background: #afbcb8;
  }

  .active-step-2-progress-step {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50% !important;
    background: #282828;
    border: 1px solid #afbcb8;
    border-radius: 50%;
    transform: translateY(-50%) !important;
  }

  .active-step-2-active-progress-step {
    width: 24px;
    height: 24px;
    background: #b5d9a7;
    border: none;
  }

  .active-step-2-progress-step:nth-child(2) {
    left: 0 !important;
  }

  .active-step-2-progress-step:nth-child(3) {
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .active-step-2-progress-step:nth-child(4) {
    left: 100% !important;
    transform: translate(-100%, -50%) !important;
  }

  .active-step-2-step-content {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-2);
    align-items: start;
  }

  .active-step-2-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
  }

  .active-step-2-step-number {
    font-size: var(--small);
    line-height: var(--small-lh);
  }

  .active-step-2-step-title {
    font-size: var(--small) !important;
    line-height: var(--small-lh) !important;
    font-weight: 600;
    margin: 0;
  }

  .step-3-progress-container {
    width: 100%;
    max-width: 420px;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: var(--gap-3);
    align-items: stretch;
  }

  .step-3-progress-indicator {
    width: 100%;
    height: 24px;
    position: relative;
    flex-shrink: 0;
  }

  .step-3-progress-line {
    position: absolute;
    left: 12px;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    height: 2px;
    background: #afbcb8;
  }

  .step-3-progress-step {
    width: 16px;
    height: 16px;
    position: absolute;
    top: 50% !important;
    background: #282828;
    border: 1px solid #afbcb8;
    border-radius: 50%;
    transform: translateY(-50%) !important;
  }

  .step-3-active-progress-step {
    width: 24px;
    height: 24px;
    background: #b5d9a7;
    border: none;
  }

  .step-3-progress-step:nth-child(2) {
    left: 0 !important;
  }

  .step-3-progress-step:nth-child(3) {
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
  }

  .step-3-progress-step:nth-child(4) {
    left: 100% !important;
    transform: translate(-100%, -50%) !important;
  }

  .step-3-step-content {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--gap-2);
    align-items: start;
  }

  .step-3-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
  }

  .step-3-step-number {
    font-size: var(--small);
    line-height: var(--small-lh);
  }

  .step-3-step-title {
    font-size: var(--small) !important;
    line-height: var(--small-lh) !important;
    font-weight: 600;
    margin: 0;
  }

}

/* --- <= 480px --- */
@media (max-width: 480px) {
  .step-3-form-fields-row {
    grid-template-columns: 1fr;
  }

  .checkout-order-section,
  .checkout-payment-breakdown,
  .form-group {
    max-width: 100%;
  }
}

/* ============================================================
   Contact Us
   ============================================================ */
.register-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--gap-6);
  margin-bottom: var(--gap-6);
}

.register-card-wrapper {
  width: 100%;
  max-width: 560px;
  border-radius: var(--radius-1);
  background: linear-gradient(to right, #b5d9a7, #00aa89);
  padding: 1px;
  box-sizing: border-box;
}

.register-card {
  width: 100%;
  padding: var(--gap-4);
  background: #282828;
  border-radius: calc(var(--radius-1) - 1px);
  box-sizing: border-box;
}

.register-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-4);
}

.register-header {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-3);
}

.register-title {
  margin: 0;
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-size: var(--h3);
  line-height: var(--h3-lh);
  font-weight: 600;
}

.register-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
}

.form-field {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
}

.input-wrapper {
  width: 100%;
  min-height: var(--input-h);
  padding: var(--input-py) var(--input-px);
  border-radius: var(--input-radius);
  outline: var(--border-1) solid #afbcb8;
  outline-offset: -1px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
}

.form-input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #ffffff;
  font-size: var(--input-fs);
  line-height: var(--input-lh);
  font-weight: 400;
  text-align: left;
}

.form-input::placeholder {
  color: #5f5f5f;
}


.register-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-3);
  margin-top: var(--gap-2);
}

.login-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  text-align: center;
}

.login-text-registered {
  color: #afbcb8;
  font-size: var(--small);
  line-height: var(--small-lh);
  font-weight: 400;
}

.login-link {
  color: #b5d9a7;
  font-size: var(--small);
  line-height: var(--small-lh);
  font-weight: 400;
  text-decoration: none;
}

@media (max-width: 1024px) {
  .register-card-wrapper {
    max-width: 520px;
  }

  .register-card {
    padding: var(--gap-4);
  }
}

@media (max-width: 768px) {
  .register-container {
    margin-top: var(--gap-5);
    margin-bottom: var(--gap-5);
  }

  .register-card-wrapper {
    max-width: 560px;
  }

  .register-card {
    padding: var(--gap-3);
  }

  .login-prompt {
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .register-card {
    padding: var(--gap-3);
  }
}

/* ============================================================
   Login
   ============================================================ */
.login-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  box-sizing: border-box;

  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--gap-6);
  margin-bottom: var(--gap-6);
}

.login-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  padding: var(--gap-4);
  background: #282828;
  border-radius: var(--radius-1);
  box-sizing: border-box;
}

.login-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  background: linear-gradient(to right, #b5d9a7, #00aa89);
  border-radius: var(--radius-1);
  z-index: -1;
}

.login-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-4);
}

.login-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-3);
  width: 100%;
}

.login-title {
  margin: 0;
  width: 100%;
  text-align: center;
  color: #ffffff;
  font-size: var(--h3);
  line-height: var(--h3-lh);
  font-weight: 600;
}

.login-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
}

.login-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-3);
  margin-top: var(--gap-2);
}

.register-prompt {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  text-align: center;
}

.register-text {
  color: #afbcb8;
  font-size: var(--small);
  line-height: var(--small-lh);
  font-weight: 400;
}

.register-link {
  color: #b5d9a7;
  font-size: var(--small);
  line-height: var(--small-lh);
  font-weight: 400;
  text-decoration: none;
}


@media (max-width: 1024px) {
  .login-card {
    max-width: 520px;
    padding: var(--gap-4);
  }
}

@media (max-width: 768px) {
  .login-container {
    margin-top: var(--gap-5);
    margin-bottom: var(--gap-5);
  }

  .login-card {
    max-width: 560px;
    padding: var(--gap-3);
  }

  .register-prompt {
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .login-card {
    padding: var(--gap-3);
  }
}

/* ============================================================
   Privacy Policy
   ============================================================ */
.article-container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  gap: var(--gap-6);
  padding-top: var(--section-py);
  padding-bottom: var(--section-py);
  margin-bottom: var(--gap-6);

  color: #ffffff;
}

.article-wrapper {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.article-content {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--gap-6);
}

.article-title {
  font-size: var(--h1);
  line-height: var(--h1-lh);
  font-weight: 400;
  display: flex;
  flex-direction: column;
}

.article-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--gap-4);
}

.article-text {
  font-size: var(--text);
  line-height: var(--text-lh);
  font-weight: 400;
}

.highlight {
  color: #b5d9a7;
}

.quote-block {
  width: 100%;
  max-width: 900px;
  padding: var(--gap-3);
  background: #333333;
  border-radius: var(--radius-1);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--gap-2);
  box-sizing: border-box;
}

.quote-mark {
  color: #b5d9a7;
  font-size: var(--h3);
  line-height: var(--h3-lh);
  font-style: italic;
  font-weight: 600;
}

.quote-text {
  font-size: var(--text);
  line-height: var(--text-lh);
  font-style: italic;
  font-weight: 600;
  text-align: center;
}

@media (max-width: 1440px) {
  .article-content {
    gap: var(--gap-5);
  }
}

@media (max-width: 1024px) {
  .article-container {
    gap: var(--gap-5);
    margin-bottom: var(--gap-5);
  }

  .article-content {
    gap: var(--gap-5);
  }

  .quote-block {
    max-width: 700px;
  }
}

@media (max-width: 768px) {
  .article-container {
    gap: var(--gap-4);
    margin-bottom: var(--gap-4);
    align-items: center;
  }

  .article-content {
    flex-direction: column;
    gap: var(--gap-4);
  }

  .article-title {
    text-align: left;
  }

  .article-body {
    align-items: flex-start;
  }

  .quote-block {
    max-width: 500px;
    align-items: flex-start;
    gap: var(--gap-2);
  }

  .quote-text {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .article-container {
    gap: var(--gap-3);
    margin-bottom: var(--gap-3);
  }

  .article-content {
    gap: var(--gap-3);
  }

  .article-body {
    gap: var(--gap-3);
  }

  .quote-block {
    padding: var(--gap-2);
  }
}

/* ============================================================
   Register
   ============================================================ */

.register-container .form-label {
  color: #ffffff;
  font-size: var(--small);
  line-height: var(--small-lh);
  font-weight: 600;
}


@media (max-width: 1024px) {
  .register-card-wrapper {
    max-width: 520px;
  }

  .register-card {
    padding: var(--gap-4);
  }
}

@media (max-width: 768px) {
  .register-container {
    margin-top: var(--gap-5);
    margin-bottom: var(--gap-5);
  }

  .register-card-wrapper {
    max-width: 560px;
  }

  .register-card {
    padding: var(--gap-3);
  }

  .login-prompt {
    flex-direction: column;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .register-card {
    padding: var(--gap-3);
  }
}

@media (max-height: 500px) and (orientation: landscape) {
  .register-container {
    margin-top: var(--gap-4);
    margin-bottom: var(--gap-4);
  }

  .register-card {
    padding: var(--gap-3);
  }

  .register-content {
    gap: var(--gap-3);
  }

  .register-header {
    gap: var(--gap-2);
  }

  .register-footer {
    gap: var(--gap-2);
  }
}

/* ============================================================
   FORMS — CANON (NO LEGACY, NO ALIASES)
   Canon classes only:
   .field .label .control .input/.select/.textarea .help/.error-text
   ============================================================ */

.field {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-1);
}

.label {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;

  color: var(--White);
  font-size: var(--small);
  line-height: var(--small-lh);
  font-weight: 600;
}

.label.required::after {
  content: " *";
  color: #ff8a80;
  font-weight: 700;
}

.control {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.input,
.select,
.textarea {
  width: 100%;
  box-sizing: border-box;

  font-family: var(--font-body);
  font-size: var(--input-fs, var(--text));
  line-height: var(--input-lh, var(--text-lh));
  color: var(--White);

  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.70);
  border-radius: var(--input-radius, 7px);

  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.input:-webkit-autofill,
.input:-webkit-autofill:hover,
.input:-webkit-autofill:focus,
.select:-webkit-autofill,
.textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--Gray);
  -webkit-box-shadow: 0 0 0 1000px #282828 inset;
}

.input,
.select {
  min-height: var(--input-h, 52px);
  padding: var(--input-py, 14px) var(--input-px, 18px);
}

.textarea {
  min-height: calc(var(--input-h, 52px) * 2);
  padding: var(--input-py, 14px) var(--input-px, 18px);
  resize: vertical;
}

.input::placeholder,
.textarea::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.input:hover,
.select:hover,
.textarea:hover {
  border-color: rgba(255, 255, 255, 0.90);
}

.input:focus,
.select:focus,
.textarea:focus {
  border-color: rgba(0, 173, 140, 0.80);
  box-shadow: 0 0 0 3px rgba(0, 173, 140, 0.18);
  background-color: rgba(255, 255, 255, 0.02);
}

.input:disabled,
.select:disabled,
.textarea:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ---------- Validation states (apply to .field) ---------- */

.field.is-invalid .input,
.field.is-invalid .select,
.field.is-invalid .textarea {
  border-color: rgba(255, 138, 128, 0.95);
  box-shadow: 0 0 0 3px rgba(255, 138, 128, 0.14);
}

.field.is-valid .input,
.field.is-valid .select,
.field.is-valid .textarea {
  border-color: rgba(81, 207, 102, 0.95);
  box-shadow: 0 0 0 3px rgba(81, 207, 102, 0.12);
}

/* ---------- Optional: compact variant ---------- */

.field.field--compact .input,
.field.field--compact .select {
  min-height: calc(var(--input-h, 52px) - 8px);
  padding-top: calc(var(--input-py, 14px) - 3px);
  padding-bottom: calc(var(--input-py, 14px) - 3px);
}

/* ---------- Native select styling ---------- */

.select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  padding-right: calc(var(--input-px, 18px) + 28px);

  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.85) 50%),
    linear-gradient(135deg, rgba(255,255,255,0.85) 50%, transparent 50%);
  background-position:
    calc(100% - var(--input-px, 18px) - 12px) 50%,
    calc(100% - var(--input-px, 18px) - 6px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.select option {
  color: #111;
}

/* ---------- Messages ---------- */

.help {
  color: rgba(255, 255, 255, 0.70);
  font-size: var(--small);
  line-height: var(--small-lh);
}

.error-text {
  color: #ff8a80;
  font-size: var(--small);
  line-height: var(--small-lh);
}

/* ============================================================
   ACCOUNT
   ============================================================ */
/* ============================================================
   ACCOUNT / DASHBOARD (resources/views/account/index.blade.php)
   Works with your existing tokens + base + .dashboard / .dashboard-main
   ============================================================ */

/* ---- Page wrapper (dashboard already flex) ---- */
.dashboard {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  /* padding-left: var(--pad-x);
  padding-right: var(--pad-x); */
  box-sizing: border-box;

  display: flex;
  align-items: stretch;
  gap: 0; /* sidebar + main touch */
}

/* If aside include already has .dashboard-sidebar, keep it.
   Otherwise ensure wrapper in aside has class="dashboard-sidebar". */
.dashboard-sidebar {
  width: 360px;
  max-width: 360px;
  flex: 0 0 360px;
  box-sizing: border-box;

  background: #464646;
  padding: var(--gap-5) var(--gap-3);

  border-top-left-radius: var(--radius-1);
  border-bottom-left-radius: var(--radius-1);
}

/* main is flexible */
.dashboard-main {
  flex: 1 1 auto;
  min-width: 0;

  background: #333333;
  padding: var(--gap-5);

  border-top-right-radius: var(--radius-1);
  border-bottom-right-radius: var(--radius-1);
  box-sizing: border-box;
}

.account-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gap-4);
}

/* In dashboard pages you don't want nested .container padding.
   So neutralize .container inside panels. */
.section--panel .container {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* ---- Page header ---- */
.page-head {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  margin-bottom: var(--gap-5);
}

.page-title {
  color: var(--White);
  font-size: var(--h2);
  line-height: var(--h2-lh);
  font-weight: 600;
  margin: 0;
}

.page-subtitle {
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--text);
  line-height: var(--text-lh);
  margin: 0;
}

/* ---- Cards grid ---- */
.account-cards {
  gap: var(--gap-4);
}

/* Make grid more “dashboard-like” on medium screens */
@media (max-width: 1024px) {
  .account-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* overrides .grid-3 */
  }
}
@media (max-width: 768px) {
  .account-cards {
    grid-template-columns: 1fr; /* overrides .grid-3 */
  }
}

/* ---- Panel component (card) ---- */
.panel {
  position: relative;
  isolation: isolate;
  border-radius: var(--radius-1);
  padding: 1px; /* gradient border thickness */
  box-sizing: border-box;

  background: linear-gradient(135deg, #b5d9a7, #00aa89);
}

.panel__inner {
  height: 100%;
  border-radius: calc(var(--radius-1) - 1px);
  background: #282828;
  padding: var(--gap-4);
  box-sizing: border-box;

  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
}

/* optional modifier hook (you already use panel--accent) */
.panel--accent {
  background: linear-gradient(135deg, #b5d9a7, #00aa89);
}

.panel__title {
  margin: 0;
  color: #b5d9a7;
  font-size: var(--h3);
  line-height: var(--h3-lh);
  font-weight: 700;
}

.panel__line {
  margin: 0;
  color: var(--White);
  font-size: var(--text);
  line-height: var(--text-lh);
}

.panel__strong {
  color: var(--White);
  font-weight: 700;
}

.panel__muted {
  margin: 0;
  color: rgba(255, 255, 255, 0.75);
  font-size: var(--text);
  line-height: var(--text-lh);
}

.panel__dim {
  color: rgba(255, 255, 255, 0.6);
  font-size: var(--small);
  line-height: var(--small-lh);
}

.panel__spacer {
  margin-top: var(--gap-2);
}

/* ---- Callouts ---- */
.panel__callout {
  margin: 0;
  padding: var(--gap-2) var(--gap-3);
  border-radius: var(--radius-1);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--White);
}

.panel__callout--ok {
  border-color: rgba(81, 207, 102, 0.35);
  background: rgba(81, 207, 102, 0.10);
}

.panel__callout--warn {
  border-color: rgba(255, 190, 92, 0.40);
  background: rgba(255, 190, 92, 0.10);
}

.panel__callout--danger {
  border-color: rgba(255, 107, 107, 0.40);
  background: rgba(255, 107, 107, 0.10);
}

/* ---- Actions row ---- */
.panel__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2);
  margin-top: auto; /* keeps buttons at the bottom if content grows */
}

.panel__hint {
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.7);
  font-size: var(--small);
  line-height: var(--small-lh);
}

/* ---- Button: neutral variant for “Subscribe” links ---- */


/* ---- Badges ---- */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 12px;
  border-radius: 999px;

  font-size: var(--small);
  line-height: 1;
  font-weight: 700;

  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: var(--White);
}

.badge--ok {
  border-color: rgba(81, 207, 102, 0.45);
  background: rgba(81, 207, 102, 0.14);
  color: #b5d9a7;
}

.badge--warn {
  border-color: rgba(255, 190, 92, 0.55);
  background: rgba(255, 190, 92, 0.14);
  color: #ffbe5c;
}

.badge--danger {
  border-color: rgba(255, 107, 107, 0.55);
  background: rgba(255, 107, 107, 0.14);
  color: #ff8a80;
}

.badge--muted {
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: rgba(255, 255, 255, 0.75);
}

/* ============================================================
   RESPONSIVE: hide sidebar on mobile (dashboard-main stays)
   ============================================================ */

/* ============================================================
   DASHBOARD MOBILE
   ============================================================ */

@media (max-width: 768px) {

  .dashboard {
    display: block;
    margin: var(--gap-4) auto;
  }

  .dashboard-sidebar {
    display: none;
  }

  .dashboard-main {
    padding: var(--gap-3);
    border-radius: var(--radius-1);
  }

  .dashboard-main .container {
    padding-left: 0;
    padding-right: 0;
  }

  .page-head {
    margin-bottom: var(--gap-4);
  }

  .page-title {
    font-size: var(--h2);
  }

  .account-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap-3);
    width: 100%;
  }

  .panel {
    width: 100%;
    max-width: 100%;
  }

  .panel__inner {
    padding: var(--gap-3);
  }

  .panel__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .panel__actions .btn {
    width: 100%;
  }

  .badge {
    font-size: var(--small);
  }

}

/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 480px) {

  .dashboard {
    margin: var(--gap-3) auto;
  }

  .dashboard-main {
    padding: var(--gap-2);
  }

  .panel__inner {
    padding: var(--gap-2);
  }

  .panel__title {
    font-size: var(--h3);
  }

  .panel__line {
    font-size: var(--small);
  }

  .btn {
    height: 52px;
    font-size: 16px;
  }

}
/* ============================================================
   FAQ
   ============================================================ */

.faq-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
}

.faq-item {
  width: 100%;
  background: #333333;
  border: 1px solid rgba(181, 217, 167, 0.24);
  border-radius: var(--radius-1);
  overflow: hidden;
  box-sizing: border-box;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.faq-item[open] {
  background: #2f2f2f;
  border-color: rgba(181, 217, 167, 0.55);
}

.faq-question {
  width: 100%;
  display: block;
  position: relative;
  padding: var(--gap-3) calc(var(--gap-4) + 36px) var(--gap-3) var(--gap-4);
  box-sizing: border-box;
  list-style: none;
  cursor: pointer;
  user-select: none;

  color: var(--White);
  font-size: var(--text);
  line-height: var(--text-lh);
  font-weight: 600;

  transition: color 0.2s ease, background-color 0.2s ease;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question::marker {
  content: "";
}

.faq-question::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: var(--gap-4);
  transform: translateY(-50%);
  width: 24px;
  height: 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--GreenLight);
  font-size: 28px;
  line-height: 1;
  font-weight: 400;
}

.faq-item[open] .faq-question::after {
  content: "−";
}

.faq-answer {
  padding: 0 var(--gap-4) var(--gap-4);
  box-sizing: border-box;
}

.faq-answer .article-text {
  width: 100%;
  max-width: none;
  color: rgba(255, 255, 255, 0.82);
}

.faq-answer .article-text + .article-text {
  margin-top: var(--gap-2);
}

.faq-item:first-child .faq-question {
  border-top-left-radius: var(--radius-1);
  border-top-right-radius: var(--radius-1);
}

.faq-item:last-child .faq-answer {
  border-bottom-left-radius: var(--radius-1);
  border-bottom-right-radius: var(--radius-1);
}

.article-content,
.article-body,
.article-title,
.article-text,
.quote-text {
  color: var(--White);
}

.quote-block {
  color: var(--White);
}

@media (hover: hover) {
  .faq-item:hover {
    border-color: rgba(181, 217, 167, 0.4);
  }

  .faq-item:hover .faq-question {
    color: #ffffff;
  }
}

@media (max-width: 1024px) {
  .faq-list {
    gap: var(--gap-2);
  }

  .faq-question {
    padding: var(--gap-3) calc(var(--gap-3) + 34px) var(--gap-3) var(--gap-3);
  }

  .faq-question::after {
    right: var(--gap-3);
    font-size: 26px;
  }

  .faq-answer {
    padding: 0 var(--gap-3) var(--gap-3);
  }
}

@media (max-width: 768px) {
  .faq-question {
    padding: var(--gap-3) calc(var(--gap-3) + 30px) var(--gap-3) var(--gap-3);
    font-size: var(--small);
    line-height: var(--small-lh);
  }

  .faq-question::after {
    right: var(--gap-3);
    width: 22px;
    height: 22px;
    font-size: 24px;
  }

  .faq-answer {
    padding: 0 var(--gap-3) var(--gap-3);
  }

  .faq-answer .article-text {
    font-size: var(--small);
    line-height: var(--small-lh);
  }
}

@media (max-width: 480px) {
  .faq-list {
    gap: 12px;
  }

  .faq-question {
    padding: var(--gap-2) calc(var(--gap-2) + 28px) var(--gap-2) var(--gap-2);
  }

  .faq-question::after {
    right: var(--gap-2);
    width: 20px;
    height: 20px;
    font-size: 22px;
  }

  .faq-answer {
    padding: 0 var(--gap-2) var(--gap-2);
  }
}

@media (max-width: 768px) {
  #profile-link {
    display: none;
  }
}

/* Left menu chage  */
@media (max-width: 768px) {

  .header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .burger-menu {
    order: 1;
  }

  .header-logo-container {
    order: 2;
  }

  .header-right-menu {
    order: 3;
  }

}

@media (max-width: 768px) {

  .header-left-menu {
    order: 1;
    flex: 1;
    justify-content: flex-start;
    gap: 0;
  }

  .header-right-menu {
    order: 3;
    flex: 1;
    justify-content: flex-end;
    gap: 0;
  }

  .burger-menu {
    margin-right: auto;
  }

}

@media (min-width: 769px) {


  /* step text container */
  .checkout-step-content,
  .active-step-2-step-content,
  .step-3-step-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 40px; /* instead of large desktop gap */
  }

  .checkout-step-item,
  .active-step-2-step-item,
  .step-3-step-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  /* active step number */
  .checkout-step-item.checkout-active .checkout-step-number,
  .active-step-2-active-item .active-step-2-step-number,
  .step-3-active-item .step-3-step-number {
    color: #B5D9A7;
    font-size: 22px;
    line-height: 22px;
    font-weight: 400;
  }

  /* inactive step number */
  .checkout-step-item:not(.checkout-active) .checkout-step-number,
  .active-step-2-step-item:not(.active-step-2-active-item) .active-step-2-step-number,
  .step-3-step-item:not(.step-3-active-item) .step-3-step-number {
    color: #AFBCB8;
    font-size: 14px;
    line-height: 18px;
    font-weight: 400;
  }

  /* active step title */
  .checkout-step-item.checkout-active .checkout-step-title,
  .active-step-2-active-item .active-step-2-step-title,
  .step-3-active-item .step-3-step-title {
    color: var(--White);
    font-size: 24px;
    line-height: 28px;
    font-weight: 600;
    margin: 0;
  }

  /* inactive step title */
  .checkout-step-item:not(.checkout-active) .checkout-step-title,
  .active-step-2-step-item:not(.active-step-2-active-item) .active-step-2-step-title,
  .step-3-step-item:not(.step-3-active-item) .step-3-step-title {
    color: #AFBCB8;
    font-size: 18px;
    line-height: 22px;
    font-weight: 400;
    margin: 0;
  }
}

@media (min-width: 769px) {

  .checkout-product-name {
    font-size: 28px;
    line-height: 20px;
    margin-bottom: 2px;
  }

}

@media (min-width: 769px) {

  .checkout-product-price {
    font-size: 28px;
    line-height: 22px;
    font-weight: 600;
  }

}

@media (min-width: 769px) {

  .checkout-total-label {
    font-size: 28px;
  }

  .checkout-total-price {
   font-size: 28px;
    font-weight: 600;
  }

}

@media (min-width: 769px) {

  .checkout-order-item-card {
    padding: 14px 16px;
  }

  .checkout-order-summary {
    padding: 16px 18px;
  }

  .checkout-total-amount {
    font-size: 28px;
  }

}


/* FPDQ Query Library */
.library-page {
  color: var(--White);
}

.library-hero {
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
  margin-bottom: var(--gap-6);
}

.library-hero--compact {
  margin-bottom: var(--gap-5);
}

.library-eyebrow {
  color: var(--GreenLight);
  font-size: var(--small);
  line-height: var(--small-lh);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.library-title,
.library-article-title {
  color: var(--White);
  margin: 0;
}

.library-subtitle,
.library-article-question {
  color: #afbcb8;
  max-width: 920px;
}

.library-search-row {
  display: flex;
  gap: var(--gap-2);
  align-items: stretch;
}

.library-search-input,
.library-select {
  width: 100%;
  min-height: var(--input-h);
  padding: var(--input-py) var(--input-px);
  border: 1px solid var(--White);
  border-radius: var(--input-radius);
  background: transparent;
  color: var(--White);
  font-family: var(--font-body);
  font-size: var(--input-fs);
  line-height: var(--input-lh);
}

.library-search-input::placeholder {
  color: rgba(255, 255, 255, 0.55);
}

.library-filter-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px 150px auto auto;
  gap: var(--gap-2);
}

.library-groups {
  display: flex;
  flex-direction: column;
  gap: var(--gap-6);
}

.library-group {
  display: flex;
  flex-direction: column;
  gap: var(--gap-4);
}

.library-group-title {
  color: var(--White);
  margin: 0;
}

.library-group-description {
  color: #afbcb8;
  margin: 0;
}

.library-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-3);
}

.library-card,
.library-list-card {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--radius-1);
  padding: 1px;
  background: linear-gradient(135deg, #b5d9a7, #00aa89);
  margin-bottom: var(--gap-1);
}

.library-card-body,
.library-list-card-body,
.library-article-card {
  background: #333333;
  border-radius: calc(var(--radius-1) - 1px);
  padding: var(--gap-4);
  height: 100%;
  box-sizing: border-box;
}

.library-card-title,
.library-list-card-title,
.library-article-card-title,
.library-article-tags-title {
  color: var(--White);
  margin: 0 0 var(--gap-2) 0;
}

.library-card-meta,
.library-list-card-question {
  color: #b5d9a7;
  margin: 0 0 var(--gap-2) 0;
}

.library-list-card-answer,
.library-article-content p,
.library-back-link {
  color: #afbcb8;
}

.library-tabs {
  display: flex;
  gap: var(--gap-2);
  flex-wrap: wrap;
  margin-top: var(--gap-4);
  margin-bottom: var(--gap-4);
}

.library-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid #666666;
  color: var(--White);
  text-decoration: none;
}

.library-tab.is-active {
  background: #474747;
  border-color: #b5d9a7;
}

.library-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: var(--gap-2);
}

.library-tag {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid #666666;
  color: var(--White);
  font-size: var(--small);
  line-height: var(--small-lh);
}

.library-article {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.library-article-header {
  display: flex;
  flex-direction: column;
  gap: var(--gap-3);
  margin-bottom: var(--gap-5);
}

.library-empty {
  padding: var(--gap-4);
  border-radius: var(--radius-1);
  background: #333333;
  color: #afbcb8;
}

@media (max-width: 1024px) {
  .library-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .library-filter-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .library-grid {
    grid-template-columns: 1fr;
  }

  .library-search-row {
    flex-direction: column;
  }
}

.library-metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 32px 0;
}

.library-metric-card{
  min-width:0;
  padding:1px;
  border-radius:16px;
  background:linear-gradient(135deg,#b5d9a7,#00aa89);
}

.library-metric-card-body{
  height:100%;
  box-sizing:border-box;
  padding:22px 20px;
  border-radius:15px;
  background:#333333;
}

.library-metric-label {
  margin: 0 0 14px;
  color: #afbcb8;
  font-size: 15px;
  line-height: 1.45;
  font-weight: 400;
}

.library-metric-value {
  min-width: 0;
  color: #ffffff;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.05;
  font-weight: 500;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (max-width: 900px) {
  .library-metric-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .library-metric-label {
    font-size: 14px;
    margin-bottom: 10px;
  }

  .library-metric-value {
    font-size: clamp(26px, 8vw, 38px);
    line-height: 1.08;
  }
}

.library-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.library-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
}

.library-table th,
.library-table td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid #5f5f5f;
}

.library-table th {
  color: #ffffff;
  background: #282828;
}

.library-table td {
  color: #ffffff;
  background: #333333;
}

.library-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.library-insights-list {
  margin: 16px 0 0;
  padding-left: 20px;
}

.library-insights-list li {
  margin-bottom: 10px;
  color: var(--White);
  line-height: 1.6;
}

.library-insights-list {
  margin: 16px 0 0;
  padding-left: 20px;
}

.library-insights-list li {
  margin-bottom: 10px;
  color: var(--White);
  line-height: 1.6;
}

.library-query-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.library-query-box {
  margin-bottom: 20px;
  border: 1px solid var(--Border, #5f5f5f);
  border-radius: 7px;
  overflow: hidden;
}

.library-query-pre {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  white-space: pre;
  font-family: monospace;
  font-size: 14px;
  line-height: 1.5;
  background: #1f1f1f;
  color: #ffffff;
}

.sql-pre {
  margin: 0;
  padding: 16px;
  overflow-x: auto;
  white-space: pre;
  background: #1f1f1f;
  border-radius: 7px;
}

.sql-code {
  font-family: monospace;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre;
  color: #ffffff;
}

.sql-code.sql-highlighted {
  color: #ffffff;
}

.t-keyword { color: #ff6ec7; }
.t-string  { color: #8d7cff; }
.t-number  { color: #8d7cff; }
.t-comment { color: rgba(160,160,160,0.7); }

body.light-theme .t-keyword { color: #d958a0; }
body.light-theme .t-string  { color: #7a5edd; }
body.light-theme .t-number  { color: #7a5edd; }
body.light-theme .t-comment { color: rgba(122,122,122,0.7); }

.library-query-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.library-query-box {
  margin-bottom: 20px;
  border: 1px solid var(--Border, #5f5f5f);
  border-radius: 7px;
  overflow: hidden;
}

.library-query-pre {
  margin: 0;
}

.library-insight-box {
  margin-top: 18px;
  padding: 18px 20px;
  border: 1px solid var(--Border, #5f5f5f);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.03);
}

.library-insight-label {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #afbcb8;
}

.library-insight-text {
  margin: 0;
  color: var(--White);
  line-height: 1.7;
}

.library-generated-at {
  margin: 14px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: #afbcb8;
}

.t-keyword{
color:#FF79C6;
font-weight:600;
}

.t-table{
color:#5DA9FF;
font-weight:500;
}

.t-long{
color:#50C878;
}

.t-column{
color:#F4A261;
}

/* functions */
.t-func{
color:#F1FA8C;
}

/* numbers */
.t-number{
color:#BD93F9;
}

/* strings */
.t-string{
color:#C792EA;
}

.t-comment{
color:#6A737D;
font-style:italic;
}

.t-op{
color:#E6E6E6;
}

.t-punct{
color:#AAAAAA;
}