/* ==========================================================================
   KaamDiary — marketing site
   Colours and type scale are taken directly from the app's own design
   system (src/theme) so the site and the product look like one thing.
   ========================================================================== */

:root {
  color-scheme: light;

  /* Brand */
  --primary: #49ab96;
  --primary-dark: #327667;
  /*
    Unchanged in dark mode on purpose: this and `--gradient` below are the
    app's own `gradientFill()`/`GRADIENT_STOPS` — a fixed, theme-invariant
    fill for buttons and brand surfaces (white text sits on top of both in
    either scheme), not a themed text/background pairing like the rest of
    this file. See src/theme/index.ts's own comment on `gradient`.
  */
  --primary-darker: #1f4238;
  --primary-light: #e8f6f2;
  --primary-muted: #f2faf8;
  --gradient: linear-gradient(135deg, #357e6d, #1f4238);

  /* Neutrals */
  --bg: #f7f9f8;
  --surface: #ffffff;
  --surface-muted: #f2f5f4;
  --text: #17201d;
  --text-secondary: #66736f;
  --text-muted: #8a9793;
  --text-inverse: #ffffff;
  --border: #e2e9e6;
  --border-strong: #c7d3cf;

  /* Sticky header's translucent backing — same colour as --bg, its own
     variable only because it also carries an alpha the solid tokens don't. */
  --header-bg: rgba(247, 249, 248, 0.86);

  /* Accents used sparingly, matching in-app status colours */
  --warning: #d97706;
  --warning-light: #fef3c7;

  /* Type */
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Noto Sans Devanagari', sans-serif;

  /* Scale */
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(23, 32, 29, 0.06), 0 1px 1px rgba(23, 32, 29, 0.04);
  --shadow-md: 0 8px 24px rgba(23, 32, 29, 0.08);
  --shadow-lg: 0 12px 28px rgba(23, 32, 29, 0.1), 0 32px 72px rgba(31, 66, 56, 0.16);
  /* Brand-tinted, for the hover state of things already teal (the primary
     button, a selected card) — a plain grey shadow there just looks dirty
     rather than lifted. */
  --shadow-glow: 0 12px 32px rgba(73, 171, 150, 0.28);
  --container: 1160px;
}

/*
  Dark theme — the exact `darkColors` values from src/theme/index.ts, so the
  site reads as the same product as the app in either scheme. Only the
  tokens that actually change get redeclared; anything not listed here
  (--primary, --primary-darker, --gradient, --warning, ...) is identical in
  both palettes and falls through to the `:root` block above unchanged.

  Deliberately gated on `[data-theme='dark']` alone, not also on a
  `prefers-color-scheme: dark` media query: light is this site's default
  regardless of the visitor's OS setting, unlike the app. Dark only applies
  once `js/theme.js` sets this attribute, from an explicit toggle click.
*/
:root[data-theme='dark'] {
  color-scheme: dark;

  --primary-dark: #57c7ac;
  --primary-light: #203c35;
  --primary-muted: #293935;

  --bg: #1a211f;
  --surface: #2a3532;
  --surface-muted: #141b19;
  --text: #edf2f0;
  --text-secondary: #9fb0ab;
  --text-muted: #76867f;
  --border: #3c4a45;
  --border-strong: #4c5c56;

  --header-bg: rgba(26, 33, 31, 0.86);

  --warning-light: #443518;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, 0.35), 0 32px 72px rgba(0, 0, 0, 0.5);
  --shadow-glow: 0 12px 32px rgba(87, 199, 172, 0.22);
}

/* ---------------------------------------------------------------------- */
/* Reset                                                                   */
/* ---------------------------------------------------------------------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  /*
    A near-invisible grain sits under the solid colour — alpha-only noise
    (the feColorMatrix below zeroes every channel but alpha), so it reads
    the same faint texture on the light and dark palette without its own
    per-theme tuning. `background-attachment: fixed` anchors it to the
    viewport rather than the page, so scrolling doesn't slide it against
    the sections painted over it — the kind of detail that's invisible
    named but felt as "this doesn't look flat" once it's there.
  */
  background-color: var(--bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-attachment: fixed;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.2s ease, color 0.2s ease;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
  /* An email address has no spaces to wrap on — without this, it forces its
     container wider than the viewport at narrow widths instead of breaking. */
  overflow-wrap: break-word;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font-family: inherit;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

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

section {
  scroll-margin-top: 84px;
}

/* Skip link — invisible until focused, for keyboard/screen-reader users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--primary-darker);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 var(--radius-sm) 0;
  z-index: 200;
}

.skip-link:focus {
  left: 0;
}

/* ---------------------------------------------------------------------- */
/* Type                                                                    */
/* ---------------------------------------------------------------------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--primary-dark);
  background: var(--primary-light);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
}

h1 {
  font-size: clamp(2.1rem, 4.4vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
}

/* The gradient painted as text fill rather than a background — for the one
   phrase per headline meant to carry brand colour instead of `var(--text)`. */
.text-gradient {
  background: var(--gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

h2 {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

h3 {
  font-size: 1.15rem;
  font-weight: 700;
}

.section-head {
  max-width: 640px;
  margin: 0 auto 48px;
  text-align: center;
}

.section-head p {
  margin-top: 14px;
  color: var(--text-secondary);
  font-size: 1.05rem;
}

.lede {
  font-size: 1.15rem;
  color: var(--text-secondary);
}

/* ---------------------------------------------------------------------- */
/* Buttons                                                                 */
/* ---------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.98rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease,
    opacity 0.15s ease;
  white-space: nowrap;
}

.btn:active {
  transform: translateY(1px);
}

.btn-primary {
  background: var(--gradient);
  color: #fff;
  /* A thin bright top edge, the way a physically raised, lit surface would
     catch light — inset so it doesn't add to the button's footprint. */
  box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

.btn-primary:hover {
  box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.btn-ghost {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border-strong);
}

.btn-ghost:hover {
  background: var(--surface-muted);
  border-color: var(--text-muted);
}

.btn-light {
  background: #fff;
  color: var(--primary-darker);
}

.btn-light:hover {
  background: var(--primary-light);
}

.btn-block {
  width: 100%;
}

.btn[aria-disabled='true'] {
  opacity: 0.6;
  cursor: default;
  pointer-events: none;
}

.btn svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.btn-sub {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  opacity: 0.85;
  margin-top: -2px;
}

.btn-main {
  font-size: 0.98rem;
  line-height: 1.15;
}

/* ---------------------------------------------------------------------- */
/* Header                                                                  */
/* ---------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--header-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--text);
}

.brand img {
  width: 38px;
  height: 38px;
  border-radius: 10px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}

.nav-links a {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text-secondary);
  transition: color 0.15s ease;
}

.nav-links a:hover {
  color: var(--primary-dark);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
}

/*
  Shows the *other* language's name — tap to switch to it. One compact
  button rather than a two-way segmented control, so it costs almost no
  header width and still fits next to the hamburger at the narrowest
  screens this site supports (see the 320px check in the responsive
  section below).
*/
.lang-toggle {
  flex-shrink: 0;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  font-size: 0.85rem;
  font-family: inherit;
  cursor: pointer;
}

.lang-toggle:hover {
  background: var(--surface-muted);
  border-color: var(--text-muted);
}

/*
  Icon-only, same footprint as `.lang-toggle` at its narrowest (a circle
  rather than a text pill) so the pair sits next to the hamburger without
  pushing the header wider at the narrowest screens this site supports.
  Shows the icon of the theme a tap switches *to* — a moon in light mode, a
  sun in dark — matching `.lang-toggle`'s own "shows the other option"
  convention.
*/
.theme-toggle {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.theme-toggle:hover {
  background: var(--surface-muted);
  border-color: var(--text-muted);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
}

.theme-toggle .icon-sun {
  display: none;
}

:root[data-theme='dark'] .theme-toggle .icon-sun {
  display: block;
}

:root[data-theme='dark'] .theme-toggle .icon-moon {
  display: none;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-toggle svg {
  width: 22px;
  height: 22px;
}

/* ---------------------------------------------------------------------- */
/* Hero                                                                    */
/* ---------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  padding: 76px 0 40px;
}

.hero::before {
  content: '';
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 620px;
  background: radial-gradient(60% 60% at 30% 20%, rgba(73, 171, 150, 0.16), transparent 70%),
    radial-gradient(50% 50% at 80% 10%, rgba(31, 66, 56, 0.12), transparent 70%);
  z-index: -1;
  animation: drift 22s ease-in-out infinite alternate;
}

/* A second, smaller blob on its own slower loop — two things moving at
   different rates read as depth; one thing moving reads as a glitch. */
.hero::after {
  content: '';
  position: absolute;
  inset: auto -15% -30% auto;
  width: 55%;
  height: 480px;
  background: radial-gradient(50% 50% at 60% 60%, rgba(73, 171, 150, 0.12), transparent 70%);
  z-index: -1;
  animation: drift 28s ease-in-out infinite alternate-reverse;
}

@keyframes drift {
  from {
    transform: translate(0, 0) scale(1);
  }
  to {
    transform: translate(3%, 2%) scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero::before,
  .hero::after {
    animation: none;
  }
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}

.hero-copy h1 {
  margin-bottom: 20px;
}

.hero-copy .lede {
  max-width: 520px;
  margin-bottom: 32px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.hero-note {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
  font-size: 0.9rem;
}

.hero-note svg {
  width: 18px;
  height: 18px;
  color: var(--primary);
  flex-shrink: 0;
}

.hero-tagline-hi {
  margin-top: 22px;
  font-size: 0.95rem;
  color: var(--text-muted);
}

/* Content scoped to one language — see the `[data-show-lang]` handling in js/i18n.js. */
[data-show-lang] {
  display: none;
}

.hero-visual {
  position: relative;
  display: flex;
  justify-content: center;
}

/* ---------------------------------------------------------------------- */
/* Phone mockup — built from real UI colours/type, not a screenshot        */
/* ---------------------------------------------------------------------- */

.phone {
  /* Fluid below ~360px viewports so the mockup never forces the page wider
     than the screen — fixed above that, where 280px already fits. */
  width: min(280px, 78vw);
  border-radius: 40px;
  background: #101613;
  padding: 12px;
  box-shadow: var(--shadow-lg);
  position: relative;
}

.phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 96px;
  height: 22px;
  background: #101613;
  border-radius: 0 0 14px 14px;
  z-index: 3;
}

.phone-screen {
  background: var(--surface);
  border-radius: 30px;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  flex-direction: column;
}

.phone-status {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
  padding: 16px 20px 4px;
}

.phone-topbar {
  padding: 8px 18px 14px;
}

.phone-greeting {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
}

.phone-sub {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
}

.phone-chip {
  font-size: 10px;
  font-weight: 700;
  color: var(--primary-dark);
  background: var(--primary-light);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}

.phone-date {
  font-size: 10.5px;
  color: var(--text-muted);
}

.phone-balance {
  margin: 6px 16px 14px;
  padding: 18px;
  border-radius: 18px;
  background: var(--gradient);
  color: #fff;
}

.phone-balance-label {
  font-size: 10px;
  opacity: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.phone-balance-amount {
  font-size: 26px;
  font-weight: 800;
  margin-top: 4px;
}

.phone-cta {
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.95);
  color: var(--primary-darker);
  border-radius: 14px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 11.5px;
  font-weight: 700;
}

.phone-section-title {
  font-size: 11px;
  font-weight: 800;
  color: var(--text);
  margin: 4px 16px 8px;
}

.phone-cards {
  display: flex;
  gap: 10px;
  padding: 0 16px;
}

.phone-card {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
}

.phone-card-name {
  font-size: 11px;
  font-weight: 700;
  color: var(--text);
}

.phone-card-meta {
  font-size: 9.5px;
  color: var(--text-muted);
  margin-top: 4px;
}

.phone-card-amount {
  font-size: 13px;
  font-weight: 800;
  color: var(--primary-dark);
  margin-top: 8px;
}

.phone-tabbar {
  margin-top: auto;
  display: flex;
  justify-content: space-around;
  padding: 12px 8px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.phone-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 8.5px;
  color: var(--text-muted);
  font-weight: 600;
}

.phone-tab.active {
  color: var(--primary-dark);
}

.phone-tab span {
  width: 18px;
  height: 18px;
  border-radius: 6px;
  background: currentColor;
  opacity: 0.16;
}

.phone-tab.active span {
  opacity: 0.28;
}

.badge-float {
  position: absolute;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 700;
}

.badge-float svg {
  width: 20px;
  height: 20px;
  color: var(--primary);
  flex-shrink: 0;
}

.badge-float.badge-1 {
  top: 14%;
  left: -14%;
}

.badge-float.badge-2 {
  bottom: 10%;
  right: -12%;
}

/* ---------------------------------------------------------------------- */
/* Logos / trust strip                                                    */
/* ---------------------------------------------------------------------- */

.trust-strip {
  padding: 36px 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.trust-strip .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 28px 44px;
  text-align: center;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.9rem;
}

.trust-item svg {
  width: 20px;
  height: 20px;
  color: var(--primary);
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------- */
/* Problem / solution                                                     */
/* ---------------------------------------------------------------------- */

.split {
  padding: 96px 0;
}

.split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.split-grid.reverse .split-media {
  order: 2;
}

.chip-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 28px;
}

.chip-list li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.chip-list .icon-dot {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--primary-light);
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.chip-list .icon-dot svg {
  width: 18px;
  height: 18px;
}

.chip-list strong {
  display: block;
  font-size: 0.98rem;
  margin-bottom: 2px;
}

.chip-list span {
  color: var(--text-secondary);
  font-size: 0.92rem;
}

.diary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}

.diary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px dashed var(--border);
  font-size: 0.92rem;
}

.diary-row:last-child {
  border-bottom: none;
}

.diary-row .strike {
  text-decoration: line-through;
  color: var(--text-muted);
}

.diary-row .fix {
  color: var(--primary-dark);
  font-weight: 700;
}

/* ---------------------------------------------------------------------- */
/* Features grid                                                          */
/* ---------------------------------------------------------------------- */

.features {
  padding: 96px 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.feature-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 28px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: var(--shadow-glow);
}

.feature-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: var(--gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.feature-icon svg {
  width: 24px;
  height: 24px;
}

.feature-card h3 {
  margin-bottom: 8px;
}

.feature-card p {
  color: var(--text-secondary);
  font-size: 0.92rem;
}

/* ---------------------------------------------------------------------- */
/* Flow / how it works — an interactive walkthrough, not a static grid.   */
/*                                                                        */
/* Six radio inputs drive the whole thing (`.flow-radio`, visually hidden */
/* but real — `display:none` would drop them from the accessibility tree */
/* and break both `:checked` and their `<label for>` pairing). No JS: a   */
/* step is a native radio group, so arrow keys move between steps and a   */
/* screen reader announces them as one. `:has()` would collapse the      */
/* twelve sibling-combinator rules below into two, but this site's other */
/* interactive CSS (the theme toggle) already avoids depending on it, and */
/* six fixed steps that rarely change in number read fine written out.   */
/* ---------------------------------------------------------------------- */

.flow {
  padding: 96px 0;
}

.flow-interactive {
  display: grid;
  grid-template-columns: 0.95fr 1.05fr;
  gap: 56px;
  align-items: start;
  margin-top: 56px;
}

.flow-radio {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.flow-steps-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.flow-step {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.flow-step:hover {
  background: var(--surface-muted);
}

.flow-num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--primary-light);
  color: var(--primary-dark);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  transition: background 0.2s ease, color 0.2s ease;
}

.flow-step-copy {
  padding-top: 2px;
}

.flow-step-copy strong {
  display: block;
  font-size: 1rem;
  margin-bottom: 4px;
}

.flow-step-copy span {
  display: block;
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.5;
}

#flow-step-1:checked ~ .flow-steps-list .flow-step:nth-child(1),
#flow-step-2:checked ~ .flow-steps-list .flow-step:nth-child(2),
#flow-step-3:checked ~ .flow-steps-list .flow-step:nth-child(3),
#flow-step-4:checked ~ .flow-steps-list .flow-step:nth-child(4),
#flow-step-5:checked ~ .flow-steps-list .flow-step:nth-child(5),
#flow-step-6:checked ~ .flow-steps-list .flow-step:nth-child(6) {
  background: var(--surface);
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}

#flow-step-1:checked ~ .flow-steps-list .flow-step:nth-child(1) .flow-num,
#flow-step-2:checked ~ .flow-steps-list .flow-step:nth-child(2) .flow-num,
#flow-step-3:checked ~ .flow-steps-list .flow-step:nth-child(3) .flow-num,
#flow-step-4:checked ~ .flow-steps-list .flow-step:nth-child(4) .flow-num,
#flow-step-5:checked ~ .flow-steps-list .flow-step:nth-child(5) .flow-num,
#flow-step-6:checked ~ .flow-steps-list .flow-step:nth-child(6) .flow-num {
  background: var(--gradient);
  color: #fff;
}

#flow-step-1:focus-visible ~ .flow-steps-list .flow-step:nth-child(1),
#flow-step-2:focus-visible ~ .flow-steps-list .flow-step:nth-child(2),
#flow-step-3:focus-visible ~ .flow-steps-list .flow-step:nth-child(3),
#flow-step-4:focus-visible ~ .flow-steps-list .flow-step:nth-child(4),
#flow-step-5:focus-visible ~ .flow-steps-list .flow-step:nth-child(5),
#flow-step-6:focus-visible ~ .flow-steps-list .flow-step:nth-child(6) {
  outline: 2px solid var(--primary-dark);
  outline-offset: 2px;
}

.flow-visual {
  display: flex;
  justify-content: center;
  position: sticky;
  top: 108px;
}

.flow-visual .phone-screen {
  min-height: 0;
  height: 560px;
}

.flow-screen {
  display: none;
  flex-direction: column;
  height: 100%;
}

#flow-step-1:checked ~ .flow-visual .flow-screen:nth-child(1),
#flow-step-2:checked ~ .flow-visual .flow-screen:nth-child(2),
#flow-step-3:checked ~ .flow-visual .flow-screen:nth-child(3),
#flow-step-4:checked ~ .flow-visual .flow-screen:nth-child(4),
#flow-step-5:checked ~ .flow-visual .flow-screen:nth-child(5),
#flow-step-6:checked ~ .flow-visual .flow-screen:nth-child(6) {
  display: flex;
}

.flow-screen-pad {
  padding: 10px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.flow-screen-center {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 14px;
}

.flow-app-icon {
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

.flow-screen-title {
  font-size: 15px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.35;
}

.flow-screen-note {
  font-size: 11px;
  color: var(--text-muted);
}

.flow-google-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 11px 16px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text);
  margin-top: 4px;
}

.flow-google-btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.flow-role-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  margin-top: 12px;
}

.flow-role-option.selected {
  border-color: var(--primary);
  background: var(--primary-light);
}

.flow-role-icon {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.flow-role-option.selected .flow-role-icon {
  background: var(--surface);
}

.flow-role-icon svg {
  width: 18px;
  height: 18px;
}

.flow-role-copy {
  flex: 1;
  min-width: 0;
}

.flow-role-copy strong {
  display: block;
  font-size: 12.5px;
  color: var(--text);
}

.flow-role-copy span {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 1px;
}

.flow-role-check {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--primary-dark);
}

.flow-field {
  display: block;
  margin-top: 14px;
}

.flow-field > span:first-child {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.flow-field-value {
  display: block;
  background: var(--surface-muted);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text);
}

.flow-fake-btn {
  display: block;
  text-align: center;
  margin-top: 20px;
  background: var(--gradient);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 12px;
  font-size: 12.5px;
  font-weight: 700;
}

.flow-chip-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.flow-chip {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--surface-muted);
  border: 1px solid var(--border);
  padding: 7px 12px;
  border-radius: var(--radius-pill);
}

.flow-chip.active {
  color: #fff;
  background: var(--gradient);
  border-color: transparent;
}

.flow-week {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  padding: 0 4px;
}

.flow-day {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface-muted);
}

.flow-day.done {
  background: var(--primary-light);
  color: var(--primary-dark);
}

.flow-day.today {
  background: var(--gradient);
  color: #fff;
}

.flow-live-badge {
  display: inline-block;
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.2);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 9.5px;
  font-weight: 700;
}

.flow-amount {
  font-size: 30px;
  font-weight: 800;
  color: var(--text);
  text-align: center;
  margin: 10px 0 16px;
}

.flow-settle-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 11px;
  font-weight: 700;
  color: var(--primary-dark);
}

.flow-settle-note svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ---------------------------------------------------------------------- */
/* Role cards (worker / contractor)                                       */
/* ---------------------------------------------------------------------- */

.roles {
  padding: 96px 0;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.role-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.role-card {
  border-radius: var(--radius-lg);
  padding: 36px;
  border: 1px solid var(--border);
  background: var(--bg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.role-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.role-card.highlight {
  background: var(--gradient);
  color: #fff;
  border: none;
}

.role-card.highlight:hover {
  box-shadow: var(--shadow-glow);
}

.role-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  background: var(--primary-light);
  color: var(--primary-dark);
}

.role-card.highlight .role-icon {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}

.role-icon svg {
  width: 26px;
  height: 26px;
}

.role-card h3 {
  font-size: 1.3rem;
  margin-bottom: 10px;
}

.role-card > p {
  color: var(--text-secondary);
  margin-bottom: 20px;
  font-size: 0.95rem;
}

.role-card.highlight > p {
  color: rgba(255, 255, 255, 0.85);
}

.role-card ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.role-card li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.92rem;
}

.role-card li svg {
  width: 18px;
  height: 18px;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 1px;
}

.role-card.highlight li svg {
  color: #fff;
}

/* ---------------------------------------------------------------------- */
/* FAQ                                                                     */
/* ---------------------------------------------------------------------- */

.faq {
  padding: 96px 0;
}

.faq-list {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  overflow: hidden;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.faq-item[open] {
  border-color: var(--primary);
  box-shadow: var(--shadow-sm);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  background: none;
  border: none;
  text-align: left;
  font-weight: 700;
  font-size: 0.98rem;
  cursor: pointer;
  color: var(--text);
}

.faq-question .chev {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
  transition: transform 0.2s ease;
}

.faq-item[open] .faq-question .chev {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 22px 20px;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.6;
}

.faq-answer a {
  color: var(--primary-dark);
  font-weight: 600;
  text-decoration: underline;
}

/* ---------------------------------------------------------------------- */
/* CTA banner                                                             */
/* ---------------------------------------------------------------------- */

.cta-banner {
  margin: 0 24px 96px;
  max-width: calc(var(--container) - 0px);
  margin-left: auto;
  margin-right: auto;
  background: var(--gradient);
  border-radius: var(--radius-lg);
  padding: 64px 48px;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.cta-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(60% 80% at 90% 0%, rgba(255, 255, 255, 0.12), transparent 60%);
}

.cta-banner h2 {
  color: #fff;
  margin-bottom: 14px;
  position: relative;
}

.cta-banner p {
  color: rgba(255, 255, 255, 0.85);
  max-width: 520px;
  margin: 0 auto 32px;
  position: relative;
}

.cta-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  position: relative;
}

/* ---------------------------------------------------------------------- */
/* Contact                                                                 */
/* ---------------------------------------------------------------------- */

.contact {
  padding: 0 0 96px;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 48px;
  box-shadow: var(--shadow-sm);
}

/* Grid items default to `min-width: auto`, which lets long unbroken content
   (the email address) force the track wider than the viewport instead of
   shrinking. This is what actually lets the column narrow. */
.contact-grid > * {
  min-width: 0;
}

.contact-info h2 {
  margin-bottom: 14px;
}

.contact-info > p {
  color: var(--text-secondary);
  margin-bottom: 28px;
}

.contact-method {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 0;
  border-top: 1px solid var(--border);
}

.contact-method:first-of-type {
  border-top: none;
}

.contact-method .icon-dot {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--primary-light);
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-method .icon-dot svg {
  width: 20px;
  height: 20px;
}

.contact-method strong {
  display: block;
  font-size: 0.9rem;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 2px;
}

.contact-method a,
.contact-method span {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

.contact-method a:hover {
  color: var(--primary-dark);
}

.contact-panel {
  background: var(--bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
}

.contact-panel .icon-badge {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--gradient);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-panel .icon-badge svg {
  width: 28px;
  height: 28px;
}

.contact-panel h3 {
  font-size: 1.15rem;
}

.contact-panel p {
  color: var(--text-secondary);
  font-size: 0.92rem;
}

/* ---------------------------------------------------------------------- */
/* Footer                                                                  */
/* ---------------------------------------------------------------------- */

.site-footer {
  position: relative;
  padding: 64px 0 28px;
  /* A step darker than the page rather than matching `.faq`/`.contact`
     above it — the footer is the one section meant to read as "done", not
     as another content block the same weight as what came before. */
  background: var(--surface-muted);
}

/* A thin brand-gradient hairline instead of a flat `border-top` — the same
   line every other section divider uses, just with colour in it, since
   this is the page's last edge rather than one more seam between panels. */
.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary) 20%, var(--primary) 80%, transparent);
  opacity: 0.5;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 40px;
}

.footer-grid > * {
  min-width: 0;
}

.footer-brand .brand {
  margin-bottom: 14px;
}

.footer-brand p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  max-width: 280px;
}

/* Three small facts a visitor deciding whether to install would otherwise
   have to scroll back up for — the trust strip's own claims, repeated at
   the size a footer earns rather than the hero's. */
.footer-trust {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 20px;
}

.footer-trust li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-secondary);
}

.footer-trust svg {
  width: 15px;
  height: 15px;
  color: var(--primary-dark);
  flex-shrink: 0;
}

.footer-col h4 {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-col a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  color: var(--text-secondary);
  font-weight: 500;
  transition: color 0.15s ease, transform 0.15s ease;
}

.footer-col a svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--text-muted);
  transition: color 0.15s ease;
}

.footer-col a:hover {
  color: var(--primary-dark);
  transform: translateX(2px);
}

.footer-col a:hover svg {
  color: var(--primary-dark);
}

/* The one footer link that isn't plain text — a small badge, the same
   shape the header/hero's own "Get it on Google Play" buttons use, so the
   one action in this column (not just information) still reads as one. */
.footer-play-badge {
  display: inline-flex !important;
  width: fit-content;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
}

.footer-play-badge svg {
  width: 16px;
  height: 16px;
  color: var(--text);
}

.footer-play-badge:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  transform: translateX(0) translateY(-1px);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-muted);
}

.footer-copy {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-copy img {
  border-radius: 5px;
  opacity: 0.85;
}

.footer-bottom-links {
  display: flex;
  gap: 20px;
}

.footer-bottom-links a {
  color: var(--text-muted);
}

.footer-bottom-links a:hover {
  color: var(--primary-dark);
}

/* ---------------------------------------------------------------------- */
/* Scroll reveal                                                          */
/* ---------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/*
  A per-card stagger for the two grids where several `.reveal` siblings
  cross the observer's threshold at once — six/two cards fading in
  together reads as a flicker, a few cards cascading in reads as intent.
  `.flow-interactive` and `.split-media`/`.split-copy` reveal as one block
  each and don't need this — they're not grids of repeated siblings.
*/
.feature-grid .feature-card:nth-child(2) {
  transition-delay: 0.08s;
}

.feature-grid .feature-card:nth-child(3) {
  transition-delay: 0.16s;
}

.feature-grid .feature-card:nth-child(4) {
  transition-delay: 0.08s;
}

.feature-grid .feature-card:nth-child(5) {
  transition-delay: 0.16s;
}

.feature-grid .feature-card:nth-child(6) {
  transition-delay: 0.24s;
}

.role-grid .role-card:nth-child(2) {
  transition-delay: 0.1s;
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  html {
    scroll-behavior: auto;
  }
}

/* ---------------------------------------------------------------------- */
/* Responsive                                                              */
/* ---------------------------------------------------------------------- */

@media (max-width: 980px) {
  .hero-grid,
  .split-grid,
  .role-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .split-grid.reverse .split-media {
    order: 0;
  }

  .feature-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .flow-interactive {
    grid-template-columns: 1fr;
  }

  /* The click-to-switch interaction still works stacked; sticking the
     phone mid-scroll only makes sense beside a taller side-by-side list. */
  .flow-visual {
    position: static;
    margin-top: 8px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .hero-visual {
    margin-top: 24px;
  }
}

/*
  Wider than the content-stacking breakpoint below: five nav links plus two
  header buttons need real room to sit next to the wordmark without
  crowding — tablet portrait (~768px) falls between the two, so it needs its
  own tier rather than sharing the 760px one below.
*/
@media (max-width: 1024px) {
  .nav-links,
  .header-actions .btn-ghost {
    display: none;
  }

  .nav-toggle {
    display: flex;
  }
}

@media (max-width: 760px) {
  .feature-grid {
    grid-template-columns: 1fr;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .contact-grid {
    padding: 28px;
  }

  .cta-banner {
    padding: 44px 24px;
    margin-left: 16px;
    margin-right: 16px;
  }

  section {
    scroll-margin-top: 140px;
  }
}

/*
  The floating badges are positioned as a percentage of `.hero-visual`'s own
  box (`badge-1` at `left: -14%`, `badge-2` at `right: -12%`), so they hang
  off the mockup by design — that only stays clear of the viewport edge on
  genuine desktop widths, where the `.container` has hit its 1160px cap and
  has margin to spare. Everywhere narrower than that, up through where the
  hero grid has already stacked to one column, `.hero-visual` is wide enough
  that the same percentage pushes a badge (or, below 760px, both) past the
  screen edge, and `.hero`'s own `overflow: hidden` — needed to clip the
  decorative gradient blob behind the copy — clips the badge there too,
  chopping its label mid-word. Below 760px this rule already existed; it's
  widened here to cover the whole range it was actually needed for, checked
  by measuring each badge's edge against the viewport at every width from
  320px to 1920px rather than guessing a round number.
*/
@media (max-width: 1239px) {
  .badge-float {
    display: none;
  }
}

@media (max-width: 480px) {
  /* Below this, "Get it on Google Play" plus the hamburger no longer both
     fit next to the wordmark — the drawer already repeats this button, so
     the header keeps only the logo and the toggle. */
  .header-actions .btn-primary {
    display: none;
  }

  /* Same reasoning, same fix, one control earlier: adding the theme toggle
     to the header pushes it over budget at this width even with the button
     above already gone — measured overflowing the wordmark at 320px.
     `.mobile-nav-theme` below is the drawer's copy of this same control. */
  .header-actions .theme-toggle {
    display: none;
  }

  /* Nowrap pill buttons stop shrinking once their label runs out of room;
     stacking them full-width avoids forcing the page wider than the
     screen instead. */
  .hero-actions,
  .cta-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn,
  .cta-actions .btn {
    width: 100%;
  }

  .container {
    padding: 0 16px;
  }
}

/* Mobile nav drawer */
.mobile-nav {
  position: fixed;
  inset: 76px 0 0 0;
  background: var(--surface);
  z-index: 99;
  padding: 24px;
  display: none;
  flex-direction: column;
  gap: 4px;
  overflow-y: auto;
}

.mobile-nav.open {
  display: flex;
}

.mobile-nav a {
  padding: 16px 4px;
  border-bottom: 1px solid var(--border);
  font-weight: 700;
  font-size: 1.05rem;
}

.mobile-nav .btn {
  margin-top: 20px;
}

/*
  Drawer's copy of the header's `.theme-toggle` (hidden below 480px — see
  that breakpoint above). Two classes so it wins over the plain
  `.theme-toggle` circular sizing without depending on source order.
*/
.mobile-nav-theme.theme-toggle {
  display: flex;
  width: auto;
  height: auto;
  align-items: center;
  /* `.theme-toggle` above centers its (icon-only) content; this one carries
     a label too and belongs in the same left-aligned column as the drawer's
     nav links. */
  justify-content: flex-start;
  gap: 12px;
  padding: 16px 4px;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
  background: none;
  font-weight: 700;
  font-size: 1.05rem;
  font-family: inherit;
  text-align: left;
}

.mobile-nav-theme.theme-toggle svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--text-muted);
}