/* Moltd homepage v3: an off-white canvas, Funnel Display/Sans with Departure Mono for labels and
   numbers, painted images that resolve out of big pixels, and one dark pixel-glow moment.
   Motion uses one curve everywhere (0.23, 1, 0.32, 1) at 300 to 600ms. */
@font-face { font-family: 'Departure Mono'; src: url('/new-homepage/fonts/DepartureMono-Regular.woff2') format('woff2'); font-display: swap; }

:root {
  --bg: #fafaf8;
  --ink: #121212;
  --ink-2: #4c4c4a;
  --ink-3: #8b8a86;
  --ink-4: #bdbcb7;
  --line: rgba(18, 18, 18, 0.09);
  --line-2: rgba(18, 18, 18, 0.055);
  --panel: #f2f1ed;
  --card: #ffffff;
  --accent: #ff5a1f;
  --accent-2: #ff8c42;
  --accent-tint: #fff0e7;
  --green: #1f9d57;
  --green-tint: #e6f5ec;
  --amber: #b47605;
  --amber-tint: #fbf1dc;
  --blue: #3c64e0;
  --blue-tint: #ecf0fd;
  --red: #e0484d;
  --red-tint: #fcebeb;
  --display: 'Funnel Display', 'Funnel Sans', ui-sans-serif, system-ui, sans-serif;
  --sans: 'Funnel Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --px: 'Departure Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --ease: cubic-bezier(0.23, 1, 0.32, 1);
  --hair: 0 0 0 1px rgba(18, 18, 18, 0.07);
  --card-sh: 0 0 0 1px rgba(18, 18, 18, 0.06), 0 1px 2px rgba(18, 18, 18, 0.04), 0 4px 12px -4px rgba(18, 18, 18, 0.06);
  --lift: 0 0 0 1px rgba(18, 18, 18, 0.06), 0 16px 40px -16px rgba(18, 18, 18, 0.22), 0 2px 6px rgba(18, 18, 18, 0.04);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 15.5px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; }
img { max-width: 100%; display: block; }
[hidden] { display: none !important; }
img[src*="/logos/"] { object-fit: contain; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
::selection { background: var(--accent-tint); }
.wrap { max-width: 1240px; margin: 0 auto; padding-inline: 20px; }
@media (min-width: 768px) { .wrap { padding-inline: 40px; } }


/* ---------------------------------------------------------------- header */
.top { position: sticky; top: 0; z-index: 60; border-bottom: 1px solid transparent; transition: background 0.4s var(--ease), border-color 0.4s var(--ease); }
.top.scrolled { background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom-color: var(--line); }
.top .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font: 500 19px/1 var(--display); letter-spacing: -0.02em; }
.brand img { width: 28px; height: 28px; border-radius: 8px; }
.nav { display: none; gap: 26px; font-size: 14.5px; color: var(--ink-2); }
.nav a { transition: color 0.2s; }
.nav a:hover { color: var(--ink); }
@media (min-width: 900px) { .nav { display: flex; } }
.top .actions { margin-left: auto; display: flex; gap: 8px; align-items: center; }

.btn { position: relative; display: inline-flex; align-items: center; gap: 7px; overflow: hidden; height: 36px; padding: 0 15px; border-radius: 10px; border: 0; cursor: pointer; font: 500 13.5px/1 var(--sans); color: var(--ink-2); white-space: nowrap; background: #fbfbf9; box-shadow: var(--hair), inset 0 1px 0 #fff, 0 1px 2px rgba(18, 18, 18, 0.05); transition: background 0.2s var(--ease), transform 0.2s var(--ease), color 0.2s; }
.btn:hover { background: #f1f0ec; color: var(--ink); }
.btn:active { transform: scale(0.97); }
.btn.dark { background: var(--ink); color: #fff; box-shadow: 0 0 0 1px #000, inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 8px 18px -8px rgba(0, 0, 0, 0.55); }
.btn.dark:hover { background: #262626; }
.btn.ghost { background: transparent; box-shadow: none; }
.btn.ghost:hover { background: rgba(18, 18, 18, 0.045); }
.btn.lg { height: 42px; padding: 0 18px; font-size: 14.5px; border-radius: 11px; }
.btn.press { transform: scale(0.94); }
.btn .px-arrow { font-family: var(--px); font-size: 13px; transition: transform 0.3s var(--ease); }
.btn:hover .px-arrow { transform: translateX(3px); }

/* ---------------------------------------------------------------- type */
h1, h2 { font-family: var(--display); font-weight: 400; letter-spacing: -0.03em; margin: 0; text-wrap: balance; }
h1 { font-size: clamp(38px, 5vw, 66px); line-height: 1.02; }
h2 { font-size: clamp(30px, 3.4vw, 44px); line-height: 1.06; }
h3 { font-weight: 500; font-size: 15.5px; margin: 0; }
.lede { color: var(--ink-2); font-size: 17px; line-height: 1.55; max-width: 54ch; margin: 16px 0 0; }
.eyebrow { font: 400 12px/1 var(--px); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); display: inline-flex; align-items: center; gap: 8px; }
.eyebrow::before { content: ''; width: 6px; height: 6px; background: var(--accent); }

/* scramble: letters arrive as pixel glyphs and settle into the display face */
.sc-word { display: inline-block; white-space: nowrap; }
.sc { display: inline-block; text-align: center; }
.sc.px { font-family: var(--px); color: var(--accent); font-weight: 400; transform: translateY(-0.04em) scale(0.86); }

/* ---------------------------------------------------------------- reveal */
.rv { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
.rv.in { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- motion primitives */
@keyframes pixel-on { 0%, 100% { opacity: 0.15; } 18%, 42% { opacity: 1; } 62% { opacity: 0.15; } }
@keyframes fade-up { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
@keyframes pop-in { 0% { opacity: 0; transform: scale(0.9); } 100% { opacity: 1; transform: none; } }
@keyframes spin { 100% { transform: rotate(1turn); } }
.spin { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid rgba(18, 18, 18, 0.14); border-top-color: var(--ink-2); animation: spin 0.7s linear infinite; flex: none; }

/* mock product UI is a picture, not text to copy */
.window, .widget, .journey, .tiles, .shift, .prompt, .sops, .logos-row, .closer-card .cta { -webkit-user-select: none; user-select: none; cursor: default; }

/* ---------------------------------------------------------------- hero */
.hero { padding-top: 64px; position: relative; overflow: hidden; }



@keyframes live { 0% { box-shadow: 0 0 0 0 rgba(31, 157, 87, 0.45); } 70%, 100% { box-shadow: 0 0 0 7px rgba(31, 157, 87, 0); } }



 
@keyframes dot { 0%, 60%, 100% { transform: none; opacity: 0.45; } 30% { transform: translateY(-3px); opacity: 1; } }
.hero .cta { display: flex; gap: 8px; margin-top: 30px; flex-wrap: wrap; }

/* painted frames: an image that resolves out of big pixels, a window sitting inside */
.frame { position: relative; margin-top: 60px; border-radius: 6px; overflow: hidden; background: var(--panel); }
.frame .art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s var(--ease); }
.frame .art-img.on { opacity: 1; }
.mirror > .art-img, .mirror > canvas.pxl { transform: scaleX(-1); }
canvas.pxl { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; transition: opacity 0.4s var(--ease); pointer-events: none; }
.frame .inset { position: relative; padding: 52px 28px 0; }
@media (max-width: 720px) { .frame .inset { padding: 36px 14px 0; } }

.window { position: relative; border-radius: 14px 14px 0 0; background: rgba(244, 243, 239, 0.86); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(18, 18, 18, 0.08), 0 40px 80px -30px rgba(10, 20, 40, 0.45); padding: 0 7px; overflow: hidden; }
.window .chrome { height: 38px; display: flex; align-items: center; gap: 7px; padding-left: 9px; }
.window .chrome i { width: 11px; height: 11px; border-radius: 50%; display: block; }
.window .chrome i:nth-child(1) { background: #ff5f57; } .window .chrome i:nth-child(2) { background: #febc2e; } .window .chrome i:nth-child(3) { background: #28c840; }
.window .chrome .title { margin-left: 12px; font: 400 11.5px var(--px); color: var(--ink-3); }
.window .screen { position: relative; background: var(--card); border-radius: 9px 9px 0 0; overflow: hidden; box-shadow: 0 0 0 1px rgba(18, 18, 18, 0.06); }

/* the co-worker workspace */



.side { background: #f8f7f4; border-right: 1px solid var(--line-2); padding: 14px 10px; display: grid; align-content: start; gap: 2px; }


.side a { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 7px; color: var(--ink-2); }
.side a.on { background: #fff; color: var(--ink); box-shadow: var(--card-sh); }
.side a img { width: 16px; height: 16px; border-radius: 5px; }
.side .badge { margin-left: auto; font: 400 10px var(--px); background: var(--accent); color: #fff; border-radius: 4px; padding: 2px 5px; }


.thread { display: flex; flex-direction: column; min-width: 0; }
.thread .th { height: 46px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 1px solid var(--line-2); font-weight: 500; }
.thread .th span { color: var(--ink-3); font-weight: 400; font-size: 12px; }
.msgs { flex: 1; padding: 16px 18px; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }


.tl:has(> .av) > div { min-width: 0; }
.msgs { transition: opacity 0.22s var(--ease); }
.msgs.out { opacity: 0; }

/* the three asks that drive the hero */
.asks { position: relative; z-index: 2; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; padding: 24px 14px 0; }
.askchip { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 6px; border: 0; border-radius: 99px; cursor: pointer; font: 500 13.5px var(--sans); color: var(--ink-2); background: rgba(250, 250, 248, 0.7); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px rgba(18, 18, 18, 0.06), 0 8px 18px -10px rgba(10, 20, 40, 0.45); transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.2s var(--ease); }
.askchip:hover { color: var(--ink); background: rgba(255, 255, 255, 0.86); }
.askchip:active { transform: scale(0.97); }
.askchip .who { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex: none; }
.av img { object-fit: cover; }
.side a img.dm { width: 18px; height: 18px; border-radius: 5px; object-fit: cover; }
.sl-list { margin: 6px 0 2px; padding-left: 20px; line-height: 1.5; }
.sl-list > li { margin: 2px 0; opacity: 0; transform: translateY(4px); filter: blur(3px); transition: opacity 0.35s var(--ease), transform 0.35s var(--ease), filter 0.35s var(--ease); }
.sl-list > li.in { opacity: 1; transform: none; filter: none; }
.sl-link { color: #1264a3; }
.sl-ctx { margin-top: 4px; font-size: 12px; color: #616061; }
.sl-from { margin-top: 6px; animation: fade-up 0.4s var(--ease) both; }
.sl-work { color: #616061; }
.askchip.on { background: #fff; color: var(--ink); }
.askchip .prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.askchip.on .prog { animation: prog var(--dur, 12s) linear forwards; }
.asks + .inset { padding-top: 22px; }
@media (max-width: 560px) { .askchip { font-size: 12.5px; height: 32px; } .askchip .who { width: 20px; height: 20px; line-height: 20px; font-size: 10px; } }
.side a small { margin-left: auto; font: 400 10px var(--px); color: var(--ink-4); }

/* work the hero thread produces */
.card { margin-top: 10px; max-width: 540px; border-radius: 12px; background: #fff; box-shadow: var(--card-sh); overflow: hidden; font-size: 12.5px; animation: fade-up 0.45s var(--ease) both; }



.card .ir { display: flex; align-items: center; gap: 9px; padding: 8px 12px; border-top: 1px solid var(--line-2); animation: blur-in 0.4s var(--ease) both; animation-delay: calc(var(--n, 0) * 120ms + 100ms); }

.card .ir .num { font: 400 11px var(--px); color: var(--ink-3); min-width: 34px; }
.card .ir b { font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.card .ir .tag { height: 19px; font-size: 10.5px; padding: 0 6px; }
.card .ir .as { width: 18px; height: 18px; border-radius: 50%; color: #fff; font: 500 9.5px/18px var(--sans); text-align: center; flex: none; }


  


.sched { display: inline-flex; align-items: center; gap: 7px; margin-top: 10px; height: 28px; padding: 0 10px; border-radius: 8px; background: var(--blue-tint); color: var(--blue); font-weight: 500; font-size: 12px; animation: pop-in 0.35s var(--ease) both; }

.av { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; font-weight: 500; font-size: 12px; color: #fff; }
.av img { width: 32px; height: 32px; border-radius: 9px; }
.meta { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: var(--ink-3); }
.meta b { font-weight: 500; color: var(--ink); font-size: 13px; }
.meta .app { font: 400 9.5px var(--px); letter-spacing: 0.05em; padding: 2px 5px; border-radius: 4px; background: var(--accent-tint); color: #c4440f; }
.body { margin-top: 2px; line-height: 1.55; color: var(--ink); }
.at { color: var(--blue); background: var(--blue-tint); border-radius: 4px; padding: 0 3px; }
.caret { display: inline-block; width: 1.5px; height: 1em; background: var(--ink); vertical-align: -0.12em; margin-left: 1px; animation: caret-blink 1s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }

/* task capsules (beautiful-ui task rows) */








.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 99px; font-size: 11.5px; font-weight: 500; white-space: nowrap; }
.tag.green { background: var(--green-tint); color: var(--green); }
.tag.amber { background: var(--amber-tint); color: var(--amber); }


.tag.red { background: var(--red-tint); color: var(--red); }

/* approval card */
.ask { margin-top: 10px; max-width: 470px; border-radius: 14px; background: #fff; box-shadow: var(--lift); padding: 13px 14px 12px; animation: fade-up 450ms var(--ease) both; position: relative; }
.ask .k { font: 400 10.5px var(--px); letter-spacing: 0.05em; text-transform: uppercase; color: var(--amber); display: flex; gap: 7px; align-items: center; }
.ask .k::before { content: ''; width: 6px; height: 6px; border-radius: 1.5px; background: currentColor; }
.ask .t { margin-top: 6px; font-weight: 500; font-size: 14px; }
.ask .s { color: var(--ink-2); font-size: 12.5px; margin-top: 3px; }



.ask .done { display: none; align-items: center; gap: 7px; color: var(--green); font-weight: 500; font-size: 13px; margin-top: 10px; }

.ask.approved .done { display: flex; animation: fade-up 320ms var(--ease) both; }
.ask.approved .k { color: var(--green); }













@keyframes bump { 0% { color: var(--accent); transform: translateY(-2px); } 100% { color: var(--ink); transform: none; } }





/* ---------------------------------------------------------------- logos */
.trust { padding: 60px 0 0; }
.trust .label { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 28px; text-align: center; }
.yc { display: inline-flex; align-items: center; gap: 8px; font: 400 12px/1 var(--px); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); }
.yc img { width: 13px; height: 13px; border-radius: 3px; }
.proof { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 16px 0 0; font-size: 15px; color: var(--ink-2); }
.proof b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.yc2 { display: inline-flex; align-items: center; gap: 8px; }
.yc2 img { width: 15px; height: 15px; border-radius: 3px; }
.logo-row { margin-top: 24px; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.logo-row .track { display: flex; align-items: center; gap: 60px; width: max-content; animation: slide 55s linear infinite; }
.logo-row img { height: 30px; width: auto; filter: brightness(0); opacity: 0.5; transition: opacity 0.3s; }
.logo-row img.wide { height: 20px; }
.logo-row img:hover { opacity: 0.9; }
@keyframes slide { to { transform: translateX(-50%); } }

section.block { padding: 140px 0 0; }
.head { max-width: 720px; }
.head .eyebrow { margin-bottom: 18px; }

/* ---------------------------------------------------------------- every channel: one customer's week */
.journey { margin-top: 44px; background: var(--panel); border-radius: 18px; padding: 10px; display: grid; gap: 10px; }
.stops { display: grid; gap: 6px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) { .stop { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 11px; } .stop small { font-size: 10px; } }
.stop { position: relative; display: flex; gap: 11px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 0; background: transparent; text-align: left; cursor: pointer; overflow: hidden; transition: background 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.stop:hover { background: rgba(255, 255, 255, 0.55); }
.stop img, .stop svg { width: 20px; height: 20px; flex: none; }
.stop b { display: block; font-weight: 500; font-size: 14px; }
.stop small { font: 400 11px var(--px); color: var(--ink-3); }
.stop .prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.stop.on { background: #fff; box-shadow: var(--card-sh); }
.stop.on .prog { animation: prog var(--dur, 6s) linear forwards; }
.jstage { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .jstage { grid-template-columns: 1fr 310px; } }












.guide { display: flex; gap: 4px; margin-top: 8px; padding: 6px; border-radius: 10px; background: #f7f6f2; font-size: 12px; color: var(--ink-3); width: max-content; max-width: 100%; }
.guide span { padding: 4px 9px; border-radius: 7px; }

.memory { background: #fff; border-radius: 14px; box-shadow: var(--card-sh); padding: 18px; }
.memory .mh { display: flex; gap: 11px; align-items: center; }
.memory .ava { width: 38px; height: 38px; border-radius: 10px; background: #6b5bd2; color: #fff; display: grid; place-items: center; font: 400 15px var(--px); flex: none; }
.memory .mh b { display: block; font-weight: 500; }
.memory .mh small { color: var(--ink-3); font-size: 12.5px; }

.memory ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.memory li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; padding: 9px 10px; border-radius: 10px; background: #f7f6f2; font-size: 13px; line-height: 1.4; color: var(--ink); }
.memory li.new { animation: fade-up 0.45s var(--ease) both, mem-flash 1.6s var(--ease); }
@keyframes mem-flash { 0%, 30% { background: var(--accent-tint); } 100% { background: #f7f6f2; } }
.memory li img, .memory li svg { width: 15px; height: 15px; margin-top: 1px; }
.memory li time { display: block; font: 400 10px var(--px); color: var(--ink-3); margin-top: 2px; }


.soon { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 6px 2px; }
.soon .lbl { font: 400 10.5px var(--px); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; }
.sch { display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px 0 9px; border-radius: 9px; background: rgba(255, 255, 255, 0.6); box-shadow: inset 0 0 0 1px var(--line); font-size: 13px; color: var(--ink-2); }
.sch img { width: 17px; height: 17px; }
.foot .soonlink { display: block; font-size: 12.5px; color: rgba(255, 255, 255, 0.42); padding-top: 6px; line-height: 1.45; }
.foot .soonlink em { font-style: normal; font: 400 10px var(--px); text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent-2); margin-left: 2px; }
.wall { margin-top: 88px; display: grid; gap: 32px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 980px) { .wall { grid-template-columns: 0.75fr 1.6fr; gap: 56px; } }
.wall-num { font: 400 clamp(56px, 7vw, 96px)/1 var(--display); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.wall-num [data-roll] { display: inline-flex; }
.wcol { display: inline-block; height: 1.5em; margin: -0.25em 0; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.wstrip { display: flex; flex-direction: column; transition: transform 1.15s cubic-bezier(0.16, 1, 0.3, 1); }
.wstrip > span { height: 1.5em; line-height: 1.5em; text-align: center; }
.wall-num [data-roll]:not(.go) .wstrip { filter: blur(0); }
.wall-num [data-roll].go .wstrip { animation: wblur 1.1s ease-out both; }
@keyframes wblur { 0% { filter: blur(0); } 18% { filter: blur(3px); } 70% { filter: blur(0.4px); } 100% { filter: blur(0); } }
.wall-copy p { margin: 14px 0 0; color: var(--ink-2); font-size: 16px; max-width: 30ch; }
.tiles { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
@media (min-width: 560px) { .tiles { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 980px) { .tiles { grid-template-columns: repeat(6, 1fr); } }
.tiles > div { aspect-ratio: 1; max-width: 100%; border-radius: 14px; background: #fff; box-shadow: var(--card-sh); display: grid; grid-template-rows: 1fr auto; justify-items: center; padding: 14px 6px 10px; opacity: 0; transform: translateY(10px) scale(0.96); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease), box-shadow 0.3s var(--ease); transition-delay: calc(var(--d, 0) * 40ms); }
.tiles.in > div { opacity: 1; transform: none; }
.tiles.in > div:hover { box-shadow: var(--lift); transform: translateY(-2px); transition-delay: 0s; }
.tiles img { width: 30px; height: 30px; align-self: center; object-fit: contain; }
.tiles span { font-size: 11.5px; color: var(--ink-3); }
.tiles .more { background: var(--ink); box-shadow: none; }
.tiles .more b { align-self: center; font: 400 19px var(--px); color: #fff; }
.tiles .more span { color: rgba(255, 255, 255, 0.55); }

@keyframes ring { 0% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 2px rgba(255, 90, 31, 0.35); } 70%, 100% { box-shadow: 0 0 0 2px var(--accent), 0 0 0 10px rgba(255, 90, 31, 0); } }
@keyframes blur-in { from { opacity: 0; transform: translateY(8px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes bar-grow { from { transform: scaleX(0); } }

/* ---------------------------------------------------------------- rolling digits */





@keyframes rblur { 0% { filter: blur(0); } 12% { filter: blur(3px); } 65% { filter: blur(0.6px); } 100% { filter: blur(0); } }

/* ---------------------------------------------------------------- every team */
.teams { margin-top: 44px; background: var(--panel); border-radius: 18px; padding: 10px; }
.ttabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-bottom: 10px; }
.ttabs::-webkit-scrollbar { display: none; }
.ttab { position: relative; flex: none; height: 38px; padding: 0 15px; border-radius: 10px; border: 0; background: transparent; font: 500 13.5px var(--sans); color: var(--ink-2); cursor: pointer; overflow: hidden; transition: background 0.3s var(--ease), color 0.3s var(--ease), box-shadow 0.3s var(--ease); }
.ttab:hover { color: var(--ink); }
.ttab.on { background: #fff; color: var(--ink); box-shadow: var(--card-sh); }
.ttab .prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.ttab.on .prog { animation: prog var(--dur, 7s) linear forwards; }
.tpanel { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 960px) { .tpanel { grid-template-columns: 0.8fr 1.2fr; } }
.tcopy { padding: 22px 20px; align-self: center; }
.tcopy h3 { font: 400 26px/1.15 var(--display); letter-spacing: -0.025em; }
.tcopy p { margin: 10px 0 0; color: var(--ink-2); font-size: 15px; max-width: 40ch; }
.tcopy ul { list-style: none; padding: 0; margin: 22px 0 0; display: grid; gap: 11px; }
.tcopy li { display: flex; gap: 11px; align-items: baseline; font-size: 14px; }
.tcopy li::before { content: ''; width: 6px; height: 6px; background: var(--accent); flex: none; transform: translateY(-2px); }
.tcopy.in > *, .tcopy.in li { animation: blur-in 0.45s var(--ease) both; }
.tcopy.in p { animation-delay: 60ms; } .tcopy.in ul { animation: none; }
.tcopy.in li:nth-child(1) { animation-delay: 120ms; } .tcopy.in li:nth-child(2) { animation-delay: 180ms; } .tcopy.in li:nth-child(3) { animation-delay: 240ms; }
.tmock { min-height: 410px; display: grid; }
.tm { background: #fff; border-radius: 14px; box-shadow: var(--card-sh); overflow: hidden; }




.tl { animation: blur-in 0.5s var(--ease) both; animation-delay: calc(var(--n, 0) * 280ms + 80ms); }
.tl:has(> .av) { display: grid; grid-template-columns: 30px 1fr; gap: 10px; }
.tm .av { width: 30px; height: 30px; border-radius: 8px; font-size: 12px; }
.tm .av img { width: 30px; height: 30px; border-radius: 8px; }

















@keyframes field-flash { 0%, 35% { background: var(--accent-tint); } 100% { background: #fff; } }


























/* ---------------------------------------------------------------- one brain: the owner's question */
.bq { padding: 28px clamp(16px, 3vw, 36px) 34px; min-height: 540px; }













  
















@media (max-width: 640px) {
  .bq { min-height: 0; padding: 18px 14px 24px; }
  
    
   
}

/* ---------------------------------------------------------------- a day with Moltd */
.dayui { margin-top: 44px; display: grid; gap: 10px; grid-template-columns: 1fr; background: var(--panel); border-radius: 18px; padding: 10px; }
@media (min-width: 960px) { .dayui { grid-template-columns: 1.1fr 1fr; } }
/* time scrubber, after Bencho's (MIT): a dial seen from the front */
.dayui, .dayui * { -webkit-user-select: none; user-select: none; }
.scrub { background: #fff; border-radius: 14px; box-shadow: var(--card-sh); padding: 40px 18px 22px; display: grid; justify-items: center; align-content: center; overflow: hidden; }
.clock { display: flex; align-items: baseline; justify-content: center; gap: 10px; }
.ttime { display: inline-flex; font: 400 clamp(60px, 6.4vw, 88px)/1 var(--display); letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.tcol { display: inline-block; height: 1.5em; margin: -0.25em 0; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask-image: linear-gradient(transparent, #000 30%, #000 70%, transparent); }
.tens { display: inline-block; overflow: hidden; max-width: 0.75em; transition: max-width 0.3s var(--ease), opacity 0.25s var(--ease); }
.tens.off { max-width: 0; opacity: 0; }
.tstrip { display: flex; flex-direction: column; transition: transform 220ms cubic-bezier(0.3, 1.15, 0.4, 1); }
.tstrip > span { height: 1.5em; line-height: 1.5em; text-align: center; }
.tstrip[data-flip="a"] { animation: tblur-a 260ms ease-out; }
.tstrip[data-flip="b"] { animation: tblur-b 260ms ease-out; }
@keyframes tblur-a { from { filter: blur(2px); } to { filter: blur(0); } }
@keyframes tblur-b { from { filter: blur(2px); } to { filter: blur(0); } }
.tcolon { padding: 0 0.02em; }
.tmer { font: 500 17px var(--sans); color: var(--ink-3); }
.ruler { position: relative; width: 100%; height: 62px; margin-top: 26px; cursor: grab; touch-action: pan-y; outline: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); }
.ruler.grab { cursor: grabbing; }
.ruler:focus-visible { box-shadow: inset 0 0 0 2px var(--blue-tint); border-radius: 10px; }
.ruler .track { position: absolute; left: 50%; top: 0; bottom: 0; }
.ttick { position: absolute; left: -1px; top: 12px; width: 2px; height: 10px; border-radius: 1px; background: var(--ink); transform-origin: 50% 0; }
.ttick[data-kind="quarter"] { height: 17px; }
.ttick[data-kind="hour"] { height: 25px; }
.thour { position: absolute; left: 0; top: 42px; font: 500 11px var(--sans); white-space: nowrap; color: var(--ink-3); }
.tev { position: absolute; left: -3.5px; top: 2px; width: 7px; height: 7px; border-radius: 2px; background: var(--ink-4); }
.tev.on { background: var(--accent); }
.ruler .needle { position: absolute; left: 50%; top: 6px; width: 3px; height: 32px; margin-left: -1.5px; border-radius: 2px; background: #e5484d; pointer-events: none; }
.ghand { position: absolute; left: 0; top: 0; pointer-events: none; opacity: 0; transition: opacity 0.2s var(--ease), transform 0.38s var(--ease); filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)); }
.ghand.on { opacity: 1; }
.ghand.press svg { transform: scale(0.9); }
.ghand svg { transition: transform 0.12s var(--ease); }
.scrub .hint { margin-top: 10px; font: 400 10.5px var(--px); text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-4); }
.dayev { position: relative; background: #fff; border-radius: 14px; box-shadow: var(--card-sh); padding: 28px; display: grid; align-items: center; min-height: 260px; overflow: hidden; }
.dayev > .ev { grid-area: 1 / 1; }
.ev { width: 100%; animation: ev-in 0.32s var(--ease) both; }
.ev.leave { animation: ev-out 0.24s var(--ease) both; }
@keyframes ev-in { from { opacity: 0; transform: translateY(6px); filter: blur(3px); } }
@keyframes ev-out { to { opacity: 0; transform: translateY(-6px); filter: blur(3px); } }
.ev-top { display: flex; align-items: center; gap: 10px; }
.ev-ic { width: 36px; height: 36px; border-radius: 10px; background: #f3f2ee; display: grid; place-items: center; flex: none; }
.ev-ic img { width: 18px; height: 18px; border-radius: 4px; }
.kind { height: 24px; display: inline-flex; align-items: center; padding: 0 10px; border-radius: 99px; font-size: 12px; font-weight: 500; }
.kind.own { background: #f1f0ec; color: var(--ink-2); }
.kind.sched { background: var(--blue-tint); color: var(--blue); }
.kind.ask { background: var(--accent-tint); color: #b9420f; }
.ev-top time { margin-left: auto; font: 400 12px var(--px); color: var(--ink-3); }
.ev h3 { margin-top: 20px; font: 400 clamp(22px, 2.2vw, 28px)/1.15 var(--display); letter-spacing: -0.025em; }
.ev p { margin: 10px 0 0; color: var(--ink-2); font-size: 15px; max-width: 44ch; }

/* ---------------------------------------------------------------- feature rows (Catalyst-style prompt + steps) */
.features { display: grid; gap: 14px; margin-top: 44px; }
.feature { display: grid; grid-template-columns: 1fr; background: var(--panel); border-radius: 16px; overflow: hidden; }
@media (min-width: 980px) { .feature { grid-template-columns: 0.38fr 1fr; min-height: 520px; } .feature.flip { grid-template-columns: 1fr 0.38fr; } .feature.flip .copy { order: 2; } }
.feature .copy { padding: 32px 30px 8px; align-self: center; }
@media (min-width: 980px) { .feature .copy { padding: 48px; } }
.feature .copy .n { font: 400 12px var(--px); color: var(--ink-3); }
.feature .copy h3 { font: 400 28px/1.1 var(--display); letter-spacing: -0.025em; margin-top: 10px; }
.feature .copy p { margin: 10px 0 0; font-size: 15px; color: var(--ink-2); max-width: 34ch; }
.feature .art { position: relative; overflow: hidden; padding: 32px 26px 0; min-height: 440px; }
@media (min-width: 980px) { .feature .art { padding: 44px 40px 0; } }
.feature .art .art-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s var(--ease); }
.feature .art .art-img.on { opacity: 1; }
.feature .art .window { position: relative; min-height: 400px; }
.feature .screen { padding: 34px 34px 40px; min-height: 362px; }
@media (max-width: 720px) {
  .feature .art { min-height: 0; padding: 22px 12px 0; }
  .feature .art .window { min-height: 0; }
  .feature .screen { padding: 18px 14px 22px; min-height: 0; }
  .feature .copy { padding: 26px 22px 18px; }
  .plan li { font-size: 14.5px; gap: 12px; }
  
}


.plan { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 0; }
/* a step doesn't exist until it runs: it opens into place, fades in, then does its work */
.plan li { position: relative; display: flex; align-items: center; gap: 14px; max-height: 0; min-height: 0; overflow: visible; font-size: clamp(15px, 1.5vw, 18px); color: var(--ink-2); letter-spacing: -0.01em; opacity: 0; transform: translateY(6px); filter: blur(3px); transition: max-height 0.4s var(--ease), opacity 0.35s var(--ease), transform 0.35s var(--ease), filter 0.35s var(--ease), color 0.3s; }
.plan li.on { max-height: 64px; min-height: 40px; opacity: 1; transform: none; filter: none; }
.plan li.done { color: var(--ink); }
.plan li .ic { position: relative; width: 22px; height: 22px; display: grid; place-items: center; flex: none; color: var(--ink-2); }
.plan li .ic svg { width: 19px; height: 19px; }
.plan li .ic img { width: 20px; height: 20px; border-radius: 6px; }
.plan li .ic .spin { width: 17px; height: 17px; border-width: 1.8px; }
.plan li + li .ic::before { content: ''; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 18px; background: repeating-linear-gradient(to bottom, var(--ink-4) 0 2px, transparent 2px 4px); }
.plan li .tag { margin-left: auto; opacity: 0; transform: scale(0.9); transition: opacity 0.3s var(--ease), transform 0.3s var(--ease); }
.plan li.done .tag { opacity: 1; transform: none; }








.site { position: relative; height: 230px; display: grid; grid-template-columns: 130px 1fr; font-size: 12px; margin-top: 16px; border-radius: 10px; overflow: hidden; box-shadow: var(--hair); }
.site aside { border-right: 1px solid var(--line-2); padding: 12px 8px; display: grid; align-content: start; gap: 2px; background: #fbfaf8; }
.site aside div { padding: 6px 8px; border-radius: 7px; color: var(--ink-2); }

.site main { padding: 16px; display: grid; align-content: start; gap: 9px; }

.tip { position: absolute; left: 138px; top: 74px; width: 240px; background: var(--ink); color: #fff; border-radius: 11px; padding: 11px 13px; font-size: 12.5px; line-height: 1.45; box-shadow: 0 16px 34px -12px rgba(0, 0, 0, 0.45); opacity: 0; transform: translateX(-8px) scale(0.97); transform-origin: left center; transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.tip.on { opacity: 1; transform: none; }
@media (max-width: 560px) {
  .site { grid-template-columns: 104px 1fr; height: 250px; }
  .tip { left: 16px; right: 16px; top: auto; bottom: 14px; width: auto; transform: translateY(8px) scale(0.98); transform-origin: center bottom; }
  .tip::before { left: 34px; top: -5px; }
}
.tip::before { content: ''; position: absolute; left: -5px; top: 15px; width: 10px; height: 10px; background: var(--ink); transform: rotate(45deg); border-radius: 2px; }


/* ---------------------------------------------------------------- customer stories */
.stories { margin-top: 44px; display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 980px) { .stories { grid-template-columns: 1.5fr 1fr; } }
.quote-stage { position: relative; background: var(--panel); border-radius: 18px; padding: clamp(26px, 4vw, 52px); min-height: 440px; display: flex; flex-direction: column; overflow: hidden; }
.quote-stage .qlogo { height: 48px; display: flex; align-items: center; }
.quote-stage .qlogo span { display: inline-grid; place-items: center; height: 48px; min-width: 48px; padding: 0 12px; border-radius: 12px; background: var(--ink); }
.quote-stage .qlogo img { max-height: 30px; max-width: 150px; width: auto; }
.quote-stage .qlogo img.wide { max-height: 17px; }
.quote-stage blockquote { margin: 34px 0 0; font: 400 clamp(24px, 2.6vw, 36px)/1.22 var(--display); letter-spacing: -0.025em; text-wrap: pretty; }
.quote-stage blockquote .w { display: inline-block; opacity: 0; transform: translateY(10px); filter: blur(6px); animation: word-in 0.55s var(--ease) forwards; }
@keyframes word-in { to { opacity: 1; transform: none; filter: none; } }
.quote-stage .attrib { margin-top: auto; padding-top: 30px; display: flex; gap: 12px; align-items: center; }
.quote-stage .attrib .ava { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font: 400 15px var(--px); color: #fff; }
.quote-stage .attrib b { display: block; font-weight: 500; }
.quote-stage .attrib small { color: var(--ink-3); font-size: 13px; }
.quote-stage .badge2 { margin-left: auto; font: 400 11px var(--px); letter-spacing: 0.04em; text-transform: uppercase; color: #c4440f; background: var(--accent-tint); padding: 6px 9px; border-radius: 7px; }
.picker { display: grid; gap: 10px; align-content: start; }
.pick { position: relative; display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 14px; background: var(--panel); border: 0; text-align: left; cursor: pointer; overflow: hidden; transition: background 0.3s var(--ease); }
.pick:hover { background: #ecebe6; }
.pick .pl { flex: none; height: 44px; width: 44px; border-radius: 11px; background: var(--ink); display: grid; place-items: center; }
.pick .pl img { max-height: 26px; max-width: 32px; width: auto; }
.pick b { display: block; font-weight: 500; font-size: 14.5px; }
.pick small { color: var(--ink-3); font-size: 12.5px; }
.pick .prog { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
.pick.on { background: #fff; box-shadow: var(--card-sh); }
.pick.on .prog { animation: prog var(--dur, 8s) linear forwards; }
@keyframes prog { to { transform: scaleX(1); } }
.pick-note { padding: 18px; border-radius: 14px; border: 1px dashed var(--line); font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.pick-note .pls { display: flex; gap: 6px; margin-bottom: 10px; }
.pick-note .pls span { height: 34px; padding: 0 10px; border-radius: 9px; background: var(--ink); display: grid; place-items: center; }
.pick-note .pls img { max-height: 20px; max-width: 120px; }
.pick-note .pls img.wide { max-height: 12px; }

/* ---------------------------------------------------------------- SOP library */
.lib .screen { padding: 14px; }

.search { flex: 1; height: 36px; border-radius: 10px; background: #f7f6f2; box-shadow: var(--hair); display: flex; align-items: center; gap: 8px; padding: 0 11px; color: var(--ink-3); font-size: 13px; }


.sops { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .sops { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .sops { grid-template-columns: repeat(3, 1fr); } }

















/* ---------------------------------------------------------------- the coop: one real fix, found overnight */
.shift { margin-top: 44px; display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .shift { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .shift { grid-template-columns: repeat(4, 1fr); } }
.sstep { position: relative; background: var(--panel); border-radius: 16px; padding: 18px; display: flex; flex-direction: column; opacity: 0.42; transition: opacity 0.5s var(--ease), background 0.5s var(--ease); }
.sstep.on { opacity: 1; }
.sh2 { display: flex; gap: 9px; align-items: center; }
.sh2 .num { width: 22px; height: 22px; border-radius: 6px; background: #fff; box-shadow: var(--card-sh); display: grid; place-items: center; font: 400 11px var(--px); flex: none; transition: background 0.4s var(--ease), color 0.4s var(--ease); }
.sstep.on .num { background: var(--ink); color: #fff; box-shadow: none; }
.sh2 b { font-weight: 500; font-size: 14.5px; }
.sh2 time { margin-left: auto; font: 400 11px var(--px); color: var(--ink-3); }
.sstep p { margin: 10px 0 14px; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }


 








.replay { margin-top: auto; display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; background: #fff; border-radius: 12px; box-shadow: var(--card-sh); padding: 10px; }
.replay i { aspect-ratio: 1; border-radius: 2px; background: #ecebe6; transition: background 0.25s var(--ease), transform 0.25s var(--ease); }
.replay i.g { background: var(--green); }
.replay i.s { background: #bdbcb7; }



 
.approve { margin-top: auto; display: flex; gap: 6px; }
.approve .btn { height: 32px; font-size: 13px; }
.after { margin-top: 8px; background: #fff; border-radius: 12px; box-shadow: var(--card-sh); padding: 11px 12px; display: grid; gap: 4px; opacity: 0; transform: translateY(6px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.after span { font-size: 12px; color: var(--ink-3); }
.after b { font: 400 26px/1 var(--display); letter-spacing: -0.03em; }
.after em { font-style: normal; color: var(--green); }
.sstep.done .after { opacity: 1; transform: none; }
.sstep.done .approve .btn.dark { background: var(--green); box-shadow: none; }

.ask-ai { margin-top: 10px; background: var(--panel); border-radius: 16px; padding: 26px; display: grid; gap: 26px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 960px) { .ask-ai { grid-template-columns: 1fr 1.1fr; padding: 36px; } }
.aa-copy h3 { font: 400 26px/1.15 var(--display); letter-spacing: -0.025em; }
.aa-copy p { margin: 10px 0 0; color: var(--ink-2); font-size: 15px; max-width: 42ch; }
.logos-row { display: flex; gap: 8px; margin-top: 18px; flex-wrap: wrap; }
.logos-row span { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 10px; background: #fff; box-shadow: var(--card-sh); font-size: 13px; }
.logos-row img { width: 15px; height: 15px; }
.prompt { background: #fff; border-radius: 14px; box-shadow: var(--card-sh); padding: 14px; font-size: 14px; }
.prompt .q { color: var(--ink); min-height: 44px; background: #f3f2ee; border-radius: 10px; padding: 11px 13px; }
.prompt .a { margin-top: 0; padding: 0 4px; max-height: 0; overflow: hidden; transition: max-height 0.6s var(--ease), margin 0.5s var(--ease); }
.prompt .a.on { max-height: 260px; margin-top: 12px; }
.prompt .ah { display: flex; gap: 7px; align-items: center; font: 400 10.5px var(--px); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px; opacity: 0; transition: opacity 0.3s var(--ease); }
.prompt .ah img { width: 15px; height: 15px; border-radius: 4px; }
.prompt .arow { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line-2); font-size: 13.5px; opacity: 0; transform: translateY(6px); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.prompt .ah + .arow { border-top: 0; }
.prompt .arow img, .prompt .arow svg { width: 16px; height: 16px; flex: none; }
.prompt .arow .tag { margin-left: auto; }
.prompt .a.on .ah, .prompt .a.on .arow { opacity: 1; transform: none; }
.prompt .a.on .arow:nth-child(3) { transition-delay: 0.12s; } .prompt .a.on .arow:nth-child(4) { transition-delay: 0.24s; }

/* ---------------------------------------------------------------- pricing, faq, footer */
.plans { display: grid; gap: 12px; margin-top: 44px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, 1fr); } }
.planc { background: var(--panel); border-radius: 16px; padding: 26px; display: grid; gap: 6px; align-content: start; }
.planc.pop { background: #0f0f10; color: #fff; position: relative; overflow: hidden; }
.planc.pop::after { content: ''; position: absolute; right: -90px; bottom: -110px; width: 300px; height: 300px; background: radial-gradient(closest-side, rgba(255, 110, 50, 0.45), transparent); filter: blur(14px); pointer-events: none; }
.planc.pop p, .planc.pop li { color: rgba(255, 255, 255, 0.7); }
.planc .price { font: 400 40px/1 var(--display); letter-spacing: -0.035em; margin-top: 14px; }
.planc .price small { font: 400 13px var(--sans); color: var(--ink-3); margin-left: 6px; letter-spacing: 0; }
.planc.pop .price small { color: rgba(255, 255, 255, 0.5); }
.planc p { margin: 0; font-size: 14px; color: var(--ink-2); }
.planc ul { list-style: none; padding: 0; margin: 14px 0 20px; display: grid; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.planc li { display: flex; gap: 9px; align-items: center; }
.planc li::before { content: ''; width: 6px; height: 6px; background: currentColor; opacity: 0.5; flex: none; }
.planc .btn { justify-self: start; position: relative; z-index: 1; }
.planc.pop .btn { background: #fff; color: var(--ink); box-shadow: none; }
.planc .badge { font: 400 11px var(--px); letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-2); }

.faq { max-width: 780px; margin: 0 auto; }
.faq .fh { display: flex; justify-content: space-between; align-items: end; gap: 16px; }
.qa { border-bottom: 1px solid var(--line); }
.qa button { width: 100%; background: none; border: 0; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 20px 0; font-size: 16.5px; text-align: left; color: var(--ink); }
.qa button .plus { font: 400 16px var(--px); color: var(--ink-3); transition: transform 0.35s var(--ease); }
.qa.open button .plus { transform: rotate(45deg); }
.qa .ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s var(--ease); }
.qa .ans > div { overflow: hidden; }
.qa.open .ans { grid-template-rows: 1fr; }
.qa .ans p { margin: 0 0 20px; color: var(--ink-2); font-size: 15px; max-width: 62ch; }

.frame.closer { margin-top: 0; display: grid; place-items: center; min-height: 460px; padding: 64px 16px; }
.closer-card { position: relative; max-width: 580px; text-align: center; padding: 36px clamp(22px, 4vw, 44px); border-radius: 20px; background: rgba(250, 250, 248, 0.9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 0 0 1px rgba(18, 18, 18, 0.06), 0 40px 80px -30px rgba(10, 20, 40, 0.5); }
.closer-card > img { width: 46px; height: 46px; border-radius: 13px; margin: 0 auto 20px; }
.closer-card p { margin: 12px auto 0; color: var(--ink-2); font-size: 16px; max-width: 40ch; }
.closer-card .cta { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 26px; }
footer.foot { margin-top: 140px; background: #0b0b0c; color: #fff; padding: 56px 0 40px; }
.foot .wrap { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 860px) { .foot .wrap { grid-template-columns: 1.2fr 2fr; } }
.foot .mark img { width: 56px; height: 56px; border-radius: 14px; }
.foot .mark p { color: rgba(255, 255, 255, 0.55); font-size: 14px; margin: 14px 0 0; max-width: 30ch; }
.foot .cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
@media (min-width: 640px) { .foot .cols { grid-template-columns: repeat(4, 1fr); } }
.foot h4 { margin: 0 0 12px; font: 400 11px var(--px); letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.42); }
.foot .cols a { display: block; font-size: 14px; color: rgba(255, 255, 255, 0.85); padding: 3px 0; transition: color 0.2s; }
.foot .cols a:hover { color: var(--accent-2); }
.foot .legal { grid-column: 1 / -1; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font: 400 11.5px var(--px); color: rgba(255, 255, 255, 0.4); border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 20px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rv, .plan li, .tip, .tiles > div, .sstep, .after, .prompt .ah, .prompt .arow { opacity: 1 !important; transform: none !important; }
  
  .plan li { max-height: none !important; min-height: 40px; filter: none !important; }
  .art-img { opacity: 1 !important; }
}
.attrib .ava img { width: 68%; height: 68%; object-fit: contain; }

/* ---------------------------------------------------------------- checkout sheet: the plan on the left, Stripe's embedded checkout on the right */
html.co-open { overflow: hidden; }
.co { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px; }
.co-scrim { position: absolute; inset: 0; background: rgba(14, 14, 16, 0.42); -webkit-backdrop-filter: blur(10px) saturate(1.1); backdrop-filter: blur(10px) saturate(1.1); opacity: 0; transition: opacity 0.35s var(--ease); }
.co.on .co-scrim { opacity: 1; }
.co-sheet { position: relative; width: min(980px, 100%); height: min(720px, calc(100dvh - 48px)); display: grid; grid-template-columns: 340px 1fr; border-radius: 22px; overflow: hidden; background: #fff; box-shadow: 0 0 0 1px rgba(18, 18, 18, 0.08), 0 50px 100px -30px rgba(10, 12, 20, 0.55); opacity: 0; transform: translateY(16px) scale(0.985); transition: opacity 0.4s var(--ease), transform 0.5s var(--ease); }
.co.on .co-sheet { opacity: 1; transform: none; }
.co-x { position: absolute; top: 14px; right: 14px; z-index: 3; width: 34px; height: 34px; border: 0; border-radius: 10px; background: rgba(18, 18, 18, 0.05); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: background 0.2s; }
.co-x:hover { background: rgba(18, 18, 18, 0.1); }
.co-x:focus-visible { outline: 2px solid rgba(18, 18, 18, 0.28); outline-offset: 2px; }
.co-sum { position: relative; display: flex; flex-direction: column; padding: 30px 30px 26px; background: var(--panel); overflow: hidden; }
.co-sum::after { content: ''; position: absolute; left: -120px; bottom: -160px; width: 360px; height: 360px; background: radial-gradient(closest-side, rgba(255, 110, 50, 0.22), transparent); pointer-events: none; }
.co-brand { display: flex; align-items: center; gap: 9px; font: 500 16px var(--display); letter-spacing: -0.02em; }
.co-brand img { width: 26px; height: 26px; border-radius: 7px; }
.co-k { margin-top: 38px; font: 400 11px var(--px); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.co-sum h3 { margin: 8px 0 0; font: 400 34px/1 var(--display); letter-spacing: -0.03em; }
.co-price { margin-top: 14px; font: 400 44px/1 var(--display); letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.co-price small { margin-left: 6px; font: 400 14px var(--sans); letter-spacing: 0; color: var(--ink-3); }
.co-sum p { margin: 14px 0 0; font-size: 14px; color: var(--ink-2); max-width: 30ch; }
.co-sum ul { list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid var(--line); display: grid; gap: 10px; }
.co-sum li { display: flex; gap: 10px; align-items: baseline; font-size: 14px; }
.co-sum li::before { content: ''; width: 6px; height: 6px; flex: none; background: var(--accent); transform: translateY(-2px); }
.co-fine { position: relative; z-index: 1; margin-top: auto; display: grid; gap: 6px; padding-top: 22px; font-size: 12.5px; color: var(--ink-3); }
.co-fine span { display: inline-flex; align-items: center; gap: 7px; }
.co-pay { position: relative; min-width: 0; overflow-y: auto; overscroll-behavior: contain; }
.co-state { display: none; }
.co[data-state="load"] .co-load, .co[data-state="sign_in"] [data-state="sign_in"], .co[data-state="subscribed"] [data-state="subscribed"], .co[data-state="away"] [data-state="away"], .co[data-state="ready"] .co-stripe { display: flex; }
.co-stripe { display: none; min-height: 100%; flex-direction: column; padding: 18px 0 8px; }
.co-load { flex-direction: column; gap: 14px; max-width: 420px; margin: 0 auto; padding: 84px 32px 32px; }
.co-load .sk { height: 44px; border-radius: 10px; background: linear-gradient(90deg, #f1f0ec 0%, #f8f7f4 40%, #f1f0ec 80%) 0 0 / 220% 100%; animation: co-shim 1.3s linear infinite; }
.co-load .sk.w60 { width: 60%; height: 22px; }
.co-load .sk.h80 { height: 92px; }
.co-load .sk.btn { height: 48px; margin-top: 8px; background-color: #ececea; }
.co-load small { text-align: center; font: 400 11px var(--px); letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-3); }
@keyframes co-shim { to { background-position: -220% 0; } }
.co-msg { flex-direction: column; align-items: center; justify-content: center; min-height: 100%; padding: 40px 36px; text-align: center; }
.co-msg .co-ic { width: 52px; height: 52px; border-radius: 15px; display: grid; place-items: center; background: var(--panel); color: var(--ink); }
.co-msg .co-ic img { width: 26px; height: 26px; }
.co-msg .co-ic.ok { background: #dcfce7; color: #15803d; }
.co-msg h4 { margin: 18px 0 0; font: 400 26px/1.15 var(--display); letter-spacing: -0.025em; }
.co-msg p { margin: 10px 0 0; max-width: 34ch; font-size: 15px; color: var(--ink-2); }
.co-msg .btn { margin-top: 24px; }
.co-alt { margin-top: 14px; font-size: 13.5px; color: var(--ink-3); text-decoration: underline; text-underline-offset: 3px; }
.co-state.co-msg, .co-load { animation: blur-in 0.4s var(--ease) both; }