/* Sekretaris AI.
   The palette is lifted from the logo itself: the deep forest of the wordmark, the sage of its ribbon, and the
   pale mint in between, on a warm paper ground so the logo sits on the page the way it was drawn, on light.
   One motif carries the promise of "24 jam": a sky that runs from night through dawn, noon and dusk back to night.
   It is the hero's day bar, the spine of the day timeline, and the bar in the always-on section.
   Clay marks what a day costs without a secretary; green marks what it gets back.
   One same-origin script (motion.js, CSP script-src 'self') adds reveals, counters and depth; without it every
   element is simply visible. No inline styles or scripts: the CSP forbids both. */

:root {
  color-scheme: light;

  /* ground */
  --paper: #f6f6f0;
  --paper-2: #eff1e8;
  --paper-3: #e7ebdf;
  --card: #fcfcf8;
  --white: #fefefb;

  /* ink, from the wordmark (#012d25) */
  --ink: #0d2b22;
  --text: #3b4a43;
  --muted: #647069;
  --faint: #8b958f;

  /* lines */
  --line: rgba(13, 43, 34, .09);
  --line-2: rgba(13, 43, 34, .15);
  --line-3: rgba(13, 43, 34, .26);

  /* the ribbon, dark to light */
  --forest: #0e3a2c;
  --forest-2: #134a38;
  --forest-3: #17523f;
  --green: #1d7550;
  --green-2: #2a8a5c;
  --leaf: #4da36e;
  --sage: #81c084;
  --mint: #dcefdc;
  --mint-2: #ebf5e9;

  /* what a day costs */
  --clay: #a14e2e;
  --clay-soft: #f5e5db;

  /* 24 hours of sky, left to right (00.00 to 24.00) and top to bottom (morning to night) */
  --sky: linear-gradient(90deg, #14352b 0%, #1d4739 15%, #b98a67 22.5%, #efc79c 26.5%, #e4efd8 34%, #f3f1e2 50%, #efe3c4 63%, #e2b07c 70.5%, #b86a47 75.5%, #2f5445 81%, #14352b 89%, #102b22 100%);
  --sky-day: linear-gradient(180deg, #e7b27d 0%, #b9dcae 22%, #f0d58c 55%, #e0a66b 82%, #c9764f 100%);

  /* WhatsApp's own, for WhatsApp only */
  --wa: #25d366;
  --wa-chat: #efeae2;
  --wa-out: #d9fdd3;
  --wa-in: #ffffff;
  --wa-ink: #111b21;
  --wa-meta: #667781;
  --wa-link: #027eb5;
  --wa-tick: #53bdeb;

  --sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --shadow-1: 0 1px 1px rgba(13, 43, 34, .05), 0 3px 6px -2px rgba(13, 43, 34, .07), 0 8px 18px -10px rgba(13, 43, 34, .14);
  --shadow-2: 0 1px 1px rgba(13, 43, 34, .04), 0 4px 10px -3px rgba(13, 43, 34, .07), 0 18px 36px -18px rgba(13, 43, 34, .26), 0 40px 70px -46px rgba(13, 43, 34, .3);
  --shadow-3: 0 2px 3px rgba(13, 43, 34, .05), 0 12px 24px -10px rgba(13, 43, 34, .13), 0 40px 70px -32px rgba(13, 43, 34, .34), 0 90px 130px -70px rgba(13, 43, 34, .32);
  --shadow-lift: 0 2px 3px rgba(13, 43, 34, .05), 0 16px 30px -12px rgba(13, 43, 34, .2), 0 50px 80px -40px rgba(13, 43, 34, .36);
  --rim: inset 0 1px 0 rgba(255, 255, 255, .95);
  --ease-quart: cubic-bezier(.25, 1, .5, 1);

  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;

  --ease: cubic-bezier(.16, 1, .3, 1);

  --z-nav: 20;
  --z-progress: 40;
  --z-skip: 50;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; -webkit-text-size-adjust: 100%; background: var(--paper); }
body {
  margin: 0; font-family: var(--sans); color: var(--text); background: var(--paper);
  font-size: 16.5px; line-height: 1.62; overflow-x: hidden;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* a film of paper grain over everything, so flat colour reads as a surface */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .045; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

a { color: inherit; }
svg { display: block; }
h1, h2, h3, h4, p, dl, dd, ol, ul, figure { margin: 0; }
h1, h2, h3, h4 { color: var(--ink); text-wrap: balance; font-weight: 800; letter-spacing: -.028em; word-spacing: .05em; }
p, dd, li { text-wrap: pretty; }
img { max-width: 100%; height: auto; display: block; }
::selection { background: var(--mint); color: var(--ink); }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 6px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip {
  position: absolute; left: 16px; top: -56px; z-index: var(--z-skip); background: var(--forest); color: var(--white);
  padding: 11px 16px; border-radius: var(--r-sm); text-decoration: none; font-weight: 700;
}
.skip:focus { top: 12px; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* how far down the page you are, drawn as the day passing */
.progress {
  position: fixed; inset: 0 0 auto; height: 3px; z-index: var(--z-progress); transform-origin: 0 50%; transform: scaleX(0);
  background: var(--sky);
}

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 2; }
.section { padding: clamp(84px, 10vw, 128px) 0; position: relative; }
.band { background: var(--paper-2); }

/* section heads: the sentence carries the section, no label above it */
.h2 { font-size: clamp(31px, 4.1vw, 52px); line-height: 1.07; letter-spacing: -.036em; }
.h2 em { font-style: normal; color: var(--green); }
.intro { margin-top: 20px; font-size: clamp(17px, 1.5vw, 19px); color: var(--muted); max-width: 640px; line-height: 1.6; }
.head { max-width: 800px; margin-bottom: clamp(44px, 5vw, 64px); }
.head.center { margin-inline: auto; text-align: center; }
.head.center .intro { margin-inline: auto; }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 24px;
  border-radius: 999px; font: 700 16px/1 var(--sans); text-decoration: none; border: 1px solid transparent;
  position: relative; white-space: nowrap; letter-spacing: -.005em;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .25s, border-color .25s, color .25s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:active { transform: scale(.98); }
.btn-lg { padding: 18px 28px; font-size: 17px; }

.btn-wa {
  background: linear-gradient(180deg, var(--green-2), var(--green) 60%, #186846); color: var(--white);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 2px rgba(13, 43, 34, .2), 0 12px 26px -12px rgba(29, 117, 80, .7);
}
.btn-wa svg { color: var(--white); }
.btn-wa:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 1px 2px rgba(13,43,34,.2), 0 20px 36px -14px rgba(29,117,80,.8); }

.btn-ghost { border-color: var(--line-2); color: var(--ink); background: var(--white); box-shadow: var(--shadow-1); }
.btn-ghost:hover { border-color: var(--green); transform: translateY(-2px); }

.arrow-link {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink); text-decoration: none;
  transition: color .2s;
}
.arrow-link svg { width: 18px; height: 18px; color: var(--green); transition: transform .3s var(--ease); }
.arrow-link:hover { color: var(--green); }
.arrow-link:hover svg { transform: translateX(4px); }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: var(--z-nav); background: rgba(246, 246, 240, .84);
  backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; gap: 24px; justify-content: space-between; height: 76px; }
.brand { display: flex; align-items: center; text-decoration: none; flex: none; }
.brand img { height: 38px; width: auto; }
.nav-links { display: flex; gap: 6px; font-weight: 600; font-size: 15px; }
.nav-links a { text-decoration: none; color: var(--muted); padding: 8px 12px; border-radius: 999px; transition: color .2s, background-color .2s; }
.nav-links a:hover { color: var(--ink); background: rgba(13, 43, 34, .05); }
.nav .btn { padding: 12px 18px; font-size: 15px; }

/* ================= hero ================= */
.hero { position: relative; padding: clamp(48px, 6vw, 88px) 0 clamp(72px, 8vw, 108px); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(38% 48% at 80% 36%, rgba(129, 192, 132, .34), transparent 70%),
    radial-gradient(28% 36% at 96% 92%, rgba(239, 199, 156, .28), transparent 70%),
    radial-gradient(40% 40% at 6% 0%, rgba(220, 239, 220, .9), transparent 70%);
}
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; }
.hero .wrap > * { min-width: 0; }
.hero h1 { font-size: clamp(40px, 4.7vw, 64px); line-height: 1.02; letter-spacing: -.045em; }
.hero h1 em { font-style: normal; color: var(--green); }
.lead { margin-top: 24px; font-size: clamp(17.5px, 1.6vw, 20px); line-height: 1.6; max-width: 580px; color: var(--text); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 34px; }
.fine { margin-top: 16px; font-size: 14px; color: var(--muted); }

/* how it works, in one line: you chat, everything is connected, it's done */
.flow { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 580px; position: relative; }
.flow::before {
  content: ""; position: absolute; left: 16.66%; right: 16.66%; top: 23px; height: 2px; z-index: 0;
  background: repeating-linear-gradient(90deg, var(--leaf) 0 7px, transparent 7px 13px);
}
.flow-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 6px; }
.flow-step b { margin-top: 12px; font-size: 15.5px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.flow-step span:last-child { margin-top: 2px; font-size: 13.5px; color: var(--muted); line-height: 1.4; }
.flow-ic { height: 48px; display: flex; align-items: center; justify-content: center; }
.flow-ic.wa, .flow-ic.done { width: 48px; border-radius: 50%; box-shadow: 0 0 0 6px var(--paper), var(--shadow-2); }
.flow-ic.wa { background: var(--wa); color: #fff; }
.flow-ic.done { background: var(--forest); color: var(--sage); }
.flow-ic.wa svg, .flow-ic.done svg { width: 24px; height: 24px; }
.flow-ic.stack { padding: 0 4px; border-radius: 999px; background: var(--paper); }
.flow-ic.stack img { width: 36px; height: 36px; padding: 6px; border-radius: 50%; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-1); object-fit: contain; }
.flow-ic.stack img + img { margin-left: -11px; }

/* the phone */
.stage { position: relative; width: 100%; max-width: 410px; margin: 0 auto; }
.phone {
  position: relative; z-index: 1; width: 100%; border-radius: 46px; padding: 10px; background: #10231c;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .08), 0 70px 110px -54px rgba(13, 43, 34, .7), 0 30px 60px -30px rgba(13, 43, 34, .35);
}
.phone .screen { border-radius: 37px; }
.screen { overflow: hidden; background: var(--wa-chat); border-radius: 22px; position: relative; }
.wa-head { display: flex; align-items: center; gap: 11px; padding: 14px 16px; background: var(--wa-in); color: var(--wa-ink); border-bottom: 1px solid rgba(0, 0, 0, .06); }
.phone .wa-head { padding-top: 20px; }
.wa-head img { width: 38px; height: 38px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .07); }
.wa-head b { display: block; font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.wa-head small { display: block; font-size: 12px; color: var(--wa-meta); font-weight: 500; }
.wa-head .glyph { margin-left: auto; width: 22px; height: 22px; color: var(--wa); flex: none; }
.chat {
  padding: 16px 12px 18px; display: flex; flex-direction: column; gap: 7px; font-size: 14px; line-height: 1.45;
  background-color: var(--wa-chat);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(0, 0, 0, .025) 1.2px, transparent 1.6px),
    radial-gradient(circle at 70% 70%, rgba(0, 0, 0, .02) 1.2px, transparent 1.6px);
  background-size: 26px 26px, 34px 34px;
}
.day-chip { align-self: center; font-size: 11.5px; font-weight: 600; color: #54656f; background: rgba(255, 255, 255, .85); padding: 4px 10px; border-radius: 7px; margin-bottom: 4px; box-shadow: 0 1px .5px rgba(11, 20, 26, .1); }
.msg {
  max-width: 86%; padding: 7px 10px 20px; border-radius: 10px; position: relative; color: var(--wa-ink);
  box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
}
.msg time { position: absolute; right: 9px; bottom: 4px; font-size: 11px; color: var(--wa-meta); display: flex; align-items: center; gap: 3px; }
.msg.me { align-self: flex-end; background: var(--wa-out); border-top-right-radius: 3px; }
.msg.me time::after {
  content: ""; width: 16px; height: 10px; background: var(--wa-tick);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 5.3 3.9 8.2 10.6 1.5M6.2 7.2l1 1 6.7-6.7' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1 5.3 3.9 8.2 10.6 1.5M6.2 7.2l1 1 6.7-6.7' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.msg.bot { align-self: flex-start; background: var(--wa-in); border-top-left-radius: 3px; }
.msg b { font-weight: 700; }
.msg .url { color: var(--wa-link); word-break: break-all; }
.msg .it { display: flex; align-items: center; gap: 9px; margin: 6px 0 4px; padding: 8px 10px; border-radius: 8px; background: rgba(11, 20, 26, .045); }
.msg .it img, .msg .it svg { width: 20px; height: 20px; flex: none; object-fit: contain; }
.msg .it .wx-ic { color: #3e7bb0; }
.msg .it span { font-size: 12.5px; color: #3b4a54; line-height: 1.35; }
.msg .it span b { color: var(--wa-ink); display: block; font-size: 13px; }
.msg ol, .msg ul { margin: 4px 0 0; padding-left: 18px; }
.msg li { margin: 2px 0; }
.msg.has-actions { padding-bottom: 0; }
.msg.has-actions time { position: static; justify-content: flex-end; margin: 2px 0 6px; }
.confirm { display: grid; grid-template-columns: 1fr 1fr; margin: 0 -10px; border-top: 1px solid rgba(11, 20, 26, .09); }
.confirm span { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 0 11px; color: #008069; font-weight: 700; font-size: 13.5px; }
.confirm span + span { border-left: 1px solid rgba(11, 20, 26, .09); color: var(--wa-meta); }
.confirm svg { width: 14px; height: 14px; }

/* a voice note, laid out the way WhatsApp draws your own: play, waveform, your photo */
.voice { display: flex; align-items: center; gap: 10px; min-width: 214px; padding: 2px 0 0; }
.voice .play { width: 28px; height: 28px; color: #54656f; flex: none; }
.voice .wave { flex: 1; height: 26px; display: flex; align-items: center; gap: 2px; }
.voice .wave i { flex: 1; min-width: 2px; border-radius: 2px; background: #8fa89b; height: 45%; }
.voice .wave i:nth-child(-n+9) { background: var(--green); }
.voice .wave i:nth-child(4n+1) { height: 50%; }
.voice .wave i:nth-child(4n+2) { height: 82%; }
.voice .wave i:nth-child(4n+3) { height: 38%; }
.voice .wave i:nth-child(4n) { height: 66%; }
.voice .wave i:nth-child(5n) { height: 96%; }
.voice .wave i:nth-child(7n) { height: 30%; }
.voice .wave i:nth-child(9n) { height: 74%; }
.voice .vn-av { width: 34px; height: 34px; border-radius: 50%; flex: none; display: grid; place-items: center; background: #6b8f7d; color: #fff; font-weight: 700; font-size: 14px; position: relative; }
.voice .vn-av::after { content: ""; position: absolute; left: -4px; bottom: -2px; width: 14px; height: 14px; border-radius: 50%; background: var(--wa-out) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2353bdeb' d='M12 15a3 3 0 0 0 3-3V6a3 3 0 1 0-6 0v6a3 3 0 0 0 3 3Zm5-3a5 5 0 0 1-10 0H5a7 7 0 0 0 6 6.92V21h2v-2.08A7 7 0 0 0 19 12h-2Z'/%3E%3C/svg%3E") center / 11px no-repeat; }
.voice-meta { display: block; font-size: 11px; color: var(--wa-meta); margin: 0 0 0 38px; }
.transcript { display: block; margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(11, 20, 26, .14); font-size: 12.5px; color: #3b4a54; font-style: italic; }

.typing { align-self: flex-start; display: flex; gap: 4px; padding: 12px 13px; background: var(--wa-in); border-radius: 10px; border-top-left-radius: 3px; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.typing i { width: 6px; height: 6px; border-radius: 50%; background: #8696a0; animation: blink 1.4s infinite; }
.typing i:nth-child(2) { animation-delay: .2s; }
.typing i:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* the day bar under the phone: 24 hours of sky, office hours marked, and the moment of the chat above */
.daybar { position: relative; margin-top: 44px; padding: 0 2px; }
.daybar-track { position: relative; height: 12px; border-radius: 999px; background: var(--sky); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .15); }
.daybar .office { position: absolute; left: 33.33%; width: 37.5%; bottom: calc(100% + 6px); height: 9px; border: 1.5px solid var(--line-3); border-bottom: 0; border-radius: 4px 4px 0 0; }
.daybar .office span { position: absolute; left: 50%; bottom: calc(100% + 3px); transform: translateX(-50%); font-size: 11.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.daybar .now { position: absolute; left: 90.28%; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--white); border: 4px solid var(--leaf); box-shadow: 0 0 0 5px rgba(77, 163, 110, .22); animation: pulse 2.4s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(77, 163, 110, .45); } 100% { box-shadow: 0 0 0 12px rgba(77, 163, 110, 0); } }
.daybar-hours { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: var(--faint); font-weight: 600; font-variant-numeric: tabular-nums; }
.daybar-note { margin-top: 10px; font-size: 14.5px; color: var(--muted); text-align: center; }
.daybar-note b { color: var(--ink); }

/* ================= logos that scroll by ================= */
.tools { padding: 34px 0 38px; border-block: 1px solid var(--line); background: var(--white); overflow: hidden; }
.tools p { text-align: center; font-size: 14.5px; color: var(--muted); font-weight: 600; padding: 0 18px; }
.marquee { margin-top: 22px; display: flex; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee + .marquee { margin-top: 12px; }
.marquee ul { list-style: none; padding: 0 12px 0 0; margin: 0; display: flex; gap: 12px; flex: none; animation: slide 70s linear infinite; }
.marquee.reverse ul { animation-direction: reverse; animation-duration: 80s; }
.marquee:hover ul { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-100%); } }

/* the partners, at the foot of the same strip: still, on the same ground, just the label and the two logos */
.partners-line { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 26px; width: fit-content; max-width: calc(100% - 36px); margin: 26px auto 0; padding-top: 22px; border-top: 1px solid var(--line); }
.partners-label { font-size: 14.5px; font-weight: 600; color: var(--muted); }
.partners-logos { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 26px; }
.partners-logos li { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 800; color: var(--wa-ink); letter-spacing: -.02em; white-space: nowrap; }
.partners-logos img { width: 24px; height: 24px; }
.partners-logos img.df { width: auto; height: 31px; }

/* a brand the way it looks in the wild: its own icon beside its name, or its wordmark alone */
.marquee li, .group li {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 16px 0 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--paper); font-size: 14.5px; font-weight: 700; color: var(--ink); white-space: nowrap;
}
.marquee li img, .group li img { width: 24px; height: 24px; object-fit: contain; flex: none; border-radius: 6px; }
.marquee li.wm, .group li.wm { padding: 0 16px; }
.marquee li.wm img, .group li.wm img, .spot-logos .wm img { width: auto; height: 19px; border-radius: 0; }

/* ================= the pain: one ordinary day, counted as it passes ================= */
/* One card from dawn to midnight. Behind the rows the light moves through the day, and at six the sun goes down
   inside the same card: same width, same columns, only the light changes. The tally rides along at the top and
   keeps count of the hours as they go. */
.day-table {
  --pad: clamp(18px, 3vw, 36px);
  --cols: 96px minmax(0, 1fr) minmax(0, 1fr);
  --gap: 32px;
  position: relative; border-radius: var(--r-xl); background: #fbf2e3; border: 1px solid var(--line);
  box-shadow: var(--rim), var(--shadow-3);
}

/* the tally: a small instrument panel that stays in view while the day scrolls under it */
.tally {
  position: sticky; top: 88px; z-index: 5; margin: 12px 12px 0;
  display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); align-items: center;
  padding: 14px calc(var(--pad) - 12px); border-radius: 22px;
  background: #fdfaf3; border: 1px solid var(--line);
  box-shadow: var(--rim), var(--shadow-2);
  transition: background-color .7s var(--ease), border-color .7s, box-shadow .7s;
}
.tally-clock { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--ink); }
.tally-clock svg { width: 22px; height: 22px; color: #d08a3c; }
.tally-clock .moon { display: none; color: var(--sage); }
.tally-clock time { font-size: 19px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.tally-side { min-width: 0; display: grid; gap: 3px; }
.tally-name { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; }
.tally-name svg { width: 17px; height: 17px; flex: none; }
.tally-name img { width: 18px; height: auto; flex: none; }
.tally-side.lost .tally-name { color: var(--clay); }
.tally-side.kept .tally-name { color: var(--forest-2); }
.tally-num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 13.5px; color: var(--muted); }
.tally-num b { font-size: clamp(19px, 1.9vw, 24px); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.tally-side.lost b { color: var(--clay); }
.tally-side.kept b { color: var(--green); }
.tally-num small { flex-basis: 100%; font-size: 12.5px; font-weight: 600; }
.tally-side.lost small { color: #b0674a; }
html:not(.js) .tally-num, html:not(.js) .tally-clock { visibility: hidden; }
html:not(.js) .tally { position: relative; top: 0; }

.day-list { list-style: none; padding: 0; margin: 0; position: relative; }
.day-table > .day-list { padding-top: 10px; background: linear-gradient(180deg, #fbf2e3 0%, #f7f6ec 16%, #fafaf4 44%, #f9f1e0 74%, #f3dec4 100%); }
/* the spine: the day's own sky, running down behind the hours */
.day-list::before { content: ""; position: absolute; left: calc(var(--pad) + 47px); top: 0; bottom: 0; width: 2px; background: var(--sky-day); opacity: .6; }
.day-row { display: grid; grid-template-columns: var(--cols); column-gap: var(--gap); padding: 26px var(--pad); align-items: start; position: relative; }
.day-row + .day-row { border-top: 1px solid rgba(13, 43, 34, .07); }
.when { display: flex; flex-direction: column; align-items: center; gap: 8px; position: relative; z-index: 1; }
.when time { font-size: 15.5px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; background: #fbf7ee; padding: 3px 8px; border-radius: 8px; box-shadow: 0 0 0 1px var(--line); transition: background-color .4s, color .4s, box-shadow .4s; }
.day-row.is-now .when time { background: var(--forest); color: var(--white); box-shadow: 0 6px 14px -6px rgba(13, 43, 34, .5); }
.when .dot { width: 14px; height: 14px; border-radius: 50%; border: 3px solid #fbf7ee; box-shadow: 0 0 0 1px var(--line-2); }
.t-dawn { background: #e7b27d; }
.t-morning { background: #9fcf9a; }
.t-noon { background: #f0c75a; }
.t-afternoon { background: #e0a66b; }
.t-dusk { background: #c9764f; }
.t-night { background: var(--sage); }
.when .wx { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--white); border: 1px solid var(--line); color: #3e7bb0; box-shadow: var(--shadow-1); }
.when .wx svg { width: 18px; height: 18px; }

.without, .with { min-width: 0; }
.without { padding-top: 4px; }
.without p { font-size: 16.5px; color: var(--text); }
.with {
  background: linear-gradient(180deg, #fffffc, var(--card)); border: 1px solid rgba(29, 117, 80, .18); border-radius: 20px; padding: 18px 20px;
  box-shadow: var(--rim), var(--shadow-2); transition: translate .5s var(--ease), box-shadow .5s var(--ease);
}
.with:hover { translate: 0 -3px; box-shadow: var(--rim), var(--shadow-lift); }
.with p { font-size: 16.5px; color: var(--ink); font-weight: 500; }
.lbl { display: none; }
.cost, .gain { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 5px 11px; border-radius: 999px; font-size: 13.5px; font-weight: 700; }
.cost { color: var(--clay); background: var(--clay-soft); }
.cost b { font-variant-numeric: tabular-nums; }
.gain { color: var(--green); background: var(--mint-2); }
.cost svg, .gain svg { width: 15px; height: 15px; }

/* six o'clock: the sun sets inside the card, and the same rows carry on in the dark */
.after-dark {
  position: relative; border-radius: 0 0 var(--r-xl) var(--r-xl); color: #b3cabe;
  background:
    radial-gradient(1px 1px at 92% 16%, rgba(255, 255, 255, .7), transparent 60%), radial-gradient(1px 1px at 58% 14%, rgba(255, 255, 255, .55), transparent 60%),
    radial-gradient(1.5px 1.5px at 84% 8%, rgba(255, 255, 255, .55), transparent 60%), radial-gradient(1px 1px at 34% 11%, rgba(255, 255, 255, .45), transparent 60%),
    radial-gradient(1px 1px at 72% 12%, rgba(255, 255, 255, .5), transparent 60%), radial-gradient(1.5px 1.5px at 46% 9%, rgba(255, 255, 255, .45), transparent 60%),
    linear-gradient(180deg, #f3dec4 0, #e0ac82 46px, #9a6a4f 104px, #3a4f40 168px, #173f31 240px, #0e3528 55%, #0a2b20 100%);
}
/* the last of the sun, sinking behind the horizon line */
.after-dark::before {
  content: ""; position: absolute; left: calc(var(--pad) + 18px); top: 38px; width: 60px; height: 60px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #ffd9a0 0 34%, rgba(255, 190, 120, .5) 46%, transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 56%); mask-image: linear-gradient(180deg, #000 55%, transparent 56%);
}
.horizon {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: var(--gap); align-items: center;
  margin: 0; padding: 150px var(--pad) 22px; font-size: 16px; color: #c3d6cb;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.horizon-ic { justify-self: center; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(129, 192, 132, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 30px rgba(129, 192, 132, .25); }
.horizon-ic svg { width: 22px; height: 22px; color: var(--sage); }
.horizon b { color: var(--white); }
.after-dark .day-list::before { background: linear-gradient(180deg, var(--sage), rgba(129, 192, 132, .15)); opacity: .5; }
.after-dark .day-row + .day-row { border-top-color: rgba(255, 255, 255, .07); }
.after-dark .when time { color: var(--white); background: #123d2f; box-shadow: 0 0 0 1px rgba(129, 192, 132, .22); }
.after-dark .day-row.is-now .when time { background: var(--sage); color: var(--forest); box-shadow: 0 0 18px rgba(129, 192, 132, .5); }
.after-dark .when .dot { border-color: #123d2f; box-shadow: 0 0 0 1px rgba(129, 192, 132, .4), 0 0 14px rgba(129, 192, 132, .6); }
.after-dark .without p { color: #b3cabe; }
.after-dark .cost { color: #f2ae8c; background: rgba(194, 106, 69, .18); }
.after-dark .with { background: linear-gradient(180deg, #19594a, #144c3d); border-color: rgba(129, 192, 132, .26); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 22px 44px -24px rgba(0, 0, 0, .65); }
.after-dark .with p { color: var(--white); }
.after-dark .gain { color: var(--sage); background: rgba(129, 192, 132, .14); }

/* at night the tally goes dark with the sky */
.day-table.is-night .tally { background: #0f3729; border-color: rgba(129, 192, 132, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 50px -24px rgba(0, 0, 0, .55); }
.day-table.is-night .tally-clock { color: var(--white); }
.day-table.is-night .tally-clock .sun { display: none; }
.day-table.is-night .tally-clock .moon { display: block; }
.day-table.is-night .tally-num { color: #a9c2b5; }
.day-table.is-night .tally-side.lost .tally-name, .day-table.is-night .tally-side.lost b { color: #f2ae8c; }
.day-table.is-night .tally-side.lost small { color: #e59b79; }
.day-table.is-night .tally-side.kept .tally-name, .day-table.is-night .tally-side.kept b { color: var(--sage); }

/* the day added up: two bars and the difference, counted in front of you */
.day-sum { margin: 0 var(--pad); padding: 34px 0 44px; border-top: 1px solid rgba(255, 255, 255, .12); display: grid; gap: 18px; }
.sum-label { font-size: 13px; font-weight: 800; color: #9fbfae; }
.sum-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) minmax(250px, .7fr); align-items: center; column-gap: 24px; }
.sum-name { font-size: 15px; font-weight: 700; color: #cfe0d6; }
.sum-bar { height: 14px; border-radius: 999px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 1px 3px rgba(0, 0, 0, .35); overflow: hidden; }
.sum-bar i { display: block; height: 100%; border-radius: inherit; transform-origin: 0 50%; transition: transform 1.9s var(--ease-quart) .15s; }
.sum-row.lost .sum-bar i { transform: scaleX(1); background: linear-gradient(90deg, #b8603c, #e8a077); box-shadow: 0 0 18px rgba(232, 160, 119, .45); }
.sum-row.kept .sum-bar i { transform: scaleX(.058); background: linear-gradient(90deg, var(--leaf), var(--sage)); box-shadow: 0 0 18px rgba(129, 192, 132, .5); }
.motion .day-sum:not(.in) .sum-bar i { transform: scaleX(0); }
.sum-val b { display: block; font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -.04em; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sum-row.lost .sum-val b { color: #f2ae8c; }
.sum-row.kept .sum-val b { color: var(--sage); }
.sum-val span { display: block; margin-top: 4px; font-size: 13.5px; color: #9fbfae; line-height: 1.45; }
.sum-diff { margin-top: 12px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: clamp(20px, 2.3vw, 28px); font-weight: 700; color: var(--white); letter-spacing: -.02em; line-height: 1.3; }
.sum-diff b { color: var(--sage); font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

.day-foot { display: flex; justify-content: space-between; align-items: center; gap: 18px 24px; flex-wrap: wrap; margin-top: 30px; }
.day-foot p { font-size: 13.5px; color: var(--faint); }

/* ================= spotlights: the pain as the headline, the fix beneath it ================= */
.spots { display: grid; gap: clamp(96px, 12vw, 150px); }
.spot { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(40px, 6vw, 88px); align-items: center; }
.spot:nth-child(even) .spot-copy { order: 2; }
.spot-copy h3 { font-size: clamp(28px, 3.2vw, 42px); line-height: 1.08; letter-spacing: -.036em; }
.fix { margin-top: 16px; display: flex; gap: 12px; align-items: baseline; font-size: clamp(18px, 1.6vw, 20px); font-weight: 700; color: var(--green); line-height: 1.4; letter-spacing: -.01em; }
.fix::before { content: ""; flex: none; width: 22px; height: 2px; background: var(--green); transform: translateY(-5px); }
.spot-copy > p:not(.fix) { margin-top: 14px; font-size: 17px; color: var(--text); max-width: 520px; }
.spot-list { list-style: none; padding: 0; margin-top: 24px; display: grid; gap: 12px; max-width: 520px; }
.spot-list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; color: var(--text); }
.spot-list svg { width: 20px; height: 20px; color: var(--green); flex: none; margin-top: 2px; }
.spot-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); max-width: 520px; font-size: 13.5px; color: var(--muted); font-weight: 600; }
.spot-logos span { display: inline-flex; align-items: center; gap: 8px; }
.spot-logos img { width: 22px; height: 22px; object-fit: contain; }

/* the visual: the chat in front, the thing it produced lying behind it */
.spot-visual { position: relative; padding: 36px; border-radius: var(--r-xl); background: linear-gradient(160deg, var(--mint-2), var(--paper-3)); border: 1px solid var(--line); overflow: hidden; min-height: 560px; display: flex; align-items: flex-end; }
.spot-visual::before { content: ""; position: absolute; inset: auto -20% -40% auto; width: 80%; height: 80%; border-radius: 50%; pointer-events: none; background: radial-gradient(closest-side, rgba(129, 192, 132, .45), transparent 70%); }
.spot-visual .screen { position: relative; z-index: 2; width: min(340px, 76%); margin-top: 150px; box-shadow: var(--shadow-3); border: 1px solid rgba(13, 43, 34, .08); }
.spot:nth-child(even) .spot-visual .screen { margin-left: auto; }
.spot-visual .chat { padding: 14px 12px 16px; }
.spot-visual .msg { font-size: 13.5px; }

.artifact {
  position: absolute; z-index: 1; top: 32px; right: 30px; width: 62%; max-width: 330px; padding: 16px 18px 18px;
  background: var(--white); border-radius: 16px; border: 1px solid var(--line); box-shadow: var(--shadow-3);
  transform: rotate(3deg); font-size: 13px; color: var(--text); line-height: 1.45;
}
.spot:nth-child(even) .artifact { right: auto; left: 30px; transform: rotate(-3deg); }
.art-head { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.art-head img { width: 18px; height: 18px; flex: none; }
.art-head b { font-size: 13.5px; color: var(--ink); }
.art-head small { margin-left: auto; font-size: 12px; color: var(--faint); white-space: nowrap; }
.art-head .badge { color: #fff; background: var(--wa); padding: 2px 8px; border-radius: 999px; font-weight: 700; font-size: 11px; }
.doc .art-h { margin: 10px 0 5px; font-size: 11.5px; font-weight: 800; color: var(--faint); }
.doc ul { margin: 0; padding-left: 16px; }
.doc table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.doc td { padding: 6px 4px; border-top: 1px solid var(--line); }
.doc td:first-child { font-weight: 700; color: var(--ink); }
.doc td:last-child { text-align: right; color: var(--green); font-weight: 700; }
.group-chat p { margin-top: 6px; padding: 6px 10px; border-radius: 8px; background: var(--paper); font-size: 12.5px; }
.group-chat p b { margin-right: 4px; color: #1f7a8c; }
.group-chat p:nth-of-type(2) b { color: #b0562f; }
.group-chat p:nth-of-type(3) b, .group-chat p:nth-of-type(6) b { color: #7a4ab0; }
.group-chat p:nth-of-type(4) b { color: #a0762a; }
.group-chat p:nth-of-type(5) b { color: #2f6db0; }
.group-chat p:nth-of-type(n+5) { opacity: .55; }
.providers p { display: flex; justify-content: space-between; gap: 10px; padding: 8px 2px; border-top: 1px solid var(--line); font-size: 12.5px; }
.providers p b { color: var(--ink); }
.providers p span { color: var(--muted); white-space: nowrap; }
.providers p.best { border: 0; margin-bottom: 4px; padding: 9px 10px; border-radius: 10px; background: var(--mint-2); }
.providers p.best span { color: var(--green); font-weight: 700; }
.providers p.muted { opacity: .5; }
.pass { padding: 0; overflow: visible; }
.pass-top { display: flex; justify-content: space-between; padding: 14px 18px 0; font-size: 12px; color: var(--muted); }
.pass-route { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 18px 0; }
.pass-route b { font-size: 34px; font-weight: 800; color: var(--ink); letter-spacing: -.03em; }
.pass-route svg { width: 26px; height: 26px; color: var(--green); transform: rotate(45deg); }
.pass-city { display: flex; justify-content: space-between; padding: 0 18px 14px; font-size: 12px; color: var(--muted); }
.pass-cut { position: relative; margin: 0 14px; border-top: 2px dashed var(--line-2); }
.pass-cut::before, .pass-cut::after { content: ""; position: absolute; top: -10px; width: 18px; height: 18px; border-radius: 50%; background: var(--mint-2); }
.pass-cut::before { left: -24px; }
.pass-cut::after { right: -24px; }
.pass-bot { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px 16px; font-size: 13px; color: var(--muted); }
.pass-bot b { font-size: 19px; color: var(--green); }

/* ================= the catalogue ================= */
.catalog { border-top: 1px solid var(--line-2); }
.area { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 2fr); gap: 20px 56px; padding: 40px 0 44px; border-bottom: 1px solid var(--line-2); }
.area-head { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-content: start; align-self: start; }
.area-num { grid-row: span 1; font-size: 40px; font-weight: 800; line-height: 1; letter-spacing: -.05em; color: var(--sage); font-variant-numeric: tabular-nums; }
.area h3 { align-self: center; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.12; letter-spacing: -.03em; }
.area-head p { grid-column: 1 / -1; margin-top: 12px; font-size: 15.5px; color: var(--muted); max-width: 340px; }
.area-logos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.area-logos img { width: 40px; height: 40px; padding: 8px; border-radius: 12px; background: var(--white); border: 1px solid var(--line); object-fit: contain; box-shadow: var(--shadow-1); }
.feats { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 36px; align-content: start; }
.feats li { display: grid; grid-template-columns: 26px 1fr; column-gap: 14px; }
.feats svg { width: 22px; height: 22px; color: var(--green); margin-top: 2px; }
.feats b { display: block; color: var(--ink); font-size: 16.5px; font-weight: 700; letter-spacing: -.012em; margin-bottom: 3px; }
.feats span { display: block; font-size: 15px; color: var(--muted); line-height: 1.55; }
.feats q { quotes: "\201C" "\201D"; color: var(--forest-2); font-weight: 600; }

/* buying something digital, in the catalogue: the hero's flow again, with the QRIS in the middle */
.buy { grid-column: 2; margin-top: 6px; padding: 26px 22px 24px; border-radius: 22px; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow-2); }
.buy-title { margin-bottom: 22px; text-align: center; font-size: 16px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.buy-flow { margin: 0; max-width: none; }
.buy .flow-ic.wa, .buy .flow-ic.done { box-shadow: 0 0 0 6px var(--white), var(--shadow-2); }
.flow-ic.qr { width: 48px; border-radius: 50%; background: var(--white); color: var(--ink); border: 1.5px solid var(--line-3); box-shadow: 0 0 0 6px var(--white), var(--shadow-1); }
.flow-ic.qr svg { width: 22px; height: 22px; }
.buy-flow .flow-step b { font-size: 14.5px; line-height: 1.35; }

.area-head p a, .group > p a { color: var(--green); font-weight: 700; text-decoration: none; }
.area-head p a:hover, .group > p a:hover { text-decoration: underline; }

/* ================= integrations, packed like masonry ================= */
.stack { columns: 2 440px; column-gap: 16px; }
.group { break-inside: avoid; margin-bottom: 16px; border-radius: var(--r-lg); padding: 26px 24px 24px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.group h3 { font-size: 19px; letter-spacing: -.02em; }
.group > p { margin-top: 4px; font-size: 14.5px; color: var(--muted); }
.group ul { list-style: none; padding: 0; margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px; }
.group li { height: 40px; font-size: 14px; background: var(--white); }
.group .also { margin-top: 14px; font-size: 13.5px; color: var(--muted); }
.stack-note { margin-top: 12px; font-size: 13px; color: var(--faint); max-width: 760px; }

/* the logo's ribbon, drawn large behind the closing panel */
.ribbon { position: absolute; pointer-events: none; z-index: 0; }

/* ================= value and pricing ================= */
.compare-wrap { max-width: 1000px; margin: 0 auto clamp(56px, 7vw, 80px); }
.compare { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--white); border-radius: 24px; overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-3); }
.compare th, .compare td { padding: 18px 24px; text-align: left; vertical-align: top; font-size: 15.5px; border-bottom: 1px solid var(--line); }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare thead th { font-size: 15px; font-weight: 800; color: var(--muted); background: var(--paper); }
.compare thead th.us { color: var(--white); background: var(--forest); }
.compare thead th.us img { display: inline-block; width: 18px; height: auto; margin-right: 9px; vertical-align: -3px; padding: 2px; border-radius: 5px; background: var(--paper); }
.compare tbody th { width: 24%; font-weight: 700; color: var(--ink); }
.compare td { width: 38%; color: var(--muted); }
.compare td.us { background: var(--forest); color: #cfe0d6; border-bottom-color: rgba(255, 255, 255, .08); }
.compare td.us b { color: var(--white); font-weight: 700; }
.compare td.us b::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 10px; border-radius: 50%; background: var(--sage); vertical-align: 2px; }
.compare-note { margin: 16px auto 0; max-width: 720px; font-size: 13.5px; color: var(--faint); text-align: center; }

.plans { display: grid; grid-template-columns: 1fr 1.08fr 1fr; gap: 18px; align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: 34px 30px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.plan-name { font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.01em; }
.plan-for { margin-top: 4px; font-size: 14.5px; color: var(--muted); min-height: 3em; }
.price { margin-top: 22px; font-size: clamp(38px, 3.6vw, 48px); font-weight: 800; line-height: 1; color: var(--ink); letter-spacing: -.04em; white-space: nowrap; font-variant-numeric: tabular-nums; }
.price-per { display: block; margin-top: 10px; font-size: 14px; font-weight: 600; letter-spacing: 0; color: var(--muted); white-space: normal; }
.plan ul { list-style: none; padding: 24px 0 0; margin: 24px 0 30px; border-top: 1px solid var(--line); display: grid; gap: 12px; font-size: 15px; }
.plan li { display: flex; gap: 11px; align-items: flex-start; }
.plan li svg { width: 18px; height: 18px; color: var(--green); flex: none; margin-top: 3px; }
.plan .btn { margin-top: auto; width: 100%; }
.plan.featured { background: var(--forest); border-color: var(--forest); color: #c3d6cb; box-shadow: var(--shadow-3); position: relative; overflow: hidden; }
.plan.featured::before { content: ""; position: absolute; inset: -30% -30% auto auto; width: 80%; height: 70%; background: radial-gradient(closest-side, rgba(129, 192, 132, .3), transparent 70%); pointer-events: none; }
.plan.featured > * { position: relative; }
.plan.featured .plan-name, .plan.featured .price { color: var(--white); }
.plan.featured .plan-for, .plan.featured .price-per { color: #a9c2b5; }
.plan.featured ul { border-top-color: rgba(255, 255, 255, .12); }
.plan.featured li svg { color: var(--sage); }
.plan.featured .btn-wa { background: var(--sage); color: var(--forest); box-shadow: 0 14px 30px -14px rgba(129, 192, 132, .7); }
.plan.featured .btn-wa svg { color: var(--forest); }
.plan.featured .btn-wa:hover { background: #95cf97; }
.price-note { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 28px; color: var(--muted); font-size: 14.5px; }
.price-note svg { width: 18px; height: 18px; color: var(--green); flex: none; }

/* ================= questions ================= */
.qa-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.6fr); gap: 56px; align-items: start; }
.qa-grid .head { position: sticky; top: 120px; margin-bottom: 0; }
.qa { border-top: 1px solid var(--line-2); }
.qa details { border-bottom: 1px solid var(--line-2); }
.qa summary {
  display: flex; align-items: center; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none;
  font-size: clamp(17px, 1.6vw, 19px); font-weight: 700; line-height: 1.4; color: var(--ink); letter-spacing: -.015em;
  transition: color .2s;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--green); }
.qa summary .sign {
  margin-left: auto; width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
  border: 1px solid var(--line-2); color: var(--green); background: var(--white); transition: transform .4s var(--ease), background-color .3s, border-color .3s;
}
.qa summary .sign svg { width: 15px; height: 15px; }
.qa details[open] summary .sign { transform: rotate(45deg); background: var(--mint); border-color: rgba(29, 117, 80, .3); }
.qa .answer { margin: 0; padding: 0 52px 24px 0; color: var(--text); font-size: 16px; max-width: 720px; }
.qa .answer a { color: var(--green); font-weight: 600; }

/* ================= closing ================= */
.closing { padding: 0 0 clamp(84px, 10vw, 120px); }
.closing-panel {
  position: relative; overflow: hidden; border-radius: var(--r-xl); padding: clamp(56px, 7vw, 88px) clamp(24px, 5vw, 64px);
  text-align: center; background: var(--forest); color: #c3d6cb; box-shadow: var(--shadow-3);
}
.closing-panel .ribbon { right: -10%; top: -40%; width: 70%; opacity: .26; }
.closing-panel::after { content: ""; position: absolute; inset: auto 20% -60% 20%; height: 90%; border-radius: 50%; background: radial-gradient(closest-side, rgba(129, 192, 132, .35), transparent 70%); pointer-events: none; }
.closing-panel > *:not(.ribbon) { position: relative; z-index: 1; }
/* the mark sits on its own paper tile, the ground it was drawn for, so its dark end never sinks into the forest */
.closing-panel .mark { display: grid; place-items: center; width: 84px; height: 84px; margin: 0 auto 28px; border-radius: 24px; background: var(--paper); box-shadow: inset 0 1px 0 #fff, 0 18px 40px -16px rgba(0, 0, 0, .55); }
.closing-panel .mark img { width: 50px; height: auto; }
.closing .h2 { margin: 0 auto; max-width: 780px; color: var(--white); font-size: clamp(34px, 4.6vw, 58px); }
.closing .h2 em { color: var(--sage); font-style: normal; }
.closing p { margin: 22px auto 0; max-width: 560px; font-size: 18px; color: #a9c2b5; }
.closing .cta-row { justify-content: center; margin-top: 38px; }
.closing .btn-wa { background: var(--sage); color: var(--forest); box-shadow: 0 16px 34px -14px rgba(129, 192, 132, .7); }
.closing .btn-wa svg { color: var(--forest); }
.closing .btn-wa:hover { background: #95cf97; }
.closing .arrow-link { color: var(--white); }
.closing .arrow-link svg { color: var(--sage); }

/* ================= footer ================= */
footer { border-top: 1px solid var(--line); padding: 64px 0 40px; font-size: 14.5px; color: var(--muted); background: var(--paper-2); }
.foot-top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 44px; }
.foot-top .brand img { height: 40px; }
.foot-top p { margin-top: 18px; max-width: 330px; font-size: 14.5px; }
.foot-top h4 { font-size: 14px; letter-spacing: -.005em; color: var(--ink); font-weight: 800; }
.foot-top nav { display: grid; gap: 11px; margin-top: 16px; }
footer a { text-decoration: none; transition: color .2s; }
footer a:hover { color: var(--green); }
.foot-wa { display: inline-flex; align-items: center; gap: 9px; margin-top: 20px; color: var(--ink); font-weight: 700; }
.foot-wa svg { width: 18px; height: 18px; color: var(--wa); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding-top: 26px; border-top: 1px solid var(--line-2); font-size: 13.5px; }

/* ================= long-form pages: privacy, not found ================= */
.page { padding: 80px 0 104px; position: relative; }
.page::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 460px; pointer-events: none;
  background: radial-gradient(60% 100% at 50% 0%, rgba(129, 192, 132, .28), transparent 72%);
}
.page .wrap { max-width: 780px; }
.page h1 { font-size: clamp(38px, 5vw, 58px); line-height: 1.04; letter-spacing: -.04em; }
.page .updated { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--muted); font-size: 14.5px; }
.page .updated svg { width: 15px; height: 15px; color: var(--green); }
.page > .wrap > p { margin-top: 18px; }
.page h2 { font-size: 24px; line-height: 1.3; letter-spacing: -.025em; margin-top: 52px; padding-top: 26px; border-top: 1px solid var(--line-2); }
.page li { margin-top: 12px; }
.page strong { color: var(--ink); font-weight: 700; }
.page ul { padding-left: 4px; list-style: none; }
.page ul li { display: flex; gap: 12px; align-items: flex-start; }
.page ul li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--leaf); flex: none; margin-top: 10px; }
.page .note { margin-top: 40px; padding: 22px 26px; border-radius: var(--r-md); font-size: 15px; background: var(--mint-2); border: 1px solid rgba(29, 117, 80, .2); }
.page .cta-row { margin-top: 36px; }
.notfound { display: grid; place-items: center; text-align: center; min-height: 58vh; }
.notfound .intro { margin-inline: auto; }
.notfound .cta-row { justify-content: center; }
.notfound .code { font-size: clamp(88px, 16vw, 168px); font-weight: 800; line-height: 1; color: var(--mint); letter-spacing: -.06em; }
.foot-simple { border-top: 0; padding-top: 0; }
.foot-simple nav { display: flex; gap: 26px; flex-wrap: wrap; }
.foot-simple .brand img { height: 32px; }

/* ================= depth ================= */
/* Surfaces sit at different heights: the page, the cards on it, the thing you are looking at. Every raised surface
   gets a rim of light on its top edge and a layered shadow; things you can reach rise a little further on hover.
   Lifts use the `translate` property so they compose with reveal transforms instead of fighting them. */
.band { background: radial-gradient(70% 55% at 50% 0%, rgba(255, 255, 255, .55), transparent 70%), var(--paper-2); }
.nav { transition: box-shadow .4s var(--ease), background-color .4s; }
.nav.lifted { background: rgba(246, 246, 240, .95); box-shadow: 0 1px 0 var(--line), 0 16px 34px -26px rgba(13, 43, 34, .5); }

/* the phone stands at a slight angle, lit from the left, and drifts against the page as you scroll */
.phone {
  transform: perspective(1600px) rotateY(-8deg) rotateX(3deg) translateY(calc(var(--p, 0) * -18px));
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .08), 34px 70px 110px -54px rgba(13, 43, 34, .7), 14px 30px 60px -30px rgba(13, 43, 34, .35), 2px 4px 8px rgba(13, 43, 34, .12);
}

.marquee li, .group li { background: linear-gradient(180deg, #fffffc, var(--paper)); box-shadow: var(--rim), 0 1px 2px rgba(13, 43, 34, .05); }
.group { background: linear-gradient(180deg, #fdfdf9, var(--card)); box-shadow: var(--rim), var(--shadow-1); transition: translate .5s var(--ease), box-shadow .5s var(--ease), border-color .3s; }
.group:hover { translate: 0 -4px; box-shadow: var(--rim), var(--shadow-2); border-color: var(--line-2); }
.area-logos img { transition: translate .4s var(--ease), box-shadow .4s var(--ease); }
.area-logos img:hover { translate: 0 -3px; box-shadow: var(--shadow-2); }

/* the chat in front, what it produced behind it: they drift at different speeds, so the scene has depth */
.spot-visual { box-shadow: var(--rim), inset 0 -60px 90px -70px rgba(13, 43, 34, .3); }
/* far layer slower than the page, near layer faster: the artifact lags behind, the chat leads */
.motion .spot-visual .artifact { translate: 0 calc(var(--p, 0) * -24px); }
.motion .spot-visual .screen { translate: 0 calc(var(--p, 0) * 16px); }

.compare { box-shadow: var(--rim), var(--shadow-3); }
.plan { box-shadow: var(--rim), var(--shadow-1); transition: translate .5s var(--ease), box-shadow .5s var(--ease); }
.plan:hover { translate: 0 -6px; box-shadow: var(--rim), var(--shadow-lift); }
.plan.featured { translate: 0 -14px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 0 1px rgba(129, 192, 132, .16), var(--shadow-3); }
.plan.featured:hover { translate: 0 -20px; }
.closing-panel { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), var(--shadow-3); }

/* ================= motion ================= */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.hero .copy > * { animation: rise .9s var(--ease) both; }
.hero .copy > :nth-child(2) { animation-delay: .08s; }
.hero .copy > :nth-child(3) { animation-delay: .16s; }
.hero .copy > :nth-child(4) { animation-delay: .24s; }
.hero .copy > :nth-child(5) { animation-delay: .3s; }
.stage { animation: rise 1.1s .2s var(--ease) both; }

/* Everything below the fold arrives as you reach it. motion.js adds "motion" to <html> (unless the reader asked for
   reduced motion) and "in" to each element as it enters the viewport; groups marked data-stagger get an index so
   their children arrive one after another. Without the script nothing is ever hidden. */
.motion [data-aos] {
  opacity: 0; transform: translate3d(0, 28px, 0);
  transition: opacity .9s var(--ease), transform 1.1s var(--ease), translate .5s var(--ease), box-shadow .5s var(--ease), border-color .3s;
  transition-delay: calc(var(--i, 0) * 90ms), calc(var(--i, 0) * 90ms), 0s, 0s, 0s;
}
.motion [data-aos="zoom"] { transform: scale(.94); }
.motion [data-aos].in { opacity: 1; transform: none; }

/* inside a revealed card, its logos follow one by one: after the card itself (--i), each a beat after the last (--j) */
.motion [data-aos] [data-cascade] > * {
  opacity: 0; transform: translate3d(0, 10px, 0) scale(.94);
  transition: opacity .55s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 90ms + 220ms + var(--j, 0) * 55ms);
}
.motion [data-aos].in [data-cascade] > * { opacity: 1; transform: none; }
.h2 .num { display: inline-block; min-width: 2ch; text-align: right; font-variant-numeric: tabular-nums; }

/* answers open smoothly where the browser can animate to height: auto */
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .qa details::details-content { height: 0; overflow: clip; transition: height .45s var(--ease), content-visibility .45s allow-discrete; }
  .qa details[open]::details-content { height: auto; }
}

/* the reading progress: motion.js draws it; a browser without the script but with scroll timelines draws it in CSS */
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.js) .progress { animation: grow linear both; animation-timeline: scroll(root block); }
  }
}

@media print {
  .motion [data-aos] { opacity: 1 !important; transform: none !important; }
  .tally { position: static; }
}

/* ================= responsive ================= */
@media (min-width: 1081px) {
  .area-head { position: sticky; top: 108px; }
}
@media (max-width: 1080px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 64px; }
  .hero .copy { max-width: 680px; }
  .nav-links { display: none; }
  .spot { grid-template-columns: 1fr; gap: 40px; }
  .spot:nth-child(even) .spot-copy { order: 0; }
  .area { grid-template-columns: 1fr; gap: 24px; }
  .area-head p { max-width: 560px; }
  .buy { grid-column: auto; }
  .plans { grid-template-columns: 1fr; max-width: 540px; margin-inline: auto; }
  .plan-for { min-height: 0; }
  .plan.featured { order: -1; translate: none; }
  .plan.featured:hover { translate: 0 -6px; }
  .qa-grid { grid-template-columns: 1fr; gap: 8px; }
  .qa-grid .head { position: static; margin-bottom: 36px; }
  .foot-top { grid-template-columns: 1fr 1fr 1fr; }
  .foot-top > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 80px; }
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  .nav .wrap { height: 66px; gap: 12px; }
  .brand img { height: 31px; }
  .nav .btn { padding: 11px 15px; font-size: 14px; }
  .nav .btn svg { width: 18px; height: 18px; }

  .hero { padding-top: 36px; }
  .hero h1 { font-size: clamp(38px, 11vw, 48px); }
  .lead { margin-top: 18px; }
  .flow { margin-top: 28px; }
  .flow-step b { font-size: 14px; }
  .flow-step span:last-child { font-size: 12.5px; }
  .flow-ic.stack img { width: 32px; height: 32px; padding: 5px; }
  .flow-ic.stack img:nth-child(n+5) { display: none; }
  .cta-row .btn { width: 100%; }
  .cta-row { gap: 18px; }
  .cta-row .arrow-link { margin-inline: auto; }
  .fine { text-align: center; }
  .stage { max-width: 360px; }
  .daybar { margin-top: 40px; }

  /* the day: hours on the left, the problem then the fix stacked beside it; the tally shrinks to one line */
  .day-table { --pad: 14px; --cols: 58px minmax(0, 1fr); --gap: 14px; border-radius: 26px; }
  .tally { top: 74px; margin: 8px 8px 0; padding: 10px 12px; grid-template-columns: 50px minmax(0, 1fr) minmax(0, 1fr); column-gap: 10px; border-radius: 18px; }
  .tally-clock { gap: 2px; }
  .tally-clock svg { width: 17px; height: 17px; }
  .tally-clock time { font-size: 14.5px; }
  .tally-name { font-size: 11.5px; gap: 5px; line-height: 1.25; }
  .tally-name svg { width: 13px; height: 13px; }
  .tally-name img { width: 12px; }
  .tally-num { font-size: 11px; gap: 0 5px; }
  .tally-num b { font-size: 16px; }
  .tally-num small { font-size: 10.5px; }
  .day-row { padding: 22px var(--pad); }
  .day-list::before { left: calc(var(--pad) + 28px); }
  .without, .with { grid-column: 2; }
  .with { margin-top: 14px; padding: 16px; border-radius: 18px; }
  .lbl { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 800; }
  .without .lbl { color: var(--clay); }
  .with .lbl { color: var(--green); }
  .after-dark .without .lbl { color: #f2ae8c; }
  .after-dark .with .lbl { color: var(--sage); }
  .without p, .with p { font-size: 15.5px; }
  .when time { font-size: 14px; padding: 2px 6px; }
  .after-dark { border-radius: 0 0 26px 26px; }
  .after-dark::before { left: 20px; top: 30px; width: 44px; height: 44px; }
  .horizon { grid-template-columns: 58px minmax(0, 1fr); column-gap: 14px; padding-top: 128px; font-size: 15px; }
  .horizon-ic { width: 38px; height: 38px; }
  .day-sum { padding: 28px 0 34px; gap: 22px; }
  .sum-row { grid-template-columns: 1fr; row-gap: 8px; }
  .sum-val b { font-size: 28px; }
  .day-foot { flex-direction: column; align-items: stretch; text-align: center; }
  .day-foot .btn { width: 100%; }


  .phone { transform: translateY(calc(var(--p, 0) * -10px)); }
  .motion .spot-visual .artifact { translate: 0 calc(var(--p, 0) * -12px); }
  .motion .spot-visual .screen { translate: 0 calc(var(--p, 0) * 8px); }

  .spot-visual { padding: 16px; min-height: 0; border-radius: 26px; }
  .spot-visual .screen { width: 90%; margin-top: 130px; }
  .artifact { top: 16px; right: 12px; width: 78%; transform: rotate(2deg); font-size: 12.5px; padding: 14px 14px 14px; }
  .spot:nth-child(even) .artifact { left: 12px; transform: rotate(-2deg); }
  .pass-route b { font-size: 28px; }

  .area { padding: 32px 0 34px; gap: 22px; }
  .area-num { font-size: 34px; }
  .area-head p { font-size: 15px; }
  .area:first-child .area-head::after { content: "Geser ke samping untuk melihat semua \2192"; grid-column: 1 / -1; display: block; margin-top: 16px; font-size: 13.5px; font-weight: 700; color: var(--green); }
  .feats {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78%, 300px); gap: 12px;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin: 0 -18px; padding: 2px 18px 14px; scroll-padding-inline: 18px;
  }
  .feats::-webkit-scrollbar { display: none; }
  .feats li { display: block; scroll-snap-align: start; padding: 20px 18px 22px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
  .feats svg { width: 26px; height: 26px; margin: 0 0 14px; }

  .buy { padding: 22px 12px 20px; }
  .buy-flow .flow-step b { font-size: 13px; }

  .compare, .compare tbody, .compare tr { display: block; }
  .compare thead { display: none; }
  .compare tr { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--line); }
  .compare tbody tr:last-child { border-bottom: 0; }
  .compare tbody th { grid-column: 1 / -1; width: auto; padding: 16px 16px 8px; border: 0; font-size: 15px; }
  .compare td { width: auto; padding: 10px 14px 16px; border: 0; font-size: 14px; }
  .compare td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-size: 12px; font-weight: 800; color: var(--faint); }
  .compare td.us { border-radius: 14px; margin: 0 8px 10px 0; }
  .compare td.us::before { color: var(--sage); }
  .compare td.us b::before { display: none; }
  .compare tbody tr { padding-bottom: 0; }

  .qa summary { gap: 14px; }
  .qa .answer { padding-right: 0; }
  .closing-panel { border-radius: 24px; }
  .foot-top { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
  .price-note { align-items: flex-start; text-align: left; }
}
@media (max-width: 380px) {
  .nav .btn span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .progress { display: none; }
  .marquee { overflow-x: auto; }
}