/* Theme: layout after the Bevel reference (design.md); colors from the Qola dashboard (dev-dashboard-v2.qola.id),
   softened into pastels. Green is the brand accent; color otherwise stays inside data visuals and card washes. */
:root {
  /* Qola dashboard palette */
  --color-primary: #2c705b;       /* Qola brand green (logo, doodle): primary buttons, active states, focus ring */
  --color-primary-hover: #235a49;
  --color-brand-mid: #6dae8c;     /* brand palette: mid green, light sage */
  --color-brand-sage: #cfdfbc;
  --color-mint: #ebf8f4;          /* pastel brand surface */
  --color-paper-white: #ffffff;   /* page canvas, nav, footer */
  --color-charcoal: #243744;      /* Qola slate: dark blocks, devices, logos */
  --color-charcoal-hover: #2f4756;
  --color-ink: #111827;           /* headings and primary text */
  --color-cloud-card: #eef7f3;    /* pastel mint card surfaces, text on slate */
  --color-body-gray: #6b7280;     /* body copy, muted nav links, helper text */
  /* Data colors from the dashboard charts, pastel where they fill an area */
  --color-signal-gold: #fbbf24;
  --color-coral-signal: #f87171;  /* negative sentiment, warm accents */
  --color-recovery-green: #34d399; /* positive sentiment, peaks */
  --color-sleep-lilac: #c4b5fd;
  /* Pastel washes for cards and sections */
  /* Card washes: tints of the Qola palette only (#2C705B green, #6DAE8C mid green, #CFDFBC sage).
     The old names stay so every page that uses them follows. */
  --wash-mint: #d9f2e8;      /* green tint */
  --wash-peach: #e7f0dc;     /* sage tint */
  --wash-lavender: #e1eee8;  /* mid-green tint */
  --wash-sand: #eef3e3;      /* light sage */
  /* Mint morning sky with two soft cloud banks, fading into the white page below (no hard edge) */
  --hero-sky:
    radial-gradient(40% 30% at 12% 10%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 70%),
    radial-gradient(36% 26% at 88% 16%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 70%),
    linear-gradient(#d2eee2, #e1f4ec 45%, #f1faf6 75%, #ffffff);
  /* Neutrals from the dashboard: hairlines and mid-gray data fills */
  --color-hairline: #e5e7eb;
  --color-silver: #cbd5e1;

  /* Typography: SF Pro system stack, Inter as the web substitute */
  --font-ui: -apple-system, BlinkMacSystemFont, 'Inter', "Segoe UI", ui-sans-serif, system-ui, sans-serif;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-56: 56px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-96: 96px;
  --spacing-128: 128px;
  --spacing-160: 160px;

  /* Layout */
  --page-max-width: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --section: clamp(48px, 6vw, 72px);

  /* Radii */
  --radius-compact: 8px;
  --radius-card-sm: 16px;   /* images */
  --radius-card: 24px;      /* cards */
  --radius-card-lg: 32px;   /* hero field, large blocks */
  --radius-nav: 32px;
  --radius-pill: 128px;     /* buttons */
  --radius-inputs: 128px;

  /* Elevation: light lifts only */
  --shadow-image: 0 0 16px -8px rgba(0, 0, 0, 0.25);
  --shadow-float: 0 2px 16px 0 rgba(0, 0, 0, 0.15);
  --shadow-mockup: 0 32px 64px -24px rgba(17, 24, 39, 0.35), 0 0 16px -8px rgba(0, 0, 0, 0.25);
  --shadow-nav: 0 2px 16px 0 rgba(0, 0, 0, 0.08);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Section themes */
/* .light: Paper White canvas (default). .dark: Charcoal monochrome block, used sparingly. */
:root, .light {
  --bg: var(--color-paper-white);
  --fg: var(--color-ink);
  --fg-2: var(--color-body-gray);
  --fg-3: var(--color-body-gray);
  --line: var(--color-hairline);
  --card: var(--color-cloud-card);
  --accent: var(--color-body-gray);
  background: var(--bg); color: var(--fg);
}
.dark {
  --bg: var(--color-charcoal);
  --fg: var(--color-paper-white);
  --fg-2: var(--color-silver);
  --fg-3: #94a3b8;
  --line: rgba(255, 255, 255, 0.12);
  --card: rgba(255, 255, 255, 0.06);
  --accent: #94a3b8;
  background: var(--bg); color: var(--fg);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 112px; }
body {
  margin: 0;
  background: var(--color-paper-white);
  color: var(--color-ink);
  font: 400 16px/1.4 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--color-charcoal); color: var(--color-cloud-card); }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, h5, p, ul, ol, dl, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
b, strong { font-weight: inherit; color: var(--fg); }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 8px; }

.wrap { max-width: var(--page-max-width); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--section) 0; position: relative; overflow: hidden; }
.num { font-variant-numeric: tabular-nums; }
/* Two-tone headings: the accent phrase drops to Body Gray instead of a brand color */
.accent { color: var(--color-primary); } /* key words in headings: brand green, as in the closing panel */

.eyebrow {
  font: 600 16px/1.4 var(--font-ui);
  color: var(--fg-3);
}
/* Display: 600 weight, -0.03em, line-height 1 (80px hero, 64px statements) */
.display {
  font-family: var(--font-ui);
  font-weight: 600;
  line-height: 1; letter-spacing: -0.03em;
  text-wrap: balance;
}
.h2 {
  font: 600 clamp(32px, 4.4vw, 56px)/1.05 var(--font-ui);
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.lede { color: var(--fg-2); font-size: clamp(18px, 1.8vw, 22px); line-height: 1.35; max-width: 620px; }

.section-head { display: grid; gap: 16px; margin-bottom: var(--spacing-64); max-width: 800px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }

/* Badges */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 500; line-height: 1.5; letter-spacing: -0.003em;
  white-space: nowrap;
  background: var(--color-cloud-card); color: var(--color-ink);
}
.badge.sprout { background: var(--color-charcoal); color: var(--color-cloud-card); }
.dark .badge.sprout { background: var(--color-cloud-card); color: var(--color-charcoal); }
.badge.olive { background: var(--color-ink); color: var(--color-paper-white); }
.badge.line { background: transparent; box-shadow: inset 0 0 0 1px var(--fg-3); color: var(--fg-2); }
.badge.line-strong { background: transparent; box-shadow: inset 0 0 0 1px currentColor; color: var(--fg); }

/* Buttons: capsule controls, 128px radius */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 24px;
  font-size: 16px; font-weight: 500; line-height: 1.4;
  border-radius: var(--radius-pill); border: 1px solid transparent;
  white-space: nowrap;
  transition: background 150ms ease, border-color 150ms ease, color 150ms ease, box-shadow 250ms ease;
}
/* Hover: a soft glow under the button (shadow, not transform: Motion owns the press scale) */
.btn-sprout:hover, .btn-dark:hover { box-shadow: 0 8px 20px -10px rgba(54, 148, 119, 0.7); }
.btn-ghost:hover, .btn-light:hover, .btn-outline:hover { box-shadow: 0 8px 18px -12px rgba(17, 24, 39, 0.35); }
/* Primary: Charcoal pill with Cloud Card label (class name kept for existing markup) */
.btn-sprout, .btn-dark { background: var(--color-primary); color: var(--color-paper-white); }
.btn-sprout:hover, .btn-dark:hover { background: var(--color-primary-hover); }
/* Secondary: Cloud Card pill with Ink label */
.btn-ghost, .btn-light { background: var(--color-cloud-card); color: var(--color-ink); }
.btn-ghost:hover, .btn-light:hover { background: #d9efe5; }
.btn-ghost svg { width: 12px; height: 12px; }
.dark .btn-ghost { background: rgba(255, 255, 255, 0.1); color: var(--color-paper-white); }
.dark .btn-ghost:hover { background: rgba(255, 255, 255, 0.16); }
.dark .btn-sprout, .dark .btn-dark { background: var(--color-cloud-card); color: var(--color-charcoal); }
.dark .btn-sprout:hover, .dark .btn-dark:hover { background: var(--color-paper-white); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 16px; }
.btn-outline { border-color: var(--line); color: var(--fg); }
.btn-outline:hover { background: var(--card); border-color: var(--card); }
.btn-block { width: 100%; }

/* Soft sky wash: the only atmosphere in the system (replaces the old dark orb) */
.orb {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(196, 236, 219, 0.9), rgba(196, 236, 219, 0));
}
.dark .orb { background: radial-gradient(closest-side, rgba(54, 148, 119, 0.32), rgba(54, 148, 119, 0)); }

/* Logo: the PNG is white; render it Charcoal on light surfaces */
.logo { display: inline-flex; align-items: center; }
.logo img { display: block; height: 36px; width: auto; }
.dark .logo img, .pf-core img { filter: none; opacity: 1; }
.footer-brand .logo img { height: 32px; }

/* ---------- Floating capsule nav: page-wide, centered ---------- */
.nav {
  position: fixed; top: 16px; left: 0; right: 0; z-index: 50; padding: 0 var(--gutter);
  will-change: transform;
  /* Show: slow ease-out so the bar glides back in */
  transition: top 300ms var(--ease), transform 550ms cubic-bezier(0.16, 1, 0.3, 1), opacity 350ms ease;
}
.nav.scrolled { top: 12px; }
.nav.nav-hidden {
  transform: translateY(calc(-100% - 24px)); opacity: 0; pointer-events: none;
  /* Hide: quicker ease-in so it gets out of the way */
  transition: top 300ms var(--ease), transform 350ms cubic-bezier(0.4, 0, 1, 1), opacity 250ms ease 100ms;
}
.nav-bar {
  position: relative;
  /* As wide as the page content: logo left, links centered, actions right */
  width: min(1200px, 100%); margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 64px; padding: 0 10px 0 28px; /* 10px around the CTA on the right, top and bottom alike */
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-radius: var(--radius-nav);
  box-shadow: var(--shadow-nav);
  color: var(--color-ink);
}
.nav .logo img { height: 28px; }
/* The Q's tail makes the wordmark's box taller than its letters; nudge it so the letters sit on the nav's center line */
.nav .logo { transform: translateY(3px); }
.nav-links { display: flex; gap: 4px; font-size: 16px; font-weight: 500; }
.nav-links > a { padding: 8px 12px; border-radius: var(--radius-pill); color: var(--color-body-gray); transition: color 150ms ease, background 150ms ease; }
.nav-links > a:hover { color: var(--color-ink); background: rgba(17, 24, 39, 0.04); }
.nav-links > .nav-signin:hover { background: none; }
.nav-drop-btn:hover { background: rgba(17, 24, 39, 0.04); }
.nav-links > a.active, .nav-links > a[aria-current="page"] { color: var(--color-ink); }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.menu-btn { display: none; width: 40px; height: 40px; border-radius: var(--radius-pill); background: var(--color-cloud-card); color: var(--color-ink); align-items: center; justify-content: center; }
.menu-btn svg { width: 16px; height: 16px; }
/* Masuk sits apart from the page links, next to the CTA */
.nav-links > .nav-signin { margin-left: 8px; padding-left: 20px; border-radius: 0; box-shadow: inset 1px 0 0 var(--color-hairline); }

/* Produk dropdown: four modules, then a link to the full page */
.nav-drop { position: relative; }
.nav-drop-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--radius-pill);
  font: inherit; color: var(--color-body-gray); transition: color 150ms ease;
}
.nav-drop-btn:hover, .nav-drop.open .nav-drop-btn, .nav-drop-btn.active { color: var(--color-ink); }
.nav-drop-btn svg { width: 10px; height: 10px; transition: transform 200ms var(--ease); }
.nav-drop.open .nav-drop-btn svg { transform: rotate(180deg); }
.drop-panel { display: none; position: absolute; top: 100%; left: -12px; z-index: 2; padding-top: 14px; }
.nav-drop.open .drop-panel { display: block; }
.drop-menu {
  width: 380px; padding: 8px; border-radius: 20px;
  background: rgba(255, 255, 255, 0.98); box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.06), 0 24px 48px -20px rgba(17, 24, 39, 0.3);
}
.drop-item { display: flex; align-items: center; gap: 14px; padding: 10px; border-radius: 14px; transition: background 150ms ease; }
.drop-item:hover, .drop-item:focus-visible { background: #f5f7f6; }
.drop-icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; background: var(--color-mint); color: var(--color-primary); }
.drop-icon svg { width: 20px; height: 20px; }
.drop-item b { display: block; font-size: 15px; font-weight: 600; color: var(--color-ink); }
.drop-item small { display: block; margin-top: 2px; font-size: 13px; font-weight: 400; line-height: 1.4; color: var(--color-body-gray); }
.drop-all {
  display: flex; justify-content: space-between; margin-top: 6px; padding: 12px 10px 6px;
  border-top: 1px solid var(--color-hairline); font-size: 14px; font-weight: 500; color: var(--color-primary);
}
.drop-all:hover { color: var(--color-ink); }

/* ---------- Device mockups ---------- */
/* Laptop: .laptop > .laptop-lid > .laptop-screen > img, then .laptop-base.
   The screen is 16:10 and shows the top of the screenshot; hover or focus scrolls to the bottom. */
.laptop { position: relative; z-index: 1; width: 100%; margin: 0 auto; outline: none; }
.laptop-lid {
  position: relative; width: 86%; margin: 0 auto;
  padding: clamp(8px, 1.4vw, 14px) clamp(8px, 1.4vw, 14px) clamp(14px, 2vw, 20px);
  background: var(--color-charcoal);
  border-radius: clamp(12px, 2vw, 24px) clamp(12px, 2vw, 24px) 0 0;
  box-shadow: inset 0 0 0 2px #34495a, var(--shadow-mockup);
}
.laptop-cam { position: absolute; top: clamp(3px, 0.55vw, 5px); left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #34495a; }
.laptop-screen { aspect-ratio: 16 / 10; overflow: hidden; border-radius: clamp(4px, 0.6vw, 6px); background: var(--color-paper-white); }
.laptop-screen img, .phone-screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transition: object-position 6s ease-in-out; }
.laptop:hover .laptop-screen img, .laptop:focus-visible .laptop-screen img { object-position: 50% 100%; }
.laptop:focus-visible .laptop-lid { box-shadow: inset 0 0 0 2px #34495a, 0 0 0 3px var(--color-primary), var(--shadow-mockup); }
/* Aluminium deck, wider than the lid, with the thumb notch in the middle */
.laptop-base {
  position: relative; height: clamp(10px, 1.6vw, 18px);
  background: linear-gradient(#f6f8fa, #cbd5e1);
  border-radius: 2px 2px 50% 50% / 2px 2px 100% 100%;
  box-shadow: 0 24px 32px -16px rgba(17, 24, 39, 0.35);
}
.laptop-notch { position: absolute; top: 0; left: 50%; width: 14%; height: 45%; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: #b6bcc7; }

/* Phone: .phone > .phone-screen > img. In the hero it overlaps the laptop's right edge. */
.phone {
  position: absolute; z-index: 2; right: 2%; bottom: 6%;
  width: clamp(96px, 21%, 200px); aspect-ratio: 9 / 19;
  padding: clamp(4px, 0.7vw, 7px);
  background: var(--color-charcoal);
  border-radius: clamp(18px, 3.4vw, 36px);
  box-shadow: inset 0 0 0 2px #34495a, var(--shadow-mockup);
}
.phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: clamp(14px, 2.8vw, 30px); background: var(--color-paper-white); }
/* Dynamic island */
.phone-screen::before { content: ""; position: absolute; z-index: 1; top: 3%; left: 50%; width: 32%; height: 3.4%; transform: translateX(-50%); border-radius: 99px; background: var(--color-charcoal); }
/* The capture is wider than the phone: fit its width under the island instead of cropping the sides */
.phone-screen img { padding-top: 16%; object-fit: contain; }

.mock {
  background: var(--color-paper-white); color: var(--color-ink);
  border-radius: var(--radius-card); box-shadow: var(--shadow-image);
}
.bar { position: relative; flex: 1; min-width: 3px; height: 0; background: var(--color-hairline); border-radius: 4px 4px 0 0; transition: height 700ms var(--ease), background 150ms ease; }
.bar.peak { background: var(--color-recovery-green); }
.chart-axis { display: flex; justify-content: space-between; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--color-hairline); font-size: 12px; color: var(--color-body-gray); font-variant-numeric: tabular-nums; }


.section-tight { padding-top: 0; }
.text-link { display: inline-block; margin-top: 20px; font-size: 16px; font-weight: 500; color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-silver); text-underline-offset: 5px; transition: text-decoration-color 150ms ease; }
.text-link:hover { text-decoration-color: currentColor; }

/* ---------- Tall cards with product screens ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tile {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;
  min-height: 560px; padding: 40px 36px 0;
  border-radius: var(--radius-card-lg);
}
.tile h3 { font-size: clamp(28px, 2.8vw, 40px); font-weight: 600; line-height: 1; letter-spacing: -0.03em; }
.tile p { margin-top: 12px; max-width: 30ch; font-size: 18px; line-height: 1.35; color: var(--color-body-gray); }
/* Minimum gap above the visual; the visual's auto top margin still takes any extra height */
.tile > p { margin-bottom: 40px; }
/* Step 1 visual: keyword manager drawn in HTML, sitting where the screenshot would */
.tile-ui { padding: 20px 20px 0; background: var(--color-paper-white); }
.kw-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.kw-head b { font-size: 14px; font-weight: 600; }
.kw-btn { padding: 6px 10px; border-radius: 8px; background: var(--color-primary); color: var(--color-paper-white); font-size: 12px; font-weight: 600; white-space: nowrap; }
.kw-list { margin-top: 14px; }
.kw-list li { display: flex; justify-content: space-between; padding: 12px 0; border-top: 1px solid var(--color-hairline); font-size: 14px; }
.kw-up { color: var(--color-primary); font-weight: 600; font-size: 13px; }
.kw-flat { color: var(--color-body-gray); font-weight: 600; font-size: 13px; }
.tile-coral { background: linear-gradient(#f9fafb 30%, var(--wash-peach)); }
.tile-lilac { background: linear-gradient(#f9fafb 30%, var(--wash-lavender)); }
.tile-blue { background: linear-gradient(#f9fafb 30%, var(--wash-mint)); }
/* Screen rises from the bottom edge of the card */
.tile-shot { margin-top: auto; height: 290px; overflow: hidden; border-radius: var(--radius-card-sm) var(--radius-card-sm) 0 0; background: var(--color-paper-white); box-shadow: var(--shadow-image); }
.tile-shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 0 0; }
.phone-tile { position: relative; right: auto; bottom: auto; width: 190px; margin: auto auto -64px; }

/* ---------- Wide cards: copy on one side, product UI on the other ---------- */
.wides { display: grid; gap: 16px; }
.wide {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: center;
  min-height: 480px; padding: clamp(40px, 5vw, 72px);
  border-radius: var(--radius-card-lg); overflow: hidden;
}
.wide-flip .wide-copy { order: 2; }
.wide-copy p { margin-top: 16px; max-width: 34ch; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.4; color: var(--color-body-gray); }
.wide-blue { background: linear-gradient(140deg, #f2faf6, var(--wash-mint)); }
.wide-sand { background: linear-gradient(140deg, #f6faf7, var(--wash-sand)); }
.wide-lilac { background: linear-gradient(140deg, #f6faf7, var(--wash-lavender)); }
.wide-visual { display: grid; gap: 12px; }

.ui-card { padding: 24px; border-radius: 20px; background: var(--color-paper-white); box-shadow: var(--shadow-image); }
.ui-label { font-size: 13px; color: var(--color-body-gray); }
.ui-feed ul { margin-top: 8px; }
.ui-feed li { padding: 16px 0; }
.ui-feed li + li { border-top: 1px solid var(--color-hairline); }
.ui-feed-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; }
.ui-feed-top b { font-weight: 600; }
.ui-feed-top span:not(.chip) { color: var(--color-body-gray); font-size: 13px; }
.ui-feed-top .chip { margin-left: auto; font-size: 12px; }
.ui-feed li > p { margin-top: 6px; font-size: 16px; font-weight: 500; line-height: 1.4; }
.ui-feed dl { margin-top: 10px; display: flex; gap: 24px; flex-wrap: wrap; }
.ui-feed dt { font-size: 12px; color: var(--color-body-gray); }
.ui-feed dd { margin: 2px 0 0; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ui-steps { margin-top: 8px; }
.ui-steps li { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 12px 0; font-size: 15px; }
.ui-steps li + li { border-top: 1px solid var(--color-hairline); }
.ui-steps time { font-size: 13px; color: var(--color-body-gray); font-variant-numeric: tabular-nums; line-height: 1.6; }
.ui-bubble {
  justify-self: end; width: min(420px, 88%);
  padding: 16px 18px; border-radius: 20px 20px 6px 20px;
  background: var(--color-charcoal); color: var(--color-cloud-card);
  box-shadow: var(--shadow-float); font-size: 14px; line-height: 1.45;
}
.ui-bubble b { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--color-paper-white); }
.ui-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ui-facts > div { padding: 24px; border-radius: 20px; background: var(--color-paper-white); box-shadow: var(--shadow-image); }
.ui-facts dt { font-size: 14px; color: var(--color-body-gray); }
.ui-facts dd { margin: 12px 0 0; font-size: clamp(40px, 4.4vw, 64px); font-weight: 600; line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.ui-facts p { margin-top: 12px; font-size: 14px; color: var(--color-body-gray); }
.ui-facts .wide-span { grid-column: 1 / -1; }
/* Compact numbers scale with their own card (cqi), so "Rp 2,3 M" keeps clear space at every width */
.ui-facts.compact > div { container-type: inline-size; min-width: 0; }
.ui-facts.compact dd { font-size: clamp(26px, 17cqi, 44px); white-space: nowrap; }
.ui-facts.compact .wide-span dd { font-size: clamp(26px, 7.2cqi, 44px); } /* full-width card: same size as the half cards beside it */
.ui-doc h3 { margin-top: 8px; font-size: 20px; font-weight: 600; line-height: 1.3; letter-spacing: -0.015em; }
.ui-doc ul { margin: 16px 0 20px; display: grid; gap: 8px; }
.ui-doc li { position: relative; padding-left: 16px; font-size: 15px; }
.ui-doc li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--color-silver); }
.ui-sent { display: flex; gap: 2px; height: 8px; border-radius: 4px; overflow: hidden; }
.ui-sent span:nth-child(1) { background: var(--color-recovery-green); }
.ui-sent span:nth-child(2) { background: var(--color-silver); }
.ui-sent span:nth-child(3) { background: var(--color-coral-signal); }
.ui-sentleg { margin-top: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ui-sentleg dt { font-size: 13px; color: var(--color-body-gray); }
.ui-sentleg dd { margin: 2px 0 0; font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Use cases: feature cards with a matching screen ---------- */
.more { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 64px; align-items: center; }
.more-list .lede { margin-top: 12px; }
/* Feature cards (after bevel.health): a scrolling list that fades out at the top and bottom edges.
   Inactive cards sit slightly smaller and muted; the active one is full size with a progress ring. */
.uc-list {
  position: relative; margin-top: 24px; height: 460px; padding: 40px 0;
  display: flex; flex-direction: column; gap: 8px;
  overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain;
  -webkit-mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(transparent, #000 12%, #000 88%, transparent);
}
.uc-list::-webkit-scrollbar { display: none; }
.feat {
  flex: none; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 22px 24px; border-radius: 24px; background: var(--color-cloud-card); text-align: left;
  transform: scale(0.925); transition: transform 250ms var(--ease);
}
.feat.is-active { transform: none; }
.feat-copy b { display: block; font-size: 19px; font-weight: 600; letter-spacing: -0.015em; color: #8a8f98; transition: color 300ms ease; }
.feat-copy span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.45; color: #a7adb7; transition: color 300ms ease; }
.feat.is-active .feat-copy b { color: var(--color-ink); }
.feat.is-active .feat-copy span { color: var(--color-body-gray); }
/* Control: arrow in a ring when inactive; on the active card the ring fills while it plays */
.feat-ctl { position: relative; flex: none; width: 40px; height: 40px; display: grid; place-items: center; color: #a7adb7; transition: color 200ms ease; }
.feat:hover .feat-ctl, .feat:focus-visible .feat-ctl { color: var(--color-ink); }
.feat-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 1.5; }
.feat-ring circle { stroke: currentColor; }
.feat-ring .feat-prog { stroke: var(--color-ink); stroke-dasharray: 100; stroke-dashoffset: 100; }
.feat-ico { grid-area: 1 / 1; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.feat-play { fill: currentColor; stroke: none; }
.feat-pause, .feat-play { opacity: 0; transition: opacity 200ms ease; }
.feat.is-active .feat-ctl { color: #cbd5e1; }
.feat.is-active .feat-arrow { opacity: 0; }
.feat.is-active .feat-pause, .is-paused .feat.is-active .feat-play { color: var(--color-ink); }
.feat.is-active:hover .feat-pause, .feat.is-active:focus-visible .feat-pause { opacity: 1; }
.is-paused .feat.is-active .feat-play { opacity: 1; }
.is-paused .feat.is-active:hover .feat-pause, .is-paused .feat.is-active:focus-visible .feat-pause { opacity: 0; }
/* The timer: runs only while the list is on screen (.is-playing) and not paused */
.feat.is-active .feat-prog { animation: feat-progress 6s linear both paused; }
.is-playing:not(.is-paused) .feat.is-active .feat-prog { animation-play-state: running; }
@keyframes feat-progress { to { stroke-dashoffset: 0; } }

/* Realistic laptop (.laptop-air), modelled on a thin midnight-aluminium notebook seen straight on:
   black glass bezel with a camera notch, a menu bar beside the notch, a soft glare on the glass,
   and a wider dark base with a lighter front lip and the thumb scoop. All sizes in cqw of the figure. */
.laptop-air { container-type: inline-size; }
.laptop-air .laptop-lid {
  width: 80%; padding: calc(1.1cqw + 2cqw) 1.1cqw 1.5cqw; /* top = bezel + menu bar */
  border-radius: 2.4cqw 2.4cqw 0.5cqw 0.5cqw; background: #0b0c0f;
  box-shadow: 0 0 0 0.22cqw #2c323c, 0 0 0 0.3cqw #59616e, 0 3cqw 5cqw -2cqw rgba(17, 24, 39, 0.45);
}
/* Menu bar across the top of the display; the notch sits in its middle */
.laptop-air .laptop-lid::before {
  content: "Qola     Berkas     Lihat     Jendela"; position: absolute; top: 1.1cqw; left: 1.1cqw; right: 1.1cqw; height: 2cqw;
  display: flex; align-items: center; padding: 0 1.6cqw; border-radius: 1.2cqw 1.2cqw 0 0;
  background: #eef1f4; box-shadow: inset 0 -1px 0 rgba(17, 24, 39, 0.08);
  font-size: 0.95cqw; font-weight: 600; white-space: pre; color: #1f2025;
}
.laptop-air .laptop-lid::after {
  content: "Jum 2 Okt  09.41"; position: absolute; top: 1.1cqw; right: 2.7cqw; height: 2cqw;
  display: flex; align-items: center; font-size: 0.95cqw; font-weight: 500; white-space: pre; color: #1f2025;
}
.laptop-air .laptop-cam {
  top: 1.1cqw; z-index: 3; width: 10cqw; height: 2cqw; margin-left: -5cqw;
  border-radius: 0 0 0.9cqw 0.9cqw; background: radial-gradient(circle at 50% 45%, #1d2a3a 0 0.22cqw, #0b0c0f 0.3cqw);
}
.laptop-air .laptop-screen { border-radius: 0; }
/* Glass glare: one faint diagonal sheen over the display */
.laptop-air .laptop-screen::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0) 52%, rgba(255, 255, 255, 0.14) 52%, rgba(255, 255, 255, 0) 78%);
}
.laptop-air .laptop-base {
  height: 1.6cqw; border-radius: 0.3cqw 0.3cqw 1.4cqw 1.4cqw / 0.3cqw 0.3cqw 1.2cqw 1.2cqw;
  background: linear-gradient(#6b7380, #3b414c 22%, #262b33 62%, #14171c);
  box-shadow: inset 0 0.12cqw 0 rgba(255, 255, 255, 0.28), 0 1.2cqw 2.4cqw -1cqw rgba(17, 24, 39, 0.5);
}
.laptop-air .laptop-notch { width: 15%; height: 48%; border-radius: 0 0 0.9cqw 0.9cqw; background: linear-gradient(#1a1e24, #2c313a); }

/* Use-case laptop: .laptop.uc-device > ... > .laptop-screen > .scr (one per use case, .on is shown).
   Sizes inside the screen are in em off a container-width font size, so the whole UI scales with the laptop. */
.uc-device { margin: 0; }
/* Soft contact shadow on the surface under the laptop */
.uc-device::after {
  content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; bottom: -36px; height: 56px;
  background: radial-gradient(closest-side, rgba(17, 24, 39, 0.38), rgba(17, 24, 39, 0));
  filter: blur(10px);
}
.uc-device .laptop-screen { position: relative; container-type: inline-size; background: #f9fafb; }
/* Screen UI follows the Qola dashboard: top tab bar, left project rail, green accent */
.scr {
  --q: var(--color-primary);
  position: absolute; inset: 0;
  display: grid; grid-template-columns: 2.4em minmax(0, 1fr); grid-template-rows: 2.6em minmax(0, 1fr);
  font-size: 2cqw; line-height: 1.35; color: var(--color-ink);
  opacity: 0; visibility: hidden; transform: scale(1.02);
  transition: opacity 400ms var(--ease), transform 500ms var(--ease), visibility 0s 400ms;
}
.scr.on { opacity: 1; visibility: visible; transform: none; transition: opacity 400ms var(--ease), transform 500ms var(--ease); }
.scr-side { grid-row: 2; display: flex; flex-direction: column; align-items: center; gap: 0.6em; padding-top: 0.8em; background: var(--color-paper-white); border-right: 1px solid var(--color-hairline); }
.scr-side b { width: 1.2em; height: 1.2em; margin-bottom: 0.3em; border-radius: 50%; background: var(--q); }
.scr-side i { width: 1.2em; height: 1.2em; border-radius: 0.35em; background: #f1f5f9; }
.scr-side i.on { background: var(--q); }
.scr-bar { grid-column: 1 / -1; display: flex; align-items: center; gap: 1.2em; padding: 0 1em 0 0.7em; background: var(--color-paper-white); border-bottom: 1px solid var(--color-hairline); }
.scr-logo { font-size: 1em; font-weight: 800; letter-spacing: 0.04em; color: var(--q); }
.scr-bar nav { display: flex; gap: 1.1em; margin: 0 auto; font-size: 0.62em; color: var(--color-body-gray); white-space: nowrap; }
.scr-bar nav span { position: relative; }
.scr-bar nav .on { color: var(--q); font-weight: 600; }
.scr-bar nav .on::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1.55em; height: 2px; background: var(--q); }
.scr-me { width: 1.3em; height: 1.3em; border-radius: 50%; background: #e5e7eb; }
.scr-body { position: relative; display: grid; gap: 0.7em; align-content: start; min-height: 0; padding: 0.9em 1.2em; overflow: hidden; }
/* Panels rise in one after another when their screen comes on */
.scr-body > * { opacity: 0; transform: translateY(0.8em); transition: opacity 500ms var(--ease), transform 500ms var(--ease); }
.scr.on .scr-body > * { opacity: 1; transform: none; }
.scr.on .scr-body > :nth-child(2) { transition-delay: 70ms; }
.scr.on .scr-body > :nth-child(3) { transition-delay: 140ms; }

.scr-head b { display: block; font-size: 1.25em; font-weight: 700; letter-spacing: -0.02em; }
.scr-head small { display: block; font-size: 0.68em; color: var(--color-body-gray); }
.scr-card { padding: 0.8em 0.9em; border-radius: 0.8em; background: var(--color-paper-white); box-shadow: 0 0 0 1px var(--color-hairline); }
.scr-card > b { display: block; font-size: 0.9em; font-weight: 600; }
.scr-row { display: flex; align-items: center; justify-content: space-between; gap: 1em; }
.scr-row b { font-size: 0.9em; font-weight: 600; }
.scr-end { justify-content: flex-end; margin-top: 0.8em; }
.scr-btn { padding: 0.45em 0.9em; border-radius: 0.5em; background: var(--q); color: var(--color-paper-white); font-size: 0.65em; font-weight: 600; white-space: nowrap; }
.scr-seg { display: flex; gap: 0.2em; padding: 0.2em; border-radius: 0.5em; background: #f3f4f6; font-size: 0.6em; color: var(--color-body-gray); }
.scr-seg span { padding: 0.25em 0.8em; border-radius: 0.4em; }
.scr-seg .on { background: var(--q); color: var(--color-paper-white); }
.chip { display: inline-block; padding: 0.25em 0.8em; border-radius: 99px; font-size: 0.62em; font-weight: 600; white-space: nowrap; }
.chip.pos { background: #e6f6ee; color: #1f9d55; }
.chip.neu { background: #eef0f4; color: #5b5f66; }
.chip.neg { background: #fde8e8; color: #dc2626; }

/* Tables: keywords, topics, regions */
.scr-table { width: 100%; min-width: 0; margin-top: 0.6em; border-collapse: collapse; font-size: 0.72em; }
.scr-table th { padding: 0.5em 0.6em; background: #f9fafb; text-align: left; font-size: 0.85em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-body-gray); }
.scr-table td { font-size: inherit; padding: 0.65em 0.6em; border-top: 1px solid var(--color-hairline); vertical-align: middle; }
.scr-table td:nth-child(2) { font-variant-numeric: tabular-nums; }
.scr-table .up { color: var(--q); font-weight: 600; }
.scr-table .down { color: #dc2626; font-weight: 600; }
.scr-topics td { padding-top: 0.55em; padding-bottom: 0.55em; }
.scr-topics td:first-child { width: 22%; }
.scr-topics td:nth-child(2) { color: var(--color-body-gray); }
.scr-topics td:nth-child(3) { width: 10%; text-align: center; font-weight: 600; }
.scr-topics td:last-child { width: 14%; text-align: center; }
.scr-topics td .chip { font-size: 0.86em; }
.scr-line { display: block; width: 100%; height: 6.5em; margin-top: 0.6em; }

/* Geographic: anomaly callout */
.scr-anomali { box-shadow: inset 0.25em 0 0 var(--q), 0 0 0 1px var(--color-hairline); }
.scr-anomali small { display: block; font-size: 0.62em; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--q); }
.scr-anomali b { display: block; margin-top: 0.2em; font-size: 0.9em; }
.scr-anomali p { margin-top: 0.15em; font-size: 0.72em; color: var(--color-body-gray); }

/* Content recommendations: two cards */
.scr-recs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.8em; }
.scr-rec { display: grid; gap: 0.55em; align-content: start; }
.scr-icons { display: flex; gap: 0.35em; }
.scr-icons i { width: 0.9em; height: 0.9em; border-radius: 50%; background: #cbd5e1; }
.scr-quote { padding: 0.55em 0.7em; border-left: 0.2em solid var(--q); border-radius: 0 0.4em 0.4em 0; background: #f5f8f7; font-size: 0.68em; color: var(--color-body-gray); }
.scr-quote em { font-style: normal; font-weight: 600; color: var(--q); }
.scr-rec ul { display: grid; gap: 0.3em; padding-left: 1.2em; list-style: disc; font-size: 0.66em; color: var(--color-body-gray); }
.scr-tags { display: flex; flex-wrap: wrap; gap: 0.4em; }
.scr-tags span { padding: 0.25em 0.8em; border-radius: 99px; background: var(--color-mint); color: var(--q); font-size: 0.6em; font-weight: 600; }
.scr-ghost { padding: 0.45em; border-radius: 0.5em; box-shadow: inset 0 0 0 1px var(--color-hairline); text-align: center; font-size: 0.66em; color: var(--color-body-gray); }

/* Report builder: format tabs and component toggles */
.scr-tabs { display: flex; gap: 1.4em; padding-bottom: 0.5em; border-bottom: 1px solid var(--color-hairline); font-size: 0.68em; color: var(--color-body-gray); }
.scr-tabs .on { color: var(--q); font-weight: 600; }
.scr-label { display: block; margin: 0.9em 0 0.5em; font-size: 0.66em; font-weight: 600; color: var(--color-body-gray); }
.scr-tgs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5em; }
.scr-tg { display: flex; align-items: center; justify-content: space-between; gap: 0.5em; padding: 0.5em 0.6em; border-radius: 0.5em; box-shadow: inset 0 0 0 1px var(--color-hairline); }
.scr-tg span { min-width: 0; }
.scr-tg b { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.62em; font-weight: 600; }
.scr-tg small { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 0.52em; color: var(--color-body-gray); }
.scr-tg i { position: relative; flex: none; width: 1.8em; height: 1em; border-radius: 99px; background: var(--q); }
.scr-tg i::after { content: ""; position: absolute; top: 0.15em; right: 0.15em; width: 0.7em; height: 0.7em; border-radius: 50%; background: var(--color-paper-white); }

/* AI Assistant: one question, one answer, input at the bottom */
.scr-chat { grid-template-rows: auto auto 1fr; padding-bottom: 4em; }
.scr-ask { justify-self: end; max-width: 70%; padding: 0.6em 0.9em; border-radius: 0.9em 0.9em 0.25em 0.9em; background: var(--q); color: var(--color-paper-white); font-size: 0.78em; }
.scr-answer { display: grid; grid-template-columns: 1.8em minmax(0, 1fr); gap: 0.6em; max-width: 88%; }
.scr-ai { display: grid; place-items: center; width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--color-mint); color: var(--q); font-size: 0.8em; font-weight: 700; }
.scr-answer > div { padding: 0.7em 0.9em; border-radius: 0.25em 0.9em 0.9em 0.9em; background: var(--color-paper-white); box-shadow: 0 0 0 1px var(--color-hairline); font-size: 0.74em; }
.scr-answer ol { display: grid; gap: 0.35em; margin-top: 0.4em; padding-left: 1.2em; list-style: decimal; color: var(--color-body-gray); }
.scr-answer ol b { color: var(--color-ink); font-weight: 600; }
.scr-suggest { position: absolute; left: 1.2em; right: 1.2em; bottom: 4em; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6em; }
.scr-suggest span { padding: 0.7em 0.9em; border-radius: 0.6em; background: var(--color-paper-white); box-shadow: 0 0 0 1px var(--color-hairline); font-size: 0.68em; color: var(--color-body-gray); }
.scr-input {
  position: absolute; left: 1.2em; right: 1.2em; bottom: 1em;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.6em 0.6em 0.6em 1em; border-radius: 99px;
  background: var(--color-paper-white); box-shadow: 0 0 0 1px var(--color-hairline), 0 0.3em 1em rgba(17, 24, 39, 0.06);
  font-size: 0.72em; color: var(--color-body-gray);
}
.scr-input i { width: 1.8em; height: 1.8em; border-radius: 50%; background: var(--q); }

.src h3 { font-size: 18px; font-weight: 600; line-height: 1.5; letter-spacing: -0.021em; }
.src p { margin-top: 4px; font-size: 16px; color: var(--fg-2); }
.source-top { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 16px; }
.cov-title { font-size: 28px; font-weight: 600; line-height: 1.29; letter-spacing: -0.025em; text-wrap: balance; }
.marker {
  display: inline-flex; align-items: center; justify-content: center;
  height: 24px; min-width: 32px; padding: 0 8px; border-radius: var(--radius-pill);
  background: var(--color-cloud-card); color: var(--color-ink);
  font-size: 12px; font-weight: 500; font-variant-numeric: tabular-nums;
  transition: background 150ms ease, color 150ms ease;
}
.sim-sec { border-top: 1px solid var(--line); }

@media (max-width: 960px) {
  .tiles { grid-template-columns: 1fr; }
  .tile { min-height: 520px; }
  .wide, .more { grid-template-columns: 1fr; gap: 40px; }
  .uc-list { height: 420px; }
  .wide-flip .wide-copy { order: 0; }
  .wide { padding-bottom: 40px; }
}
@media (max-width: 640px) {
  .hero .btn { width: 100%; }
  .tile { padding: 32px 24px 0; }
  .wide { padding: 32px 20px; border-radius: var(--radius-card); }
  .ui-card, .ui-facts > div { padding: 20px; }
}

/* ---------- Page hero (produk/index.html, berita/index.html) ---------- */
.pp-hero { background: var(--hero-sky); padding-top: 176px; }
.pp-hero .orb-a { width: 520px; height: 520px; right: -200px; top: 40px; }
.pp-head { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; }
.crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 14px; color: var(--fg-3); }
.crumbs a:hover { color: var(--fg); }
.crumbs [aria-current] { color: var(--fg-2); }
.pp-head h1 { margin-top: 24px; font-size: clamp(40px, 5.6vw, 72px); max-width: 16ch; }
.pp-head .lede { margin-top: 24px; max-width: 620px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.pp-head .hero-cta { margin-top: 32px; }
/* Product page: each product opens with its original showcase row (copy + interface), then its capability cards */
.pp-row { position: relative; z-index: 1; }
.sc-copy .pp-h1 { margin-top: 16px; font: 600 clamp(32px, 4vw, 48px)/1.05 var(--font-ui); letter-spacing: -0.03em; text-wrap: balance; }
.sc-copy .hero-cta { justify-content: flex-start; margin-top: 32px; }
.pp-feats { position: relative; z-index: 1; margin-top: var(--spacing-128); }
@media (max-width: 640px) {
  .pp-hero { padding-top: 136px; }
  .pp-feats { margin-top: var(--spacing-80); }
}

/* ---------- Capability cards (product pages) ---------- */
/* Fixed-width columns, centred, so one or two cards don't stretch across the page */
.caps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 268px)); justify-content: center; gap: 16px; }
.cap {
  display: flex; flex-direction: column;
  background: var(--card); border-radius: var(--radius-card);
  padding: 32px;
  transition: background 150ms ease;
}
.cap:hover { background: #d9efe5; }
.cap-name { margin-bottom: 8px; font-size: 13px; font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; color: var(--accent); }
.cap h3 { font-size: 20px; font-weight: 600; line-height: 1.43; letter-spacing: -0.015em; margin-bottom: 8px; text-wrap: balance; }
.cap p:last-child { font-size: 16px; color: var(--fg-2); }
@media (max-width: 640px) {
  .caps { grid-template-columns: 1fr; }
  .cap { padding: 24px; }
}

/* ---------- Product showcase ---------- */
/* Feature copy next to the product interface; the text comes first in the DOM so it reads first on mobile */
/* ---------- Produk: stacked sticky cards (measured on ventriloc.ca, 1440x900) ----------
   Card: a full-height panel (landing-page wash colours) inset from the left and running off the right edge, only the top-left
   corner rounded, no shadow. Text on the left, the product visual on the right, flush with the screen edge.
   Scroll: each card sticks at the top; the next one rises straight up over it. js/animations.js tips the covered
   card up to 2deg around its top-right corner, nudges it (20px, 70px) and fades it once it is hidden.
   A card taller than the screen sticks only once its bottom is in view (js/site.js). Below 900px: a plain list. */
.pstack-sec { padding: 0; overflow: visible; } /* sticky needs no clipping ancestor */
.pstack { padding-left: clamp(16px, 4.2vw, 60px); }
.pcard {
  position: sticky; top: 0; min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(32px, 5vw, 96px); align-items: center;
  padding: clamp(96px, 12vh, 120px) 0 56px clamp(28px, 5vw, 80px);
  border-radius: 8px 0 0 0; background: #efefef; transform-origin: 100% 0; will-change: transform, opacity;
}
/* Card colours: the same washes as the landing page's feature panels (.wide-blue / -lilac / -sand, .tile-coral),
   one per product, so each card reads apart from the one it slides over */
#monitoring.pcard { background: linear-gradient(140deg, #f2faf6, var(--wash-mint)); }
#analisis-sentimen.pcard { background: linear-gradient(140deg, #f6faf7, var(--wash-lavender)); }
#peringatan-dini.pcard { background: linear-gradient(140deg, #f6faf7, var(--wash-peach)); }
#brief-laporan.pcard { background: linear-gradient(140deg, #f6faf7, var(--wash-sand)); }
.pcard .sc-copy { max-width: 520px; align-self: center; }
.pcard .sc-copy > p.pcard-title { display: flex; align-items: center; gap: 14px; margin-top: 0; font-size: clamp(22px, 1.9vw, 26px); font-weight: 500; letter-spacing: -0.02em; color: var(--color-ink); }
.pcard-title i { flex: none; width: 11px; height: 11px; background: var(--color-primary); }
.pcard-sub { margin: 10px 0 0 25px; font-size: 15px; font-weight: 500; line-height: 1.4; color: var(--color-primary); text-wrap: balance; }
.pcard .sc-copy > p:not(.pcard-title) { margin-left: 25px; font-size: 17px; line-height: 1.55; }

/* App screens inside the cards: copies of real dashboard components (Penyebutan, Analisis, Wawasan, Laporan),
   example data only. White panel, flush with the screen's right edge like the reference. */
.pcard-ui { margin: 0; align-self: center; }
.qui { padding: 28px 28px 32px; border-radius: 14px 0 0 14px; background: rgba(255, 255, 255, 0.72); box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.06); font-size: 13px; color: #111827; }
.qui-head b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.qui-head small { display: block; margin-top: 2px; font-size: 12px; color: var(--color-body-gray); }
.qui-head em { font-style: normal; color: var(--color-primary); }
.qui .pill { height: 22px; padding: 0 10px; font-size: 11px; font-style: normal; }
/* Penyebutan: mention cards + the Sumber Data filter */
.qui-split { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 14px; margin-top: 18px; align-items: start; }
.qui-feed { display: grid; gap: 12px; }
.qm { padding: 14px 16px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #e5e7eb, 0 1px 2px rgba(0, 0, 0, 0.05); }
.qm-src { display: flex; align-items: center; gap: 10px; }
.qm-src i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c); color: #fff; font-style: normal; font-weight: 700; flex: none; }
.qm-src b { display: block; font-size: 13px; } .qm-src small { display: block; font-size: 11px; color: var(--color-body-gray); }
.qm-head { display: block; margin-top: 10px; font-size: 14px; line-height: 1.35; }
.qm-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: #f3f4f6; font-weight: 700; }
.qm-stats small { display: block; font-size: 10px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-body-gray); }
.qm-tags { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.qm-kw { padding: 0 9px; line-height: 20px; border-radius: 99px; box-shadow: inset 0 0 0 1px #e5e7eb; font-style: normal; font-size: 11px; color: #4b5563; }
.qm-tags span { margin-left: auto; padding: 3px 9px; border-radius: 6px; box-shadow: inset 0 0 0 1px #e5e7eb; font-size: 11px; font-weight: 600; }
.qui-filter { padding: 14px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #e5e7eb; }
.qui-filter ul { display: grid; gap: 7px; margin-top: 10px; }
.qui-filter li { display: flex; justify-content: space-between; font-size: 12px; }
.qui-filter em { min-width: 34px; padding: 0 6px; border-radius: 6px; background: #f3f4f6; font-style: normal; font-size: 11px; text-align: right; }
/* Analisis: overview cards */
.qui-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.qk { padding: 16px 18px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #e5e7eb, 0 1px 2px rgba(0, 0, 0, 0.05); }
.qk.on { box-shadow: 0 0 0 1.5px var(--color-primary); }
.qk small { display: block; font-size: 11px; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; }
.qk > b { display: block; margin-top: 18px; font-size: 28px; font-weight: 700; letter-spacing: -0.02em; }
.qk-rows { display: grid; gap: 8px; margin-top: 14px; }
.qk-rows li { display: flex; align-items: center; justify-content: space-between; }
.qk-rows b { font-size: 20px; font-weight: 700; }
/* Wawasan: anomaly and strategy cards */
.qi-card { margin-top: 16px; padding: 18px 20px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #e5e7eb; }
.qi-card h4 { font-size: 15px; font-weight: 700; }
.qi-row { position: relative; margin-top: 12px; padding-left: 18px; color: #6b7280; line-height: 1.45; }
.qi-row::before { content: "→"; position: absolute; left: 0; color: var(--color-primary); font-weight: 700; }
.qi-row b { display: block; color: #111827; }
.qi-dark { background: #263445; box-shadow: none; color: #fff; }
.qi-dark .qi-row { color: rgba(255, 255, 255, 0.72); } .qi-dark .qi-row b { color: #fff; } .qi-dark .qi-row::before { color: #34d399; }
/* Laporan: report configuration */
.qr-tabs { display: flex; gap: 22px; margin-top: 18px; border-bottom: 1px solid #e5e7eb; color: var(--color-body-gray); font-weight: 500; }
.qr-tabs span { padding-bottom: 10px; }
.qr-tabs .on { color: var(--color-primary); box-shadow: inset 0 -2px 0 var(--color-primary); }
.qr-label { margin-top: 16px; font-weight: 600; color: #374151; }
.qr-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.qr-items li { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #e5e7eb; }
.qr-items i { width: 30px; height: 30px; border-radius: 8px; background: var(--c); flex: none; }
.qr-items span { flex: 1; min-width: 0; } .qr-items b { display: block; font-size: 12.5px; } .qr-items small { display: block; font-size: 11px; color: var(--color-body-gray); }
.qr-items em { width: 30px; height: 18px; border-radius: 99px; background: var(--color-primary); position: relative; flex: none; }
.qr-items em::after { content: ""; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; }
.qr-foot { display: flex; justify-content: flex-end; margin-top: 16px; }
.qr-foot span { padding: 8px 14px; border-radius: 8px; background: var(--color-primary); color: #fff; font-size: 12px; font-weight: 600; }
/* Interactive states (js/produk.js): every control is a real button with a visible hover and selected state */
.qui button { font: inherit; color: inherit; text-align: left; cursor: pointer; }
.qui button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.qui-filter li button { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 3px 6px; margin: -3px -6px; border-radius: 6px; transition: background 150ms ease; }
.qui-filter li button:hover { background: #f3f4f6; }
.qui-filter li button[aria-pressed="true"] { background: var(--color-mint); color: var(--color-primary); font-weight: 600; }
.qui-filter li { display: block; }
.qm { transition: box-shadow 200ms ease; }
.qm.is-open { box-shadow: 0 0 0 1.5px var(--color-primary); }
.qm-body { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: #4b5563; }
.qm-tags button { margin-left: auto; padding: 3px 9px; border-radius: 6px; box-shadow: inset 0 0 0 1px #e5e7eb; font-size: 11px; font-weight: 600; background: #fff; transition: background 150ms ease; }
.qm-tags button:hover { background: #f3f4f6; }
button.qk { display: block; width: 100%; transition: box-shadow 150ms ease; }
button.qk:hover { box-shadow: 0 0 0 1px #cbd5e1, 0 1px 2px rgba(0, 0, 0, 0.05); }
button.qk.on { box-shadow: 0 0 0 1.5px var(--color-primary); }
.qc { margin-top: 12px; padding: 14px 18px 10px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px #e5e7eb; }
.qc-title { font-size: 12px; color: var(--color-body-gray); }
.qc-title span { color: var(--color-primary); font-weight: 600; }
.qc svg { display: block; width: 100%; height: 80px; margin-top: 10px; }
.qc-axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10px; color: var(--color-body-gray); }
button.qi-row { color: #6b7280; display: block; width: calc(100% + 16px); margin: 6px -8px 0; padding: 8px 8px 8px 26px; border-radius: 10px; transition: background 150ms ease; }
button.qi-row::before { left: 8px; top: 8px; }
button.qi-row:hover { background: #f6f8f7; }
button.qi-row.on { background: var(--color-mint); }
.qi-card h4 small { font-size: 12px; font-weight: 500; color: rgba(255, 255, 255, 0.6); }
.qr-tabs button { padding-bottom: 10px; color: var(--color-body-gray); transition: color 150ms ease; }
.qr-tabs button:hover { color: var(--color-ink); }
.qr-tabs button.on { color: var(--color-primary); box-shadow: inset 0 -2px 0 var(--color-primary); }
.qr-switch { position: relative; width: 30px; height: 18px; border-radius: 99px; background: #d1d5db; flex: none; transition: background 150ms ease; }
.qr-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: transform 150ms ease; }
.qr-switch[aria-checked="true"] { background: var(--color-primary); }
.qr-switch[aria-checked="true"]::after { transform: translateX(12px); }
.qr-go { padding: 8px 14px; border-radius: 8px; background: var(--color-primary); color: #fff !important; font-size: 12px; font-weight: 600; transition: opacity 150ms ease; }
.qr-go:disabled { opacity: 0.45; cursor: not-allowed; }
/* "Just filled in" entrance (js/produk.js fill()): blocks wait hidden until the card is on screen, then rise in */
.qui.is-waiting :is(.qui-head, .qm, .qui-filter li, .qk, .qc, .qi-card > h4, .qi-card > .qi-row, .qr-tabs, .qr-label, .qr-items li, .qr-foot) { opacity: 0; }
@keyframes q-in { from { opacity: 0; transform: translateY(8px); } }
/* Chart: drawn left to right (a clip that opens up, so line and area move together) */
.qc svg { clip-path: inset(0 100% 0 0); }
.qui.is-drawn .qc svg { clip-path: inset(0 0 0 0); transition: clip-path 1100ms cubic-bezier(0.4, 0, 0.2, 1) 150ms; }
@media (prefers-reduced-motion: reduce) { .qc svg { clip-path: none; } }
@media (max-width: 900px) {
  .pstack { display: grid; gap: 12px; }
  .pcard { position: relative; min-height: 0; grid-template-columns: 1fr; row-gap: 28px; padding: 36px 0 36px 24px; }
  .pcard .sc-copy { padding-right: 24px; }
  .qui-split { grid-template-columns: 1fr; }
  .qui-filter { display: none; }
}

.sc-row { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px 64px; align-items: center; }
.sc-row .sc-shot { order: -1; }
.sc-row.flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.sc-row.flip .sc-shot { order: 0; }
.sc-copy .h3 { margin-top: 16px; font-size: 32px; font-weight: 600; line-height: 1.25; letter-spacing: -0.025em; text-wrap: balance; }
.sc-copy > p:not(.eyebrow) { margin-top: 16px; font-size: 18px; line-height: 1.5; letter-spacing: -0.021em; color: var(--fg-2); }
.sc-copy .rfeats { margin-top: 32px; }
.sc-mock.mock { padding: 32px; }
/* Real screenshot (assets/showcase-*.png) takes over from the interface once it loads */
.sc-shot img { display: none; width: 100%; height: auto; border-radius: var(--radius-card); box-shadow: var(--shadow-mockup); }
.sc-shot.has-shot img { display: block; }
.sc-shot.has-shot .sc-mock { display: none; }
@media (max-width: 960px) {
  .sc-row, .sc-row.flip { grid-template-columns: 1fr; gap: 32px; }
  .sc-row .sc-shot, .sc-row.flip .sc-shot { order: 0; }
}
@media (max-width: 640px) {
  .sc-copy .h3 { font-size: 24px; line-height: 1.33; }
  .sc-copy > p:not(.eyebrow) { font-size: 16px; }
  .sc-mock.mock { padding: 24px 16px; }
  .sc-shot img { border-radius: var(--radius-card-sm); }
}

/* ---------- Reporting (inside product showcase) ---------- */
.rfeats { margin-top: 40px; border-top: 1px solid var(--line); }
.rfeat { padding: 24px 0; border-bottom: 1px solid var(--line); }
.rfeat h3 { font-size: 18px; font-weight: 600; line-height: 1.5; letter-spacing: -0.021em; }
.rfeat p { margin-top: 4px; font-size: 16px; color: var(--fg-2); }

.rstage { position: relative; background: var(--card); border-radius: var(--radius-card); padding: 48px 40px; }
/* Second page peeking behind the report */
.rstage::before {
  content: ""; position: absolute; inset: 72px 64px 32px; z-index: 0;
  background: var(--color-paper-white); border-radius: var(--radius-card-sm);
  box-shadow: inset 0 0 0 1px var(--color-hairline);
  transform: rotate(4deg);
}
.rdoc {
  position: relative; z-index: 1; overflow: hidden;
  background: var(--color-paper-white); color: var(--color-ink);
  border-radius: var(--radius-card-sm);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14), 0 4px 12px rgba(0, 0, 0, 0.08);
}
.rdoc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px; border-bottom: 1px solid var(--color-hairline); }
.rdoc-head .kicker { font-size: 13px; color: var(--color-body-gray); }
.rdoc-head h4 { margin-top: 4px; font-size: 20px; font-weight: 600; line-height: 1.43; letter-spacing: -0.015em; }
.rsec { padding: 16px 24px; border-bottom: 1px solid var(--color-hairline); transition: background 150ms ease; }
.rsec:last-child { border-bottom: 0; }
.rsec-head { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; font-weight: 500; color: var(--color-body-gray); }
.rsum li { position: relative; padding: 4px 0 4px 16px; font-size: 14px; }
.rsum li::before { content: ""; position: absolute; left: 0; top: 14px; width: 8px; height: 2px; background: var(--color-recovery-green); }
.rtrend { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: end; }
.rbars { display: flex; align-items: flex-end; gap: 6px; height: 72px; }
.rbars span { flex: 1; background: var(--color-hairline); border-radius: 4px 4px 0 0; }
.rbars span.peak { background: var(--color-recovery-green); }
.rtrend .chart-axis { margin-top: 8px; }
.sentbar { display: flex; height: 8px; border-radius: 4px; overflow: hidden; gap: 2px; }
.sentbar span:nth-child(1) { background: var(--color-recovery-green); }
.sentbar span:nth-child(2) { background: var(--color-hairline); }
.sentbar span:nth-child(3) { background: var(--color-ink); }
.sentleg { margin-top: 12px; display: grid; gap: 4px; font-size: 13px; color: var(--color-body-gray); }
.sentleg div { display: flex; justify-content: space-between; gap: 8px; }
.sentleg b { color: var(--color-ink); font-weight: 500; font-variant-numeric: tabular-nums; }
.sentleg i { display: inline-block; width: 8px; height: 8px; margin-right: 8px; border-radius: 2px; }
.rfile { display: flex; align-items: center; gap: 16px; }
.rfile-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--color-cloud-card); color: var(--color-recovery-green); }
.rfile-icon svg { width: 20px; height: 20px; }
.rfile-name { font-size: 14px; font-weight: 500; }
.rfile-meta { font-size: 13px; color: var(--color-body-gray); }
/* The report card is always white, so the button can't use the section's --fg */
.rfile .btn { margin-left: auto; pointer-events: none; color: var(--color-ink); border-color: var(--color-ink); }

/* Hovering a feature highlights its part of the report */
.sc-report:has(.rfeat[data-r="1"]:hover) .rsec[data-r="1"],
.sc-report:has(.rfeat[data-r="2"]:hover) .rsec[data-r="2"],
.sc-report:has(.rfeat[data-r="3"]:hover) .rsec[data-r="3"] { background: var(--color-cloud-card); }
.sc-report:has(.rfeat[data-r="1"]:hover) .rsec[data-r="1"] .marker,
.sc-report:has(.rfeat[data-r="2"]:hover) .rsec[data-r="2"] .marker,
.sc-report:has(.rfeat[data-r="3"]:hover) .rsec[data-r="3"] .marker { background: var(--color-charcoal); color: var(--color-cloud-card); }

@media (max-width: 640px) {
  .rstage { padding: 16px; }
  .rstage::before { display: none; }
  .rdoc-head { padding: 16px; }
  .rsec { padding: 16px; }
  .rtrend { grid-template-columns: 1fr; }
  .rfile { flex-wrap: wrap; }
  .rfile .btn { margin-left: 56px; }
}

/* ---------- Features (light) ---------- */
.why-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* Cloud Feature Card: Cloud Card surface, 24px radius, 32px padding, no border, no shadow */
.why { position: relative; padding: 32px; border-radius: var(--radius-card); background: var(--card); }
.why-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 24px; }
.why h3 { font-size: 20px; font-weight: 600; line-height: 1.43; letter-spacing: -0.015em; margin-bottom: 8px; text-wrap: balance; }
.why p { font-size: 16px; color: var(--fg-2); }
.feature-n { font: 500 16px/1 var(--font-ui); color: var(--fg-3); font-variant-numeric: tabular-nums; }
/* ---------- Problem as a conversation (after steep.app "Unlock deep analysis") ---------- */
/* Top layer fades the wash into the white page above and below (no hard edge, like the hero) */
.convo-sec {
  background:
    linear-gradient(var(--color-paper-white), transparent 160px, transparent calc(100% - 160px), var(--color-paper-white)),
    radial-gradient(40% 50% at 70% 35%, rgba(207, 223, 188, 0.45), rgba(207, 223, 188, 0) 70%),
    radial-gradient(35% 45% at 30% 60%, rgba(52, 211, 153, 0.16), rgba(52, 211, 153, 0) 70%),
    #f6f8f7;
}
.convo-head { max-width: 620px; display: grid; justify-items: start; gap: 16px; }
.convo-eyebrow { font-size: 14px; font-weight: 600; color: var(--color-primary); }
.convo-head .lede { font-size: clamp(17px, 1.6vw, 20px); }
.convo-link {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: var(--radius-pill); background: var(--color-paper-white);
  box-shadow: 0 0 0 1px var(--color-hairline); font-size: 15px; font-weight: 500;
  transition: box-shadow 150ms ease;
}
.convo-link:hover { box-shadow: 0 0 0 1px var(--color-silver); }

/* Chat window with persona questions floating around it */
.convo { position: relative; max-width: 1200px; margin: var(--spacing-64) auto 0; padding: 0 264px; }
.chat {
  margin: 0; overflow: hidden; border-radius: 20px; background: var(--color-paper-white);
  box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.06), 0 40px 80px -40px rgba(17, 24, 39, 0.3);
}
.chat-bar { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--color-hairline); font-size: 13px; }
.chat-bar b { font-weight: 600; }
.chat-dots { display: flex; gap: 6px; }
.chat-dots i { width: 10px; height: 10px; border-radius: 50%; background: #e5e7eb; }
.chat-new { margin-left: auto; color: var(--color-body-gray); }
.chat-body { display: grid; gap: 14px; padding: 24px 28px 8px; text-align: left; }
.chat-q { justify-self: end; max-width: 75%; padding: 10px 16px; border-radius: 16px 16px 4px 16px; background: #f3f4f6; font-size: 15px; }
.chat-reason { font-size: 13px; color: var(--color-body-gray); }
.chat-a { font-size: 15px; line-height: 1.55; }
.chat-a mark { background: none; color: var(--color-primary); font-weight: 600; }
.chat-a ol { margin-top: 8px; display: grid; gap: 6px; padding-left: 20px; list-style: decimal; color: var(--color-body-gray); }
.chat-a ol b { color: var(--color-ink); font-weight: 600; }
.chat-card { padding: 14px 16px 12px; border-radius: 14px; box-shadow: 0 0 0 1px var(--color-hairline); }
.chat-card-top { display: flex; justify-content: space-between; font-size: 13px; }
.chat-card-top b { font-weight: 600; }
.chat-card-top span { color: var(--color-body-gray); }
.chat-card svg { display: block; width: 100%; height: 72px; margin-top: 10px; }
.chat-legend { display: flex; gap: 16px; margin-top: 8px; font-size: 12px; color: var(--color-body-gray); }
.chat-legend i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; }
.chat-input {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 14px 28px 0; padding: 14px 14px 14px 18px; border-radius: 16px; background: #f9fafb;
  box-shadow: 0 0 0 1px var(--color-hairline); font-size: 14px; color: var(--color-body-gray); text-align: left;
}
.chat-input i { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--color-primary); color: var(--color-paper-white); font-style: normal; font-size: 14px; }
.chat figcaption { padding: 12px 28px 16px; font-size: 12px; color: var(--color-body-gray); text-align: left; }

.ask {
  position: absolute; z-index: 2; width: 236px; padding: 12px 14px;
  border-radius: 14px; background: var(--color-paper-white); text-align: left;
  box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.05), 0 16px 32px -16px rgba(17, 24, 39, 0.25);
}
.ask-who { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; font-size: 12px; color: var(--color-body-gray); }
.ask-who b { color: var(--color-ink); font-weight: 600; }
.ask-who i {
  display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
  background: var(--c, var(--color-mint)); color: var(--t, var(--color-primary)); font-style: normal; font-size: 11px; font-weight: 700;
}
.ask p { font-size: 14px; line-height: 1.4; }
.ask-a { left: 0; top: 56px; }
.ask-b { right: 0; top: 38%; }
.ask-c { left: 0; top: 64%; }

@media (max-width: 1180px) {
  .convo { padding: 0; max-width: 760px; }
  .ask { position: static; width: auto; margin-top: 12px; }
  .convo { display: grid; }


}
@media (max-width: 760px) {
  .chat-body { padding: 20px 18px 8px; }
  .chat-input { margin: 12px 18px 0; }
  .chat figcaption { padding: 12px 18px 16px; }
  .chat-q { max-width: 90%; }
  .chat-new { display: none; }
}

@keyframes caret { 50% { opacity: 0; } }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Module interfaces (inside product showcase) ---------- */
.panel-label { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--color-body-gray); margin-bottom: 16px; }
.panel-label b { font-size: 18px; font-weight: 600; color: var(--color-ink); letter-spacing: -0.021em; }

.ingest { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ingest div { background: var(--color-cloud-card); border-radius: var(--radius-card-sm); padding: 16px; }
.ingest dt { font-size: 13px; color: var(--color-body-gray); }
.ingest dd { margin: 8px 0 0; font-size: 24px; font-weight: 700; line-height: 1; letter-spacing: -0.021em; font-variant-numeric: tabular-nums; }
.ingest dd small { display: table; margin-top: 8px; font-size: 12px; font-weight: 500; letter-spacing: 0; padding: 0 8px; border-radius: var(--radius-pill); background: var(--color-cloud-card); color: var(--color-ink); line-height: 20px; }
.stream { margin-top: 16px; padding: 16px; border: 1px solid var(--color-hairline); border-radius: var(--radius-card-sm); }
.stream-bars { display: flex; align-items: flex-end; gap: 2px; height: 72px; margin-top: 16px; }
.stream-bars span { flex: 1; background: var(--color-hairline); border-radius: 2px 2px 0 0; transition: height 500ms ease; }
.stream-bars span:last-child { background: var(--color-recovery-green); }

.quotes { display: grid; gap: 8px; }
.quote { padding: 16px; border: 1px solid var(--color-hairline); border-radius: var(--radius-card-sm); display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; }
.quote q { font-size: 16px; grid-column: 1; quotes: "“" "”"; }
.quote .lang { font-size: 12px; color: var(--color-body-gray); grid-column: 1; }
.quote .badge { grid-column: 2; grid-row: 1 / 3; font-size: 14px; min-width: 72px; justify-content: center; font-variant-numeric: tabular-nums; }
.quote .badge.neg { background: transparent; box-shadow: inset 0 0 0 1px var(--color-ink); color: var(--color-ink); }

.steps { display: grid; }
.step { display: grid; grid-template-columns: 56px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--color-hairline); opacity: 0.3; transition: opacity 400ms ease; font-size: 16px; }
.step.on { opacity: 1; }
.step time { font-size: 13px; font-weight: 500; color: var(--color-body-gray); font-variant-numeric: tabular-nums; line-height: 1.7; }
.step.on time { color: var(--color-ink); font-weight: 600; }
.wa { margin-top: 24px; padding: 16px; border-radius: var(--radius-card-sm); background: var(--color-cloud-card); border-left: 3px solid var(--color-recovery-green); font-size: 14px; color: rgba(17, 24, 39, 0.74); }
.wa b { color: var(--color-ink); font-weight: 500; }
.wa code { font: 500 13px var(--font-ui); color: var(--color-primary); }

/* ---------- Coverage (light, second half of the sources section) ---------- */
.src-sec { border-top: 1px solid var(--line); } /* separates it from the light solution section above */
.prov { margin-top: var(--spacing-80); padding-top: 40px; border-top: 1px solid var(--line); }
.prov-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 24px; }
.prov-head h3 { font-size: 18px; font-weight: 600; letter-spacing: -0.021em; }
.prov-head span { font-size: 13px; color: var(--fg-3); }
.prov-row { display: grid; grid-template-columns: 128px 1fr 64px; gap: 16px; align-items: center; padding: 8px 0; font-size: 14px; }
.prov-row .track { height: 8px; background: var(--color-cloud-card); border-radius: 4px; overflow: hidden; }
.prov-row .track span { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--color-ink); transition: width 900ms var(--ease); }
.prov-row:first-child .track span { background: var(--color-recovery-green); }
.prov-row .v { font-size: 13px; color: var(--fg-2); text-align: right; font-variant-numeric: tabular-nums; }
.section-head + .prov { margin-top: 0; padding-top: 0; border-top: 0; } /* standalone on the Monitoring page */
#prov { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 64px; }
.media-list { margin-top: 24px; font-size: 14px; color: var(--fg-3); line-height: 1.71; }
.media-list b { color: var(--fg); }

/* ---------- Live today (dark) ---------- */
/* One dashboard panel filled by js/live.js. data-state on the section: placeholder | live | error */
.live-sec { border-bottom: 1px solid var(--line); } /* separates it from the dark "cara kerja" section below */
.lv { --line: #d5e8df; position: relative; z-index: 1; background: var(--card); border-radius: var(--radius-card); overflow: hidden; }
.lv-head { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding: 16px 24px; border-bottom: 1px solid var(--line); font-size: 14px; }
.lv-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 500; }
.lv-dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--color-body-gray); position: relative; }
.live-sec[data-state="live"] .lv-dot { background: var(--color-recovery-green); }
.live-sec[data-state="live"] .lv-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--color-recovery-green); animation: ping 2.4s ease-out infinite; }
.lv-date { color: var(--fg-3); }
.lv-ph-badge { margin-left: auto; }
.live-sec[data-state="live"] .lv-ph-badge,
.live-sec[data-state="live"] .lv-foot { display: none; }

.lv-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.lv-metric { padding: 24px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.lv-metric + .lv-metric { border-left: 1px solid var(--line); }
.lv-label { font-size: 13px; font-weight: 500; color: var(--fg-3); }
.lv-value { font-size: 32px; font-weight: 700; line-height: 1.2; letter-spacing: -0.021em; overflow-wrap: anywhere; }
.lv-note { font-size: 13px; color: var(--fg-2); }
.lv-note .up { color: var(--accent); font-weight: 500; }
.lv-sent { display: flex; gap: 2px; height: 8px; margin-top: 12px; border-radius: 4px; overflow: hidden; background: var(--line); }
.lv-sent span { width: 0; transition: width 700ms var(--ease); }
.lv-sent span:nth-child(1) { background: var(--color-recovery-green); }
.lv-sent span:nth-child(2) { background: var(--color-silver); }
.lv-sent span:nth-child(3) { background: var(--color-coral-signal); }
.lv-sentleg { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 8px; margin-top: 4px; font-size: 13px; color: var(--fg-3); }
.lv-sentleg div { display: flex; align-items: center; gap: 6px; }
.lv-sentleg i { width: 8px; height: 8px; border-radius: 2px; }
.lv-sentleg dd { margin: 0; color: var(--fg); font-weight: 500; font-variant-numeric: tabular-nums; }

.lv-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.lv-chart { padding: 24px; display: flex; flex-direction: column; }
.lv-sub { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 16px; font-size: 13px; font-weight: 500; color: var(--fg-3); }
.lv-bars { flex: 1; min-height: 200px; display: flex; align-items: flex-end; gap: 4px; }
/* Each hour is a faint track; the fill is that hour's mention count */
.lv-slot { flex: 1; height: 100%; display: flex; align-items: flex-end; border-radius: 4px 4px 0 0; background: rgba(17, 24, 39, 0.04); }
.lv-slot span { display: block; width: 100%; height: 0; border-radius: 4px 4px 0 0; background: var(--color-body-gray); transition: height 700ms var(--ease); }
.lv-slot.now span { background: var(--color-recovery-green); }
.lv-chart .chart-axis { border-top-color: var(--line); color: var(--fg-3); }

.lv-side { border-left: 1px solid var(--line); }
.lv-block { padding: 20px 24px; }
.lv-block + .lv-block { border-top: 1px solid var(--line); }
.lv-block .lv-sub { margin-bottom: 12px; }
.lv-topics { display: grid; gap: 8px; }
.lv-topics li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 12px; align-items: baseline; font-size: 15px; }
.lv-topics .n { font-size: 13px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.lv-topics .v, .lv-sources .v { font-size: 13px; color: var(--fg-2); font-variant-numeric: tabular-nums; }
.lv-keys { display: flex; flex-wrap: wrap; gap: 8px; }
.lv-keys .badge { font-size: 13px; }
.lv-keys .up { color: var(--accent); }
.lv-sources { display: grid; gap: 10px; }
.lv-sources li { display: grid; grid-template-columns: minmax(0, 1fr) 72px auto; gap: 12px; align-items: center; font-size: 14px; }
.lv-sources .track { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.lv-sources .track span { display: block; height: 100%; border-radius: 3px; background: var(--color-silver); }

/* On the dark band the panel reads as a light card, like the product cards on Bevel's dark section */
.dark .lv {
  --bg: var(--color-paper-white); --fg: var(--color-ink); --fg-2: var(--color-body-gray); --fg-3: var(--color-body-gray);
  --card: var(--color-cloud-card); --accent: var(--color-body-gray);
  background: linear-gradient(170deg, #f6faf8, var(--wash-mint)); color: var(--color-ink);
}
/* Placeholder rows while data is not connected */
.lv-skel { display: block; height: 12px; border-radius: 6px; background: linear-gradient(90deg, rgba(17,24,39,0.05) 25%, rgba(17,24,39,0.1) 50%, rgba(17,24,39,0.05) 75%); background-size: 200% 100%; animation: lv-shimmer 1.6s linear infinite; }
.lv-keys .lv-skel { width: 88px; height: 26px; border-radius: var(--radius-pill); }
.lv-topics li[aria-hidden], .lv-sources li[aria-hidden] { display: block; padding: 4px 0; }
@keyframes lv-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.lv-topics .lv-empty, .lv-sources .lv-empty, .lv-keys .lv-empty { display: block; font-size: 13px; color: var(--fg-3); }
.lv-note b { color: var(--fg); font-weight: 500; }
.live-sec:not([data-state="placeholder"]) .lv-foot { display: none; }

.lv-ticker { display: flex; align-items: center; gap: 16px; padding: 14px 24px; border-top: 1px solid var(--line); font-size: 14px; }
.lv-ticker-label { flex: none; font-size: 13px; font-weight: 500; color: var(--accent); }
.lv-ticker-track { flex: 1; min-width: 0; overflow: hidden; }
/* Fade the edges only while the ticker scrolls; a static line would lose its first letters */
.lv-ticker-track:has(.moving) { -webkit-mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 24px), transparent); }
.lv-ticker-run { display: flex; width: max-content; color: var(--fg-2); white-space: nowrap; }
/* padding-right (not a gap between groups) keeps both copies the same width, so -50% loops seamlessly */
.lv-ticker-group { display: flex; gap: 40px; padding-right: 40px; }
/* A static line (placeholder or reduced motion) wraps instead of being cut off */
.lv-ticker-run:not(.moving) { width: auto; white-space: normal; }
.lv-ticker-run:not(.moving) .lv-ticker-group { flex-wrap: wrap; row-gap: 4px; padding-right: 0; }
.lv-ticker-run:not(.moving) .lv-ticker-group[aria-hidden] { display: none; }
.lv-ticker-run.moving { animation: lv-ticker var(--lv-dur, 40s) linear infinite; }
.lv-ticker-track:hover .lv-ticker-run { animation-play-state: paused; }
.lv-ticker-run time { margin-right: 8px; color: var(--fg-3); font-variant-numeric: tabular-nums; }
@keyframes lv-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.lv-foot { margin-top: 16px; font-size: 13px; color: var(--fg-3); }
.lv-foot code { font: 500 12px var(--font-ui); color: var(--fg-2); }

@media (max-width: 960px) {
  .lv-body { grid-template-columns: 1fr; }
  .lv-side { border-left: 0; border-top: 1px solid var(--line); }
}
@media (max-width: 640px) {
  .lv-head, .lv-metric, .lv-chart, .lv-block, .lv-ticker { padding-left: 16px; padding-right: 16px; }
  .lv-ph-badge { margin-left: 0; white-space: normal; }
  .lv-metrics { grid-template-columns: 1fr; }
  .lv-metric + .lv-metric { border-left: 0; border-top: 1px solid var(--line); }
  .lv-value { font-size: 28px; }
  .lv-bars { min-height: 144px; gap: 2px; }
  .lv-ticker { flex-direction: column; align-items: flex-start; gap: 8px; }
  .lv-ticker-track { width: 100%; }
}

.divide-top { border-top: 1px solid var(--line); } /* separates two light sections */

/* ---------- Timeline (dark) ---------- */
.sim { --line: #d5e8df; background: var(--card); border-radius: var(--radius-card); overflow: hidden; position: relative; z-index: 1; }
.scrub { display: flex; align-items: center; gap: 24px; padding: 24px 32px; border-bottom: 1px solid var(--line); }
.play { width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--color-charcoal); color: var(--color-cloud-card); display: grid; place-items: center; transition: background 150ms ease; }
.play:hover { background: var(--color-charcoal-hover); }
.play svg { width: 14px; height: 14px; }
.rail { position: relative; flex: 1; height: 24px; display: flex; align-items: center; }
.rail-track { position: relative; width: 100%; height: 4px; border-radius: 2px; background: var(--line); }
.rail-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--color-charcoal); border-radius: 2px; }
.rail-tick { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--bg); border: 2px solid var(--color-body-gray); transition: background 200ms ease, border-color 200ms ease; }
.rail-tick.on { background: var(--color-charcoal); border-color: var(--color-charcoal); }
.rail input { position: absolute; inset: 0; width: 100%; margin: 0; opacity: 0; cursor: pointer; }
.clock { font-size: 18px; font-weight: 600; min-width: 56px; text-align: right; font-variant-numeric: tabular-nums; }

.events { padding: 8px 32px 16px; }
.event { display: grid; grid-template-columns: 56px 88px 1fr; gap: 16px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--line); opacity: 0.35; transition: opacity 250ms ease; }
.event:last-child { border-bottom: 0; }
.event.past { opacity: 0.7; }
.event.now { opacity: 1; }
.event time { font-size: 13px; font-weight: 500; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.event.now time { color: var(--fg); font-weight: 600; }
.event .badge { justify-self: start; }
.event p { font-size: 16px; }

/* ---------- Compare (dark) ---------- */
.table-wrap { --line: #d5e8df; background: var(--card); border-radius: var(--radius-card); overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 720px; }
th, td { text-align: left; padding: 16px 24px; font-size: 16px; vertical-align: top; }
thead th { font-weight: 500; font-size: 14px; color: var(--fg-3); border-bottom: 1px solid var(--line); }
thead th.qola { color: var(--color-charcoal); }
tbody tr + tr td, tbody tr + tr th { border-top: 1px solid var(--line); }
tbody th { font-weight: 400; color: var(--fg); width: 30%; }
td.qola { color: var(--fg); }
td.qola::before { content: ""; display: inline-block; width: 10px; height: 6px; margin-right: 12px; border-left: 2px solid var(--color-charcoal); border-bottom: 2px solid var(--color-charcoal); transform: translateY(-3px) rotate(-45deg); }
td.other { color: var(--fg-3); }
.table-note { margin-top: 16px; font-size: 13px; color: var(--fg-3); }

/* ---------- Pricing (light) ---------- */
.billing { margin-top: 16px; display: inline-flex; padding: 4px; gap: 4px; background: var(--card); border-radius: var(--radius-pill); }
.billing button {
  height: 40px; padding: 0 20px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 500; color: var(--fg-2);
  display: inline-flex; align-items: center; gap: 8px;
  transition: background 150ms ease, color 150ms ease;
}
.billing button:hover { color: var(--fg); }
.billing button[aria-pressed="true"] { background: var(--color-charcoal); color: var(--color-cloud-card); }
.billing .save { font-size: 12px; color: var(--accent); }
.billing button[aria-pressed="true"] .save { color: var(--color-ink); }

.plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { display: flex; flex-direction: column; background: var(--card); color: var(--fg); border-radius: var(--radius-card); padding: 32px 24px; }
.plan.dark { background: var(--color-charcoal); }
.plan-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-height: 27px; }
.plan h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.021em; }
.plan-for { margin-top: 8px; font-size: 14px; color: var(--fg-2); min-height: 42px; }
/* Tiers carry a one-sentence promise instead of a price: reserve three lines so the buttons line up */
@media (min-width: 1025px) { .plan-for { min-height: 4.5em; } }
.price { margin-top: 24px; display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.price b { font-size: 40px; font-weight: 700; line-height: 1.1; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.price span { font-size: 14px; color: var(--fg-3); }
.price-note { margin-top: 4px; font-size: 13px; color: var(--fg-3); min-height: 20px; }
.plan .btn { margin-top: 24px; }
.plan .btn-outline { background: var(--color-paper-white); border-color: transparent; }
.plan .btn-outline:hover { background: var(--color-paper-white); border-color: var(--color-silver); }
.plan ul { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.plan li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.43; }
.plan li::before {
  content: ""; position: absolute; left: 2px; top: 5px; width: 10px; height: 6px;
  border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.plan li.head { padding-left: 0; font-weight: 600; }
.plan li.head::before { display: none; }
.plans-note { margin-top: 24px; font-size: 14px; color: var(--fg-3); text-align: center; }

/* ---------- News (light): landing page section and berita/index.html, filled by js/news.js ---------- */
.news-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 64px; flex-wrap: wrap; margin-bottom: var(--spacing-56); }
.news-head > div { display: grid; gap: 16px; max-width: 640px; }
.news-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 16px; }
.news-grid.all { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px 24px; }
.news { position: relative; display: flex; flex-direction: column; }
.news-thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-card-sm); background: var(--card); }
.news-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease); }
.news:hover .news-thumb img { transform: scale(1.03); }
/* Article without an image: brand pattern instead of an empty box */
.news-thumb.no-img { background: var(--hero-sky); }
.news-thumb.no-img .orb { width: 70%; aspect-ratio: 1; height: auto; right: -20%; top: -30%; }
.news-thumb.no-img img { display: none; }
.news-meta { margin-top: 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 13px; color: var(--fg-3); }
.news h3 { margin-top: 12px; font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: -0.021em; text-wrap: balance; }
.news-excerpt { margin-top: 8px; font-size: 15px; color: var(--fg-2); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-link { margin-top: auto; padding-top: 16px; display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--fg); }
.news-link svg { width: 12px; height: 12px; color: var(--accent); transition: transform 150ms ease; }
.news:hover .news-link svg { transform: translateX(3px); }
.news-link::after { content: ""; position: absolute; inset: 0; } /* whole card is the click target */
/* Placeholder card: shows the layout while there are no real articles yet */
.news.ph .news-thumb { display: grid; place-items: center; background: transparent; border: 1px dashed var(--color-body-gray); font-size: 13px; color: var(--fg-3); }
.news.ph h3, .news.ph .news-excerpt { color: var(--fg-3); }
.news.ph .news-link { color: var(--fg-3); }
.news-note { margin-top: 32px; font-size: 13px; color: var(--fg-3); }
.news-note code { font: 500 12px var(--font-ui); color: var(--fg-2); }

.news-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.news-filter[hidden] { display: none; }
.news-filter button { height: 36px; padding: 0 16px; border-radius: var(--radius-pill); background: var(--card); font-size: 14px; font-weight: 500; color: var(--fg-2); transition: background 150ms ease, color 150ms ease, border-color 150ms ease; }
.news-filter button:hover { color: var(--fg); }
.news-filter button[aria-pressed="true"] { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper-white); }
/* Featured layout (landing page): one highlighted article left, two smaller ones stacked right,
   split by a hairline. Sizes stay modest so the section reads as a news strip, not a hero. */
.news-grid.featured { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 0; align-items: start; }
.news-lead { padding-right: 40px; }
.news-lead .news-meta { margin-top: 0; }
.news-lead .badge.sprout { background: var(--color-mint); color: var(--color-primary); font-weight: 600; }
.news-cat { font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-2); }
.news-lead h3 { margin-top: 14px; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.25; letter-spacing: -0.025em; }
.news-lead .news-excerpt { margin-top: 12px; font-size: 16px; max-width: 60ch; -webkit-line-clamp: 2; line-clamp: 2; }
.news-lead .news-thumb { margin-top: 24px; aspect-ratio: 16 / 9; }
.news-foot { margin-top: 14px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--fg-3); }
.news-foot svg { width: 16px; height: 16px; flex: none; }
.news-side { display: grid; gap: 24px; padding-left: 40px; border-left: 1px solid var(--line); }
.news-mini + .news-mini { padding-top: 24px; border-top: 1px solid var(--line); }
.news-mini .news-thumb { aspect-ratio: 2 / 1; }
.news-mini .news-meta { margin-top: 14px; }
.news-mini h3 { margin-top: 6px; font-size: 17px; line-height: 1.35; }
.news-mini .news-foot { margin-top: 10px; }
.news-title-link { color: inherit; transition: color 150ms ease; }
.news-title-link::after { content: ""; position: absolute; inset: 0; } /* whole card is the click target */
.news:hover .news-title-link { color: var(--color-primary); }
.news-lead.ph .news-thumb, .news-mini.ph .news-thumb { display: block; }
.news.ph .news-cat, .news.ph .news-foot { color: var(--fg-3); }
.pp-hero.short { padding-bottom: var(--spacing-80); }
@media (max-width: 1100px) {
  .news-grid, .news-grid.all { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Featured layout stacks: lead on top, the side articles in two columns, then one column on phones */
@media (max-width: 900px) {
  .news-grid.featured { grid-template-columns: 1fr; gap: 32px; }
  .news-lead { padding-right: 0; }
  .news-side { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; padding: 32px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .news-mini + .news-mini { padding-top: 0; border-top: 0; }
}
@media (max-width: 640px) {
  .news-grid, .news-grid.all { grid-template-columns: 1fr; gap: 40px; }
  .news-grid.featured { gap: 32px; }
  .news-side { grid-template-columns: 1fr; }
  .news-mini + .news-mini { padding-top: 24px; border-top: 1px solid var(--line); }
  .news-head { margin-bottom: var(--spacing-40); }
}

/* ---------- FAQ: one centered column ---------- */
.faq .section-head { margin-bottom: var(--spacing-40); }
.qa summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 24px; padding: 18px 0;
  font-size: clamp(18px, 1.9vw, 24px); font-weight: 500; line-height: 1.35; letter-spacing: -0.02em; color: var(--fg);
  transition: color 150ms ease;
}
.qa summary::-webkit-details-marker { display: none; }
/* Chevron points right; turns down when the answer is open */
.qa summary::after {
  content: ""; margin: 0 6px 0 auto; flex: none; width: 10px; height: 10px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(-45deg); transition: transform 250ms var(--ease);
}
.qa[open] summary::after { transform: rotate(45deg) translate(-2px, -2px); }
.qa summary:hover { color: var(--color-primary); }
.qa p { padding: 0 64px 24px 0; max-width: 720px; font-size: 17px; line-height: 1.6; color: var(--fg-2); }

/* ---------- CTA: centered copy and two buttons ---------- */
.cta { text-align: center; }
.cta-actions { margin-top: 8px; display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.cta-inner { position: relative; z-index: 1; display: grid; justify-items: center; gap: 20px; }
.cta h2 { max-width: 14ch; font-size: clamp(40px, 6vw, 80px); }
/* Brand promise: one sentence per line on wide screens */
@media (min-width: 761px) { #cta-title { max-width: none; } }
.cta-inner .lede { max-width: 560px; }
.cta-inner .btn { margin-top: 8px; }

/* ---------- Footer ---------- */
.footer { position: relative; z-index: 3; padding: var(--spacing-80) 0 40px; font-size: 16px; } /* no top rule: sections above fade into it; above the CTA veil */
.footer-grid { display: grid; grid-template-columns: 2fr repeat(4, 1fr); gap: 40px; }
.footer-brand address { margin-top: 16px; font-style: normal; font-size: 13px; line-height: 1.6; color: var(--fg-2); }
.footer-brand address a { color: var(--fg); }
.plans-note a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--color-silver); text-underline-offset: 4px; }
.footer-brand p { margin-top: 12px; font-size: 13px; color: var(--fg-2); max-width: 30ch; }
.footer h4, .footer .footer-h { font-size: 14px; font-weight: 500; color: var(--fg-3); margin-bottom: 16px; }
.footer li + li { margin-top: 16px; }
.footer li a { font-size: 18px; font-weight: 500; color: var(--fg); }
.footer li a:hover { color: var(--fg-2); }
.footer-bottom { margin-top: 64px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--fg-3); font-size: 13px; }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
/* js/animations.js drives reveals and hovers with Motion; CSS transitions on transform would fight it */
.has-motion .reveal, .has-motion .why, .has-motion .tile, .has-motion .plan { transition: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
}
@media (max-width: 1100px) {
  .plans { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .section-head.split, .faq, .cta-inner, .testimonial { grid-template-columns: 1fr; }
  .why-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #prov { grid-template-columns: 1fr; grid-auto-flow: row; grid-template-rows: none; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-brand { grid-column: 1 / -1; }
}
/* Hamburger up to 1024px; matches the hover mode in site.js (1025px) */
@media (max-width: 1024px) {
  .nav-links { display: none; }
  .menu-btn { display: inline-flex; }
  .nav-bar { width: 100%; justify-content: space-between; }
  .nav.open .nav-links {
    display: flex; flex-direction: column; gap: 0;
    position: absolute; top: calc(100% + 8px); left: 0; right: 0;
    background: rgba(255, 255, 255, 0.98); border-radius: var(--radius-card);
    box-shadow: var(--shadow-float);
    padding: 8px;
  }
  .nav.open .nav-links > a, .nav.open .nav-drop-btn { padding: 14px 16px; color: var(--color-ink); }
  .nav.open .nav-links > .nav-signin { margin: 4px 0 0; padding-left: 16px; box-shadow: inset 0 1px 0 var(--color-hairline); }
  /* In the menu sheet the module list opens inline under Produk */
  .nav-drop-btn { width: 100%; justify-content: space-between; }
  .drop-panel { position: static; padding: 0 0 4px; }
  .drop-menu { width: auto; padding: 0 0 0 8px; background: none; box-shadow: none; }
  .drop-item { padding: 8px; }
  .drop-icon { width: 32px; height: 32px; border-radius: 10px; }
  .drop-icon svg { width: 16px; height: 16px; }
  .drop-item small { display: none; }
  .drop-all { margin-top: 0; padding: 10px 8px; border-top: 0; }
}
@media (max-width: 640px) {
  .plans { grid-template-columns: 1fr; }
  .plan-for { min-height: 0; }
  .billing button { padding: 0 14px; }
  .nav { top: 16px; }
  .nav-bar { gap: 16px; padding: 0 8px 0 16px; height: 56px; }
  .brand .badge { display: none; }
  .phone { bottom: -12%; }
  .hero-cta { width: 100%; flex-direction: column; }
  .hero-cta .btn { width: 100%; }
  .why-list, .pains { grid-template-columns: 1fr; }
  .ingest { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prov-row { grid-template-columns: 96px 1fr 56px; gap: 8px; }
  .scrub { padding: 16px; gap: 16px; }
  .events { padding: 8px 16px 16px; }
  .event { grid-template-columns: 48px 1fr; gap: 8px 16px; }
  .event p { grid-column: 2; }
  .event .badge { grid-column: 2; grid-row: 1; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal { opacity: 1; transform: none; }
}

/* Language switch in the nav: "ID / EN", the current language in ink, the other one muted and linked */
.lang-switch { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; color: var(--color-body-gray); transition: background 150ms ease, color 150ms ease; }
.lang-switch i { font-style: normal; }
.lang-switch i + i::before { content: '/'; margin: 0 6px; color: var(--color-silver); }
.lang-switch .on { color: var(--color-ink); }
.lang-switch:hover { background: var(--color-cloud-card); color: var(--color-primary); }

/* Solution pages (solusi/*, built by tools/build.py): three pain points, four feature links, a short timeline */
.sol-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sol-card { padding: 32px; border-radius: var(--radius-card); background: var(--color-cloud-card); }
.sol-card:nth-child(2) { background: var(--wash-peach); }
.sol-card:nth-child(3) { background: var(--wash-lavender); }
.sol-card h3, .sol-feats h3 { font-size: 22px; font-weight: 600; line-height: 1.2; letter-spacing: -0.01em; }
.sol-card p, .sol-feats p { margin-top: 12px; color: var(--fg-2); font-size: 17px; line-height: 1.5; }
.sol-feats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; max-width: 960px; margin: 0 auto; }
.sol-feats li { padding: 28px 0; border-top: 1px solid var(--line); }
.sol-feats a { text-decoration: underline; text-decoration-color: var(--color-silver); text-underline-offset: 5px; transition: text-decoration-color 150ms ease; }
.sol-feats a:hover { text-decoration-color: var(--color-primary); }
.sol-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; counter-reset: step; }
.sol-steps li { position: relative; padding: 28px 24px; border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--line); }
.sol-steps b { display: block; font-size: 15px; font-weight: 600; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.sol-steps p { margin-top: 10px; color: var(--fg-2); font-size: 16px; line-height: 1.5; }
@media (max-width: 960px) {
  .sol-cards, .sol-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .sol-cards, .sol-feats, .sol-steps { grid-template-columns: 1fr; }
  .sol-card { padding: 24px; }
}

/* Articles (berita/<slug>/): a narrow reading column with a sticky call to action beside it */
.post-hero .pp-head h1 { max-width: 22ch; font-size: clamp(36px, 4.8vw, 60px); }
.post-meta { margin-top: 24px; font-size: 14px; color: var(--fg-3); }
.post-wrap { display: grid; grid-template-columns: minmax(0, 680px) 280px; justify-content: center; gap: 64px; align-items: start; padding-top: var(--spacing-16); padding-bottom: var(--section); }
.prose { font-size: 18px; line-height: 1.7; color: #374151; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 2em; font-size: 28px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: var(--color-ink); }
.prose h3 { margin-top: 1.6em; font-size: 21px; font-weight: 600; line-height: 1.3; color: var(--color-ink); }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose strong { font-weight: 600; color: var(--color-ink); }
.prose a { color: var(--color-primary); text-decoration: underline; text-decoration-color: rgba(54, 148, 119, 0.35); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: currentColor; }
.prose ul, .prose ol { padding-left: 1.4em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose li + li { margin-top: 0.5em; }
.prose li::marker { color: var(--color-primary); }
.table-wrap { overflow-x: auto; border-radius: var(--radius-card-sm); box-shadow: inset 0 0 0 1px var(--line); }
.prose table { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.45; }
.prose th, .prose td { padding: 12px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.prose thead th { background: var(--color-cloud-card); font-weight: 600; color: var(--color-ink); }
.prose tbody th { font-weight: 600; color: var(--color-ink); }
.prose tr:last-child > * { border-bottom: 0; }
.post-cta { position: sticky; top: 112px; display: grid; gap: 12px; justify-items: start; padding: 28px; border-radius: var(--radius-card); background: var(--color-cloud-card); }
.post-cta-title { font-size: 20px; font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; }
.post-cta p:not(.post-cta-title) { color: #4b5563; font-size: 15px; line-height: 1.5; } /* darker than --fg-2 for contrast on the mint card */
.post-cta .btn { margin-top: 4px; }
.post-related { padding-top: 0; }
.related-list { margin-top: var(--spacing-40); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.related-list a { display: grid; gap: 10px; height: 100%; padding: 28px; border-radius: var(--radius-card); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 200ms ease, background 200ms ease; }
.related-list a:hover { background: var(--color-cloud-card); box-shadow: inset 0 0 0 1px transparent; }
.related-list b { font-size: 19px; font-weight: 600; line-height: 1.3; }
.related-date { font-size: 14px; color: var(--fg-3); }
@media (max-width: 960px) {
  .post-wrap { grid-template-columns: minmax(0, 680px); gap: 40px; }
  .post-cta { position: static; }
  .related-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .prose { font-size: 17px; }
  .prose h2 { font-size: 24px; }
}

/* 404 */
.nf { min-height: 70vh; display: grid; align-content: center; }
/* Phones and small tablets: the nav keeps logo, language switch and menu; the demo button moves into the menu */
@media (max-width: 640px) {
  .nav-actions > .btn { display: none; }
  .lang-switch { padding: 0 8px; }
}


/* FAQ: centered heading over a narrower list (reads as one column, matches the centered sections around it) */
.faq { max-width: 880px; }
.faq .section-head { margin-left: auto; margin-right: auto; text-align: center; }

/* Lead article without an image: a mint text card, so the featured slot still carries weight */
.news-lead.no-thumb { margin-right: 40px; padding: 40px; border-radius: var(--radius-card); background: radial-gradient(60% 80% at 90% 10%, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 70%), linear-gradient(135deg, #d9f2e8, #eef7f3); }
.news-lead.no-thumb h3 { font-size: clamp(26px, 2.8vw, 38px); }
.news-lead.no-thumb .news-excerpt { -webkit-line-clamp: 3; line-clamp: 3; }
@media (max-width: 960px) { .news-lead.no-thumb { margin-right: 0; padding: 28px; } }

/* Article cover image from the CMS, between the header and the text */
.post-cover { position: relative; z-index: 1; margin-top: calc(var(--spacing-40) * -1); margin-bottom: var(--spacing-48); } /* drawn above the hero it overlaps, so its top corners show */
.post-cover img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius-card); }
/* Rich text from the CMS wraps its output in one div */
.prose > .payload-richtext > * + * { margin-top: 1.1em; }
.prose > .payload-richtext h2 + *, .prose > .payload-richtext h3 + * { margin-top: 0.6em; }
.prose > .payload-richtext h2 { margin-top: 2em; }
.prose > .payload-richtext h3 { margin-top: 1.6em; }
.prose img { max-width: 100%; height: auto; border-radius: var(--radius-card-sm); }
.prose table { display: block; overflow-x: auto; }

/* Contact page: what happens next on the left, the form on the right */
.contact-sec { padding-top: 0; overflow: visible; } /* the form card sits on the top edge; its outline (a box-shadow) must not be clipped */
.contact { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.contact-info h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }
.contact-steps { margin-top: 20px; display: grid; gap: 14px; counter-reset: step; }
.contact-steps li { position: relative; padding-left: 40px; font-size: 16px; line-height: 1.5; color: var(--fg-2); counter-increment: step; }
.contact-steps li::before { content: counter(step); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-mint); color: var(--color-primary); font-size: 14px; font-weight: 600; }
.contact-alt { margin-top: 40px; display: grid; gap: 20px; padding-top: 32px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.6; color: var(--fg-2); }
.contact-alt b { display: block; margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--fg-3); }
.contact-alt a { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-silver); text-underline-offset: 4px; }
.contact-form { display: grid; gap: 18px; padding: 40px; border-radius: var(--radius-card); background: var(--color-paper-white); box-shadow: 0 0 0 1px var(--line), 0 40px 80px -48px rgba(17, 24, 39, 0.3); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field { display: grid; gap: 8px; }
.field > span { font-size: 14px; font-weight: 500; color: var(--color-ink); }
.field em { font-style: normal; font-weight: 400; color: var(--fg-3); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; border: 1px solid var(--color-hairline); border-radius: 12px; background: #fbfcfc;
  font: inherit; font-size: 16px; color: var(--color-ink); transition: border-color 150ms ease, box-shadow 150ms ease;
}
.field textarea { resize: vertical; min-height: 120px; line-height: 1.5; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(54, 148, 119, 0.15); background: var(--color-paper-white); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--color-coral-signal); }
.check { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.check input { flex: none; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--color-primary); }
.check a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.contact-form .btn { justify-self: start; min-width: 160px; }
.contact-form .btn:disabled { opacity: 0.6; cursor: progress; }
.form-status { min-height: 1.5em; font-size: 15px; line-height: 1.5; color: var(--fg-2); }
.form-status[data-kind="ok"] { color: var(--color-primary); font-weight: 500; }
.form-status[data-kind="error"] { color: #b91c1c; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 900px) {
  .contact { grid-template-columns: 1fr; gap: 40px; }
  .contact-info { order: 2; }
}
@media (max-width: 640px) {
  .contact-form { padding: 24px; }
  .field-row { grid-template-columns: 1fr; }
}

/* ---------- Hero: a question, a search box that types example keywords, sample results ---------- */
.hero { position: relative; overflow: hidden; text-align: center; padding: clamp(128px, 16vh, 170px) 0 clamp(64px, 9vh, 104px); background: linear-gradient(#e3f2ea, #f3f9f5 70%, #fff); }
/* Qola doodle at the edges only: cleared behind the copy and faded out at the bottom */
.hero-doodle {
  position: absolute; inset: 0; pointer-events: none;
  background: url(/brand/doodle.svg) center top / 600px auto repeat; opacity: 0.16;
  -webkit-mask-image: radial-gradient(48% 62% at 50% 46%, transparent 55%, #000 100%), linear-gradient(#000 70%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(48% 62% at 50% 46%, transparent 55%, #000 100%), linear-gradient(#000 70%, transparent);
  mask-composite: intersect;
}
/* A soft light pool behind the content keeps the text crisp over the sky */
.hero::after { content: ""; position: absolute; left: 50%; top: 46%; width: min(1000px, 96vw); height: 78%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0)); pointer-events: none; }
.hero-inner { position: relative; z-index: 1; display: grid; justify-items: center; }
.hero-title { font-weight: 700; font-size: clamp(42px, 5.6vw, 76px); line-height: 1.02; letter-spacing: -0.035em; color: var(--color-ink); text-wrap: balance; }
/* Second line in brand green with a sage highlighter */
.hero-mark { color: var(--color-primary); background: linear-gradient(transparent 62%, rgba(207, 223, 188, 0.9) 62%, rgba(207, 223, 188, 0.9) 92%, transparent 92%); padding: 0 0.06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.hero-lede { margin-top: 22px; max-width: 540px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; color: #374151; }
.hero-demo { width: min(680px, 100%); margin-top: 36px; }
.hero-search { display: flex; align-items: center; gap: 14px; padding: 12px 12px 12px 18px; border-radius: 22px; background: #fff; box-shadow: 0 0 0 1px rgba(44, 112, 91, 0.18), 0 30px 60px -30px rgba(17, 24, 39, 0.45); font-size: clamp(18px, 2vw, 22px); font-weight: 500; color: var(--color-ink); text-align: left; }
.hero-search img { width: 30px; height: auto; flex: none; }
.hero-search:focus-within { box-shadow: 0 0 0 2px var(--color-primary), 0 30px 60px -30px rgba(17, 24, 39, 0.45); }
.hero-field { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.hero-input { flex: 1; min-width: 0; padding: 6px 0; border: 0; background: none; outline: none; font: inherit; color: inherit; transition: background 150ms ease; }
/* Demo caret: solid while typing, blinking while it waits; gone once the visitor uses the box */
.hero-caret { position: absolute; left: 0; top: 50%; width: 2px; height: 1.15em; margin-top: -0.575em; border-radius: 1px; background: var(--color-primary); pointer-events: none; transition: transform 60ms linear; animation: hero-blink 1.05s steps(1) infinite; }
.is-typing .hero-caret { animation: none; }
.is-user .hero-caret, .is-selected .hero-caret { display: none; }
@keyframes hero-blink { 50% { opacity: 0; } }
/* "Select all" before the next keyword: a highlight as wide as the text, behind it */
.hero-field::before { content: ""; position: absolute; left: -2px; top: 50%; width: calc(var(--typed-w, 0px) + 4px); height: 1.35em; margin-top: -0.675em; border-radius: 5px; background: rgba(207, 223, 188, 0.9); opacity: 0; pointer-events: none; transition: opacity 120ms ease; }
.is-selected .hero-field::before { opacity: 1; }
.hero-input { position: relative; }
.hero-input::placeholder { color: #9ca3af; }
/* Text longer than the field ends in an ellipsis instead of being cut mid-word */
.hero-input, .hero-input::placeholder { text-overflow: ellipsis; }
.hero-go { flex: none; padding: 12px 22px; border-radius: 14px; background: var(--color-primary); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer; transition: background 150ms ease, transform 150ms ease, box-shadow 150ms ease; }
.hero-go:hover { background: var(--color-primary-hover); box-shadow: 0 8px 20px -10px rgba(44, 112, 91, 0.7); }
/* The demo "presses" the button before loading results */
.hero-go.is-pressed { transform: scale(0.94); background: var(--color-primary-hover); box-shadow: 0 0 0 4px rgba(44, 112, 91, 0.2); }
.hero-results { margin-top: 14px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; text-align: left; }
.hero-results li { display: grid; align-content: start; gap: 4px; padding: 14px 16px; border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.06), 0 12px 28px -20px rgba(17, 24, 39, 0.35); transition: opacity 300ms ease; }
.hero-results small { font-size: 12px; color: var(--color-body-gray); }
.hero-results b { font-size: 22px; font-weight: 700; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.hero-results em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--color-body-gray); }
.hero-results em.up { color: #b91c1c; }
.hero-results .hero-topic { font-size: 17px; line-height: 1.3; }
.hero-results li { position: relative; overflow: hidden; }
/* Loading: the figures fade out and skeleton lines shimmer in their place */
.hero-results li > * { transition: opacity 200ms ease; }
.hero-results.is-loading li > * { opacity: 0; }
.hero-results li::after {
  content: ""; position: absolute; left: 16px; right: 16px; top: 16px; height: 62px; opacity: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)) -150% 0 / 60% 100% no-repeat,
    linear-gradient(#dfe7e4, #dfe7e4) 0 0 / 45% 10px no-repeat,
    linear-gradient(#dfe7e4, #dfe7e4) 0 24px / 70% 16px no-repeat,
    linear-gradient(#dfe7e4, #dfe7e4) 0 52px / 30% 10px no-repeat;
  transition: opacity 200ms ease;
}
.hero-results.is-loading li::after { opacity: 1; animation: hero-shimmer 900ms ease-in-out infinite; }
@keyframes hero-shimmer { to { background-position: 250% 0, 0 0, 0 24px, 0 52px; } }
.hero-bar { display: flex; gap: 2px; height: 10px; margin: 8px 0 4px; border-radius: 5px; overflow: hidden; }
.hero-bar i { display: block; transition: width 500ms var(--ease); }
.hero-bar .pos { background: #34d399; } .hero-bar .neu { background: #cbd5e1; } .hero-bar .neg { background: #f87171; }
.hero-sources { margin-top: 32px; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #4b5563; }
.hero-sources ul { display: flex; gap: 8px; }
.hero-sources i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--c); box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.06), 0 6px 14px -8px rgba(17, 24, 39, 0.3); }
.hero-sources svg { width: 16px; height: 16px; fill: currentColor; }
@media (max-width: 640px) {
  .hero-doodle { -webkit-mask-image: linear-gradient(#000, transparent 30%); mask-image: linear-gradient(#000, transparent 30%); }
  .hero-go { padding: 10px 14px; font-size: 15px; }
  /* 16px keeps iOS from zooming into the field; a smaller icon and tighter gaps leave the text more room */
  .hero-search { padding: 10px 10px 10px 14px; gap: 8px; font-size: 16px; }
  .hero-search img { width: 24px; }
}
/* Smallest phones: the field needs the icon's room for the text */
@media (max-width: 360px) {
  .hero-search img { display: none; }
  .hero-results { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-results li:nth-child(3) { display: none; }
  .hero-results b { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .hero-results.is-loading li::after, .hero-caret { animation: none; } }

/* ---------- Nav hierarchy: content links, sign-in, language switch and the CTA each read differently ---------- */
@media (min-width: 1025px) {
  .nav-links { align-items: center; gap: 2px; font-size: 15px; }
  .nav-links > a, .nav-drop-btn { position: relative; padding: 8px 14px; color: #4b5563; }
  .nav-links > a:hover, .nav-drop-btn:hover, .nav-drop.open .nav-drop-btn { color: var(--color-primary); background: var(--color-mint); }
  /* Current page or section: the link in brand green, a little heavier; no underline */
  .nav-links > a.active, .nav-links > a[aria-current="page"], .nav-drop-btn.active { color: var(--color-primary); font-weight: 600; }
  /* Sign-in (for existing clients) sits with the actions on the right as a quiet text link;
     the copy inside the links list is only for the mobile menu */
  .nav-links > .nav-signin { display: none; }
  .nav-actions .nav-signin-desk { display: inline-flex; padding: 8px 6px; font-size: 15px; font-weight: 500; color: #4b5563; transition: color 150ms ease; }
  .nav-signin-desk:hover { color: var(--color-primary); }
  /* Language: a small segmented switch */
  .lang-switch { height: 34px; padding: 3px; gap: 0; border-radius: var(--radius-pill); box-shadow: inset 0 0 0 1px var(--color-hairline); font-size: 13px; }
  .lang-switch i { display: grid; place-items: center; min-width: 32px; height: 28px; padding: 0 8px; border-radius: var(--radius-pill); color: var(--color-body-gray); transition: background 150ms ease, color 150ms ease; }
  .lang-switch i + i::before { content: none; }
  .lang-switch .on { background: var(--color-mint); color: var(--color-primary); font-weight: 700; }
  .lang-switch:hover { background: none; }
  .lang-switch:hover i:not(.on) { color: var(--color-primary); }
  .nav-actions { gap: 12px; }
  /* Narrow desktops: sign-in shows as its icon (name kept for screen readers) so the links can stay centered */
  @media (max-width: 1199px) {
    .nav-signin-desk span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .nav-actions .nav-signin-desk { padding: 9px; border-radius: 50%; }
    .nav-actions .nav-signin-desk:hover { background: var(--color-mint); }
  }
  /* Links centered between the logo and the actions: equal space on both sides reads as centered */
  .nav-links { margin: 0 auto; }
}
.nav-signin { display: inline-flex; align-items: center; gap: 6px; }
.nav-signin-desk { display: none; }
.nav-signin svg { flex: none; width: 15px; height: 15px; }
.nav-cta { gap: 8px; height: 44px; padding: 0 18px 0 20px; font-weight: 600; }
.nav-cta svg { width: 12px; height: 12px; transition: transform 200ms var(--ease); }
.nav-cta:hover svg { transform: translateX(3px); }
/* Hero fills the first screen: content centered in the space under the nav, doodle running to the bottom edge */
@media (min-width: 641px) and (min-height: 640px) {
  .hero { min-height: 100svh; display: grid; align-content: center; padding: 104px 0 56px; }
  .hero-doodle {
    -webkit-mask-image: radial-gradient(48% 62% at 50% 50%, transparent 55%, #000 100%), linear-gradient(#000 82%, transparent);
    mask-image: radial-gradient(48% 62% at 50% 50%, transparent 55%, #000 100%), linear-gradient(#000 82%, transparent);
  }
  .hero::after { top: 52%; }
}

/* ---------- Heading hierarchy: hero and closing statement stay large; section headings get a small green label and
   step down one size; headings inside feature cards step down again ---------- */
.eyebrow-label { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); }
.section-head .eyebrow-label + .h2, .news-head .eyebrow-label + .h2 { margin-top: -6px; }
.section .h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; letter-spacing: -0.025em; }
.section .h2.h3-card { font-size: clamp(26px, 2.5vw, 34px); line-height: 1.12; }
.section-head .lede { font-size: clamp(17px, 1.5vw, 19px); }
.section-head { margin-bottom: var(--spacing-48); }
.convo-eyebrow.eyebrow-label { font-size: 13px; }
.section .tile h3 { font-size: clamp(26px, 2.5vw, 34px); line-height: 1.12; letter-spacing: -0.025em; }


/* Merged "how it works" cards: a small link under each text, and the AI insight card as the third visual */
.tile-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 15px; font-weight: 600; color: var(--color-primary); }
.tile-more svg { width: 12px; height: 12px; transition: transform 200ms var(--ease); }
.tile-more:hover svg { transform: translateX(3px); }
.tile-insight { padding: 4px 4px 0; box-shadow: none; border-radius: 0; }
.tile-insight h4 { margin-top: 8px; font-size: 17px; font-weight: 600; line-height: 1.3; }
.tile-insight ul { margin: 14px 0 16px; }
.tile-insight li { font-size: 14px; line-height: 1.45; }
.tile-insight .ui-label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-body-gray); }
/* Step cards: number, title, text, link, then one visual of the same height rising from the card's bottom edge */
.tile, .section .tile { min-height: 0; padding-top: 32px; }
.tile > p { margin-bottom: 0; }
.tile-num { align-self: flex-start; margin-bottom: 18px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--color-mint); color: var(--color-primary); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.tile .tile-shot, .tile .phone-tile { margin-top: auto; }
.tile-more { margin-bottom: 36px; }
.tile .tile-shot { height: 280px; border-radius: 16px 16px 0 0; box-shadow: 0 0 0 1px #e6ebe9, 0 18px 40px -24px rgba(17, 24, 39, 0.22); }
.tile .tile-ui { padding: 22px 22px 0; }
.tile .phone-tile { bottom: auto; width: 200px; margin-bottom: -132px; }
.kw-list li { align-items: center; padding: 11px 0; }
.kw-up, .kw-flat { padding: 3px 9px; border-radius: var(--radius-pill); font-size: 12px; }
.kw-up { background: var(--color-mint); }
.kw-flat { background: #f1f3f4; }
.ins-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-coral-signal); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }
/* Cara kerja sits on a light mint band that fades in and out, so the white cards lift off it */
/* Cara kerja and the AI Assistant section below it share one mint zone: it fades in here and out under the AI Assistant */
#cara-kerja { background: linear-gradient(#fff, #f2f8f5 30%); }
#cara-kerja .tile { box-shadow: 0 0 0 1px #d8e2de, 0 1px 3px rgba(17, 24, 39, 0.05), 0 20px 40px -32px rgba(17, 24, 39, 0.25); }
#cara-kerja .tile:hover { box-shadow: var(--card-lift); }
/* Card stacks on small screens: a list with data-stack="<max width>" becomes a stack. The front card is whole, the
   next two peek out behind it on the right, smaller. Swipe the front card (or tap a dot) and it goes to the back;
   public/js/home.js sets data-pos 0, 1, 2... Positions use the translate/scale properties so they add to Motion's
   reveal transform instead of fighting it. */
.stack-dots { display: none; justify-content: center; gap: 4px; margin-top: 20px; }
.stack-dots button { display: grid; place-items: center; width: 30px; height: 24px; }
.stack-dots button::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-pill); background: #cfdcd7; transition: width 250ms var(--ease), background 250ms ease; }
.stack-dots button[aria-current="true"]::before { width: 22px; background: var(--color-primary); }
@media (max-width: 960px) {
  [data-stack="960"] { display: grid; grid-template-areas: "card"; grid-template-columns: minmax(0, 1fr); padding: 4px 0 8px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
  [data-stack="960"] > * {
    grid-area: card; width: calc(100% - 28px); max-width: 520px; transform-origin: right center;
    transition: translate 450ms var(--ease), scale 450ms var(--ease), filter 450ms ease, box-shadow 200ms ease;
  }
  [data-stack="960"] > [data-pos="0"] { z-index: 3; }
  [data-stack="960"] > [data-pos="1"] { z-index: 2; translate: 14px 0; scale: 0.94; filter: brightness(0.985); }
  [data-stack="960"] > [data-pos="2"] { z-index: 1; translate: 28px 0; scale: 0.88; filter: brightness(0.97); }
  [data-stack="960"] > [data-pos="3"] { z-index: 0; translate: 28px 0; scale: 0.88; visibility: hidden; }
  [data-stack="960"] > :not([data-pos="0"]) * { pointer-events: none; }
  [data-stack="960"] > .dragging { transition: none; }
  [data-stack="960"] + .stack-dots { display: flex; }
}
@media (max-width: 640px) {
  [data-stack="640"] { display: grid; grid-template-areas: "card"; grid-template-columns: minmax(0, 1fr); padding: 4px 0 8px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
  [data-stack="640"] > * {
    grid-area: card; width: calc(100% - 28px); max-width: 520px; transform-origin: right center;
    transition: translate 450ms var(--ease), scale 450ms var(--ease), filter 450ms ease, box-shadow 200ms ease;
  }
  [data-stack="640"] > [data-pos="0"] { z-index: 3; }
  [data-stack="640"] > [data-pos="1"] { z-index: 2; translate: 14px 0; scale: 0.94; filter: brightness(0.985); }
  [data-stack="640"] > [data-pos="2"] { z-index: 1; translate: 28px 0; scale: 0.88; filter: brightness(0.97); }
  [data-stack="640"] > [data-pos="3"] { z-index: 0; translate: 28px 0; scale: 0.88; visibility: hidden; }
  [data-stack="640"] > :not([data-pos="0"]) * { pointer-events: none; }
  [data-stack="640"] > .dragging { transition: none; }
  [data-stack="640"] + .stack-dots { display: flex; }
}
@media (prefers-reduced-motion: reduce) { [data-stack] > * { transition: none; } }
.kw-list li > span:last-child { flex: none; white-space: nowrap; }
.kw-list li { gap: 12px; }
@media (max-width: 640px) {
  .tile .tile-ui { padding: 18px 16px 0; }
  .kw-head b { font-size: 13px; }
  .kw-btn { padding: 5px 8px; font-size: 11px; }
  .kw-list li { font-size: 13px; }
}

/* ---------- Who it is for: four cards ---------- */
.who-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.who-card { display: flex; flex-direction: column; padding: 28px 24px; border-radius: var(--radius-card); background: var(--color-paper-white); box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow 200ms ease, background 200ms ease; }
.who-card:hover { background: #fbfdfc; box-shadow: inset 0 0 0 1px rgba(44, 112, 91, 0.3), 0 20px 40px -28px rgba(17, 24, 39, 0.35); }
/* Who it is for: "one dashboard, many teams". A small Q badge under the heading branches into four dashed lines, one
   to each card, with the dashes flowing down like data. Wide screens only (four cards in a row). */
.who-hub { display: none; }
@media (min-width: 1101px) {
  #solusi .section-head { margin-bottom: 18px; }
  .who-hub { display: block; position: relative; height: 92px; }
  .who-hub-q {
    position: absolute; left: 50%; top: 0; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; margin-left: -20px;
    border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #e3ebe8, 0 8px 20px -10px rgba(44, 112, 91, 0.45);
  }
  .who-hub-q img { width: 30px; height: 30px; }
  .who-hub svg { position: absolute; left: 0; top: 20px; width: 100%; height: 72px; overflow: visible; }
  .who-hub path { fill: none; stroke: #9cc8b6; stroke-width: 1.5; stroke-dasharray: 3 6; stroke-linecap: round; animation: who-flow 1.6s linear infinite; }
}
@keyframes who-flow { to { stroke-dashoffset: -18; } }
/* Background: a faint dot grid, like graph paper for data, fading out to the edges around a soft mint glow */
#solusi::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(44, 112, 91, 0.08), rgba(44, 112, 91, 0)) center 55% / 80% 70% no-repeat,
    radial-gradient(#d3e3dc 1px, transparent 1.4px) 0 0 / 22px 22px;
  -webkit-mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 35%, transparent 80%);
  mask-image: radial-gradient(ellipse 75% 70% at 50% 50%, #000 35%, transparent 80%);
}
#solusi > .wrap { position: relative; z-index: 1; }
@media (max-width: 640px) { #solusi::before { opacity: 0.6; } }
/* Cards tilt toward the pointer */
.who-grid { perspective: 1200px; }
/* Room to breathe: wider gutters, the mint stage inset from the card edge, compact chips that sit in one or two rows,
   all four cards the same height */
@media (min-width: 641px) {
  #solusi .wrap { max-width: 1280px; }
  .who-grid { gap: 24px; }
  #solusi .who-card { padding: 16px 16px 24px; }
  #solusi .who-card > :not(.who-shot) { margin-left: 8px; margin-right: 8px; }
  .who-shot { margin: 0; height: 156px; padding: 16px; }
  #solusi .who-card h3 { margin-top: 22px; }
  #solusi .who-uses { gap: 6px 5px; }
  #solusi .who-uses li { padding: 3px 9px; font-size: 11.5px; }
}
.who-card { transition: box-shadow 200ms ease, background 200ms ease, rotate 300ms var(--ease); }
.who-card.tilting { transition: box-shadow 200ms ease, background 200ms ease; }
/* Snippets come alive once their card is in (.in comes from the reveal); without motion they simply show */
.who-card.in .ws-dot { animation: ws-pulse 1.8s ease-out infinite; }
.who-card.in .ws-bars i { transform-origin: bottom; animation: ws-grow 700ms var(--ease) backwards; }
.who-card.in .ws-bars i:nth-child(2) { animation-delay: 60ms; } .who-card.in .ws-bars i:nth-child(3) { animation-delay: 120ms; }
.who-card.in .ws-bars i:nth-child(4) { animation-delay: 180ms; } .who-card.in .ws-bars i:nth-child(5) { animation-delay: 240ms; }
.who-card.in .ws-bars i:nth-child(6) { animation-delay: 300ms; } .who-card.in .ws-bars i:nth-child(7) { animation-delay: 360ms; }
.who-card.in .ws-sov i { transform-origin: left; animation: ws-grow-x 800ms var(--ease) 200ms backwards; }
.who-card.in .ws-list span { animation: ws-pop 400ms var(--ease) backwards; }
.who-card.in .ws-list p:nth-child(1) span { animation-delay: 400ms; } .who-card.in .ws-list p:nth-child(2) span { animation-delay: 900ms; }
.who-card.in .ws-list p:nth-child(3) span { animation-delay: 1400ms; }
@keyframes ws-pulse { 0% { box-shadow: 0 0 0 0 rgba(248, 113, 113, 0.5); } 70%, 100% { box-shadow: 0 0 0 7px rgba(248, 113, 113, 0); } }
@keyframes ws-grow { from { transform: scaleY(0); } }
@keyframes ws-grow-x { from { transform: scaleX(0); } }
@keyframes ws-pop { from { opacity: 0; transform: scale(0.7); } }
/* The dashboard snippet at the top of each card: a white mini card on a mint stage, all four the same height */
.who-shot { display: flex; align-items: center; height: 148px; margin: -8px -8px 0; padding: 14px; border-radius: 16px; background: linear-gradient(160deg, #f3f9f6, #e9f4ef); }
.ws-card { width: 100%; padding: 12px 14px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.05), 0 10px 24px -14px rgba(17, 24, 39, 0.3); font-size: 12px; line-height: 1.4; }
.ws-head { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--fg-2); }
.ws-head span { margin-left: auto; font-weight: 500; color: var(--color-body-gray); }
.ws-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--color-coral-signal); box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.2); }
.ws-msg { margin-top: 6px; font-size: 12.5px; font-weight: 600; color: var(--color-ink); }
.ws-tag { display: inline-block; margin-top: 8px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--color-mint); color: var(--color-primary); font-size: 11px; font-weight: 600; }
.ws-num { margin-top: 2px; font-size: 20px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.ws-num em { font-size: 11px; font-style: normal; font-weight: 600; color: var(--color-primary); letter-spacing: 0; }
.ws-bars { display: flex; align-items: flex-end; gap: 4px; height: 34px; margin-top: 6px; }
.ws-bars i { flex: 1; border-radius: 3px 3px 1px 1px; background: #cfe6dc; }
.ws-bars i:last-child { background: var(--color-primary); }
.ws-sov { display: flex; gap: 2px; height: 10px; margin-top: 10px; border-radius: 5px; overflow: hidden; }
.ws-sov i:nth-child(1), .ws-leg li:nth-child(1) i { background: var(--color-primary); }
.ws-sov i:nth-child(2), .ws-leg li:nth-child(2) i { background: #8fc1ad; }
.ws-sov i:nth-child(3), .ws-leg li:nth-child(3) i { background: #d5e4de; }
.ws-leg { display: grid; gap: 3px; margin-top: 9px; }
.ws-leg li { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fg-2); }
.ws-leg li i { width: 7px; height: 7px; border-radius: 2px; }
.ws-leg b { margin-left: auto; font-weight: 600; color: var(--color-ink); font-variant-numeric: tabular-nums; }
.ws-list { display: grid; gap: 7px; }
.ws-list p { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: var(--color-ink); }
.ws-list p i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; background: var(--color-mint); color: var(--color-primary); font-size: 9.5px; font-style: normal; font-weight: 700; }
.ws-list p span { margin-left: auto; padding: 2px 7px; border-radius: var(--radius-pill); background: #ecfdf3; color: #15803d; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.who-card h3 { margin-top: 18px; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.who-card blockquote { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--fg-2); }
.who-uses { margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.who-uses li { padding: 4px 10px; border-radius: var(--radius-pill); background: var(--color-mint); font-size: 12px; font-weight: 500; color: var(--color-primary); }
/* The team name links the whole card (its ::after covers the card); a round arrow sits beside it */
.who-card { position: relative; cursor: pointer; }
.who-card h3 { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.who-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.who-link:focus-visible { outline: none; }
.who-card:has(.who-link:focus-visible) { box-shadow: 0 0 0 2px var(--color-primary); }
.who-go { flex: none; display: grid; place-items: center; width: 28px; height: 28px; margin-top: -2px; border-radius: 50%; background: var(--color-mint); color: var(--color-primary); transition: background 200ms ease, color 200ms ease, translate 200ms var(--ease); }
.who-go svg { width: 12px; height: 12px; }
.who-card:hover .who-go { background: var(--color-primary); color: #fff; translate: 3px 0; }
@media (max-width: 1100px) { .who-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .who-grid { grid-template-columns: 1fr; } }


/* ---------- One card system for the whole home page ----------
   Every card: white, 1px hairline, 24px corners, no colored fill; brand green only as an accent.
   Section headings are all centered; the content column is the same 1200px everywhere. */
:root { --card-line: 0 0 0 1px #d8e2de, 0 1px 3px rgba(17, 24, 39, 0.05); --card-lift: 0 0 0 1px rgba(44, 112, 91, 0.28), 0 24px 48px -32px rgba(17, 24, 39, 0.35); }
.tile, .tile-coral, .tile-lilac, .tile-blue { border-radius: 24px; background: #fff; box-shadow: var(--card-line); }
.tile-shot { box-shadow: 0 0 0 1px #eef1f0; }
.who-card { box-shadow: var(--card-line); }
.who-card:hover, .tile:hover, .plan:hover { box-shadow: var(--card-lift); }
.plan, .plan.featured { background: #fff; box-shadow: var(--card-line); border-radius: 24px; color: var(--color-ink); }
.plan.featured { box-shadow: 0 0 0 2px var(--color-primary), 0 24px 48px -32px rgba(44, 112, 91, 0.45); }
.plan-badge { background: var(--color-primary); color: #fff; font-weight: 600; }
.plan .btn-outline { border-color: #dfe5e3; }
.plan.featured .btn-dark { background: var(--color-primary); color: #fff; }

/* AI Assistant: the dashboard's AI Assistant page (dashboard-qola chat.vue) in a browser window, on a light mint band
   with a soft glow. Inside the window the app's own type (Plus Jakarta Sans), green, bubbles and doodle background are
   used. Persona questions float around the window on wide screens; under 1180px they are a row under it (a swipe row
   on phones). */
#masalah .section-head { margin-bottom: 40px; }
#masalah { background: linear-gradient(#f2f8f5 65%, #fff); }
#masalah .convo { max-width: 820px; margin: 0 auto; padding: 0; }
#masalah .convo::before {
  content: ""; position: absolute; z-index: 0; inset: -10% -18% 0; pointer-events: none;
  background: radial-gradient(closest-side, rgba(44, 112, 91, 0.16) 55%, rgba(44, 112, 91, 0.06) 78%, rgba(44, 112, 91, 0));
}
.app {
  --app-g: #2c705b; --app-soft: #e8f3ef; --app-line: #e5e7eb; --app-mute: #6b7280;
  position: relative; z-index: 1; margin: 0; overflow: hidden; border-radius: 16px; background: #fff;
  font-family: 'Plus Jakarta Sans', var(--font-ui); color: #111827; text-align: left;
  box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.08), 0 50px 100px -50px rgba(17, 24, 39, 0.45), 0 20px 40px -30px rgba(17, 24, 39, 0.2);
}
.app-chrome { position: relative; display: flex; align-items: center; height: 38px; padding: 0 14px; background: #f3f4f6; border-bottom: 1px solid var(--app-line); }
.app-chrome .chat-dots i:nth-child(1) { background: #ff5f57; } .app-chrome .chat-dots i:nth-child(2) { background: #febc2e; } .app-chrome .chat-dots i:nth-child(3) { background: #28c840; }
.app-url { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; padding: 4px 14px; border-radius: 8px; background: #fff; font-size: 12px; color: var(--app-mute); box-shadow: 0 0 0 1px var(--app-line); }
.app-url svg { width: 11px; height: 11px; }
.app-top { display: flex; align-items: center; gap: 20px; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--app-line); }
.app-top img { width: 58px; height: auto; }
.app-top nav { display: flex; gap: 18px; margin: 0 auto; font-size: 12px; color: #4b5563; }
.app-top nav span { position: relative; line-height: 48px; white-space: nowrap; }
.app-top nav .on { font-weight: 700; color: #111827; }
.app-top nav .on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 2px; background: var(--app-g); }
.app-bell { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f3f4f6; color: #374151; }
.app-bell svg { width: 15px; height: 15px; }
.app-me { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #e5e7eb; font-size: 11px; font-weight: 700; color: #4b5563; }
.app-chat { position: relative; display: flex; flex-direction: column; background: #fafafa; }
.app-chat::before { content: ""; position: absolute; inset: 0; background: url(/brand/doodle.svg) center top / 520px auto repeat; opacity: 0.07; pointer-events: none; }
.app-msgs { position: relative; display: grid; gap: 18px; padding: 24px 28px 12px; }
.app-user { justify-self: end; max-width: 75%; padding: 11px 16px; border-radius: 16px 4px 16px 16px; background: var(--app-g); color: #fff; font-size: 14px; line-height: 1.5; box-shadow: 0 4px 10px -4px rgba(44, 112, 91, 0.5); }
.app-ai { display: flex; gap: 10px; align-items: flex-start; }
.app-ai-av { flex: none; display: grid; place-items: center; width: 32px; height: 32px; margin-top: 2px; border-radius: 9px; background: #fff; color: var(--app-g); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04); }
.app-ai-av svg { width: 18px; height: 18px; }
.app-bubble { min-width: 0; max-width: 88%; padding: 14px 18px; border-radius: 4px 16px 16px 16px; background: #fff; font-size: 14px; line-height: 1.6; box-shadow: 0 4px 14px -6px rgba(17, 24, 39, 0.18), 0 0 0 1px rgba(17, 24, 39, 0.04); }
.app-bubble mark { background: none; color: var(--app-g); font-weight: 700; }
.app-bubble ol { margin: 8px 0 12px; display: grid; gap: 4px; padding-left: 20px; list-style: decimal; color: #4b5563; }
.app-bubble ol b { color: #111827; font-weight: 600; }
.app-bubble .chat-card { background: #fff; }
.app-compose { position: relative; margin-top: auto; padding: 8px 28px 14px; }
.app-quota { display: flex; align-items: center; gap: 6px; width: max-content; margin: 0 auto 10px; padding: 5px 12px; border-radius: 99px; background: #fff; font-size: 11px; color: var(--app-mute); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }
.app-quota svg { width: 11px; height: 11px; color: var(--app-g); }
.app-quota b { color: var(--app-g); font-weight: 700; }
.app-quota i { width: 56px; height: 4px; border-radius: 4px; background: #e5e7eb; overflow: hidden; }
.app-quota i span { display: block; width: 12%; height: 100%; background: var(--app-g); }
.app-input { display: flex; align-items: center; gap: 10px; padding: 11px 12px 11px 16px; border-radius: 16px; background: #fff; font-size: 13.5px; color: #111827; box-shadow: 0 4px 14px -6px rgba(17, 24, 39, 0.2), 0 0 0 1px rgba(17, 24, 39, 0.04); }
.app-input .chat-typed { flex: 1; min-height: 1.5em; }
.app-send { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: var(--app-g); }
.app-send svg { width: 14px; height: 14px; }
.app-disclaimer { margin-top: 8px; text-align: center; font-size: 11px; color: #9ca3af; }
.chat-card { position: relative; }
.chat-card-top { gap: 12px; align-items: flex-start; }
.chat-card-top b { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.chat-card-top span { flex: none; white-space: nowrap; }
.chat-spike { white-space: nowrap; padding: 2px 8px; border-radius: var(--radius-pill); background: #fef2f2; color: #dc2626; font-size: 12px; font-style: normal; font-weight: 600; }
.chat-suggest { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; margin: 20px 0 0; }
.chat-suggest > span { flex: none; font-size: 13px; font-weight: 500; color: var(--color-body-gray); }
.chat-suggest ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; flex: 1; }
.chat-suggest button {
  width: 100%; height: 100%; padding: 11px 14px; border-radius: 14px; background: #fff; text-align: left;
  font-size: 13.5px; line-height: 1.4; color: var(--color-ink); box-shadow: 0 0 0 1px #dfe8e4;
  transition: box-shadow 200ms ease, background 200ms ease;
}
.chat-suggest button:hover, .chat-suggest button[aria-pressed="true"] { background: #f7fbf9; box-shadow: 0 0 0 1px rgba(44, 112, 91, 0.5); }
.chat-suggest small { display: block; margin-bottom: 3px; font-size: 11.5px; font-weight: 600; color: var(--color-primary); }
@media (min-width: 1181px) {
  .chat-suggest { position: static; margin: 0; }
  .chat-suggest > span { display: none; }
  .chat-suggest ul { display: block; }
  .chat-suggest li { position: absolute; z-index: 2; width: 250px; }
  .chat-suggest button { box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.05), 0 18px 36px -16px rgba(17, 24, 39, 0.3); }
  .chat-suggest li:nth-child(1) { left: -190px; top: 90px; }
  .chat-suggest li:nth-child(2) { right: -190px; top: 240px; }
  .chat-suggest li:nth-child(3) { left: -170px; top: 430px; }
}
.app-caption { position: relative; z-index: 1; margin-top: 12px; text-align: center; font-size: 12px; color: var(--color-body-gray); }
.convo-more { margin-top: 28px; text-align: center; }
.convo-more a { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 600; color: var(--color-primary); }
.convo-more svg { width: 12px; height: 12px; transition: transform 200ms var(--ease); }
.convo-more a:hover svg { transform: translateX(3px); }
@media (max-width: 640px) {
  .app-bell, .app-url svg { display: none; }
  .app-top { gap: 12px; }
  .app-msgs { padding: 18px 14px 10px; }
  .app-compose { padding: 6px 14px 12px; }
  .app-user { max-width: 88%; }
  .app-ai-av { display: none; }
  .app-bubble { max-width: 100%; padding: 12px 14px; }
  .chat-suggest { display: block; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); }
  .chat-suggest > span { display: block; padding: 0 var(--gutter) 8px; }
  .chat-suggest ul { display: flex; overflow-x: auto; padding: 2px var(--gutter) 4px; scroll-padding: 0 var(--gutter); scroll-snap-type: x mandatory; scrollbar-width: none; }
  .chat-suggest ul::-webkit-scrollbar { display: none; }
  .chat-suggest li { flex: none; width: 74%; scroll-snap-align: start; }
}

/* Closing call to action: a light mint panel, smaller headline with green key words, a self-drawing signal line */
.cta-panel { position: relative; overflow: hidden; max-width: none; margin: 0 auto; padding: clamp(48px, 7vw, 88px) clamp(20px, 5vw, 64px) clamp(72px, 9vw, 112px); border-radius: 32px; background: linear-gradient(170deg, #f5faf8, #eaf4ef); box-shadow: inset 0 0 0 1px #dcebe4; }
#mulai .cta-inner { gap: 18px; }
#mulai .eyebrow-label + h2 { margin-top: -6px; }
#mulai h2 { max-width: none; font-size: clamp(32px, 3.8vw, 48px); line-height: 1.06; letter-spacing: -0.035em; }
#mulai h2 em { font-style: normal; color: var(--color-primary); }
#mulai .cta-actions { margin-top: 10px; }
.cta-signal { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 120px; pointer-events: none; }
.cta-line { fill: none; stroke: rgba(44, 112, 91, 0.45); stroke-width: 2; vector-effect: non-scaling-stroke; }
/* With JS the line draws itself from left to right once the panel is in view (.in from the shared reveal) */
.js .cta-panel .cta-signal { clip-path: inset(0 100% 0 0); transition: clip-path 2.4s var(--ease) 0.2s; }
.js .cta-panel.in .cta-signal { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .js .cta-panel .cta-signal { clip-path: none; } }
/* Mentions chart along the panel's bottom: daily bars rising toward the right, the line, and a marked spike */
.cta-panel { padding-top: clamp(36px, 4vw, 48px); padding-bottom: clamp(104px, 10vw, 128px); }
.cta-bars { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; display: flex; align-items: flex-end; gap: 0.6%; padding: 0 0.3%; pointer-events: none; }
.cta-bars i { flex: 1; border-radius: 4px 4px 0 0; background: rgba(44, 112, 91, 0.07); transform-origin: bottom; }
.cta-bars i:nth-last-child(-n+4) { background: rgba(44, 112, 91, 0.13); }
.cta-signal { height: 120px; }
.cta-peak { position: absolute; right: calc(2.5% - 5.5px); bottom: calc(120px * 0.9 - 5.5px); display: flex; align-items: center; gap: 8px; flex-direction: row-reverse; pointer-events: none; }
.cta-peak i { width: 11px; height: 11px; border-radius: 50%; background: var(--color-primary); box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9), 0 0 0 5px rgba(44, 112, 91, 0.25); }
.cta-peak b { padding: 5px 10px; border-radius: var(--radius-pill); background: #fff; font-size: 12px; font-weight: 600; color: var(--color-ink); white-space: nowrap; box-shadow: 0 6px 16px -8px rgba(17, 24, 39, 0.3); }
.cta-peak em { font-style: normal; color: #dc2626; }
/* With JS: bars grow, then the line draws, then the spike label pops in */
.js .cta-panel .cta-bars i { transform: scaleY(0); transition: transform 900ms var(--ease); }
.js .cta-panel.in .cta-bars i { transform: none; }
.js .cta-panel .cta-peak { opacity: 0; translate: 0 6px; transition: opacity 400ms ease 2.4s, translate 400ms var(--ease) 2.4s; }
.js .cta-panel.in .cta-peak { opacity: 1; translate: 0 0; }
@media (prefers-reduced-motion: reduce) { .js .cta-panel .cta-bars i { transform: none; } .js .cta-panel .cta-peak { opacity: 1; translate: none; } }
@media (max-width: 640px) {
  .cta-bars, .cta-signal { height: 110px; }
  .cta-bars i:nth-child(odd) { display: none; }
  .cta-peak { bottom: calc(110px * 0.9 - 5.5px); }
  .cta-panel { padding-bottom: 130px; }
}
/* Upper part of the panel: a soft white light from the top */
.cta-panel::before { content: ""; position: absolute; left: 15%; right: 15%; top: -40%; height: 90%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0)); pointer-events: none; }
#mulai .btn-light { background: #fff; box-shadow: inset 0 0 0 1px #dcebe4; }
#mulai .btn-light:hover { box-shadow: inset 0 0 0 1px rgba(44, 112, 91, 0.4); }
@media (max-width: 640px) { .cta-panel { border-radius: 24px; } }

/* FAQ: heading and the "ask us" card on the left (sticky), numbered question cards on the right */
#faq .faq { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; max-width: var(--page-max-width); }
#faq .section-head { margin: 0; text-align: left; }
#faq .section-head .lede { margin-top: 12px; }
/* Heading, then the ask card right under it, top-aligned with the list */
.faq-side { display: grid; gap: 28px; }
/* Two "?" chat bubbles behind the ask card: a solid mint one tilted out of its top right corner, a small outlined one
   on the left, like the question to the card's answer. They drift a little. */
.faq-ask-wrap { position: relative; margin-top: 36px; }
.faq-ask-wrap .faq-ask { z-index: 1; }
.faq-q { position: absolute; z-index: 0; pointer-events: none; animation: faq-q-drift 6s ease-in-out infinite; }
.faq-q svg { display: block; width: 100%; height: auto; overflow: visible; }
.faq-q text { font: 700 22px/1 Inter, sans-serif; }
.faq-q-big { right: -18px; top: -58px; width: 112px; rotate: 10deg; }
.faq-q-big path { fill: var(--color-mint); stroke: #cfe6dc; stroke-width: 1; }
.faq-q-big text { fill: var(--color-primary); }
.faq-q-small { left: -26px; top: -34px; width: 52px; rotate: -12deg; animation-delay: -3s; }
.faq-q-small path { fill: #fff; stroke: rgba(44, 112, 91, 0.35); stroke-width: 1.4; }
.faq-q-small text { fill: rgba(44, 112, 91, 0.55); }
@keyframes faq-q-drift { 50% { translate: 0 -6px; } }
@media (max-width: 960px) { .faq-ask-wrap { order: 3; } .faq-q-big { right: 4px; } .faq-q-small { left: 4px; } }
@media (prefers-reduced-motion: reduce) { .faq-q { animation: none; } }
/* A soft mint glow behind the left column (wide screens) */
/* On its own layer, faded out toward the section's top and bottom so it never meets the next section in a hard edge */
#faq::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(42% 55% at 24% 50%, #eef7f3, rgba(238, 247, 243, 0) 72%);
  -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent);
}
#faq > .wrap { position: relative; z-index: 1; }
@media (max-width: 960px) { #faq::before { background: radial-gradient(80% 22% at 50% 18%, #eef7f3, rgba(238, 247, 243, 0) 72%); -webkit-mask-image: linear-gradient(transparent, #000 10%); mask-image: linear-gradient(transparent, #000 10%); } }
.faq-ask { position: relative; padding: 22px; border-radius: 24px; background: #fff; box-shadow: var(--card-line), 0 24px 48px -32px rgba(17, 24, 39, 0.3); }
.faq-ask-head { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.faq-ask-head img { width: 34px; height: 34px; padding: 4px; border-radius: 10px; background: #fff; box-shadow: 0 2px 6px rgba(44, 112, 91, 0.15); }
.faq-ask-head b { font-weight: 600; color: var(--color-ink); }
.faq-ask-bubble { position: relative; margin: 14px 0 18px 44px; padding: 12px 14px; border-radius: 4px 16px 16px 16px; background: var(--color-mint); font-size: 14.5px; line-height: 1.5; color: var(--fg-2); box-shadow: 0 6px 16px -10px rgba(17, 24, 39, 0.25); }
.faq-ask-mail { width: 100%; justify-content: center; }
.faq-ask-guides { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 14.5px; font-weight: 600; color: var(--color-primary); }
.faq-ask-guides svg { width: 12px; height: 12px; transition: transform 200ms var(--ease); }
.faq-ask-guides:hover svg { transform: translateX(3px); }
.qa-list { display: grid; align-content: start; gap: 10px; border: 0; }
.qa { border: 0; border-radius: 18px; background: #fff; box-shadow: var(--card-line); transition: background 200ms ease, box-shadow 200ms ease; }
.qa:hover { box-shadow: 0 0 0 1px rgba(44, 112, 91, 0.3); }
.qa[open] { background: #f7fbf9; box-shadow: 0 0 0 1px rgba(44, 112, 91, 0.45); }
.faq-sec .qa summary { gap: 16px; padding: 18px 20px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.qa-n { flex: none; width: 30px; font-size: 13px; font-weight: 600; color: var(--color-primary); font-variant-numeric: tabular-nums; }
.qa-q { flex: 1; }
/* Plus in a circle, turning into a cross when open */
.faq-sec .qa summary::after {
  content: "+"; display: grid; place-items: center; width: 28px; height: 28px; margin: 0; border: 0; border-radius: 50%;
  background: var(--color-mint); color: var(--color-primary); font-size: 18px; font-weight: 500; line-height: 1;
  transform: none; transition: transform 250ms var(--ease), background 200ms ease, color 200ms ease;
}
.faq-sec .qa[open] summary::after { transform: rotate(45deg); background: var(--color-primary); color: #fff; }
.faq-sec .qa p { max-width: none; padding: 0 64px 20px 66px; font-size: 15.5px; line-height: 1.6; }
@media (max-width: 960px) {
  #faq .faq { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .faq-side { position: static; display: contents; }
  #faq .section-head { text-align: center; }
}
@media (max-width: 640px) {
  .faq-sec .qa summary { padding: 16px; font-size: 16px; gap: 12px; }
  .qa-n { width: 22px; }
  .faq-sec .qa p { padding: 0 16px 18px 50px; }
}

/* ---------- App showcase: heading, then the laptop as the focus, then the view switcher and one caption ---------- */
.showcase { padding-top: 0; margin-top: -24px; }
.showcase .section-head { margin-bottom: 48px; }
.sc-device { position: relative; max-width: min(820px, calc((100svh - 300px) * 1.49)); margin: 0 auto; }
/* Lid: thin aluminium rim, black glass bezel, camera at the top */
.sc-lid {
  position: relative; padding: 2.4% 1.9% 1.9%; border-radius: 22px 22px 6px 6px;
  background: #0b0d10;
  box-shadow: 0 0 0 1.5px #c4c8cd, 0 0 0 3px #e9ebee, inset 0 0 0 1px #2a2e33;
}
.sc-cam { position: absolute; top: 0.95%; left: 50%; width: 7px; height: 7px; margin-left: -3.5px; border-radius: 50%; background: #1c2128; box-shadow: inset 0 0 0 1.5px #2c333b, 0 0 0 1px #000; }
.sc-screen { position: relative; aspect-ratio: 1600 / 1000; overflow: hidden; border-radius: 4px; background: #fff; }
/* Glass sheen across the screen */
.sc-screen::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(115deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 32%, rgba(255, 255, 255, 0) 33%); }
.sc-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transform: scale(1.012); transition: opacity 300ms ease, transform 450ms var(--ease); }
.sc-screen img.is-on { opacity: 1; transform: none; }
/* Base: an aluminium wedge wider than the lid, with the opening notch and a soft floor shadow */
.sc-base {
  position: relative; height: clamp(12px, 2vw, 22px); margin: 0 -8.5%;
  border-radius: 2px 2px 18px 18px / 2px 2px 100% 100%;
  background: linear-gradient(#f1f2f4 0%, #d9dce0 38%, #b8bcc2 100%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 2px rgba(0, 0, 0, 0.12);
}
.sc-base::before { content: ""; position: absolute; left: 50%; top: 0; width: 15%; height: 42%; transform: translateX(-50%); border-radius: 0 0 10px 10px; background: linear-gradient(#c3c7cc, #d4d7db); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.18); }
.sc-base::after { content: ""; position: absolute; left: 4%; right: 4%; top: 100%; height: 40px; background: radial-gradient(50% 50% at 50% 0%, rgba(17, 24, 39, 0.28), rgba(17, 24, 39, 0) 100%); filter: blur(6px); pointer-events: none; }
/* Switcher right under the device, then the caption */
.sc-switch { display: flex; gap: 4px; width: max-content; max-width: 100%; margin: 36px auto 0; padding: 4px; border-radius: var(--radius-pill); background: #f1f4f3; overflow-x: auto; scrollbar-width: none; }
.sc-switch::-webkit-scrollbar { display: none; }
.sc-switch button { padding: 10px 20px; border-radius: var(--radius-pill); font-size: 15px; font-weight: 500; color: #4b5563; white-space: nowrap; transition: background 200ms ease, color 200ms ease, box-shadow 200ms ease; }
.sc-switch button:hover { color: var(--color-ink); }
.sc-switch button[aria-selected="true"] { background: #fff; color: var(--color-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(17, 24, 39, 0.08), 0 4px 12px -6px rgba(17, 24, 39, 0.2); }
.sc-captions { max-width: 560px; min-height: 3em; margin: 24px auto 0; text-align: center; font-size: 18px; line-height: 1.5; color: #374151; }
.sc-note { margin-top: 6px; text-align: center; font-size: 13px; color: var(--color-body-gray); }
@media (max-width: 640px) {
  .showcase .section-head { margin-bottom: 36px; }
  .sc-lid { border-radius: 12px 12px 4px 4px; padding: 3% 2.2% 2.2%; }
  .sc-cam { width: 4px; height: 4px; margin-left: -2px; }
  .sc-base { margin: 0 -4%; }
  .sc-switch { margin-top: 36px; }
  .sc-switch button { padding: 8px 14px; font-size: 14px; }
  .sc-captions { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .sc-screen img { transition: none; transform: none; } }
/* Two Qola Q symbols drawn as contour lines (brand/q-contour.svg) flank the laptop on wide screens, fading out
   at the bottom; the middle stays clean */
.showcase { position: relative; }
@media (min-width: 961px) { .showcase { overflow: hidden; } }
.showcase > .wrap { position: relative; z-index: 1; }
.showcase::before, .showcase::after {
  content: ""; position: absolute; top: 300px; width: 640px; aspect-ratio: 231 / 240; pointer-events: none;
  background: url(/brand/q-contour.svg) center / contain no-repeat; opacity: 0.45;
  -webkit-mask-image: linear-gradient(#000 55%, transparent 92%); mask-image: linear-gradient(#000 55%, transparent 92%);
}
.showcase::before { left: -300px; }
.showcase::after { right: -300px; transform: scaleX(-1); }
@media (max-width: 960px) { .showcase::before, .showcase::after { display: none; } }

/* ---------- Footer: brand first, links quieter ----------
   The brand column leads (logo, tagline in ink, address); column titles are small and dark, links are regular weight
   in body gray and turn green on hover. A light mint-gray band with a hairline on top closes the page. */
.footer { padding: 64px 0 32px; background: #f7faf9; border-top: 1px solid #e6ebe9; }
.footer-grid { grid-template-columns: minmax(0, 2.2fr) repeat(4, minmax(0, 1fr)); gap: 40px 32px; }
.footer-brand .logo img { height: 40px; }
.footer-brand p { margin-top: 18px; max-width: 32ch; font-size: 15px; font-weight: 500; line-height: 1.55; color: #1f2937; }
.footer-brand address { margin-top: 16px; max-width: 34ch; font-size: 13.5px; font-weight: 450; line-height: 1.65; color: #6b7280; }
.footer-brand address a { display: inline-block; margin-top: 6px; color: var(--color-primary); font-size: 14px; font-weight: 600; }
/* Column heads in the same small caps as the section eyebrows, links one step below the tagline */
.footer h4, .footer .footer-h { margin-bottom: 16px; font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); }
.footer li + li { margin-top: 10px; }
.footer li a { font-size: 15px; font-weight: 500; color: #374151; transition: color 150ms ease; }
.footer li a:hover { color: var(--color-primary); }
.footer-bottom { margin-top: 48px; padding-top: 20px; border-top: 1px solid #e3e9e6; font-size: 13px; font-weight: 450; color: #6b7280; }
@media (max-width: 960px) { .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 640px) { .footer { padding-top: 48px; } .footer-grid { gap: 32px 20px; } .footer-bottom { flex-direction: column; gap: 4px; } }

/* Footer contact: the address (opens in Google Maps) and email as two rows with a small mint icon each */
.footer-brand .footer-contact { display: grid; gap: 12px; max-width: none; margin-top: 18px; font-style: normal; }
.footer-contact .fc-row { display: flex; align-items: flex-start; gap: 10px; max-width: 340px; color: #6b7280; font-size: 13.5px; line-height: 1.5; text-decoration: none; transition: color 150ms ease; }
.footer-contact .fc-row:hover { color: var(--color-ink); }
.footer-contact .fc-ico { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--color-mint); color: var(--color-primary); }
.footer-contact .fc-ico svg { width: 15px; height: 15px; }
.footer-contact b { display: block; font-weight: 600; color: var(--color-ink); }
.footer-contact .fc-mail { align-self: center; font-weight: 600; color: var(--color-primary); }

/* Legal pages (terms, privacy): one readable column under the centered title */
.legal-wrap { max-width: 760px; padding-bottom: var(--section); }
.legal-body { font-size: 16px; line-height: 1.7; }
.legal-body h2 { font-size: 22px; }
.legal-body h3 { font-size: 17px; }
.legal-body ul { display: grid; gap: 6px; padding-left: 22px; list-style: disc; }
.legal-body > p:first-child { font-size: 14px; color: var(--fg-3); }

/* ---------- Produk page, home-page system: products as white cards in the page column ----------
   Each card: number, product name, promise, text on one side; the app screen on a mint stage on the other,
   sides alternating. The cards no longer stick (position: static), so the stack scripts in site.js and
   animations.js skip them. */
.pp-hero.short { padding-bottom: 56px; }
.pp-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 28px; }
.pp-jump a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px 8px 8px; border-radius: var(--radius-pill); background: #fff; box-shadow: var(--card-line); font-size: 14px; font-weight: 500; color: var(--color-ink); transition: box-shadow 200ms ease, color 200ms ease; }
.pp-jump a:hover { color: var(--color-primary); box-shadow: 0 0 0 1px rgba(44, 112, 91, 0.4); }
.pp-jump span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--color-mint); color: var(--color-primary); font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.pstack-sec { padding: 8px 0 var(--section); }
.pstack { display: grid; gap: 24px; max-width: var(--page-max-width); margin: 0 auto; padding: 0 var(--gutter); counter-reset: pcard; }
.pcard, #monitoring.pcard, #analisis-sentimen.pcard, #peringatan-dini.pcard, #brief-laporan.pcard {
  position: static; min-height: 0; transform: none !important; opacity: 1 !important; will-change: auto; counter-increment: pcard;
  column-gap: 56px; padding: 40px;
  border-radius: 28px; background: #fff; box-shadow: var(--card-line); scroll-margin-top: 100px;
}
.pstack > .pcard { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.pstack > .pcard:nth-child(even) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.pcard:nth-child(even) .sc-copy { order: 2; }
.pcard .sc-copy { max-width: 460px; }
.pcard .sc-copy > p.pcard-title { display: block; font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--color-primary); }
.pcard .sc-copy > p.pcard-title::before { content: counter(pcard, decimal-leading-zero); display: inline-grid; place-items: center; min-width: 30px; height: 30px; margin-right: 10px; padding: 0 8px; border-radius: var(--radius-pill); background: var(--color-mint); font-size: 12px; font-weight: 700; vertical-align: middle; }
.pcard-title i { display: none; }
.pcard .pcard-sub { margin: 18px 0 0; font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; line-height: 1.15; letter-spacing: -0.025em; color: var(--color-ink); }
.pcard .sc-copy > p:not(.pcard-title) { margin: 14px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--fg-2); }
/* The app screen on a mint stage, whole (no longer cut off at the screen edge) */
.pcard .pcard-ui { padding: 28px; border-radius: 22px; background: linear-gradient(160deg, #f3f9f6, #e7f3ee); }
.pcard .qui { border-radius: 16px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.05), 0 18px 40px -24px rgba(17, 24, 39, 0.3); }
@media (max-width: 960px) {
  .pstack > .pcard, .pstack > .pcard:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .pcard, #monitoring.pcard, #analisis-sentimen.pcard, #peringatan-dini.pcard, #brief-laporan.pcard { row-gap: 28px; padding: 28px; }
  .pcard:nth-child(even) .sc-copy { order: 0; }
  .pcard .sc-copy { max-width: none; padding-right: 0; }
}
@media (max-width: 640px) {
  .pcard, #monitoring.pcard, #analisis-sentimen.pcard, #peringatan-dini.pcard, #brief-laporan.pcard { padding: 22px 18px; border-radius: 22px; }
  .pcard .pcard-ui { padding: 14px; border-radius: 16px; }
  .pcard .qui { padding: 18px 16px 20px; }
  .pp-jump a { font-size: 13px; }
  .pcard .qr-items { grid-template-columns: minmax(0, 1fr); }
  .pcard .qr-tabs { gap: 14px; }
}

/* ---------- Produk demos drawn like the dashboard (dashboard-qola): Plus Jakarta Sans, the app's cards ---------- */
.pcard .qui { font-family: 'Plus Jakarta Sans', var(--font-ui); }
.qui-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.qm-sort { flex: none; padding: 7px 12px; border-radius: 10px; font-size: 11.5px; font-weight: 600; color: #111827; box-shadow: inset 0 0 0 1px #2c705b; }
.qm-sort::before { content: "⇅ "; color: #2c705b; }
/* Penyebutan: one card per mention with the sentiment on its left edge */
.pcard .qm { position: relative; overflow: hidden; padding: 14px 16px 12px 19px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #eceef1, 0 6px 14px -10px rgba(17, 24, 39, 0.25); }
.pcard .qm::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: #9ca3af; }
.pcard .qm-pos::before { background: #22c55e; } .pcard .qm-neg::before { background: #ef4444; }
.pcard .qm-src { gap: 10px; }
.qm-logo { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #f3f4f6; flex: none; }
.qm-logo svg { width: 18px; height: 18px; }
.pcard .qm-src b { font-size: 13px; font-weight: 600; }
.pcard .qm-stats { grid-template-columns: 1.3fr 1.1fr 0.8fr 0.9fr; gap: 10px; margin-top: 12px; padding: 9px 12px; border-radius: 10px; background: #f9fafb; box-shadow: 0 1px 3px rgba(17, 24, 39, 0.06); font-size: 11.5px; font-weight: 700; }
.pcard .qm-stats span { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 5px; min-width: 0; white-space: nowrap; }
.pcard .qm-stats span > b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.pcard .qm-stats small { grid-column: 1 / -1; margin-bottom: 3px; font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em; color: #4b5563; }
.pcard .qm-stats i { display: grid; width: 12px; height: 12px; }
.pcard .qm-stats i svg { width: 12px; height: 12px; }
.qm-text { margin-top: 10px; padding-bottom: 10px; border-bottom: 1px dashed #e5e7eb; font-size: 12.5px; line-height: 1.55; color: #111827; }
.qm-tag { color: #2c705b; font-weight: 600; }
.pcard .qm-tags { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.pcard .qui .pill { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 99px; font-size: 10.5px; font-weight: 600; }
.pcard .qui .pill.pos { background: #dcfce7; color: #15803d; } .pcard .qui .pill.neg { background: #fee2e2; color: #b91c1c; } .pcard .qui .pill.neu { background: #f3f4f6; color: #4b5563; }
.pcard .qm-kw { padding: 3px 9px; border-radius: 99px; font-size: 10.5px; font-style: normal; color: #374151; box-shadow: inset 0 0 0 1px #e5e7eb; }
.qm-detail { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 5px 10px; border-radius: 8px; font-size: 11px; font-weight: 600; color: #111827; box-shadow: inset 0 0 0 1px #e5e7eb; }
.qm-detail svg { width: 11px; height: 11px; }
/* Sumber Data: checkbox, platform logo, name, count */
.pcard .qui-split { grid-template-columns: minmax(0, 1fr) 176px; }
@media (max-width: 900px) { .pcard .qui-split { grid-template-columns: minmax(0, 1fr); } .pcard .qui-filter { display: none; } }
.pcard .qui-filter { padding: 14px 12px; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #eceef1; }
.pcard .qui-filter p { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 6px; margin-bottom: 8px; }
.pcard .qui-filter p b { white-space: nowrap; }
.pcard .qui-filter p b { font-size: 12.5px; font-weight: 700; }
.pcard .qui-filter p button { font-size: 10px; font-weight: 600; color: #2c705b; }
.pcard .qui-filter ul { display: grid; gap: 2px; }
.pcard .qui-filter li button { display: grid; grid-template-columns: 13px 16px minmax(0, 1fr) auto; align-items: center; gap: 7px; width: 100%; padding: 5px 4px; border-radius: 7px; font-size: 11.5px; font-weight: 500; text-align: left; color: #111827; background: none; }
.pcard .qui-filter li button:hover { background: #f9fafb; }
.qf-box { width: 13px; height: 13px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px #d1d5db; }
.pcard .qui-filter li button[aria-pressed="true"] .qf-box { background: #2c705b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='m3 6 2 2 4-4' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; box-shadow: none; }
.qf-logo, .qf-logo svg { display: block; width: 15px; height: 15px; }
.pcard .qui-filter li em { padding: 1px 6px; border-radius: 6px; background: #f3f4f6; font-size: 10.5px; font-style: normal; font-weight: 500; color: #374151; }
/* Wawasan: active filter chip, then the Topik Teratas table */
.qw-filter { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 11.5px; font-weight: 600; color: #111827; }
.qw-filter span { padding: 4px 10px; border-radius: 99px; background: #e8f3ef; color: #2c705b; font-weight: 600; }
.qw-card { margin-top: 12px; overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px #eceef1, 0 6px 14px -10px rgba(17, 24, 39, 0.25); }
.qw-title { padding: 14px 16px; font-size: 13.5px; font-weight: 700; }
.qw-tr { display: grid; grid-template-columns: 1.15fr 2fr 0.6fr 0.8fr; align-items: center; gap: 10px; width: 100%; padding: 10px 16px; border-top: 1px solid #eef0f2; font-size: 11.5px; line-height: 1.45; text-align: left; color: #111827; background: #fff; transition: background 150ms ease; }
.qw-th { padding: 8px 16px; background: #f3f5f7; font-size: 9.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #374151; }
button.qw-tr:hover { background: #fafbfc; }
button.qw-tr.on { background: #f3faf7; box-shadow: inset 3px 0 0 #2c705b; }
.qw-t { font-weight: 600; }
.qw-spike { display: block; width: max-content; margin-top: 3px; padding: 1px 7px; border-radius: 99px; background: #fee2e2; color: #b91c1c; font-size: 9.5px; font-style: normal; font-weight: 700; }
.qw-d { color: #4b5563; }
.qw-v { font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.qw-tr > span:last-child { justify-self: center; }
.qw-next { margin-top: 12px; padding: 12px 16px; border-radius: 12px; background: #f3faf7; box-shadow: inset 0 0 0 1px #d5e9e0; font-size: 11.5px; color: #374151; }
.qw-next p b { color: #2c705b; }
.qw-next ul { display: grid; gap: 4px; margin-top: 6px; }
.qw-next li { position: relative; padding-left: 14px; color: #111827; }
.qw-next li::before { content: "→"; position: absolute; left: 0; color: #2c705b; font-weight: 700; }
@media (max-width: 640px) {
  .pcard .qm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; }
  .qm-sort { display: none; }
  .qw-tr { grid-template-columns: 1fr auto; }
  .qw-d, .qw-th > span:nth-child(2), .qw-v, .qw-th > span:nth-child(3) { display: none; }
}

/* Penyebutan demo: platform chips above a full-width feed */
.qf-chips { display: flex; gap: 6px; margin-top: 14px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.qf-chips::-webkit-scrollbar { display: none; }
.qf-chips button { flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 99px; background: #fff; font-size: 11.5px; font-weight: 600; color: #374151; box-shadow: inset 0 0 0 1px #e5e7eb; white-space: nowrap; transition: background 150ms ease, box-shadow 150ms ease; }
.qf-chips button:hover { box-shadow: inset 0 0 0 1px #2c705b; }
.qf-chips button[aria-pressed="true"] { background: #e8f3ef; color: #2c705b; box-shadow: inset 0 0 0 1px rgba(44, 112, 91, 0.45); }
.qf-chips em { font-style: normal; font-weight: 500; color: #6b7280; font-variant-numeric: tabular-nums; }
.qf-chips .qf-logo, .qf-chips .qf-logo svg { width: 13px; height: 13px; }
.pcard .qui-feed { margin-top: 12px; }
.pcard .qm-tags em, .qm-detail { white-space: nowrap; }

/* ---------- Blog list: every article a white card of the same shape (home-page card system) ---------- */
.news-grid.all { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: stretch; }
.news-grid.all .news { position: relative; display: flex; flex-direction: column; padding: 12px 12px 22px; border-radius: 24px; background: #fff; box-shadow: var(--card-line); transition: box-shadow 200ms ease; }
.news-grid.all .news:hover { box-shadow: var(--card-lift); }
.news-grid.all .news > :not(.news-thumb) { margin-left: 10px; margin-right: 10px; }
.news-grid.all .news-thumb { aspect-ratio: 16 / 9; margin-bottom: 18px; border-radius: 16px; }
.news-thumb-brand { display: grid; place-items: center; align-content: center; gap: 10px; background: radial-gradient(70% 90% at 30% 20%, #f4faf7, #e3f1ea); }
.news-thumb-brand img { width: 56px; height: 56px; opacity: 0.9; }
.news-thumb-brand span { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); }
.news-thumb-brand::before { content: ""; position: absolute; inset: 0; background: url(/brand/doodle.svg) center / 420px auto repeat; opacity: 0.08; }
.news-grid.all .news h3 { margin-top: 12px; font-size: 18px; line-height: 1.35; }
.news-grid.all .news-title-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.news-grid.all .news:hover .news-title-link { color: var(--color-primary); }
.news-grid.all .news-excerpt { margin-top: 8px; font-size: 15px; line-height: 1.55; }
.news-grid.all .news-foot { margin-top: auto; padding-top: 16px; font-size: 13px; color: var(--fg-3); }
@media (max-width: 1000px) { .news-grid.all { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .news-grid.all { grid-template-columns: minmax(0, 1fr); gap: 16px; } }

/* Sections focused by the in-page jump (site.js gives them tabindex="-1") show no focus ring; links and buttons keep theirs */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

/* ---------- Solution pages (src/data/solusi): the home-page card system ----------
   Challenges: white cards with a soft red warning mark. How Qola helps: 2×2 cards, each with its product's icon
   (picked from the link's anchor) and an arrow; the whole card links. A morning with Qola: a timeline whose dots
   sit on one line. The FAQ and closing panel come from the home page components. */
.sol-cards { gap: 20px; }
.sol-card, .sol-card:nth-child(2), .sol-card:nth-child(3) { position: relative; padding: 28px; border-radius: 24px; background: #fff; box-shadow: var(--card-line); }
.sol-card::before {
  content: ""; display: block; width: 40px; height: 40px; margin-bottom: 18px; border-radius: 12px;
  background: #fef2f2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4 2.8 19.5h18.4z'/%3E%3Cpath d='M12 10v4.2M12 17h.01'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.sol-card h3, .sol-feats h3 { font-size: 19px; line-height: 1.3; }
.sol-card p, .sol-feats p { margin-top: 10px; font-size: 15.5px; line-height: 1.6; }
.sol-feats { gap: 20px; max-width: none; }
.sol-feats li { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; padding: 26px 28px; border: 0; border-radius: 24px; background: #fff; box-shadow: var(--card-line); transition: box-shadow 200ms ease; }
.sol-feats li:hover { box-shadow: var(--card-lift); }
.sol-feats li::before { content: ""; grid-row: 1 / span 3; width: 44px; height: 44px; border-radius: 12px; background: var(--color-mint) var(--ico) center / 22px no-repeat; }
.sol-feats li:has(a[href*="#monitoring"]) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c705b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M7 8h6M7 12h10M7 16h10'/%3E%3C/svg%3E"); }
.sol-feats li:has(a[href*="#analisis-sentimen"]) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c705b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M8.5 14.5c.9 1.2 2.1 1.8 3.5 1.8s2.6-.6 3.5-1.8M9 9.5h.01M15 9.5h.01'/%3E%3C/svg%3E"); }
.sol-feats li:has(a[href*="#peringatan-dini"]) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c705b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 16V11a6 6 0 0 1 12 0v5l1.5 2h-15z'/%3E%3Cpath d='M10 21h4'/%3E%3C/svg%3E"); }
.sol-feats li:has(a[href*="#brief-laporan"]) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232c705b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z'/%3E%3Cpath d='M14 3v6h6M9 17v-3M12 17v-5M15 17v-2'/%3E%3C/svg%3E"); }
.sol-feats li > * { grid-column: 2; }
.sol-feats a { text-decoration: none; color: var(--color-ink); transition: color 150ms ease; }
.sol-feats a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.sol-feats li:hover a { color: var(--color-primary); }
.sol-feats li::after { content: "→"; grid-column: 2; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--color-primary); transition: translate 200ms var(--ease); }
.sol-feats li:hover::after { translate: 3px 0; }
html[lang="id"] .sol-feats li::after { content: "Lihat di Produk →"; }
html[lang="en"] .sol-feats li::after { content: "See in Products →"; }
/* Timeline: time pill on a dot, the dots joined by one line */
.sol-steps { position: relative; gap: 20px; padding-top: 22px; }
.sol-steps::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 6px; height: 2px; background: linear-gradient(90deg, #cfe3da, #2c705b); border-radius: 2px; }
.sol-steps li { padding: 30px 24px 26px; border-radius: 24px; background: #fff; box-shadow: var(--card-line); }
.sol-steps li::before { content: ""; position: absolute; left: 50%; top: -22px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 3px #2c705b; }
.sol-steps b { display: inline-block; padding: 3px 10px; border-radius: 99px; background: var(--color-mint); font-size: 13px; }
.sol-steps p { font-size: 15.5px; line-height: 1.6; }
@media (max-width: 1100px) {
  .sol-steps { grid-template-columns: minmax(0, 1fr); padding: 0 0 0 30px; }
  .sol-steps::before { left: 8px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; background: linear-gradient(#cfe3da, #2c705b); }
  .sol-steps li::before { left: -29px; top: 30px; margin-left: 0; }
}
@media (max-width: 640px) {
  .sol-card, .sol-card:nth-child(2), .sol-card:nth-child(3) { padding: 22px; }
  .sol-feats li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; padding: 22px; }
  .sol-feats li::before { width: 40px; height: 40px; }
}
/* Solution FAQ: one centered column of the numbered cards */
.faq-sec:not(#faq) .faq { max-width: 880px; }

/* Blog list: the lead article as a wide card across the row, then the rest; placeholder covers in four tones */
.news-grid.all .news-featured { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: center; column-gap: 40px; padding: 12px 36px 12px 12px; }
.news-grid.all .news-featured .news-thumb { grid-row: 1 / span 4; margin: 0; aspect-ratio: 16 / 9; }
.news-grid.all .news-featured > :not(.news-thumb) { grid-column: 2; margin-left: 0; margin-right: 0; }
.news-grid.all .news-featured h3 { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.25; letter-spacing: -0.02em; }
.news-grid.all .news-featured .news-excerpt { font-size: 16px; }
.news-grid.all .news-featured .news-foot { margin-top: 18px; padding-top: 0; }
.news-grid.all .news-featured .news-meta { align-self: end; }
.news-grid.all .news-featured .news-foot { align-self: start; }
.news-thumb-brand.tone-1 { background: radial-gradient(70% 90% at 30% 20%, #f3f8fd, #dfeaf6); }
.news-thumb-brand.tone-2 { background: radial-gradient(70% 90% at 30% 20%, #fcf9f2, #f1e8d6); }
.news-thumb-brand.tone-3 { background: radial-gradient(70% 90% at 30% 20%, #f7f5fd, #e7e2f6); }
.news-thumb-brand.tone-1 span { color: #3b5f86; } .news-thumb-brand.tone-2 span { color: #8a6a2d; } .news-thumb-brand.tone-3 span { color: #5b4f8f; }
.news-featured .news-thumb-brand img { width: 72px; height: 72px; }
/* The list sits closer under the heading */
.blog-list { padding-top: 24px; }
@media (max-width: 1000px) {
  .news-grid.all .news-featured { grid-template-columns: minmax(0, 1fr); padding: 12px 12px 22px; }
  .news-grid.all .news-featured .news-thumb { grid-row: auto; margin-bottom: 18px; }
  .news-grid.all .news-featured > :not(.news-thumb) { grid-column: 1; margin-left: 10px; margin-right: 10px; }
}

/* Blog pagination: previous / page numbers / next, centred under the grid */
.blog-pages { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 40px; }
.blog-pages ol { display: flex; gap: 6px; }
.blog-pages ol a, .blog-pages ol span { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px; border-radius: 99px; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--color-ink); background: #fff; box-shadow: var(--card-line); transition: box-shadow 150ms ease, color 150ms ease; }
.blog-pages ol a:hover { color: var(--color-primary); box-shadow: 0 0 0 1px rgba(44, 112, 91, 0.45); }
.blog-pages ol [aria-current="page"] { background: var(--color-primary); color: #fff; box-shadow: none; }
.blog-pages .bp-step { padding: 10px 14px; font-size: 15px; font-weight: 600; color: var(--color-primary); }
.blog-pages span.bp-step { color: var(--fg-3); opacity: 0.5; }
@media (max-width: 640px) { .blog-pages { gap: 4px; } .blog-pages .bp-step { padding: 10px 6px; font-size: 14px; } }

/* Article cover: a wide, large original fills the 16:9 frame at its focal point; a small or square one is shown
   whole and no larger than itself, on a blurred copy of the same image */
.post-cover img { object-position: var(--focus, 50% 50%); }
.post-cover-frame { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-card); background: var(--color-mint); }
.post-cover-frame::before { content: ""; position: absolute; inset: -40px; background: var(--bg) center / cover; filter: blur(40px) saturate(1.1); opacity: 0.55; }
.post-cover .post-cover-frame img { position: relative; flex: none; width: auto; max-width: calc(100% - 48px); height: auto; max-height: calc(100% - 48px); aspect-ratio: auto; object-fit: contain; border-radius: 12px; box-shadow: 0 20px 50px -20px rgba(17, 24, 39, 0.45); }
@media (max-width: 640px) { .post-cover-frame { border-radius: var(--radius-card-sm); } }

/* Card thumbnail for a small or square cover: the whole image on a blurred copy, like the article cover */
.news-thumb-contain { display: flex; align-items: center; justify-content: center; }
.news-thumb-contain::before { content: ""; position: absolute; inset: -30px; background: var(--bg) center / cover; filter: blur(28px); opacity: 0.6; }
.news-grid .news-thumb-contain img, .news .news-thumb-contain img { position: relative; width: auto; height: calc(100% - 24px); max-width: calc(100% - 24px); object-fit: contain; border-radius: 10px; box-shadow: 0 12px 30px -14px rgba(17, 24, 39, 0.5); }

/* Produk cards: capability checklist and a sources / formats row under the text, so the copy side carries weight */
.pc-points { display: grid; gap: 10px; margin-top: 22px; }
.pc-points li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.5; color: var(--color-ink); }
.pc-points svg { flex: none; width: 20px; height: 20px; padding: 3px; margin-top: 1px; border-radius: 50%; background: var(--color-mint); color: var(--color-primary); }
.pc-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 24px; padding-top: 20px; border-top: 1px solid #edf1ef; }
.pc-sources span { margin-right: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #6b7280; }
.pc-sources i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: var(--c); box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.07), 0 4px 10px -6px rgba(17, 24, 39, 0.3); }
.pc-sources svg { width: 14px; height: 14px; fill: currentColor; }
.pc-formats b { padding: 5px 12px; border-radius: 99px; background: var(--color-mint); font-size: 12.5px; font-weight: 600; color: var(--color-primary); }
@media (max-width: 640px) { .pc-sources { gap: 5px; } .pc-sources span { flex-basis: 100%; margin: 0 0 4px; } .pc-sources i { width: 28px; height: 28px; } }

/* Article share buttons: round platform marks; in the header a compact centred row, under the article a labelled card */
.share { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.share ul { display: flex; flex-wrap: wrap; gap: 8px; }
.share-label { font-size: 14px; font-weight: 600; color: var(--color-ink); }
.share-btn { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; color: var(--c, var(--color-primary)); box-shadow: 0 0 0 1px #e3ebe8; transition: box-shadow 150ms ease, transform 150ms ease; }
.share-btn:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px var(--c, var(--color-primary)), 0 8px 18px -10px rgba(17, 24, 39, 0.4); }
.share-btn svg { width: 18px; height: 18px; }
.share-copy { color: var(--color-ink); }
.share-copy .i-done, .share-copy.is-done .i-link { display: none; }
.share-copy.is-done .i-done { display: block; color: var(--color-primary); }
.share-copy.is-done { box-shadow: 0 0 0 1px var(--color-primary); }
.share-toast { font-size: 13px; font-weight: 600; color: var(--color-primary); }
.share-toast:empty { display: none; }
.post-main .share { margin-top: 48px; padding: 20px 24px; border-radius: 20px; background: #fff; box-shadow: var(--card-line); justify-content: space-between; }
.share-compact { justify-content: center; margin-top: 18px; gap: 10px; }
.share-compact .share-label { font-size: 13px; font-weight: 500; color: var(--fg-3); }
.share-compact .share-btn { width: 34px; height: 34px; }
.share-compact .share-btn svg { width: 15px; height: 15px; }
.share-compact .share-toast { position: absolute; left: 50%; top: 100%; margin-top: 6px; transform: translateX(-50%); white-space: nowrap; }
@media (max-width: 640px) { .post-main .share { padding: 18px; } .post-main .share ul { gap: 6px; } }


/* Contact page: the support contact's name next to the WhatsApp number; the consent box turns red too when the form
   was sent without it */
.contact-who { color: var(--fg-3); }
.contact-form.was-checked .check input:invalid { outline: 2px solid var(--color-coral-signal); outline-offset: 2px; border-radius: 3px; }
.contact-form.was-checked .check input:invalid + span { color: #b91c1c; }

/* ---------- Nav, all widths: one segmented language switch; the mobile menu sheet in the same style as the
   desktop links, with the current page marked and the demo button at the bottom ---------- */
.lang-switch, .lang-switch:hover { height: 34px; padding: 3px; gap: 0; border-radius: var(--radius-pill); background: none; box-shadow: inset 0 0 0 1px var(--color-hairline); font-size: 13px; }
.lang-switch i { display: grid; place-items: center; min-width: 32px; height: 28px; padding: 0 8px; border-radius: var(--radius-pill); color: var(--color-body-gray); transition: background 150ms ease, color 150ms ease; }
.lang-switch i + i::before { content: none; }
.lang-switch .on { background: var(--color-mint); color: var(--color-primary); font-weight: 700; }
.lang-switch:hover i:not(.on) { color: var(--color-primary); }
.menu-btn .mb-close, .nav.open .menu-btn .mb-open { display: none; }
.nav.open .menu-btn .mb-close { display: block; }
.nav-menu-cta { display: none; }
@media (max-width: 1024px) {
  .nav-actions { gap: 8px; }
  .nav.open .nav-links { padding: 8px; gap: 2px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px rgba(17, 24, 39, 0.06), 0 24px 48px -24px rgba(17, 24, 39, 0.3); }
  .nav.open .nav-links > a { padding: 12px 14px; border-radius: 12px; font-size: 16px; font-weight: 500; color: var(--color-ink); }
  .nav.open .nav-links > a:hover { background: var(--color-mint); color: var(--color-primary); }
  .nav.open .nav-links > a.active, .nav.open .nav-links > a[aria-current="page"] { background: var(--color-mint); color: var(--color-primary); font-weight: 600; }
  .nav.open .nav-links > .nav-signin { margin: 6px 0 0; padding-top: 14px; border-radius: 0; box-shadow: inset 0 1px 0 var(--color-hairline); color: #4b5563; }
  .nav.open .nav-links > .nav-menu-cta { display: flex; justify-content: center; margin-top: 6px; color: #fff; }
  .nav.open .nav-links > .nav-menu-cta:hover { background: var(--color-primary); color: #fff; }
}

/* Mobile breathing room: sections sit further apart (64px a side instead of 48px), and the app showcase no longer
   tucks up under the hero, so "Memantau" and the dashboard heading read as two separate blocks */
@media (max-width: 640px) {
  :root { --section: 64px; }
  .showcase { margin-top: 0; padding-top: 40px; }
  .section-head { margin-bottom: 36px; }
}

/* Hero column: never wider than the screen. Its grid track used to size to the widest child (the source icon row),
   which pushed the whole hero past the right edge on phones narrower than ~380px. */
.hero > .wrap { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 400px) {
  .hero-sources { gap: 10px; }
  .hero-sources ul { flex-wrap: wrap; justify-content: center; gap: 6px; }
  .hero-sources i { width: 30px; height: 30px; }
  .hero-sources svg { width: 14px; height: 14px; }
}

/* Cookie consent: a small card bottom-left, plain like the rest of the site */
.consent { position: fixed; left: 16px; bottom: 16px; z-index: 60; display: grid; gap: 14px; max-width: 380px; padding: 18px 20px; border-radius: 20px; background: #fff; box-shadow: 0 0 0 1px #e3ebe8, 0 18px 40px -16px rgba(17, 24, 39, 0.3); font-size: 14px; line-height: 1.5; color: var(--fg-2); }
.consent[hidden] { display: none; }
.consent a { color: var(--color-ink); text-decoration: underline; text-underline-offset: 3px; }
.consent-actions { display: flex; gap: 8px; justify-content: flex-end; }
.footer-consent { padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 3px; background: none; cursor: pointer; }
@media (max-width: 640px) { .consent { left: 12px; right: 12px; bottom: 12px; max-width: none; } .consent-actions .btn { flex: 1; } }

/* 404: English line under the Indonesian lede, main sections as chips under the home button */
.nf-en { margin-top: 10px; font-size: 15px; color: var(--fg-3); }
.nf-en a { color: var(--color-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.nf .hero-cta { margin-top: 28px; }
.nf-links { margin-top: 20px; }
.nf-links a { padding: 8px 16px; }

/* Glossary (/istilah/, components/GlossaryPage.astro): a sticky side column with the filter box and the A–Z index,
   the terms in one readable column grouped under a large faint letter */
.gloss { padding-top: var(--spacing-64); }
.gloss-wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 64px; align-items: start; max-width: 1100px; }
.gloss-side { position: sticky; top: 112px; display: grid; gap: 18px; }
.gloss-filter { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px; border-radius: var(--radius-pill); background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--fg-3); }
.gloss-filter:focus-within { box-shadow: inset 0 0 0 2px var(--color-primary); }
.gloss-filter svg { flex-shrink: 0; width: 18px; height: 18px; }
.gloss-filter input { flex: 1; min-width: 0; border: 0; background: none; color: var(--fg); font: inherit; font-size: 15px; outline: none; }
.gloss-index { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; }
.gloss-index a { display: grid; place-items: center; height: 38px; border-radius: 10px; background: var(--color-mint); color: var(--color-primary); font-size: 14px; font-weight: 600; transition: background 150ms ease, color 150ms ease; }
.gloss-index a:hover { background: var(--color-primary); color: #fff; }
.gloss-index a.is-off { opacity: .35; pointer-events: none; }
.gloss-count { color: var(--fg-3); font-size: 13px; }
.gloss-list { display: grid; gap: 8px; }
.gloss-group { position: relative; display: grid; padding-top: 8px; }
.gloss-group + .gloss-group { margin-top: 24px; }
.gloss-letter { font-size: 56px; font-weight: 700; line-height: 1; letter-spacing: -0.04em; color: #dbe7e2; }
.gloss-term { padding: 24px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 110px; }
.gloss-term:target { margin-inline: -20px; padding-inline: 20px; border-radius: 16px; background: var(--color-mint); }
.gloss-term h2 { font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.gloss-alias { color: var(--fg-3); font-weight: 500; }
.gloss-term p { margin-top: 10px; color: var(--fg-2); font-size: 17px; line-height: 1.65; max-width: 68ch; }
.gloss-term p.gloss-links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 14px; font-size: 14.5px; color: var(--fg-3); }
.gloss-links a { color: var(--color-primary); text-decoration: underline; text-decoration-color: var(--color-silver); text-underline-offset: 4px; }
.gloss-links a:hover { text-decoration-color: var(--color-primary); }
.gloss-links .gloss-more { font-weight: 600; text-decoration: none; }
.gloss-none { padding: 32px 0; color: var(--fg-3); }
.gloss-index a:focus-visible, .gloss-links a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
@media (max-width: 900px) {
  .gloss-wrap { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .gloss-side { position: static; }
  .gloss-index { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
}
@media (max-width: 640px) {
  .gloss-letter { font-size: 44px; }
  .gloss-term h2 { font-size: 19px; }
  .gloss-term p { font-size: 16px; }
}