/* Rookoot premium look — "Borneo Jade & Copper".
   Loaded after each page's own styles, so it only changes colours, lettering
   and a few surfaces. Layout and behaviour stay as the page defines them.
   Lettering: Bricolage Grotesque (headlines) + Plus Jakarta Sans (text).
   Motif: faint Mount Kinabalu contour lines in the dark sections. */
:root {
  --jade-ink: #071C19;
  --jade: #0E2E29;
  --jade2: #14403A;
  --copper: #C97B4E;
  --copper-light: #E8A878;
  --copper-dark: #9A4F28;
  --copper-grad: linear-gradient(100deg, #C97B4E 0%, #E8A878 50%, #D08A5C 100%);
  --on-dark: rgba(255,255,255,0.74);
  --contour: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='600' viewBox='0 0 1200 600' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23E8A878' stroke-opacity='0.16' stroke-width='1.3'%3E%3Cpath d='M0 560 C220 420 380 470 560 400 S900 250 1200 300'/%3E%3Cpath d='M0 520 C230 380 400 420 575 350 S910 200 1200 250'/%3E%3Cpath d='M0 480 C240 340 420 370 590 300 S920 150 1200 200'/%3E%3Cpath d='M60 600 C260 300 440 320 605 250 S930 100 1200 150'/%3E%3Cpath d='M180 600 C330 280 470 270 620 200 S940 60 1200 100'/%3E%3Cpath d='M320 600 C420 300 520 230 640 160 S950 30 1200 55'/%3E%3C/g%3E%3C/svg%3E");

  /* The page's own tokens, re-pointed to the new palette. */
  --ink: #14201E;
  --paper: #F6F1EA;
  --accent: #9A4F28;
  --accent-dark: #7A3D1E;
  --accent-soft: #F6EAE0;
  --accent2: #17806B;
  --accent2-dark: #0F5E50;
  --gold: #C97B4E;
  --gold-light: #E8A878;
  --line: #E4DDD3;
  --muted: #5E6662;
  --deep: #071C19;
  --display: 'Bricolage Grotesque', system-ui, sans-serif;
  --body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --shadow: 0 10px 28px -12px rgba(7,28,25,0.22);
  --shadow-lg: 0 30px 60px -24px rgba(7,28,25,0.45);
}
body { background: var(--paper); color: var(--ink); }

/* Headlines: Bricolage, slightly tighter. */
.h2, .hero h1, .logo, .tier h3, .biz-pop-name, .panel h2, .category-title { font-family: var(--display); }
.hero h1 { letter-spacing: -1.6px; }
.h2 { letter-spacing: -0.9px; }

/* Glass header in jade. */
header#siteHeader, header.top { background: rgba(7,28,25,0.93); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid rgba(255,255,255,0.08); color: #fff; }
header#siteHeader.scrolled { border-color: rgba(255,255,255,0.1); box-shadow: 0 8px 24px -12px rgba(0,0,0,0.5); }
.logo { color: #fff; }
.logo em { color: var(--copper-light); }
footer .logo { color: #fff; }
header .btn-outline, header .btn-soft { border: 1.5px solid rgba(255,255,255,0.28); color: #fff; background: rgba(255,255,255,0.06); }
header .head-search input { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.18); color: #fff; }
header .head-search input::placeholder { color: rgba(255,255,255,0.6); }

/* Buttons: one copper button per view; everything else quiet. */
.btn-accent, .btn-white, .hero-card .order, .install-banner .install-btn { background: var(--copper-grad); color: #1A1208; box-shadow: 0 12px 28px -12px rgba(201,123,78,0.75), inset 0 1px 0 rgba(255,255,255,0.35); }
.btn-accent:hover, .btn-white:hover { background: var(--copper-grad); filter: brightness(1.05); }
.btn-outline { border-color: var(--copper-dark); color: var(--copper-dark); }
.btn-ghost { background: rgba(255,255,255,0.06); border: 1.5px solid rgba(255,255,255,0.26); color: #fff; }
.btn-soft { background: var(--accent-soft); color: var(--copper-dark); }

/* Dark jade hero with glows and the contour motif. */
.hero { background:
    radial-gradient(760px 420px at 92% 0%, rgba(232,168,120,0.22), transparent 62%),
    radial-gradient(640px 420px at 0% 0%, rgba(23,128,107,0.30), transparent 65%),
    linear-gradient(180deg, var(--jade) 0%, var(--jade-ink) 100%); }
.hero::after { background-image: var(--contour); background-size: 100% 100%; background-repeat: no-repeat; -webkit-mask-image: none; mask-image: none; opacity: 1; }
.hero h1 em { background: var(--copper-grad); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.hero p.sub { color: var(--on-dark); }
.pill { background: rgba(255,255,255,0.06); border-color: rgba(232,168,120,0.35); color: rgba(255,255,255,0.9); }
.hero .chip { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.18); }
.hero .chip:hover { background: rgba(255,255,255,0.12); }
.hero-search input { box-shadow: 0 24px 50px -20px rgba(0,0,0,0.6); }
.hero-search input:focus { outline: 3px solid var(--copper-light); }
.trust span::before { color: var(--copper-light); }
.hero-card { box-shadow: 0 40px 80px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.06); }
.float { box-shadow: 0 24px 50px -20px rgba(0,0,0,0.6); }

/* Light content. */
.eyebrow { color: var(--copper-dark); }
.category-count.active { color: var(--accent2-dark); background: #E1F1EC; }
.bubble-square.is-featured { border-color: var(--copper); }
.featured-badge { background: var(--copper); }
.sponsor-banner { background: linear-gradient(90deg, #FBF2EA, #F6E6D8); border-color: #EBCFB8; border-left-color: var(--copper); }
.sponsor-banner .sponsor-label { color: var(--copper-dark); }
.sponsor-banner .sponsor-text .tagline { color: #8A6A55; }

/* Earn & Jobs band on the homepage: a jade card with the motif. */
.earn-box { background: var(--contour) center/100% 100% no-repeat, radial-gradient(500px 300px at 100% 0%, rgba(232,168,120,0.2), transparent 60%), linear-gradient(160deg, var(--jade2), var(--jade-ink)); border: 1px solid rgba(232,168,120,0.18); color: #fff; box-shadow: var(--shadow-lg); }
.earn-box .eyebrow { color: var(--copper-light); }
.earn-box .lead { color: var(--on-dark); }
.earn-link { border-color: transparent; color: var(--ink); }

/* For business owners: dark jade section with glass cards. */
.biz { background: var(--contour) center/100% 100% no-repeat, radial-gradient(700px 400px at 100% 0%, rgba(232,168,120,0.16), transparent 60%), linear-gradient(180deg, var(--jade) 0%, var(--jade-ink) 100%); border: 0; color: #fff; }
.biz .eyebrow { color: var(--copper-light); }
.biz .lead { color: var(--on-dark); }
.tier { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); color: #fff; }
.tier .ico { background: rgba(232,168,120,0.14); }
.tier.pro { background: linear-gradient(160deg, rgba(232,168,120,0.16), rgba(232,168,120,0.04)); border: 1px solid rgba(232,168,120,0.45); }
.tier .for { color: var(--copper-light); }
.tier li { color: rgba(255,255,255,0.78); }
.tier li::before { color: var(--copper-light); }
.tier .btn-outline { border-color: rgba(255,255,255,0.3); color: #fff; }
.tier .badge { background: var(--copper-grad); color: #1A1208; }
.tier .badge.free { background: var(--accent2); color: #fff; }
.step .n { background: var(--copper-grad); color: #1A1208; }
.step span { color: rgba(255,255,255,0.7); }

.faq summary::after { color: var(--copper); }

/* Footer in jade. */
footer { background: var(--jade-ink); color: rgba(255,255,255,0.7); border-top: 0; }
footer .foot p, footer p { color: rgba(255,255,255,0.62); }
footer .foot .links a, footer.foot a { color: #fff; }
footer .foot .links a:hover { color: var(--copper-light); }
footer .copy { border-color: rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); }

/* Pop-ups dim to jade. */
.biz-pop, .sheet { background: rgba(7,28,25,0.6); }

/* Earn & Jobs pages. */
.tabs { background: #ECE5DB; }
.chip[aria-pressed="true"] { background: var(--jade); border-color: var(--jade); color: #fff; }
.tag.green { background: #E1F1EC; color: var(--accent2-dark); }
.tag.gold { background: #F6EAE0; color: var(--copper-dark); }
.stars { color: var(--copper); }
.field input:focus, .field select:focus, .field textarea:focus { outline-color: var(--copper); border-color: var(--copper); }
.checks input { accent-color: var(--jade); }
.checks label:has(input:checked) { border-color: var(--jade); background: #E7F0EC; }
.note { background: #FBF2EA; border-color: #EBCFB8; color: #6E3C1E; }

/* EN / BM switch in the header. */
.lang-sw { display: inline-flex; flex: none; padding: 3px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.05); margin-left: auto; }
.lang-sw button { border: 0; background: none; color: rgba(255,255,255,0.78); font: 800 13px var(--body); letter-spacing: .5px; min-width: 42px; min-height: 34px; padding: 6px 10px; border-radius: 999px; cursor: pointer; }
.lang-sw button[aria-pressed="true"] { background: #fff; color: var(--jade-ink); }
header .head .lang-sw + .btn, header .head .lang-sw + .head-links { margin-left: 8px; }
@media (max-width: 640px) {
  header .head { gap: 8px; }
  header .logo { font-size: 19px; gap: 8px; }
  header .logo img { width: 30px; height: 30px; }
  .lang-sw button { min-width: 38px; padding: 5px 8px; }
  header .head .btn-outline, header .head .btn-soft { padding: 6px 11px; font-size: 12px; line-height: 1.15; white-space: normal; text-align: center; max-width: 124px; min-height: 36px; }
}

/* The jade logo tile gets a thin copper edge so it stands out on jade. */
header .logo img, footer .logo img { box-shadow: 0 0 0 1.5px rgba(232,168,120,0.5), 0 6px 18px rgba(0,0,0,0.35); }

/* Homepage: two equal doors in the hero — businesses and Earn & Jobs. */
.doors { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0 22px; max-width: 600px; }
.door { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 20px; text-decoration: none; color: #fff; background: rgba(255,255,255,0.07); border: 1px solid rgba(232,168,120,0.32); transition: transform .15s, background .2s; }
.door:hover { transform: translateY(-2px); background: rgba(255,255,255,0.11); }
.door .ic { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 24px; background: var(--copper-grad); }
.door .tx { flex: 1; min-width: 0; }
.door b { display: block; font-family: var(--display); font-size: 19px; font-weight: 800; letter-spacing: -0.3px; line-height: 1.15; }
.door small { display: block; margin-top: 3px; color: var(--on-dark); font-size: 13px; line-height: 1.35; }
.door .go { color: var(--copper-light); font-weight: 800; }
@media (max-width: 640px) {
  .door { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  .door .go { display: none; }
}

/* Readability: hint text inside empty boxes is dark enough to read. */
input::placeholder, textarea::placeholder { color: #6B726F; opacity: 1; }

/* ===================================================================
   Daylight Jade — the current look. Same jade + copper, lettering and
   logo, on a light, fresh base (mint to cream). These rules come last,
   so they take over from the dark-jade surfaces above; the footer stays
   deep jade as an anchor.
   =================================================================== */
:root {
  --day-mint: #E3F1EB; --day-cream: #F8F4EC; --day-jade: #0F5E50; --day-jade-2: #17806B;
  --contour-day: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='600' viewBox='0 0 1200 600' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%2317806B' stroke-opacity='0.13' stroke-width='1.3'%3E%3Cpath d='M0 560 C220 420 380 470 560 400 S900 250 1200 300'/%3E%3Cpath d='M0 520 C230 380 400 420 575 350 S910 200 1200 250'/%3E%3Cpath d='M0 480 C240 340 420 370 590 300 S920 150 1200 200'/%3E%3Cpath d='M60 600 C260 300 440 320 605 250 S930 100 1200 150'/%3E%3Cpath d='M180 600 C330 280 470 270 620 200 S940 60 1200 100'/%3E%3C/g%3E%3C/svg%3E");
  --copper-text: linear-gradient(100deg, #9A4F28 0%, #B5643A 50%, #A85A30 100%);
}
body { background: var(--day-cream); }
header#siteHeader, header.top { background: rgba(248,244,236,0.94); border-bottom: 1px solid #E4DDD3; color: var(--ink); }
.logo { color: var(--ink); }
.logo em { color: var(--copper-dark); }
header .logo img { box-shadow: 0 4px 12px rgba(7,28,25,0.18); }
header .btn-outline, header .btn-soft { border: 1.5px solid var(--day-jade); color: var(--day-jade); background: #fff; }
header .head-search input { background: #fff; border-color: #E4DDD3; color: var(--ink); }
header .head-search input::placeholder { color: #6B726F; }
.lang-sw { border-color: #DCD5CB; background: #fff; }
.lang-sw button { color: #5E6662; }
.lang-sw button[aria-pressed="true"] { background: var(--day-jade); color: #fff; }

.hero { color: var(--ink); background:
    radial-gradient(760px 420px at 95% 0%, rgba(232,168,120,0.30), transparent 62%),
    radial-gradient(700px 460px at 0% 0%, rgba(23,128,107,0.18), transparent 65%),
    linear-gradient(180deg, var(--day-mint) 0%, var(--day-cream) 100%); }
.hero::after { background-image: var(--contour-day); }
.hero h1 { color: var(--ink); }
.hero h1 em { background: var(--copper-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero p.sub { color: #4A524F; }
.pill { background: #fff; border-color: rgba(15,94,80,0.25); color: var(--day-jade); }
.hero .chip { background: #fff; border-color: #DCD5CB; color: var(--ink); }
.hero .chip:hover { background: #fff; border-color: var(--day-jade); }
.trust span { color: #4A524F; }
.trust span::before { color: var(--day-jade-2); }
.hero-search input { border: 1px solid #DCD5CB; box-shadow: 0 16px 40px -22px rgba(7,28,25,0.35); }
.hero-card { box-shadow: 0 40px 80px -36px rgba(7,28,25,0.45); }

.btn-accent, .btn-white, .install-banner .install-btn { background: var(--day-jade); color: #fff; box-shadow: 0 12px 26px -12px rgba(15,94,80,0.7); }
.btn-accent:hover, .btn-white:hover { background: #0B4A3F; filter: none; }
.hero-card .order { background: var(--day-jade); color: #fff; }
.btn-ghost { background: #fff; border: 1.5px solid var(--day-jade); color: var(--day-jade); }

.door { color: var(--ink); background: #fff; border: 1px solid #E4DDD3; box-shadow: 0 14px 30px -20px rgba(7,28,25,0.35); }
.door:hover { background: #fff; border-color: var(--day-jade); }
.door small { color: #5E6662; }
.door .go { color: var(--day-jade); }

.earn-box { background: var(--contour-day) center/100% 100% no-repeat, radial-gradient(500px 300px at 100% 0%, rgba(232,168,120,0.25), transparent 60%), linear-gradient(160deg, #E3F1EB, #F1F7F3); border: 1px solid #CFE3DA; color: var(--ink); box-shadow: 0 20px 50px -30px rgba(7,28,25,0.35); }
.earn-box .eyebrow { color: var(--day-jade); }
.earn-box .lead { color: #4A524F; }

.biz { background: var(--contour-day) center/100% 100% no-repeat, linear-gradient(180deg, #EAF4EF 0%, #F8F4EC 100%); color: var(--ink); }
.biz .eyebrow { color: var(--day-jade); }
.biz .lead { color: #4A524F; }
.tier { background: #fff; border-color: #E4DDD3; color: var(--ink); }
.tier .for { color: var(--copper-dark); }
.tier li { color: #4A524F; }
.tier li::before { color: var(--day-jade-2); }
.tier .btn-outline { border-color: var(--day-jade); color: var(--day-jade); }
.tier.pro { background: linear-gradient(160deg, #FBF2EA, #fff); border: 1px solid #EBCFB8; }
.step span { color: #4A524F; }
.tier.pro { color: var(--ink); }
.tier.pro .ico { background: #F6EAE0; }
.tier.pro .for { color: var(--copper-dark); }
.tier.pro li { color: #4A524F; }
.tier.pro li::before { color: var(--day-jade-2); }

/* ---------------------------------------------------------------------------
   Tatumtech lettering: Fraunces serif headlines (italic copper accent line)
   and Inter for everything else.
   --------------------------------------------------------------------------- */
:root {
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.hero h1 { font-weight: 600; letter-spacing: -0.028em; line-height: 1.06; }
.hero h1 em { font-style: italic; font-weight: 500; letter-spacing: -0.02em; padding-right: .08em; }
.h2 { font-weight: 600; letter-spacing: -0.025em; }
.h2 em { font-style: italic; font-weight: 500; background: var(--copper-text); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: .06em; }
.logo { font-weight: 700; letter-spacing: -0.6px; }
.panel h2, .tier h3, .biz-pop-name, .category-title { font-weight: 600; letter-spacing: -0.3px; }
.door b { font-weight: 600; letter-spacing: -0.2px; }
.avatar { font-weight: 600; }