/* ---- sikhwama (Sikhwama — Stokvel & savings-group app 279) -----------------
   THE STRUCTURAL MOVE: the price is hoisted. Three tier cards land directly
   under a full-viewport three-slide stage, before a word has been said about
   what the thing does — and they float on ink instead of on light, which is
   what stops a tier-card page reading like every other tier-card page.
   Marigold is spent in exactly three places and nowhere else: the stage button,
   the middle card's edge and figure, and the numerals of the ordered list, so
   the recommended plan needs no badge and no ribbon on it. nth-child appears
   only inside the pricing row and in the platform's own zebra selector; nothing
   here touches the header, the nav, or the order of anything inside them. */
body.t-sikhwama.ws-body {
  --bg: #14161c; --fg: #e4e0d7; --heading: #f2efe8; --text: #b9b5ac; --muted: #7f7c76;
  --sk-band: #1b1e25; --sk-line: #2a2e37; --sk-gold: #d99a3c;
  --hero-a: rgba(6, 7, 9, .30); --hero-b: rgba(6, 7, 9, .66);
}

/* one ink ground the whole way down — the platform's alternating wash is off */
body.t-sikhwama.ws-body .ws-section, body.t-sikhwama.ws-body .ws-section:nth-child(even):not(.ws-cta):not(.ws-shoplink) { background: var(--bg); padding: 84px 0; }

/* the sheet's hardcoded light-mode greys re-pointed at tokens, so night moves them */
body.t-sikhwama .ws-sub, body.t-sikhwama .ws-feature p, body.t-sikhwama .ws-story-copy p, body.t-sikhwama .ws-plan li, body.t-sikhwama .ws-list li, body.t-sikhwama .ws-faq-item p { color: var(--text); }

/* every hairline on the page is the same one */
body.t-sikhwama .ws-nav, body.t-sikhwama .ws-footer, body.t-sikhwama .ws-faq-list, body.t-sikhwama .ws-faq-item { border-color: var(--sk-line); }
/* greyscale where the sheet would otherwise leak the brand colour in */
body.t-sikhwama .ws-nav-links a:hover, body.t-sikhwama .ws-nav-links a.on, body.t-sikhwama .ws-faq-item summary::after { color: var(--fg); }

/* the stage — a whole viewport of photograph, three slides under one fixed line */
body.t-sikhwama .ws-hero { min-height: 100vh; }

/* every other slab is a quiet band; the gold is not allowed to spread to them */
body.t-sikhwama.ws-body .btn.brand, body.t-sikhwama.ws-body .ws-cta .btn.brand { background: var(--sk-band); color: var(--heading); border-radius: 2px; box-shadow: none; font-weight: 600; }
/* MARIGOLD 1 of 3 — the stage button, the only solid gold slab on the page */
body.t-sikhwama.ws-body .ws-hero-cta.btn.brand { background: var(--sk-gold); color: #14161c; border-radius: 2px; padding: 15px 34px; font-size: 14px; font-weight: 650; box-shadow: none; }

/* THE HOIST — the price arrives second, pulled tight under the stage, three across */
body.t-sikhwama.ws-body .ws-section.ws-pricing { padding: 56px 0 92px; }
body.t-sikhwama .ws-pricing-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; max-width: none; margin: 0; }
body.t-sikhwama .ws-plan { display: flex; flex-direction: column; text-align: left; background: var(--sk-band); border: 1px solid var(--sk-line); border-radius: 3px; padding: 30px 26px 32px; }
body.t-sikhwama .ws-plan ul { margin: 0 0 auto; padding-bottom: 26px; }
body.t-sikhwama .ws-plan li::before { color: var(--muted); }
/* MARIGOLD 2 of 3 — the middle card, recommended without a badge on it */
body.t-sikhwama .ws-plan:nth-child(2) { border-color: var(--sk-gold); }
body.t-sikhwama .ws-plan:nth-child(2) .ws-plan-amt { color: var(--sk-gold); }

/* the checklist: two ruled columns, no glyphs, no picture beside it */
body.t-sikhwama .ws-list-bullet { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; }
body.t-sikhwama .ws-list-bullet li { border-top: 1px solid var(--sk-line); padding: 15px 2px; margin: 0; font-size: 15px; line-height: 1.6; }

/* MARIGOLD 3 of 3 — the numerals, standing in for the reference's progress bars */
body.t-sikhwama .ws-list-number { list-style: none; padding: 0; counter-reset: step; border-bottom: 1px solid var(--sk-line); }
body.t-sikhwama .ws-list-number li { counter-increment: step; display: grid; grid-template-columns: 62px 1fr; border-top: 1px solid var(--sk-line); padding: 21px 0; margin: 0; font-size: 15.5px; line-height: 1.75; }
body.t-sikhwama .ws-list-number li::before { content: counter(step, decimal-leading-zero); color: var(--sk-gold); font-size: 13px; font-weight: 700; letter-spacing: .08em; line-height: 2.1; }

/* six glyph cards, three across and twice down, ruled rather than boxed */
body.t-sikhwama .ws-features-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 30px; }
body.t-sikhwama .ws-feature { text-align: left; padding: 22px 0 0; border-top: 1px solid var(--sk-line); }

/* the page's one breath of photography: four squares, full bleed, no gutter */
body.t-sikhwama.ws-body .ws-section.ws-photogrid { padding: 0; }
body.t-sikhwama .ws-photogrid-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }

/* the quiet band between two heavy sections — lifted one shade, no photograph */
body.t-sikhwama.ws-body .ws-section.ws-cta { background: var(--sk-band); padding: 56px 0; }

/* the form closes the page, on the ink, boxed in the same band as the cards */
body.t-sikhwama .ws-field input, body.t-sikhwama .ws-field textarea, body.t-sikhwama .ws-field select { background: var(--sk-band); border: 1px solid var(--sk-line); border-radius: 2px; color: var(--heading); }

@media (max-width: 900px) {
  body.t-sikhwama .ws-pricing-grid { grid-template-columns: 1fr; }
  body.t-sikhwama .ws-features-grid, body.t-sikhwama .ws-photogrid-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.t-sikhwama .ws-list-bullet { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  body.t-sikhwama .ws-features-grid { grid-template-columns: 1fr; }
  body.t-sikhwama .ws-list-number li { grid-template-columns: 44px 1fr; }
}

/* night — the ink goes to the bottom of the well, the band and hairline follow it
   down, and the marigold lifts one stop so it still holds the three places */
html[data-theme="dark"] body.t-sikhwama.ws-body {
  --bg: #0a0b0e; --fg: #ded9d0; --heading: #f7f4ed; --text: #adaaa1; --muted: #6f6c67;
  --sk-band: #12141a; --sk-line: #1e222a; --sk-gold: #e6a94a;
  --hero-a: rgba(0, 0, 0, .34); --hero-b: rgba(0, 0, 0, .72);
}