/*
 * bSMART AI, the company site (5 Oct 2026). The same look as tellmycrm.com,
 * so the parent and the product are plainly one family: cream, forest green,
 * EB Garamond headings, Figtree body, rounded panels that grow into view,
 * beige cards with white chips, content that rises and settles once.
 * The wordmark matches TellMyCRM's: Fraunces, "AI" in its green.
 */
@font-face { font-family: "Garamond"; src: url("fonts/garamond.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Garamond"; src: url("fonts/garamond-italic.woff2") format("woff2"); font-weight: 400 500; font-style: italic; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

:root {
  --cream: #FDFCEC; --cream-2: #F4F2DE; --beige: #E9E6D2;
  --ink: #1B1B1A; --ink-2: #242422; --muted: #5E5D55; --faint: #8E8C80;
  --green: #0A4C41; --green-2: #0E5A4D; --leaf: #1E9A58; --mint: #C6F1D6;
  --orange: #E8890C; --line: rgb(27 27 26 / .12);
  --serif: "Garamond", "EB Garamond", Georgia, serif;
  --sans: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--sans); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
a { color: inherit; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 28px; }
h1, h2, h3, .serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.015em; }
h1 { font-size: clamp(48px, 6.4vw, 92px); line-height: 1.02; }
h2 { font-size: clamp(38px, 5vw, 64px); line-height: 1.04; }
h3 { font-size: clamp(28px, 3vw, 40px); line-height: 1.08; }
h1 em, h2 em, h3 em { font-style: italic; }
.kicker { display: block; font-size: 13.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.center { text-align: center; }
.lede { font-size: 20px; line-height: 1.5; color: var(--muted); max-width: 640px; }
.center .lede { margin-left: auto; margin-right: auto; }

/* Buttons: solid forest green, cream words. On a dark panel they turn cream. */
.btn { display: inline-flex; align-items: center; gap: 10px; font: 600 17px/1 var(--sans); padding: 16px 24px; border-radius: 8px; text-decoration: none; cursor: pointer; white-space: nowrap; border: 0; background: var(--green); color: var(--cream); transition: background .15s ease; }
.btn:hover { background: #063A31; }
.btn-sm { padding: 11px 16px; font-size: 15.5px; }
.link { font-weight: 600; text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 2px; }
.panel .btn, .close .btn { background: var(--cream); color: var(--green); }
.panel .btn:hover, .close .btn:hover { background: #fff; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 6px; }

/* ── Menu bar ───────────────────────────────────────────────────────── */
.navbar { position: sticky; top: 0; z-index: 50; background: rgb(253 252 236 / .94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.navbar .bar { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 14px 28px; }
/* The wordmark: Fraunces, as TellMyCRM's, with "AI" in TellMyCRM's green. */
.logo { font-family: "Fraunces", Georgia, serif; font-weight: 400; font-size: 25px; letter-spacing: -0.01em; text-decoration: none; color: var(--ink); white-space: nowrap; }
.logo span { color: var(--leaf); }
.links { display: flex; align-items: center; gap: 24px; font-size: 15.5px; }
.links > a:not(.btn) { color: var(--muted); text-decoration: none; font-weight: 500; }
.links > a:not(.btn):hover, .links > a.is-here { color: var(--ink); }
.menu-sm { display: none; position: relative; }
.menu-sm > summary { list-style: none; cursor: pointer; font-weight: 600; font-size: 15.5px; padding: 8px 2px; }
.menu-sm > summary::-webkit-details-marker { display: none; }
.menu-sm .panel-menu { position: absolute; right: 0; top: calc(100% + 12px); min-width: 240px; padding: 8px; background: var(--cream); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 30px 60px -24px rgb(0 0 0 / .35); display: grid; }
.menu-sm .panel-menu a { padding: 10px 12px; border-radius: 10px; text-decoration: none; font-weight: 600; }
.menu-sm .panel-menu a:hover, .menu-sm .panel-menu a.is-here { background: var(--cream-2); }
@media (max-width: 980px) { .links { display: none; } .menu-sm { display: block; } }

/* ── Hero ───────────────────────────────────────────────────────────── */
.hero { padding: 92px 0 110px; }
.hero .for { display: flex; align-items: center; gap: 10px; font-size: 15.5px; color: var(--muted); margin-bottom: 30px; }
.hero .for .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--leaf); box-shadow: 0 0 0 4px rgb(30 154 88 / .15); }
.hero h1 { max-width: 15ch; }
.hero.wide h1 { max-width: 19ch; }
/* The phrase that is playing is full ink with a green bar drawn under it. */
.hero .hl { display: inline; position: relative; color: rgb(27 27 26 / .26); transition: color .6s ease; background: linear-gradient(var(--leaf), var(--leaf)) no-repeat 0 92% / 0% .07em; transition: color .6s ease, background-size .9s cubic-bezier(.2,.7,.2,1); }
.hero .hl.on { color: var(--ink); background-size: 100% .07em; }
.hero .sub { margin-top: 30px; font-size: 21px; line-height: 1.5; color: var(--muted); max-width: 640px; }
.hero .cta { display: flex; gap: 24px; align-items: center; margin-top: 36px; flex-wrap: wrap; }
.hero .meta { margin-top: 24px; font-size: 14px; color: var(--faint); max-width: 760px; }

/* ── Panels: rounded, dark or green, grow into place ────────────────── */
.panel { position: relative; border-radius: 56px; margin: 0 12px; color: #fff; }
.panel.dark { background: var(--ink); padding: 100px 0 110px; }
.panel.green { background: var(--green); padding: 104px 0 112px; }
.panel .kicker { color: rgb(255 255 255 / .7); }
.panel h2, .panel h3 { color: #fff; }
.panel .lede { color: rgb(255 255 255 / .82); }
.panel + .panel { margin-top: -56px; }
.panel.lift { margin-top: 40px; }
.gap { height: 100px; }

/* Outlined cards on a panel (the "figures" look). */
.figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px; }
.figs.five { grid-template-columns: repeat(5, 1fr); gap: 14px; }
.figs.six { grid-template-columns: repeat(3, 1fr); }
.figs .f { border: 1.5px solid rgb(255 255 255 / .18); border-radius: 28px; padding: 32px 28px 34px; background: rgb(255 255 255 / .03); text-align: left; }
.figs.five .f { padding: 26px 22px 28px; border-radius: 24px; }
.figs .n { font-family: var(--serif); font-size: 54px; line-height: 1; color: var(--mint); }
.figs h3 { font-size: 27px; line-height: 1.12; margin-top: 14px; }
.figs.five h3 { font-size: 23px; }
.figs p { margin-top: 12px; font-size: 16.5px; color: rgb(255 255 255 / .8); }
.panel .note { margin-top: 26px; font-size: 14.5px; color: rgb(255 255 255 / .6); text-align: center; }

/* ── Section heads ("One, Two, Three") ──────────────────────────────── */
.outcome { text-align: center; padding: 120px 0 10px; }
.outcome .num { font: italic 400 22px var(--serif); color: var(--green-2); }
.outcome h2 { margin-top: 6px; }
.outcome p { margin: 14px auto 0; max-width: 620px; color: var(--muted); font-size: 18.5px; }
.quiet { max-width: 760px; margin: 0 auto; text-align: center; }
.quiet h2 { margin-bottom: 22px; }
.quiet p { font-size: 20px; color: var(--muted); }
.quiet p + p { margin-top: 14px; }

/* ── Rows: a beige card with white chips beside the words, alternating ─ */
.rows { display: grid; gap: 96px; margin-top: 80px; }
.row { display: grid; grid-template-columns: minmax(0, 520px) minmax(0, 520px); gap: 80px; align-items: center; justify-content: center; }
.row:nth-child(even) .card { order: 2; }
.card { background: var(--beige); border-radius: 26px; padding: 30px; min-height: 250px; display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.card.dots { background: var(--beige) radial-gradient(rgb(27 27 26 / .12) 1px, transparent 1.3px) 0 0 / 18px 18px; }
.chip { background: #fff; border-radius: 14px; padding: 12px 16px; font-size: 15px; line-height: 1.45; box-shadow: 0 10px 24px -16px rgb(0 0 0 / .4); }
.chip b { font-weight: 700; } .chip .dim { color: var(--muted); display: block; font-size: 14px; }
.chip .ok { color: #0E7A55; font-weight: 700; } .chip .warn { color: #B4541C; font-weight: 700; } .chip .risk { color: #8B2E1F; font-weight: 700; }
.chip.me { background: #D9FDD3; align-self: flex-end; max-width: 88%; }
.chip.them { max-width: 92%; }
.card .cap { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); padding: 0 4px; }
.row .say .kicker { margin-bottom: 12px; color: var(--green-2); }
.row .say h3 { font-size: clamp(32px, 3.4vw, 44px); line-height: 1.05; }
.row .say p { margin-top: 16px; font-size: 18px; color: var(--muted); }
.row .say .result { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: 16.5px; }
.row .say .more { display: inline-block; margin-top: 20px; }

/* The four headings of a case, as a quiet stack. */
.facts { display: grid; gap: 18px; margin-top: 22px; }
.fact b { display: block; font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--green-2); margin-bottom: 6px; }
.fact p, .fact li { font-size: 17px; color: var(--muted); }
.fact ul { list-style: none; padding: 0; display: grid; gap: 8px; margin-top: 8px; }
.fact li { padding-left: 20px; position: relative; }
.fact li::before { content: ""; position: absolute; left: 0; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--leaf); }
.fact li strong { color: var(--ink); font-weight: 600; }
.fact .result { margin-top: 10px; color: var(--ink); font-weight: 600; }
.case { padding-top: 110px; }
.case .row { margin-top: 0; align-items: start; }
.case .row .card { position: sticky; top: 100px; }

/* ── Halves (TellMyCRM page and home section) ───────────────────────── */
.halves { padding: 30px 0 30px; }
.pair2 { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
.half { border-radius: 30px; padding: 30px 30px 32px; }
.half.rep { background: var(--mint); } .half.mgr { background: var(--ink); color: #fff; }
.half .who2 { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.half h3 { margin-top: 6px; font-size: 34px; }
.half p { margin-top: 12px; font-size: 17px; opacity: .85; }
.half .chat { margin-top: 18px; background: #F4F1E6; border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 8px; color: var(--ink); font-size: 15.5px; line-height: 1.45; }
.half .chat .b { background: #fff; border-radius: 14px; padding: 9px 13px; max-width: 92%; box-shadow: 0 1px 1px rgb(0 0 0 / .08); }
.half .chat .b.me { align-self: flex-end; background: #D9FDD3; }

/* Cards on cream (findings, the contact list). */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 56px; }
.tile { background: var(--beige); border-radius: 26px; padding: 30px 28px 32px; }
.tile h3 { font-size: 27px; line-height: 1.12; }
.tile p { margin-top: 12px; font-size: 16.5px; color: var(--muted); }
.trial { font-size: 14.5px; color: var(--muted); margin-top: 16px; }
.panel .trial { color: rgb(255 255 255 / .65); }

/* ── Close + footer ─────────────────────────────────────────────────── */
.close { text-align: center; }
.close p { margin: 22px auto 0; max-width: 640px; font-size: 20px; color: rgb(255 255 255 / .85); }
.close .btn { margin-top: 36px; }
.site-footer { background: var(--cream); color: var(--muted); padding: 110px 0 36px; font-size: 15.5px; }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 48px; }
.footer-tagline { margin-top: 14px; max-width: 340px; color: var(--ink); }
.footer-meta { margin-top: 20px; font-size: 14px; display: grid; gap: 6px; max-width: 440px; }
.site-footer h4 { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink); margin: 0 0 16px; font-weight: 600; }
.footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer-links a { text-decoration: none; } .footer-links a:hover { color: var(--ink); }
.footer-bottom { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; }

/* ── Legal prose ────────────────────────────────────────────────────── */
.prose { max-width: 760px; margin: 0 auto; padding: 20px 0 40px; }
.prose h2 { font-size: clamp(28px, 3vw, 38px); margin: 52px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 24px; margin: 28px 0 8px; }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 16px; padding-left: 22px; } .prose li { margin: 6px 0; }
.prose a { color: var(--green-2); }
.prose .meta-box { background: var(--beige); border-radius: 18px; padding: 16px 20px; margin-bottom: 34px; }

/* ── Scroll reveal: rise and settle, once ───────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1); }
  .reveal.in { opacity: 1; transform: none; }
  .panel.grow { transform: scale(.965); transition: transform 1s cubic-bezier(.2,.7,.2,1); transform-origin: center top; }
  .panel.grow.in { transform: none; }
  .figs .f.reveal:nth-child(2), .tiles .tile.reveal:nth-child(2) { transition-delay: .08s; }
  .figs .f.reveal:nth-child(3), .tiles .tile.reveal:nth-child(3) { transition-delay: .16s; }
  .figs .f.reveal:nth-child(4), .tiles .tile.reveal:nth-child(4) { transition-delay: .24s; }
  .figs .f.reveal:nth-child(5), .tiles .tile.reveal:nth-child(5) { transition-delay: .32s; }
  .figs .f.reveal:nth-child(6), .tiles .tile.reveal:nth-child(6) { transition-delay: .4s; }
  .card .chip { opacity: 0; transform: translateY(12px) scale(.97); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); }
  .card.in .chip { opacity: 1; transform: none; }
  .card.in .chip:nth-of-type(2) { transition-delay: .25s; } .card.in .chip:nth-of-type(3) { transition-delay: .5s; }
  .card.in .chip:nth-of-type(4) { transition-delay: .75s; } .card.in .chip:nth-of-type(5) { transition-delay: 1s; }
  .hero .rise { opacity: 0; transform: translateY(16px); animation: rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
  .hero .d1 { animation-delay: .05s } .hero .d2 { animation-delay: .15s } .hero .d3 { animation-delay: .3s } .hero .d4 { animation-delay: .42s }
  @keyframes rise { to { opacity: 1; transform: none; } }
}

/* ── Narrow screens ─────────────────────────────────────────────────── */
@media (max-width: 1100px) { .figs.five { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 960px) {
  .figs, .figs.five, .figs.six, .tiles, .pair2 { grid-template-columns: 1fr; }
  .row { grid-template-columns: 1fr; gap: 28px; }
  .row:nth-child(even) .card { order: 0; }
  .case .row .card { position: static; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .wrap { padding: 0 18px; }
  .navbar .bar { padding: 12px 18px; }
  .logo { font-size: 19px; }
  .hero { padding: 56px 0 72px; }
  .hero .sub { font-size: 19px; }
  .panel { border-radius: 36px; margin: 0 6px; }
  .panel + .panel { margin-top: -36px; }
  .panel.dark, .panel.green { padding: 72px 0 80px; }
  .outcome { padding-top: 84px; }
  .rows { gap: 64px; margin-top: 56px; }
  .case { padding-top: 80px; }
  .card { padding: 20px; min-height: 0; }
  .footer-grid { grid-template-columns: 1fr; }
}