/* Hallmark · shape: Feature Stack · genre: playful · theme: Hum (re-tinted to Bujhi green/coral) · job: try (browser extension)
 * hero: Settled · nav: card-stock bar · footer: index columns · imagery: the product built as card-stock word tiles · signature: an English message turning into Bangla word tiles that pop in, one per word
 * axes: light/rounded-sans/chromatic · posture: full-palette · contrast: pass · fold: pass · brand: green primary + coral, from the Bujhi icon · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V5 · weakest: P; it argues "type in your own language, in place, with your own AI" and shows it as paper word-tiles */
/* Hallmark · waive 37 · Anek Bangla is in the display stack for Bengali glyphs only · Chillax has no Bengali script and the page shows বাংলা */
/* Hallmark · waive 38iii · বাংলা is the one highlighted word, in a green band, once in the hero headline · it is the theme's accented moment */
/* Hallmark · waive 72 · the FAQ cards carry space-lg summary padding and space-3xs box padding, well clear of the text · the flag reads a collapsed <details> box edge, not real crowding */
/* Hallmark · waive 77 · the sites strip and the install band are one-line/action bands, each once · a context strip and a closing CTA band, not thin content sections */
@import url("./tokens.css");
@import url("./base.css");

b, strong { font-weight: 600; }
body { background-image: var(--grain), var(--fibre); background-attachment: fixed; }
.container { max-width: 1180px; }
mark { background: color-mix(in oklab, var(--color-accent) 42%, transparent); color: inherit; border-radius: 6px; padding: 0 0.12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; }

/* ---------- card-stock button ---------- */
.btn { --edge: 5px; display: inline-flex; align-items: center; gap: var(--space-sm); border: 0; border-radius: var(--radius-stock); min-height: 54px; padding: 0 var(--space-xl); font: 600 var(--text-md)/1 var(--font-display); color: var(--color-ink); text-decoration: none; cursor: pointer; background: var(--grain), var(--fibre), var(--color-card); box-shadow: inset 0 0 0 1px var(--color-rule), inset 0 1px 0 var(--color-fringe), 0 var(--edge) 0 0 var(--color-edge); transition: translate var(--dur-micro) var(--ease-snap), box-shadow var(--dur-micro) var(--ease-snap); }
.btn:hover { --edge: 7px; translate: 0 -2px; }
.btn:active { --edge: 1px; translate: 0 4px; }
.btn svg { width: 18px; height: 18px; }
.btn .txt { display: grid; text-align: left; line-height: 1.2; gap: var(--space-3xs); }
.btn .txt small { font-weight: 500; font-size: var(--text-xs); color: var(--color-muted); }
.btn--primary { color: var(--color-accent-ink); background: var(--grain), var(--fibre), var(--color-accent); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-fringe) 55%, transparent), 0 var(--edge) 0 0 var(--color-accent-deep), 2px calc(var(--edge) + 4px) 10px -3px color-mix(in oklab, var(--color-ink) 30%, transparent); transition-timing-function: var(--ease-spring); }
.btn--primary .txt small { color: var(--color-accent-ink); opacity: 0.9; }
.btn--sm { min-height: 44px; padding: 0 var(--space-lg); font-size: var(--text-sm); --edge: 4px; }
a.link { color: var(--color-accent-2); text-decoration: none; font-weight: 600; }
a.link:hover { text-decoration: underline; text-underline-offset: 3px; }
kbd { font: 600 0.85em var(--font-display); color: var(--color-ink); background: var(--color-card); border-radius: 7px; padding: var(--space-3xs) var(--space-xs); box-shadow: inset 0 0 0 1px var(--color-rule), 0 2px 0 0 var(--color-edge); white-space: nowrap; }

/* ---------- chrome ---------- */
.banner { background: var(--color-ink); color: var(--color-fringe); font-size: var(--text-sm); }
.banner .container { display: flex; justify-content: center; gap: var(--space-xs); padding-block: var(--space-xs); flex-wrap: wrap; text-align: center; }
.banner a { color: var(--color-fringe); text-decoration: underline; text-underline-offset: 2px; }
.banner :focus-visible { outline-color: var(--color-fringe); }

.bar { position: sticky; top: 0; z-index: var(--z-sticky-nav); background: color-mix(in oklab, var(--color-paper) 86%, transparent); backdrop-filter: blur(10px); transition: box-shadow var(--dur-short) var(--ease-snap); }
.bar.is-stuck { box-shadow: 0 1px 0 var(--color-rule); }
.bar .container { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 68px; }
.wordmark { display: inline-flex; align-items: center; gap: var(--space-xs); color: var(--color-ink); text-decoration: none; font-weight: 600; font-size: var(--text-lg); letter-spacing: var(--tracking-display); }
.wordmark img { width: 32px; height: 32px; }
.wordmark small { font-weight: 500; color: var(--color-muted); }
.bar nav { display: flex; align-items: center; gap: var(--space-lg); }
.bar nav a.nl { color: var(--color-ink-2); text-decoration: none; font-weight: 500; font-size: var(--text-sm); }
.bar nav a.nl:hover { color: var(--color-accent-2); }

/* ---------- hero ---------- */
.hero .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--space-3xl); align-items: center; min-height: calc(100svh - 108px); padding-block: var(--space-2xl); }
.hero h1 { max-width: 12ch; font-size: clamp(3rem, 5.4vw + 1rem, 5.5rem); }
.hero h1 .bn { font-family: var(--font-display); }
.hero .lead { margin-top: var(--space-lg); color: var(--color-ink-2); font-size: var(--text-lead); max-width: 34ch; }
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-xl); }
.hero .needs { margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); max-width: 42ch; }

/* the chat window: a familiar messaging UI with Bujhi's card popping up */
.chat { position: relative; border-radius: var(--radius-card); overflow: hidden; background: var(--color-card); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--color-rule); }
.chat::before { content: ""; position: absolute; inset: -40px; z-index: -1; background: radial-gradient(55% 50% at 78% 20%, color-mix(in oklab, var(--color-accent) 22%, transparent), transparent 70%), radial-gradient(45% 45% at 12% 88%, color-mix(in oklab, var(--color-accent-3) 16%, transparent), transparent 70%); filter: blur(8px); }
.chat-top { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg); background: var(--color-accent); color: var(--color-accent-ink); }
.chat-top .ava { width: 36px; height: 36px; border-radius: 50%; background: color-mix(in oklab, var(--color-accent-ink) 22%, var(--color-accent)); color: var(--color-accent-ink); display: grid; place-items: center; font-weight: 600; }
.chat-top .who { display: grid; line-height: 1.2; }
.chat-top .who b { font-weight: 600; }
.chat-top .who i { font-style: normal; font-size: var(--text-xs); color: var(--color-accent-ink); opacity: 0.85; }
.chat-body { padding: var(--space-lg); min-height: 180px; display: grid; align-content: start; gap: var(--space-sm); background: var(--color-paper-2); background-image: var(--grain); }
.msg { max-width: 82%; font-size: var(--text-md); padding: var(--space-sm) var(--space-md); box-shadow: 0 1px 1px color-mix(in oklab, var(--color-ink) 10%, transparent); }
.msg.in { justify-self: start; background: var(--color-card); border-radius: 14px 14px 14px 4px; }
.msg.out { justify-self: end; background: var(--color-mint); border-radius: 14px 14px 4px 14px; }
.bujhi-card { margin: 0 var(--space-md) calc(-1 * var(--space-lg)); position: relative; z-index: 2; border-radius: var(--radius-stock); background: var(--grain), var(--color-card); box-shadow: 0 0 0 1px var(--color-rule), var(--shadow-card); padding: var(--space-md); display: grid; gap: var(--space-sm); translate: 0 calc(-1 * var(--space-lg)); }
.bc-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.bc-brand { display: inline-flex; align-items: center; gap: var(--space-2xs); font-weight: 600; font-size: var(--text-sm); }
.bc-brand img { width: 18px; height: 18px; }
.bc-top .dir { font-size: var(--text-xs); color: var(--color-muted); font-weight: 500; }
.composer { display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-md) var(--space-lg) var(--space-lg); background: var(--color-card); }
.composer .cfield { flex: 1; min-width: 0; font-size: var(--text-md); color: var(--color-ink); background: var(--color-paper-2); border-radius: var(--radius-pill); padding: var(--space-sm) var(--space-md); box-shadow: inset 0 0 0 1px var(--color-rule); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.composer .send { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--color-accent); color: var(--color-accent-ink); display: grid; place-items: center; box-shadow: 0 3px 0 0 var(--color-accent-deep); }
.composer .send svg { width: 18px; height: 18px; }
.tiles { display: flex; flex-wrap: wrap; gap: var(--space-xs); min-height: 2.2em; align-content: center; }
.tile { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.125rem, 1vw + 0.9rem, 1.5rem); border-radius: var(--radius-input); padding: var(--space-2xs) var(--space-sm); background: var(--grain), var(--color-card); box-shadow: inset 0 0 0 1px var(--color-rule), 0 3px 0 0 var(--color-edge); opacity: 0; translate: 0 6px; }
.tile.in { opacity: 1; translate: 0; transition: opacity var(--dur-short) var(--ease-spring), translate var(--dur-short) var(--ease-spring); }
.tile.pop { color: var(--color-accent-ink); background: var(--grain), var(--color-accent); box-shadow: inset 0 1px 0 color-mix(in oklab, var(--color-fringe) 50%, transparent), 0 3px 0 0 var(--color-accent-deep); }
.tile.pop2 { color: var(--color-accent-ink); background: var(--grain), var(--color-accent-3); box-shadow: 0 3px 0 0 color-mix(in oklab, var(--color-accent-3) 68%, black); }
.tones { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.tn { font-size: var(--text-xs); font-weight: 600; padding: var(--space-3xs) var(--space-sm); border-radius: var(--radius-pill); background: var(--color-paper-2); color: var(--color-ink-2); box-shadow: inset 0 0 0 1px var(--color-rule); }
.tn.on { background: var(--color-ink); color: var(--color-fringe); box-shadow: none; }
.acts { display: flex; gap: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--color-rule); }
.acts span { display: inline-flex; align-items: center; gap: var(--space-2xs); font-size: var(--text-sm); font-weight: 600; color: var(--color-ink-2); }
.acts span:first-child { color: var(--color-accent-2); }
.acts svg { width: 15px; height: 15px; }

/* ---------- sites strip ---------- */
.sites { padding-block: var(--section-gap-s); }
.sites .container { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-2xl); align-items: center; }
.sites h2 { font-size: var(--text-title); max-width: 15ch; }
.chip-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.chip-row span { font-weight: 600; color: var(--color-ink); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--grain), var(--color-card); box-shadow: inset 0 0 0 1px var(--color-rule), 0 3px 0 0 var(--color-edge); }
.chip-row span.more { color: var(--color-muted); background: transparent; box-shadow: none; font-weight: 500; }

/* ---------- feature stack ---------- */
.stack { padding-block: var(--section-gap); }
.stack .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); }
.stack__pane { position: sticky; top: 100px; align-self: start; }
.stack__pane p { margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-lead); max-width: 28ch; }
.stack__steps { list-style: none; margin: var(--space-xl) 0 0; padding: 0; display: grid; gap: var(--space-sm); counter-reset: s; }
.stack__steps li { counter-increment: s; display: flex; align-items: center; gap: var(--space-sm); color: var(--color-muted); font-weight: 600; transition: color var(--dur-short) var(--ease-snap); }
.stack__steps li::before { content: counter(s); display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-rule); font-size: var(--text-xs); color: var(--color-ink-2); }
.stack__steps li.is-on { color: var(--color-ink); }
.stack__steps li.is-on::before { background: var(--color-accent); color: var(--color-accent-ink); box-shadow: 0 2px 0 0 var(--color-accent-deep); }
.stack__frames { display: grid; gap: var(--space-2xl); }
.frame { margin: 0; min-height: 340px; border-radius: var(--radius-card); background: var(--grain), var(--fibre), var(--color-card); box-shadow: var(--shadow-card); padding: var(--space-xl); display: grid; align-content: center; gap: var(--space-lg); }
.frame figcaption { color: var(--color-ink-2); font-size: var(--text-lead); max-width: 36ch; }
.frame figcaption b { color: var(--color-ink); }
.mini { border-radius: var(--radius-stock); background: var(--color-paper-2); padding: var(--space-md); display: grid; gap: var(--space-xs); }
.mini .ln { font-size: var(--text-md); }
.mini .ln.bn { font-weight: 600; }
.mini .ln.mut { color: var(--color-muted); }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2xs); }
.badge { justify-self: start; font-weight: 600; font-size: var(--text-sm); color: var(--color-accent-ink); background: var(--color-accent-3); border-radius: var(--radius-pill); padding: var(--space-2xs) var(--space-md); box-shadow: 0 3px 0 0 color-mix(in oklab, var(--color-accent-3) 68%, black); }
.sug { display: grid; gap: var(--space-sm); }
.sug .row { display: flex; align-items: baseline; gap: var(--space-sm); font-size: var(--text-md); }
.sug .was { color: var(--color-muted); text-decoration: line-through; }
.sug .now { font-weight: 600; }
.sug .t { margin-left: auto; font-size: var(--text-xs); color: var(--color-muted); }

/* ---------- features ---------- */
.features { padding-block: 0 var(--section-gap); }
.features .center { text-align: center; }
.feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-xl); margin-top: var(--space-2xl); }
.feat { border-radius: var(--radius-card); background: var(--grain), var(--fibre), var(--color-card); box-shadow: inset 0 0 0 1px var(--color-rule), 0 4px 0 0 var(--color-edge); padding: var(--space-lg) var(--space-lg) var(--space-xl); }
.feat .k { display: inline-grid; place-items: center; min-width: 36px; height: 34px; padding: 0 var(--space-xs); border-radius: 10px; font-weight: 600; font-size: var(--text-sm); color: var(--color-accent-ink); background: var(--color-accent); box-shadow: 0 3px 0 0 var(--color-accent-deep); }
.feat .k.b { background: var(--color-accent-2); box-shadow: 0 3px 0 0 color-mix(in oklab, var(--color-accent-2) 68%, black); }
.feat .k.c { background: var(--color-accent-3); box-shadow: 0 3px 0 0 color-mix(in oklab, var(--color-accent-3) 68%, black); }
.feat h3 { font-size: var(--text-title); margin-top: var(--space-md); }
.feat p { margin-top: var(--space-xs); color: var(--color-ink-2); font-size: var(--text-md); }

/* ---------- providers ---------- */
.providers { padding-block: var(--section-gap); }
.providers .container { position: relative; border-radius: var(--radius-card); background: var(--grain), var(--fibre), var(--color-paper-2); box-shadow: inset 0 0 0 1px var(--color-rule); padding: var(--space-3xl) var(--space-2xl); }
.providers .head { max-width: 44ch; }
.providers .head p { margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-lead); }
.prov-grid { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-2xl); }
.prov-grid span { font-weight: 600; color: var(--color-ink); padding: var(--space-xs) var(--space-md); border-radius: var(--radius-pill); background: var(--color-card); box-shadow: inset 0 0 0 1px var(--color-rule); }
.prov-grid span.lead { color: var(--color-accent-ink); background: var(--color-accent); box-shadow: 0 3px 0 0 var(--color-accent-deep); }
.providers .note { margin-top: var(--space-lg); color: var(--color-muted); font-size: var(--text-sm); }

/* ---------- privacy ---------- */
.privacy { padding-block: 0 var(--section-gap); }
.privacy .container { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.privacy p.sec-lede { margin-top: var(--space-md); color: var(--color-ink-2); font-size: var(--text-lead); }
.privacy ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-md); }
.privacy li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--space-sm); align-items: start; color: var(--color-ink-2); }
.privacy li .ck { width: 26px; height: 26px; border-radius: 8px; background: var(--color-mint); color: var(--color-mint-deep); display: grid; place-items: center; box-shadow: 0 2px 0 0 color-mix(in oklab, var(--color-mint) 60%, black); }
.privacy li .ck svg { width: 16px; height: 16px; }
.privacy li b { color: var(--color-ink); }

/* ---------- install (ink band) ---------- */
.install { background: var(--color-ink); color: var(--color-fringe); padding-block: var(--section-gap-l) var(--section-gap); }
.install h2 { color: var(--color-fringe); max-width: 16ch; }
.install .sub { margin-top: var(--space-md); color: color-mix(in oklab, var(--color-fringe) 74%, var(--color-ink)); font-size: var(--text-lead); max-width: 46ch; }
.install :focus-visible { outline-color: var(--color-fringe); }
.steps { counter-reset: st; list-style: none; margin: var(--space-2xl) 0 0; padding: 0; display: grid; gap: var(--space-lg); max-width: 58ch; }
.steps li { counter-increment: st; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: var(--space-md); align-items: start; }
.steps li::before { content: counter(st); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--text-md)/1 var(--font-display); box-shadow: 0 3px 0 0 var(--color-accent-deep); }
.steps b { color: var(--color-fringe); }
.steps code { font-family: var(--font-outlier); font-size: 0.88em; background: color-mix(in oklab, var(--color-fringe) 14%, transparent); padding: var(--space-3xs) var(--space-xs); border-radius: 7px; }
.steps kbd { color: var(--color-ink); }
.install .actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-top: var(--space-2xl); }
.install a.ghost { display: inline-flex; align-items: center; gap: var(--space-2xs); color: var(--color-fringe); font-weight: 600; text-decoration: none; }
.install a.ghost:hover { text-decoration: underline; text-underline-offset: 3px; }
.install a.ghost svg { width: 18px; height: 18px; }
.install .soon { margin-top: var(--space-lg); color: color-mix(in oklab, var(--color-fringe) 58%, var(--color-ink)); font-size: var(--text-sm); }

/* ---------- faq ---------- */
.faq { padding-block: var(--section-gap); }
.faq .container { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--gap-columns) var(--space-3xl); }
.faq .list { display: grid; gap: var(--space-md); }
details { border-radius: var(--radius-stock); background: var(--grain), var(--color-card); box-shadow: inset 0 0 0 1px var(--color-rule); padding: var(--space-3xs) var(--space-lg); }
summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: var(--space-lg); padding-block: var(--space-lg); font-weight: 600; font-size: var(--text-lg); }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-weight: 500; color: var(--color-accent-2); transition: transform var(--dur-short) var(--ease-snap); }
details[open] summary::after { transform: rotate(45deg); }
summary:hover { color: var(--color-accent-2); }
details p { padding-bottom: var(--space-lg); color: var(--color-ink-2); }

/* ---------- footer ---------- */
.foot { padding-block: var(--space-3xl) var(--space-xl); }
.foot .cols { display: grid; grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); gap: var(--gap-columns); }
.foot .cols > div:first-child p { margin-top: var(--space-md); color: var(--color-muted); max-width: 32ch; }
.foot h2 { font-size: var(--text-sm); font-weight: 500; color: var(--color-muted); letter-spacing: 0; max-width: none; }
.foot ul { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; gap: var(--space-xs); }
.foot ul a { color: var(--color-ink); text-decoration: none; font-weight: 500; }
.foot ul a:hover { color: var(--color-accent-2); text-decoration: underline; }
.legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-3xl); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); font-size: var(--text-sm); color: var(--color-muted); }
.legal a { color: var(--color-ink); font-weight: 600; }

/* ---------- responsive ---------- */
@media (max-width: 60rem) {
  .hero .container, .sites .container, .stack .container, .privacy .container, .faq .container { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .hero .container { min-height: 0; padding-block: var(--space-xl) var(--space-2xl); }
  .stack__pane { position: static; }
  .stack__steps { display: none; }
  .feat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot .cols > div:first-child { grid-column: 1 / -1; }
  .bar nav a.nl.hide-sm { display: none; }
}
@media (max-width: 40rem) {
  .sheet { padding: var(--space-lg); }
  .feat-grid { grid-template-columns: minmax(0, 1fr); }
  .providers .container { padding: var(--space-xl) var(--space-lg); }
  .foot .cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero .actions .btn { width: 100%; justify-content: center; }
  .chip-row span, .prov-grid span { font-size: var(--text-sm); }
}