/* vietnamese */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/askmoli/v2/fonts/geist-vietnamese.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/askmoli/v2/fonts/geist-latin-ext.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("/askmoli/v2/fonts/geist-latin.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root{
  /* ---------- Brand palette — joyful violet, repositioned Aug 2026 ---------- */
  --indigo-core:#7C3AED;   /* primary · CTAs · logo box · was blue-violet #4F46E5, now true violet */
  --indigo-deep:#5B21B6;   /* hover · deep fills */
  --indigo-light:#C4B5FD;  /* accents on dark */
  --violet:#EC4899;        /* joyful pop accent — pink (use ~5%: badges, sparkle dots) */
  --blue-joy:#3B82F6;      /* gradient partner to indigo-core; occasional link/chart accent */
  --amber-joy:#F59E0B;     /* warm gradient stop */
  --night:#0B0620;         /* hero / dark backgrounds — warmer near-black violet */
  --night-2:#160F30;       /* cards on dark */
  --off-white:#F8F7FC;     /* alternate section bg */
  --indigo-pale:#F1EBFF;   /* icon fills · tags · pale bg */

  /* ---------- Signature gradients — the "joyful degradé" system ---------- */
  --grad-hero:linear-gradient(135deg,#7C3AED 0%,#3B82F6 100%);   /* @kind color */
  --grad-punch:linear-gradient(135deg,#8B5CF6 0%,#EC4899 100%);  /* @kind color */
  --grad-warm:linear-gradient(135deg,#A855F7 0%,#F97316 55%,#FACC15 100%); /* @kind color */
  --grad-cool:linear-gradient(135deg,#4F46E5 0%,#22D3EE 100%);   /* @kind color */
  --grad-night:linear-gradient(160deg,#160F30 0%,#0B0620 100%); /* @kind color */

  /* ---------- Neutrals / text ---------- */
  --text:#0F172A;          /* titles on light */
  --body:#4B5563;          /* paragraphs */
  --white:#FFFFFF;
  --border:#E7E8F2;        /* default hairline */
  --border-strong:#D6D8EA; /* inputs · emphasised edges */

  /* ---------- Semantic status (NEVER green) ---------- */
  --status-new:#4F46E5;    --status-new-bg:#EEF2FF;    --status-new-fg:#3730A3;
  --status-interested:#7C3AED; --status-interested-bg:#F3ECFF; --status-interested-fg:#6B21A8;
  --status-appt:#F59E0B;   --status-appt-bg:#FFF4E6;   --status-appt-fg:#B45309;
  --status-closed:#3730A3; --status-closed-bg:#ECEEFF; --status-closed-fg:#3730A3;
  --warn-bg:#FEF2F4;       --warn-border:#F7D8DE;      --warn-fg:#9B2C3B;
  --negative:#B45309;      /* down-deltas / caution text (amber, not red-green) */

  /* ---------- Type families ---------- */
  --sans:'Geist',-apple-system,system-ui,sans-serif; /* @kind font */
  --logo:var(--sans); /* @kind font */
  --font-display:var(--sans); /* @kind font */

  /* ---------- Type scale (role tokens) ---------- */
  --fs-display:clamp(44px,6vw,80px); /* @kind font */
  --lh-display:.94;   /* @kind other */
  --ls-display:-.045em; /* @kind other */
  --fs-title:30px;
  --lh-title:1.05;    /* @kind other */
  --ls-title:-.03em;  /* @kind other */
  --fs-subtitle:20px;
  --lh-subtitle:1.3;  /* @kind other */
  --fs-body:16px;
  --lh-body:1.65;     /* @kind other */
  --fs-small:14px;
  --lh-small:1.55;    /* @kind other */
  --fs-label:12px;
  --ls-label:.12em;   /* @kind other */

  /* ---------- Radius ---------- */
  --r:0.75rem;       /* the single system radius (12px) */
  --r-sm:6px;        /* tight chips / codepills only */
  --r-pill:999px;    /* pills · avatars · dots */

  /* ---------- Spacing (base-8 scale) ---------- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-section-y:104px; --s-section-x:64px;

  /* ---------- Motion ---------- */
  --dur:200ms;      /* @kind other */
  --dur-slow:320ms; /* @kind other */
  --ease:cubic-bezier(.2,.6,.3,1); /* @kind other */

  /* NO shadow tokens — hierarchy is built from borders + fills, never shadow. */
}

/* ============================================================
   Base element styles
   ============================================================ */
body{
  margin:0;
  font-family:var(--sans);
  font-optical-sizing:auto;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{color:var(--text);margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.05;}
p{margin:0;line-height:var(--lh-body);}
a{color:inherit;text-decoration:none;}
img{display:block;max-width:100%;}

/* ---------- Semantic type classes ---------- */
.t-display{font-family:var(--sans);font-size:var(--fs-display);line-height:var(--lh-display);letter-spacing:var(--ls-display);font-weight:700;color:var(--text);}
.t-title{font-size:var(--fs-title);line-height:var(--lh-title);letter-spacing:var(--ls-title);font-weight:700;color:var(--text);}
.t-subtitle{font-size:var(--fs-subtitle);line-height:var(--lh-subtitle);font-weight:600;color:var(--text);}
.t-body{font-size:var(--fs-body);line-height:var(--lh-body);color:var(--body);}
.t-small{font-size:var(--fs-small);line-height:var(--lh-small);color:var(--body);}
.t-label{font-size:var(--fs-label);font-weight:700;letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--indigo-core);}

/* The wordmark — Geist 700, tightly tracked. Same family as everything else;
   the mark's authority comes from the gradient tile beside it, not a special font. */
.wordmark{font-family:var(--sans);font-weight:700;letter-spacing:-.045em;color:var(--text);}

/* ---------- Gradient utilities — the identity's core move ---------- */
.grad-hero{background:var(--grad-hero);}
.grad-punch{background:var(--grad-punch);}
.grad-warm{background:var(--grad-warm);}
.grad-cool{background:var(--grad-cool);}
.grad-night{background:var(--grad-night);}
/* Gradient text: for one emphasised phrase inside a headline, never a whole paragraph. */
.grad-text{background:var(--grad-hero);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
.grad-text-punch{background:var(--grad-punch);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
/* Gradient hairline border via mask — replaces the retired dot texture as the "surface accent". */
.grad-border{position:relative;border-radius:var(--r);}
.grad-border::before{content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--grad-hero);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none;}
/* Ambient gradient field — the only background texture in the system. */
.grad-field{background:radial-gradient(60% 80% at 15% 10%,rgba(124,58,237,.55) 0%,transparent 60%),radial-gradient(50% 70% at 85% 20%,rgba(59,130,246,.5) 0%,transparent 62%),radial-gradient(70% 90% at 60% 95%,rgba(236,72,153,.38) 0%,transparent 65%),var(--night);}

.mono{font-variant-numeric:tabular-nums;}



  html { scroll-behavior: smooth; }
  body { margin: 0; background: #ffffff; color: var(--text); font-family: 'Geist', -apple-system, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
  * { box-sizing: border-box; }
  h1, h2, h3, h4 { font-family: 'Geist', -apple-system, system-ui, sans-serif; font-weight: 700; letter-spacing: -0.03em; }
  a { color: var(--indigo-core); text-decoration: none; }
  a:hover { color: var(--indigo-deep); }
  summary { list-style: none; cursor: pointer; }
  summary::-webkit-details-marker { display: none; }
  details[open] .faq-chev { transform: rotate(180deg); }
  ::selection { background: var(--indigo-core); color: #fff; }

/* ------------------------------------------------------------------
   Landing additions — hover states the prototype expressed as inline
   `style-hover` attributes, plus the responsive layer the static
   prototype never had (it was authored at a fixed desktop width).
   ------------------------------------------------------------------ */

#moli-root [data-hv="1"]:hover { color: var(--indigo-core); }
#moli-root [data-hv="2"]:hover { background: rgba(124, 58, 237, 0.13); }
#moli-root [data-hv="3"]:hover { color: #fff; }

#moli-root [data-tab],
#moli-root [data-ask],
#moli-root #moli-lang-btn,
#moli-root #moli-nav-toggle { font-family: inherit; }

#moli-root #moli-nav-toggle { display: none; }

/* Reveal-on-scroll. Declared here rather than assigned from main.js: any inline
   style write re-serialises the whole `style` attribute, and the responsive
   rules below match those attributes literally. */
#moli-root [data-moli-reveal] {
	opacity: 0;
	transform: translateY(22px);
	filter: blur(4px);
	transition:
		opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
		transform 0.7s cubic-bezier(0.16, 1, 0.3, 1),
		filter 0.7s ease;
}
#moli-root [data-moli-reveal="1"] { transition-delay: 70ms; }
#moli-root [data-moli-reveal="2"] { transition-delay: 140ms; }
#moli-root [data-moli-reveal="3"] { transition-delay: 210ms; }
#moli-root [data-moli-reveal="4"] { transition-delay: 280ms; }
#moli-root [data-moli-reveal="5"] { transition-delay: 350ms; }
#moli-root [data-moli-reveal].moli-in {
	opacity: 1;
	transform: none;
	filter: none;
}
@media (prefers-reduced-motion: reduce) {
	#moli-root [data-moli-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
}

/* The product mocks are composed at a fixed ~880px. main.js zooms them to fit
   the available width; this is the fallback for browsers without `zoom`. */
#moli-root:not(.moli-can-zoom) .moli-panel {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
#moli-root:not(.moli-can-zoom) .moli-panel > div { min-width: 880px; }

@media (max-width: 1080px) {
	#moli-root [style*="grid-template-columns:0.85fr 1.15fr"],
	#moli-root [style*="grid-template-columns:0.9fr 1.4fr"],
	#moli-root [style*="grid-template-columns:1fr 1.25fr"],
	#moli-root [style*="grid-template-columns:1.25fr 1fr"],
	#moli-root [style*="grid-template-columns:1fr 1fr"],
	#moli-root [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr 1fr !important; }
	#moli-root [style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns: repeat(3, 1fr) !important; }
	/* 2x2 sub-cards nested inside a card that is itself half-width now: at this
	   size each column is ~116px, so stack them. */
	#moli-root [style*="grid-template-columns:repeat(2,1fr);gap:8px"] { grid-template-columns: 1fr !important; }
	#moli-root h1 { font-size: clamp(40px, 7.2vw, 64px) !important; }
	#moli-root h2 { font-size: clamp(28px, 4.2vw, 38px) !important; }
}

@media (max-width: 760px) {
	#moli-root [style*="grid-template-columns:0.85fr 1.15fr"],
	#moli-root [style*="grid-template-columns:0.9fr 1.4fr"],
	#moli-root [style*="grid-template-columns:1fr 1.25fr"],
	#moli-root [style*="grid-template-columns:1.25fr 1fr"],
	#moli-root [style*="grid-template-columns:1fr 1fr"],
	#moli-root [style*="grid-template-columns:repeat(2,1fr)"],
	#moli-root [style*="grid-template-columns:repeat(3,1fr)"],
	#moli-root [style*="grid-template-columns:repeat(4,1fr)"] { grid-template-columns: 1fr !important; }
	#moli-root [style*="grid-template-columns:repeat(5,1fr)"] { grid-template-columns: repeat(2, 1fr) !important; }
	/* the colour-swatch strip stays a strip */
	#moli-root [style*="gap:6px"][style*="repeat(4,1fr)"] { grid-template-columns: repeat(4, 1fr) !important; }

	/* Mobile nav: the pill spans the screen and the section links collapse into
	   a menu under it, instead of simply disappearing. */
	#moli-root > header { padding: 12px 14px 0; }
	#moli-root > header > div { flex: 1; }
	#moli-root #moli-nav {
		position: relative;
		width: 100%;
		gap: 10px;
		justify-content: space-between;
		padding: 5px 6px 5px 10px;
	}
	#moli-root #moli-nav-toggle { display: inline-flex; }
	#moli-root #moli-nav-links {
		position: absolute;
		top: calc(100% + 10px);
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch !important;
		gap: 2px !important;
		padding: 8px;
		border-radius: 20px;
		/* Opaque: a translucent panel over the hero headline made the links
		   hard to read, and legibility beats the glass effect on a menu. */
		background: #ffffff;
		border: 1px solid var(--border);
		box-shadow: 0 16px 40px rgba(11, 6, 32, 0.14);
		opacity: 0;
		transform: translateY(-6px);
		pointer-events: none;
		transition: opacity 0.18s, transform 0.18s;
	}
	#moli-root #moli-nav[data-open="true"] #moli-nav-links {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}
	#moli-root #moli-nav-links a {
		padding: 11px 12px;
		border-radius: 12px;
		font-size: 15px;
	}
	#moli-root #moli-nav-links a:hover { background: rgba(124, 58, 237, 0.08); }
	#moli-root section { padding-left: 18px !important; padding-right: 18px !important; }
	#moli-root #top { padding-top: 118px !important; }
	#moli-root h1 { font-size: clamp(34px, 9vw, 46px) !important; }

	/* `balance` collapses a long heading into a narrow ragged column once it
	   wraps past a handful of lines, which is exactly what happens here. */
	#moli-root h1,
	#moli-root h2,
	#moli-root p { text-wrap: pretty !important; }

	/* label / example / button stack instead of squeezing the example to a
	   two-word column and pushing the button off-screen */
	#moli-root .moli-routine-own { flex-direction: column; align-items: flex-start !important; gap: 10px !important; }
	#moli-root .moli-routine-own > * { flex: none !important; }

	/* The six short "do more" cards read as a sparse list in one column; two
	   keeps them a grid. The 01–04 steps stay stacked — they are a sequence. */
	#moli-root [style*="gap:64px 48px"] { grid-template-columns: repeat(2, 1fr) !important; gap: 28px 18px !important; }
	#moli-root [style*="gap:48px"] { gap: 28px !important; }

	/* footer columns sit side by side until there is really no room */
	#moli-root .moli-footer nav { min-width: 132px; }

	/* The full-bleed feature cards carry 48–72px of side padding, which leaves
	   a ~210px column on a phone and shreds the headings. */
	#moli-root [style*="padding:112px 72px"] { padding: 56px 22px !important; }
	#moli-root [style*="padding:96px 48px"] { padding: 56px 22px !important; }
	#moli-root [style*="padding:44px 40px"] { padding: 28px 20px !important; }
	#moli-root [style*="padding:84px 24px 0"],
	#moli-root [style*="padding:120px 24px 0"],
	#moli-root [style*="padding:64px 24px 0"],
	#moli-root [style*="padding:150px 24px 0"] { padding-left: 18px !important; padding-right: 18px !important; }
	#moli-root #moli-mocks { padding-left: 10px !important; padding-right: 10px !important; }
}

@media (max-width: 560px) {
	#moli-root [style*="grid-template-columns:150px 1fr 58px"] { grid-template-columns: 92px 1fr 52px !important; }
	#moli-root [style*="font-size:56px"] { font-size: 34px !important; }
	#moli-root [style*="padding:64px 44px"] { padding: 40px 20px !important; }
}

@media (max-width: 560px) {
	/* Five columns squeezed to two gives ~136px cards whose 13px copy wraps to
	   five ragged lines. One column reads as intended, just shorter. */
	#moli-root [style*="grid-template-columns:repeat(5,1fr)"][style*="max-height:560px"] {
		grid-template-columns: 1fr !important;
		max-height: 430px !important;
	}
	#moli-root [style*="grid-template-columns:repeat(5,1fr)"][style*="max-height:560px"] > div {
		transform: none !important;
	}

	/* At this size the mock is already a thumbnail; the design's bottom fade
	   only makes it look truncated. */
	#moli-root .moli-panel > div {
		-webkit-mask-image: none !important;
		mask-image: none !important;
	}
}

@media (max-width: 400px) {
	/* the three product tabs overflow their pill by a few px at 360 */
	#moli-root [data-tab] { padding: 8px 12px !important; font-size: 12.5px !important; }
}

@media (max-width: 900px) {
	/* the three routine cards sit inside a padded dark panel; below this they
	   are ~138px wide and the copy shreds */
	#moli-root [style*="grid-template-columns:repeat(3,1fr);gap:12px"] { grid-template-columns: 1fr !important; }
}

@media (max-width: 480px) {
	/* The 150px score plus "/100" sets a ~295px min-content width, which spills
	   out of the card (and out of a 320px viewport) and clips the copy with it. */
	#moli-root [style*="font-size:150px"] { font-size: 96px !important; }
	#moli-root [style*="font-size:60px"] { font-size: 40px !important; }
	#moli-root [style*="font-size:40px"] { font-size: 28px !important; }
}

@media (max-width: 360px) {
	#moli-root [style*="font-size:150px"] { font-size: 76px !important; }
	#moli-root [style*="font-size:60px"] { font-size: 32px !important; }
	#moli-root [style*="font-size:38px"] { font-size: 25px !important; }
	#moli-root section { padding-left: 14px !important; padding-right: 14px !important; }
	#moli-root [style*="padding:84px 24px 0"],
	#moli-root [style*="padding:120px 24px 0"],
	#moli-root [style*="padding:64px 24px 0"],
	#moli-root [style*="padding:150px 24px 0"] { padding-left: 14px !important; padding-right: 14px !important; }
	#moli-root [style*="padding:28px 20px"] { padding: 22px 16px !important; }
}