/* =====================================================================
 * SOTCoin Website — marketing-page design tokens + components.
 *
 * Scoped via class prefix `.soc-*` so it never leaks into legacy
 * stays/students-of-timor pages on this subsite. The plugin enqueues
 * this file only on the /personal/, /business/, /kids-teens/,
 * /company/ tree plus the homepage.
 *
 * Brand palette (per SOT brand): Ocean + Forest. Layout grammar is
 * inspired by modern fintech sites (large hero, generous whitespace,
 * pill buttons, feature-card grids).
 * ===================================================================== */

:root {
  /* ── Colors ── */
  --soc-ocean:        #0A4D6E;
  --soc-ocean-deep:   #063349;
  --soc-ocean-soft:   #D3E3EC;
  --soc-forest:       #1F5A36;
  --soc-forest-deep:  #133A22;
  --soc-forest-soft:  #DCE8DE;

  --soc-ink:          #0F1924;   /* near-black for headlines */
  --soc-ink-2:        #1f2937;   /* body */
  --soc-muted:        #6b7280;   /* secondary text */
  --soc-line:         #e5e7eb;   /* hairline borders */

  --soc-bg:           #ffffff;
  --soc-bg-soft:      #f6f7f9;
  --soc-bg-dark:      #0F1924;
  --soc-on-dark:      #f5f7fa;
  --soc-on-dark-mute: #9ca3af;

  /* ── Type scale ── */
  --soc-font:         "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --soc-font-display: var(--soc-font);

  /* ── Radius & shadow ── */
  --soc-radius:       16px;
  --soc-radius-lg:    24px;
  --soc-radius-pill:  9999px;
  --soc-shadow-sm:    0 1px 2px rgba(15, 25, 36, .04), 0 1px 3px rgba(15, 25, 36, .06);
  --soc-shadow-md:    0 4px 12px rgba(15, 25, 36, .06), 0 10px 30px rgba(15, 25, 36, .07);
  --soc-shadow-lg:    0 12px 36px rgba(15, 25, 36, .10), 0 24px 48px rgba(15, 25, 36, .12);

  /* ── Layout ── */
  --soc-container:    1180px;
  --soc-gap:          24px;
  --soc-section-pad:  clamp(48px, 8vw, 96px);
}

/* ===================================================================== */
/* Base / wrapper                                                        */
/* ===================================================================== */

.soc-container {
  width: 100%;
  max-width: var(--soc-container);
  margin: 0 auto;
  padding: 0 24px;
  box-sizing: border-box;
}

.soc-section {
  padding-block: var(--soc-section-pad);
}
.soc-section--theme-dark        { background: var(--soc-bg-dark); color: var(--soc-on-dark); }
.soc-section--theme-light       { background: var(--soc-bg-soft); }
.soc-section--theme-ocean-soft  { background: var(--soc-ocean-soft); color: var(--soc-ocean-deep); }
.soc-section--theme-forest-soft { background: var(--soc-forest-soft); color: var(--soc-forest-deep); }
.soc-section--theme-dark .soc-section-head__sub,
.soc-section--theme-dark .soc-feature__body { color: var(--soc-on-dark-mute); }

.soc-eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--soc-ocean);
  font-weight: 700;
  margin-bottom: 12px;
}

.soc-section-head {
  text-align: center;
  margin: 0 auto 48px;
  max-width: 720px;
}
.soc-section-head__title {
  font-family: var(--soc-font-display);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--soc-ink);
  margin: 0 0 16px;
}
.soc-section-head__sub {
  font-size: 18px;
  color: var(--soc-muted);
  line-height: 1.55;
  margin: 0;
}

/* ===================================================================== */
/* Buttons                                                                */
/* ===================================================================== */

.soc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--soc-font);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  border-radius: var(--soc-radius-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.soc-btn:hover { transform: translateY(-1px); }
.soc-btn--primary {
  background: var(--soc-ocean);
  color: #fff;
  border-color: var(--soc-ocean);
}
.soc-btn--primary:hover {
  background: var(--soc-ocean-deep);
  border-color: var(--soc-ocean-deep);
  box-shadow: var(--soc-shadow-md);
}
.soc-btn--ghost {
  background: transparent;
  color: var(--soc-ink);
  border-color: var(--soc-ink);
}
.soc-btn--ghost:hover {
  background: var(--soc-ink);
  color: #fff;
}
.soc-btn--inverse.soc-btn--primary {
  background: #fff;
  color: var(--soc-ocean-deep);
  border-color: #fff;
}
.soc-btn--inverse.soc-btn--primary:hover {
  background: var(--soc-on-dark);
  color: var(--soc-ocean-deep);
}
.soc-btn--inverse.soc-btn--ghost {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
.soc-btn--inverse.soc-btn--ghost:hover {
  background: #fff;
  color: var(--soc-ink);
}

/* ===================================================================== */
/* Hero                                                                   */
/* ===================================================================== */

.soc-hero {
  padding-block: clamp(48px, 9vw, 120px);
  position: relative;
  overflow: hidden;
}
.soc-hero--theme-light   { background: var(--soc-bg); color: var(--soc-ink); }
.soc-hero--theme-dark    { background: var(--soc-bg-dark); color: var(--soc-on-dark); }
.soc-hero--theme-ocean   { background: linear-gradient(135deg, var(--soc-ocean) 0%, var(--soc-ocean-deep) 100%); color: #fff; }
.soc-hero--theme-forest  { background: linear-gradient(135deg, var(--soc-forest) 0%, var(--soc-forest-deep) 100%); color: #fff; }
.soc-hero--theme-dark .soc-hero__subhead,
.soc-hero--theme-ocean .soc-hero__subhead,
.soc-hero--theme-forest .soc-hero__subhead { color: rgba(255, 255, 255, .8); }

.soc-hero__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 48px;
  align-items: center;
}
.soc-hero--align-center .soc-hero__grid {
  grid-template-columns: 1fr;
  text-align: center;
  max-width: 820px;
}
.soc-hero--align-center .soc-hero__visual { display: none; }
@media (max-width: 860px) {
  .soc-hero__grid { grid-template-columns: 1fr; text-align: center; }
}

.soc-hero__badge {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--soc-radius-pill);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--soc-ocean-soft);
  color: var(--soc-ocean-deep);
  margin-bottom: 16px;
}
.soc-hero--theme-dark .soc-hero__badge,
.soc-hero--theme-ocean .soc-hero__badge,
.soc-hero--theme-forest .soc-hero__badge {
  background: rgba(255, 255, 255, .15);
  color: #fff;
}

.soc-hero__headline {
  font-family: var(--soc-font-display);
  font-size: clamp(36px, 6.5vw, 68px);
  line-height: 1.04;
  letter-spacing: -.02em;
  font-weight: 800;
  margin: 0 0 20px;
}
.soc-hero__subhead {
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.45;
  color: var(--soc-muted);
  margin: 0 0 32px;
  max-width: 560px;
}
.soc-hero--align-center .soc-hero__subhead { margin-inline: auto; }
.soc-hero__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.soc-hero--align-center .soc-hero__ctas { justify-content: center; }
.soc-hero__visual img {
  width: 100%;
  max-width: 520px;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: var(--soc-radius-lg);
  box-shadow: var(--soc-shadow-lg);
}

/* ===================================================================== */
/* Features grid                                                          */
/* ===================================================================== */

.soc-features { padding-block: var(--soc-section-pad); }
.soc-features__grid {
  display: grid;
  gap: var(--soc-gap);
}
.soc-features__grid--cols-1 { grid-template-columns: 1fr; }
.soc-features__grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.soc-features__grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.soc-features__grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) {
  .soc-features__grid--cols-3,
  .soc-features__grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .soc-features__grid--cols-2,
  .soc-features__grid--cols-3,
  .soc-features__grid--cols-4 { grid-template-columns: 1fr; }
}

.soc-feature {
  position: relative;
  display: block;
  padding: 28px;
  background: var(--soc-bg);
  border: 1px solid var(--soc-line);
  border-radius: var(--soc-radius);
  /* Resting shadow — Ocean-tinted, very soft. Gives the card visible chrome
   * without hover so the grid doesn't read as a flat list of paragraphs. */
  box-shadow: 0 1px 2px rgba(6, 51, 73, 0.05),
              0 4px 12px rgba(6, 51, 73, 0.04);
  color: inherit;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease, border-color .15s ease;
}
.soc-feature[href]:hover {
  transform: translateY(-3px);
  /* Hover lifts visibly above the resting shadow. */
  box-shadow: 0 4px 10px rgba(6, 51, 73, 0.08),
              0 18px 32px rgba(6, 51, 73, 0.10);
  border-color: var(--soc-ocean-soft);
}
.soc-feature__icon {
  display: inline-flex;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  border-radius: 12px;
  background: var(--soc-ocean-soft);
  color: var(--soc-ocean-deep);
  margin-bottom: 16px;
}
.soc-feature__icon svg { width: 24px; height: 24px; }
.soc-feature__badge {
  position: absolute;
  top: 16px; right: 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--soc-forest-soft);
  color: var(--soc-forest-deep);
}
.soc-feature__title {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--soc-ink);
  margin: 0 0 8px;
}
.soc-feature__body {
  color: var(--soc-muted);
  font-size: 15px;
  line-height: 1.55;
}
.soc-feature__body > p:last-child { margin-bottom: 0; }

/* ===================================================================== */
/* Coming Soon                                                            */
/* ===================================================================== */

.soc-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
  padding: 24px;
  border-radius: var(--soc-radius);
  background: linear-gradient(135deg, var(--soc-forest-soft) 0%, var(--soc-ocean-soft) 100%);
  border: 1px dashed var(--soc-forest);
  color: var(--soc-forest-deep);
  margin: 24px 0;
}
.soc-coming-soon__label {
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.soc-coming-soon__eta {
  font-size: 13px;
  color: var(--soc-forest);
  letter-spacing: .04em;
}
.soc-coming-soon__body {
  font-size: 15px;
  color: var(--soc-ink-2);
  margin: 8px 0 0;
  max-width: 520px;
}
.soc-coming-soon--small  .soc-coming-soon__label { font-size: 13px; }
.soc-coming-soon--medium .soc-coming-soon__label { font-size: 16px; }
.soc-coming-soon--large  .soc-coming-soon__label { font-size: 24px; }
.soc-coming-soon--large  { padding: 40px 24px; }

/* ===================================================================== */
/* CTA banner                                                             */
/* ===================================================================== */

.soc-cta {
  padding-block: clamp(56px, 8vw, 96px);
}
.soc-cta--theme-ocean   { background: linear-gradient(135deg, var(--soc-ocean) 0%, var(--soc-ocean-deep) 100%); color: #fff; }
.soc-cta--theme-forest  { background: linear-gradient(135deg, var(--soc-forest) 0%, var(--soc-forest-deep) 100%); color: #fff; }
.soc-cta--theme-dark    { background: var(--soc-bg-dark); color: var(--soc-on-dark); }
.soc-cta--theme-light   { background: var(--soc-bg-soft); color: var(--soc-ink); }

.soc-cta__inner {
  text-align: center;
  max-width: 780px;
}
.soc-cta__headline {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: 1.1;
  margin: 0 0 16px;
}
.soc-cta__sub {
  font-size: 18px;
  line-height: 1.5;
  margin: 0 0 32px;
  opacity: .85;
}
.soc-cta__buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ===================================================================== */
/* Plans (5-card strip)                                                   */
/* ===================================================================== */

.soc-plans { padding-block: var(--soc-section-pad); }
.soc-plans__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
@media (max-width: 1100px) { .soc-plans__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .soc-plans__grid { grid-template-columns: 1fr; } }

.soc-plan {
  display: flex;
  flex-direction: column;
  padding: 24px;
  background: var(--soc-bg);
  border: 1px solid var(--soc-line);
  border-radius: var(--soc-radius);
  text-align: center;
  transition: transform .15s ease, border-color .15s ease;
}
.soc-plan:hover { border-color: var(--soc-ocean); transform: translateY(-2px); }
.soc-plan__name  { font-size: 18px; font-weight: 700; margin: 0 0 8px; color: var(--soc-ocean-deep); }
.soc-plan__price { font-size: 22px; font-weight: 800; margin-bottom: 8px; color: var(--soc-ink); }
.soc-plan__tagline { font-size: 14px; color: var(--soc-muted); min-height: 42px; margin-bottom: 16px; }
.soc-plan__features { list-style: none; padding: 0; margin: 0; text-align: left; }
.soc-plan__features li {
  font-size: 14px;
  padding: 6px 0 6px 20px;
  position: relative;
  color: var(--soc-ink-2);
}
.soc-plan__features li::before {
  content: "✓";
  position: absolute;
  left: 0; top: 6px;
  color: var(--soc-forest);
  font-weight: 700;
}
.soc-plans__note {
  text-align: center;
  font-size: 13px;
  color: var(--soc-muted);
  margin-top: 24px;
  font-style: italic;
}

/* ===================================================================== */
/* Steps                                                                  */
/* ===================================================================== */

.soc-steps { padding-block: var(--soc-section-pad); background: var(--soc-bg-soft); }
.soc-steps__list {
  list-style: none;
  counter-reset: soc-step;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}
.soc-step {
  position: relative;
  counter-increment: soc-step;
  padding: 28px 24px;
  background: var(--soc-bg);
  border: 1px solid var(--soc-line);
  border-radius: var(--soc-radius);
}
.soc-step::before {
  content: counter(soc-step);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--soc-ocean);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 16px;
}
.soc-step__title { font-size: 18px; font-weight: 700; margin: 0 0 8px; color: var(--soc-ink); }
.soc-step__body  { font-size: 15px; color: var(--soc-muted); line-height: 1.55; }

/* ===================================================================== */
/* Logos / trust bar                                                      */
/* ===================================================================== */

.soc-logos { padding-block: 48px; background: var(--soc-bg-soft); }
.soc-logos__head {
  text-align: center;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--soc-muted);
  margin: 0 0 20px;
}
.soc-logos__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 32px;
  opacity: .65;
}
.soc-logos__row img { max-height: 32px; width: auto; }

/* ===================================================================== */
/* FAQ                                                                    */
/* ===================================================================== */

.soc-faq { padding-block: var(--soc-section-pad); }
.soc-faq__headline {
  font-size: clamp(26px, 3.5vw, 36px);
  font-weight: 800;
  letter-spacing: -.015em;
  margin: 0 0 32px;
  text-align: center;
  color: var(--soc-ink);
}
.soc-faq__list { max-width: 780px; margin: 0 auto; }
.soc-faq__item {
  border-bottom: 1px solid var(--soc-line);
  padding: 16px 0;
}
.soc-faq__item[open] .soc-faq__q::after { transform: rotate(45deg); }
.soc-faq__q {
  font-size: 17px;
  font-weight: 600;
  color: var(--soc-ink);
  list-style: none;
  cursor: pointer;
  position: relative;
  padding-right: 32px;
}
.soc-faq__q::after {
  content: "+";
  position: absolute;
  right: 4px; top: -2px;
  font-size: 22px;
  font-weight: 400;
  color: var(--soc-ocean);
  transition: transform .2s ease;
  transform-origin: center;
}
.soc-faq__a {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--soc-muted);
}
.soc-faq__a p:last-child { margin-bottom: 0; }

/* ===================================================================== */
/* Generic grid / card                                                    */
/* ===================================================================== */

.soc-grid {
  display: grid;
  gap: var(--soc-gap);
}
.soc-grid--cols-1 { grid-template-columns: 1fr; }
.soc-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.soc-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.soc-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) {
  .soc-grid--cols-3, .soc-grid--cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .soc-grid--cols-2, .soc-grid--cols-3, .soc-grid--cols-4 { grid-template-columns: 1fr; }
}

.soc-card {
  display: block;
  padding: 24px;
  background: var(--soc-bg);
  border: 1px solid var(--soc-line);
  border-radius: var(--soc-radius);
  /* Resting shadow — Ocean-tinted, soft. Same idea as .soc-feature: makes the
   * card read as a card without needing hover, which feels less "boring" on
   * scroll-by. Slightly less prominent than .soc-feature since cards are
   * usually denser on the page. */
  box-shadow: 0 1px 2px rgba(6, 51, 73, 0.04),
              0 4px 10px rgba(6, 51, 73, 0.04);
  color: inherit;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .2s ease;
}
.soc-card[href]:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(6, 51, 73, 0.08),
              0 18px 32px rgba(6, 51, 73, 0.10);
}
.soc-card__title { font-size: 18px; font-weight: 700; margin: 0 0 8px; color: var(--soc-ink); }
.soc-card__body  { font-size: 15px; color: var(--soc-muted); line-height: 1.55; }
.soc-card__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--soc-forest-soft);
  color: var(--soc-forest-deep);
  margin-bottom: 10px;
}
.soc-card--theme-ocean-soft  { background: var(--soc-ocean-soft); border-color: transparent; }
.soc-card--theme-forest-soft { background: var(--soc-forest-soft); border-color: transparent; }
.soc-card--theme-dark        { background: var(--soc-bg-dark); border-color: transparent; color: var(--soc-on-dark); }
.soc-card--theme-dark .soc-card__title { color: #fff; }
.soc-card--theme-dark .soc-card__body  { color: var(--soc-on-dark-mute); }

/* Cards with a thumbnail / screenshot — used for the "Built across Timor"
 * ecosystem grid. The image sits flush with the card edges so it reads as a
 * preview of the destination site (Stays / Services / Students / etc.). The
 * card uses extra-tight padding because the image already gives it visual
 * weight, and the title moves up to feel like a label. */
.soc-card--has-image {
  padding: 0;
  overflow: hidden;
}
.soc-card__image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--soc-ocean-soft); /* placeholder while the image loads */
  overflow: hidden;
}
.soc-card__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.4s ease;
}
.soc-card--has-image[href]:hover .soc-card__image img {
  transform: scale(1.025);
}
.soc-card--has-image .soc-card__badge,
.soc-card--has-image .soc-card__title,
.soc-card--has-image .soc-card__body {
  padding-left: 20px;
  padding-right: 20px;
}
.soc-card--has-image .soc-card__badge { margin-top: 18px; }
.soc-card--has-image .soc-card__title { margin-top: 14px; margin-bottom: 6px; }
.soc-card--has-image .soc-card__title:first-of-type { margin-top: 18px; }
.soc-card--has-image .soc-card__body  { padding-bottom: 20px; }

/* ===================================================================== */
/* Utilities                                                              */
/* ===================================================================== */

.soc-section__body p, .soc-section__body ul { font-size: 16px; color: var(--soc-ink-2); line-height: 1.6; }

/* ===================================================================== */
/* Full-bleed marketing page                                              */
/* ===================================================================== */
/*
 * These rules only apply when MarketingTemplate::add_body_class() has
 * tagged <body> with .soc-marketing-page (homepage + /personal/,
 * /business/, /kids-teens/, /company/ trees). Goal: let each landing
 * page run edge-to-edge while keeping the existing stot-main header.
 *
 * Our page-marketing.php template already skips the theme's narrow
 * wrappers (.stot-page > .stot-shell > .stot-card), so these rules are
 * primarily defensive — they hide any title bar, breadcrumb, or legacy
 * "Welcome to SOTCoin / My Wallet / Affiliate" row that some other
 * plugin/widget might still inject into the document.
 */

/* Plugin-template wrappers — explicit full-bleed reset so any inherited
 * theme rule (e.g. a body-wide max-width) can't squeeze us. */
.soc-marketing-page .soc-page,
.soc-marketing-page .soc-page__article,
.soc-marketing-page .soc-page__content {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
}

/* Escape hatch — if any code path still emits the theme's narrow shell
 * INSIDE our template (rare, but possible if a shortcode does it), force
 * it back to full-width so the hero/section runs corner-to-corner.
 * Inner .soc-container shortcodes still cap themselves at 1180px. */
/* Scoped to the PAGE BODY only (.soc-page is our marketing-template
 * wrapper). The stot-main theme also uses .stot-shell inside its header
 * row1/row2 — those need to KEEP their max-width container so the logo
 * and nav stay anchored to the same gutter as every other STOT site.
 * Without the .soc-page ancestor, this rule was stretching the header
 * edge-to-edge on marketing pages only. */
.soc-marketing-page .soc-page .stot-page,
.soc-marketing-page .soc-page .stot-shell,
.soc-marketing-page .soc-page .stot-card,
.soc-marketing-page .soc-page .stot-page-article,
.soc-marketing-page .soc-page .stot-prose {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}

/* Hide any theme-injected title bar / breadcrumb / page header — heroes
 * own their own H1. Covers stot-main's own variants plus generic WP
 * patterns that other plugins sometimes piggy-back on. */
.soc-marketing-page .entry-header,
.soc-marketing-page .entry-title,
.soc-marketing-page .page-header,
.soc-marketing-page .page-title,
.soc-marketing-page .breadcrumbs,
.soc-marketing-page .breadcrumb,
.soc-marketing-page .stot-page-article__title,
.soc-marketing-page .stot-card > h1:first-child {
    display: none !important;
}

/* Defensive hide for the legacy "Welcome to SOTCoin your only E-Wallet /
 * My Wallet / Become an Affiliate" secondary row that lingered from the
 * earlier sotcoin theme. We don't know the exact slug it used, so we
 * cover the common candidates. If a real selector surfaces during
 * smoke-test, add it here. */
.soc-marketing-page .sotcoin-secondary-nav,
.soc-marketing-page .sotcoin-subnav,
.soc-marketing-page .sotcoin-welcome,
.soc-marketing-page .soc-legacy-subnav,
.soc-marketing-page #sotcoin-welcome-bar {
    display: none !important;
}

/* Body-level safety: some themes set body { max-width } or apply a tan
 * page background that bleeds through a transparent main. The header
 * already owns its own background, and each .soc-section paints its
 * own surface, so we keep <body> open. */
body.soc-marketing-page {
    background: #fff;
}
body.soc-marketing-page .site,
body.soc-marketing-page #page,
body.soc-marketing-page .site-content {
    max-width: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ===================================================================== */
/* Marketing footer                                                       */
/* ===================================================================== */
/*
 * Two-band footer specific to sotcoin.oftimor.com marketing pages. The
 * legacy stays/students footer that ships in stot-main is suppressed by
 * page-marketing.php; this block replaces it. Markup lives in
 * templates/footer-marketing.php and is rendered by
 * sotcoin_website_render_footer().
 *
 * Band 1: 5-column link grid (Products / Business / Families /
 *         Company / Help & Legal).
 * Band 2: Bottom bar — brand mark, copyright line, social icons.
 */

.soc-footer {
    background: var(--soc-bg-dark);
    color: #ffffff;
    font-family: var(--soc-font);
    padding-block: 64px 32px;
}

.soc-footer__container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    box-sizing: border-box;
}

.soc-footer__grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 32px;
    margin-bottom: 48px;
}

.soc-footer__col { min-width: 0; }

.soc-footer__heading {
    font-family: var(--soc-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--soc-ocean-soft);
    margin: 0 0 16px;
}

.soc-footer__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.soc-footer__link {
    display: inline-block;
    font-size: 14px;
    line-height: 2;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.15s ease;
}
.soc-footer__link:hover,
.soc-footer__link:focus-visible {
    color: #ffffff;
    text-decoration: none;
}

.soc-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 24px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.soc-footer__brand {
    font-family: var(--soc-font);
    font-size: 14px;
    font-weight: 600;
    color: var(--soc-ocean-soft);
    letter-spacing: 0.01em;
}

.soc-footer__copy {
    flex: 1 1 auto;
    text-align: center;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.soc-footer__social {
    display: flex;
    align-items: center;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.soc-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: #ffffff;
    background: transparent;
    border-radius: var(--soc-radius-pill);
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
}
.soc-footer__social-link:hover,
.soc-footer__social-link:focus-visible {
    color: var(--soc-ocean-soft);
    background: rgba(255, 255, 255, 0.06);
}

.soc-footer__icon {
    width: 18px;
    height: 18px;
    display: block;
}

@media (max-width: 960px) {
    .soc-footer__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 32px;
    }
}

@media (max-width: 620px) {
    .soc-footer {
        padding-block: 48px 24px;
    }
    .soc-footer__container {
        padding: 0 24px;
    }
    .soc-footer__grid {
        grid-template-columns: 1fr;
        gap: 32px;
        margin-bottom: 32px;
    }
    .soc-footer__bottom {
        justify-content: center;
        text-align: center;
    }
    .soc-footer__copy {
        flex-basis: 100%;
        order: 3;
    }
}