@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap");

:root {
  --brand: #0F5C53;
  --brand-2: #157A6E;
  --accent: #C89B3C;
  --dark: #1F2933;
  --ink: #1F2933;
  --muted: #5C6873;
  --line: #DDE5E7;
  --bg: #F5F7F8;
  --white: #FFFFFF;
  --card: #FFFFFF;
  --ice: #EEF4F5;
  --success: #157A6E;
  --danger: #9F2D20;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --shadow-soft: 0 14px 34px rgba(31, 41, 51, .08);
  --shadow-lift: 0 22px 54px rgba(15, 92, 83, .16);
  --gradient-hero: radial-gradient(circle at 18% 0%, rgba(200, 155, 60, .28), transparent 34%),
    linear-gradient(135deg, #0B3E39 0%, #0F5C53 46%, #157A6E 100%);
  --gradient-soft: linear-gradient(145deg, rgba(255,255,255,.96), rgba(238,244,245,.9));
  color-scheme: light;
}

html {
  min-height: 100%;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  color: var(--ink) !important;
  background:
    radial-gradient(circle at top left, rgba(21,122,110,.08), transparent 34%),
    linear-gradient(180deg, #FFFFFF 0%, var(--bg) 42%) !important;
  font-family: Inter, Aptos, "Segoe UI", Arial, sans-serif !important;
  letter-spacing: 0;
  overflow-x: hidden;
}

a,
button,
input,
select,
textarea {
  font-family: inherit !important;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(200, 155, 60, .42) !important;
  outline-offset: 2px;
}

.topbar,
.hero,
header:not(.app-header):not(.topbar-inner) {
  background: var(--gradient-hero) !important;
  border-bottom: 1px solid rgba(255,255,255,.16) !important;
}

.topbar-inner,
.hero-inner,
.content,
main {
  width: min(1180px, calc(100% - 32px));
}

.topbar-inner,
.hero-inner {
  padding-top: clamp(26px, 4vw, 58px) !important;
  padding-bottom: clamp(26px, 4vw, 58px) !important;
}

.eyebrow,
.meta,
.card-kicker,
.status {
  color: #D5E9E5 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
}

.section-head .eyebrow,
main .eyebrow,
.card .meta,
.internal-card .meta,
.document-head span,
.card-kicker {
  color: var(--brand-2) !important;
}

h1,
h2,
h3,
.card strong,
.internal-card strong {
  color: inherit;
  letter-spacing: 0 !important;
  max-width: 100%;
  overflow-wrap: break-word;
}

.section-head h2,
.reserved-panel h2,
.login-panel h2,
.document-head strong,
.card strong,
.internal-card strong {
  color: var(--dark) !important;
}

.hero-text,
header .hero-text {
  color: rgba(255,255,255,.86) !important;
}

p,
span,
a,
strong,
.intro,
.hint,
.hero-text {
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: normal;
}

.grid {
  gap: clamp(14px, 2vw, 22px) !important;
}

.card,
.internal-card,
.login-panel,
.reserved-panel,
.document-head,
.page,
.quote-panel,
.panel,
.result-card,
.toolbar,
.discount-callout {
  background: var(--gradient-soft) !important;
  border: 1px solid rgba(221, 229, 231, .95) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-soft) !important;
}

.card,
.internal-card {
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.card strong,
.internal-card strong {
  display: flex !important;
  gap: 10px;
  align-items: center;
  min-width: 0;
}

.card strong::before,
.internal-card strong::before {
  content: "";
  flex: 0 0 30px;
  width: 30px;
  height: 30px;
  border-radius: 11px;
  background:
    linear-gradient(135deg, rgba(200,155,60,.95), rgba(200,155,60,.38)),
    linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 10px 20px rgba(200,155,60,.18);
}

.card::before,
.internal-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--accent), rgba(200,155,60,.18));
  opacity: .92;
}

.card:hover,
.internal-card:hover {
  transform: translateY(-3px);
  border-color: rgba(21, 122, 110, .38) !important;
  box-shadow: var(--shadow-lift) !important;
}

.card p,
.internal-card p,
.section-head p,
.document-head p,
.footer {
  color: var(--muted) !important;
}

.nav-actions,
.page-actions,
.controls,
.toolbar {
  gap: 10px !important;
}

.nav-link,
.page-link,
.button,
button,
.cta,
.whatsapp-link,
.app-home-button,
.site-return-button {
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease;
}

.nav-link,
.page-link,
.button,
button,
.cta,
.whatsapp-link,
.app-home-button,
.site-return-button,
.internal-card span {
  box-shadow: 0 10px 22px rgba(15, 92, 83, .12);
}

.nav-link.primary,
.button.primary,
.page-link.primary,
button.primary {
  color: var(--brand) !important;
  background: #FFFFFF !important;
  border-color: rgba(255,255,255,.78) !important;
}

.page-link,
.cta,
.whatsapp-link,
.app-home-button,
.site-return-button,
.internal-card span,
button:not(.secondary):not(.icon):not(.viewer-close) {
  color: #FFFFFF !important;
  background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
  border-color: rgba(255,255,255,.18) !important;
}

.secondary,
button.secondary,
.page-link.secondary {
  color: var(--brand) !important;
  background: #FFFFFF !important;
  border-color: var(--line) !important;
}

.nav-link:hover,
.page-link:hover,
.button:hover,
button:hover,
.cta:hover,
.whatsapp-link:hover,
.app-home-button:hover,
.site-return-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 34px rgba(15, 92, 83, .2) !important;
}

input,
select,
textarea {
  color: var(--ink) !important;
  background: #FFFFFF !important;
  border: 1px solid var(--line) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--brand-2) !important;
  box-shadow: 0 0 0 4px rgba(21, 122, 110, .14) !important;
}

table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

th {
  color: #FFFFFF !important;
  background: var(--brand) !important;
}

td,
th {
  border-color: rgba(221, 229, 231, .95) !important;
}

.table-wrap {
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-soft);
}

.logo-box,
.brand-title img,
.hero-brand img {
  border-radius: 18px !important;
  box-shadow: 0 16px 34px rgba(31,41,51,.16) !important;
}

.footer {
  border-top: 1px solid rgba(221,229,231,.8);
  padding-top: 22px !important;
}

.app-home-button,
.site-return-button {
  max-width: calc(100vw - 28px);
  white-space: nowrap;
  right: 14px !important;
  left: auto !important;
}

@media (max-width: 760px) {
  .content,
  main,
  .topbar-inner,
  .hero-inner {
    width: min(100% - 22px, 1180px) !important;
  }

  .card,
  .internal-card,
  .login-panel,
  .reserved-panel,
  .quote-panel {
    border-radius: 14px !important;
  }

  .nav-actions,
  .page-actions,
  .controls,
  .toolbar {
    align-items: stretch !important;
  }

  .nav-link,
  .page-link,
  .button,
  .toolbar button {
    min-height: 44px !important;
  }

  h1 {
    font-size: clamp(34px, 11vw, 54px) !important;
  }
}

/* Contrast safety layer for dark green / gradient surfaces. */
.hero,
.intro,
.banner,
.cta,
.gradient-box,
.topbar,
header,
[class*="hero"],
[class*="banner"] {
  color: #FFFFFF !important;
  overflow: hidden;
}

.hero h1,
.hero h2,
.hero h3,
.intro h1,
.intro h2,
.intro h3,
.banner h1,
.banner h2,
.banner h3,
.cta h1,
.cta h2,
.cta h3,
.gradient-box h1,
.gradient-box h2,
.gradient-box h3,
.topbar h1,
.topbar h2,
.topbar h3,
header h1,
header h2,
header h3,
header strong {
  color: #FFFFFF !important;
}

.hero p,
.intro p,
.banner p,
.cta p,
.gradient-box p,
.topbar p,
.topbar span:not(.cta):not(.meta),
.topbar .hint,
header p,
header .intro,
header .hero-text {
  color: rgba(255,255,255,.9) !important;
}

.hero a:not(.button):not(.nav-link):not(.page-link),
.intro a:not(.button):not(.nav-link):not(.page-link),
.banner a:not(.button):not(.nav-link):not(.page-link),
.cta a:not(.button):not(.nav-link):not(.page-link),
.gradient-box a:not(.button):not(.nav-link):not(.page-link),
.topbar a:not(.button):not(.nav-link):not(.page-link),
header a:not(.button):not(.nav-link):not(.page-link),
.topbar .back {
  color: #FFFFFF !important;
  text-decoration-color: rgba(255,255,255,.55) !important;
}

main > .topbar,
.content > .topbar {
  padding: clamp(14px, 3vw, 22px) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-soft) !important;
}

main > .topbar .back,
.content > .topbar .back {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 14px;
  color: #FFFFFF !important;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  text-decoration: none;
}