/* MindFacet landing page. One page, no build step.
   Look: a calm pale page; the crystal's soft rainbow is the one loud thing (Von Restorff effect).
   The Inkling parts (.app …) copy the app's own rules from inkling/src/styles.css, so the picture matches the product. */

:root {
  --bg: #F5F3F9; --card: #FFFFFF; --ink: #14141C; --muted: #5E6072; --line: rgba(20,20,60,.09); --chip: rgba(20,20,60,.06);
  --pink: #D81B78; --night: #0B0C14;
  --rainbow: linear-gradient(125deg, #FFFFFF, #22BFE0 18%, #A9A8FF 38%, #F7A8E4 56%, #FFA58A 72%, #FFCB66 86%, #FFFFFF);
  --glass: rgba(255,255,255,.58);
  --glassSh: inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.55), inset 0 16px 22px -18px rgba(255,255,255,.95), 0 10px 30px rgba(40,50,110,.16);
  --sh: 0 1px 2px rgba(20,20,60,.04), 0 12px 40px rgba(40,40,90,.08);
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: Figtree, system-ui, sans-serif;
  --r-lg: 28px; --r-xl: 36px; --pill: 999px;
  --gut: clamp(16px, 4vw, 40px);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
em { font-style: italic; }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 6px; }
.ic { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--gut); }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: var(--pill); background: var(--ink); color: #fff; text-decoration: none; }
.skip:focus { top: 16px; }

/* Glass floats over the page: the nav, the add box, the toast. */
.glass { background: var(--glass); -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%); box-shadow: var(--glassSh); }
.rim { position: relative; }
.rim::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; background: var(--rainbow); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 2; }

/* Buttons. One dark main button per screen; pink belongs to Inkling. All are 44px or taller (Fitts's law). */
.btn, .ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 26px; border: none; border-radius: var(--pill); font: 600 16px/1 var(--sans); text-decoration: none; cursor: pointer; transition: transform .2s, filter .2s, background .2s; }
.btn { background: linear-gradient(180deg, #2A2A38, #14141C 60%); color: #fff; box-shadow: inset 0 1px 1px rgba(255,255,255,.28), 0 6px 18px rgba(20,20,60,.22); }
.btn:hover { transform: translateY(-1px); filter: brightness(1.2); }
.btn .ic { transition: transform .2s; }
.btn:hover .ic { transform: translateX(3px); }
.btn.sm { min-height: 44px; padding: 0 18px; font-size: 14px; }
.btn.pink { background: linear-gradient(180deg, #D4407F 0%, #B8155F 62%, #A01053 100%); box-shadow: inset 0 1px 1px rgba(255,255,255,.35), inset 0 -2px 5px rgba(0,0,0,.18), 0 6px 18px rgba(160,16,83,.28); }
.btn.pink:hover { filter: brightness(1.08); }
.ghost { background: var(--chip); color: var(--ink); font-weight: 500; }
.ghost:hover { background: rgba(20,20,60,.1); }
.ghost.round { width: 44px; min-height: 44px; padding: 0; flex: none; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.fine { font-size: 14px; color: var(--muted); }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.spark { width: 8px; height: 8px; border-radius: 50%; background: conic-gradient(#A9A8FF, #F7A8E4, #FFA58A, #FFCB66, #2FD3A6, #22BFE0, #A9A8FF); }

/* Nav: a glass pill that stays at the top, like the sites people know (Jakob's law). Three links only (Hick's law). */
.nav { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 40; width: min(1120px, calc(100% - 2 * var(--gut))); display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 20px; border-radius: var(--pill); }
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 19px; letter-spacing: -.01em; text-decoration: none; }
.mf-mark { width: 32px; aspect-ratio: 300 / 286; background: var(--ink); -webkit-mask: url("media/mindfacet-mark.png") center / contain no-repeat; mask: url("media/mindfacet-mark.png") center / contain no-repeat; }
.nav-links { display: flex; gap: 4px; margin: 0 auto; }
.nav-links a { padding: 10px 16px; border-radius: var(--pill); font-size: 15px; font-weight: 500; color: var(--muted); text-decoration: none; transition: color .2s, background .2s; }
.nav-links a:hover { color: var(--ink); background: var(--chip); }

/* Hero. The words sit on the calm top of the photo; the rainbow stays below them, never behind text. */
.hero { position: relative; padding-top: clamp(124px, 15vh, 176px); background: linear-gradient(180deg, var(--bg) 0, #E6E0EE 46%, #E3DDEC 82%, var(--bg) 100%); text-align: center; }
.hero-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 0 var(--gut); }
h1 { margin-top: 22px; font: 400 clamp(52px, 9.4vw, 136px)/.94 var(--serif); letter-spacing: -.025em; text-wrap: balance; }
.lede { max-width: 31em; margin-top: 26px; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: #3C3D4E; text-wrap: pretty; }
.hero .cta { justify-content: center; margin-top: 32px; }
.hero .fine { margin-top: 16px; }
.hero-media { position: relative; height: clamp(300px, 50vw, 800px); margin-top: clamp(-150px, -9vw, -24px); overflow: hidden; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 86%, transparent 100%); }
.hero-media img, .hero-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 82%; }
.hero-media video { opacity: 0; transition: opacity 1.2s; }
.hero-media video.on { opacity: 1; }

/* Statement: what the name means. */
.statement { padding-top: clamp(40px, 7vw, 96px); padding-bottom: clamp(72px, 10vw, 140px); display: flex; flex-direction: column; align-items: center; gap: 36px; text-align: center; }
.hair { width: 96px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #A9A8FF, #F7A8E4, #FFA58A, #FFCB66, #2FD3A6, #22BFE0); }
.statement p { max-width: 20em; font: 400 clamp(30px, 4.3vw, 58px)/1.12 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.statement em, h1 em, h2 em, h3 em { color: #55506E; }

.sec-head { display: flex; flex-direction: column; gap: 10px; margin-bottom: clamp(24px, 3vw, 40px); }
h2 { font: 400 clamp(40px, 6vw, 80px)/1 var(--serif); letter-spacing: -.02em; text-wrap: balance; }

/* The Inkling card: the one big thing in the section. */
.product { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4.5vw, 64px); padding-right: 0; border-radius: var(--r-xl); background: linear-gradient(150deg, #FFFFFF 30%, #F3EFFA); box-shadow: var(--sh); overflow: hidden; }
.product-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.ink-brand, .app-brand { display: flex; align-items: flex-start; gap: 8px; }
/* The cursive word is Inkling's logo only. It is a mask, so it takes the text color. */
.ink-word { display: inline-block; width: 124px; aspect-ratio: 814 / 302; margin-bottom: -8px; background: var(--ink); -webkit-mask: url("media/inkling-wordmark.png") center / contain no-repeat; mask: url("media/inkling-wordmark.png") center / contain no-repeat; }
.product h3 { font: 400 clamp(34px, 3.9vw, 54px)/1.04 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.body { color: #3C3D4E; text-wrap: pretty; }
.points { display: grid; gap: 16px; }
.points li { display: flex; gap: 14px; align-items: flex-start; }
.points .ic { width: 40px; height: 40px; padding: 10px; border-radius: 12px; background: var(--chip); }
.points b { display: block; font-weight: 600; }
.points span { display: block; font-size: 15px; color: var(--muted); }
.product .cta { margin-top: 6px; }

/* The picture of the app. Tokens and parts are the app's light theme. */
.app-stage { align-self: stretch; display: flex; align-items: center; min-width: 0; margin: clamp(-24px, -2vw, 0px) 0; }
.app { --fs-xs: 11px; --fs-sm: 12px; --fs-md: 13px; --text: #14141C; --mut: #5E6072;
  position: relative; display: flex; width: 100%; min-height: 520px; border-radius: 22px 0 0 22px; background: #F6F6FA; color: var(--text); font: 500 var(--fs-md)/1.3 var(--sans); box-shadow: 0 0 0 1px rgba(20,20,60,.07), 0 30px 80px -20px rgba(40,40,110,.28); overflow: hidden; text-align: left; }
.app-glow { position: absolute; inset: 0; opacity: .45; pointer-events: none; overflow: hidden; }
.app-glow::before { content: ""; position: absolute; inset: -12%; background: radial-gradient(circle at 100% 100%, #FFCB66, transparent 30%), conic-gradient(from 262deg at 100% 100%, transparent 0deg, #FFA58A 10deg, #F7A8E4 24deg, #FFA58A 31deg, #A9A8FF 40deg, #A9A8FF 46deg, #22BFE0 56deg, transparent 66deg, #6FA4FF 76deg, transparent 92deg); filter: blur(34px) saturate(135%); -webkit-mask: radial-gradient(ellipse farthest-corner at 100% 100%, #000 30%, rgba(0,0,0,.5) 55%, transparent 78%); mask: radial-gradient(ellipse farthest-corner at 100% 100%, #000 30%, rgba(0,0,0,.5) 55%, transparent 78%); }
.app-nav { position: relative; flex: none; width: 168px; padding: 20px 8px; display: flex; flex-direction: column; gap: 2px; }
.app-brand { padding: 0 12px 18px; gap: 5px; }
.app-brand .ink-word { width: 68px; margin-bottom: -4px; }
.side { display: flex; align-items: center; gap: 9px; min-height: 32px; padding: 0 12px; border-radius: 10px; color: var(--mut); transition: background .3s, color .3s; }
.side.on { background: var(--chip); color: var(--text); font-weight: 600; }
.side.hit { background: rgba(0,194,178,.16); color: var(--text); }
.cnt { margin-left: auto; font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.lbl { padding: 16px 12px 6px; font-size: var(--fs-xs); color: var(--mut); letter-spacing: .2px; }
.app-main { position: relative; flex: 1; min-width: 0; padding: 16px 0 0 12px; }
.box { display: flex; align-items: center; gap: 8px; height: 56px; margin-right: 20px; padding: 6px 6px 6px 18px; border-radius: 22px; }
.typed { flex: 1; min-width: 0; font-size: 15px; font-weight: 400; white-space: nowrap; overflow: hidden; }
.typed:empty::before { content: attr(data-idle); color: var(--mut); }
.typed:not(:empty)::after { content: ""; display: inline-block; width: 1.5px; height: 1.1em; margin-left: 1px; vertical-align: -3px; background: var(--pink); }
.send { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--chip); color: var(--mut); transition: background .2s, color .2s; }
.typing .send { background: linear-gradient(180deg, #D4407F 0%, #B8155F 62%, #A01053 100%); color: #fff; box-shadow: inset 0 1px 1px rgba(255,255,255,.35), 0 4px 12px rgba(0,0,0,.2); }
.filters { display: flex; gap: 6px; margin: 14px 0; overflow: hidden; }
.chip { display: inline-flex; align-items: center; min-height: 30px; padding: 0 12px; border-radius: var(--pill); background: var(--chip); font-size: var(--fs-sm); white-space: nowrap; }
.chip.on { background: var(--text); color: #F6F6FA; }
.board { columns: 3; column-gap: 14px; padding-right: 20px; }
.tile { display: block; break-inside: avoid; margin-bottom: 14px; }
.media { position: relative; display: block; border-radius: 13px; overflow: hidden; background: #E9E9F1; }
.media img { width: 100%; height: auto; max-height: 240px; object-fit: cover; }
.ttl { display: block; padding: 7px 2px 0; font-size: var(--fs-sm); }
.meta { display: block; padding: 2px 2px 0; font-size: var(--fs-xs); color: var(--mut); font-weight: 400; }
.notec { display: block; padding: 14px; border-radius: 13px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05); }
.note-text { display: block; font-size: 15px; font-weight: 400; line-height: 1.35; letter-spacing: -.01em; }
.inflag { display: none; align-items: center; gap: 6px; padding-top: 8px; font-size: var(--fs-xs); font-weight: 600; color: var(--mut); }
.filing .inflag { display: inline-flex; }
.tile.new.pop { animation: pop .45s cubic-bezier(.2,.9,.3,1.2); }
@keyframes pop { from { opacity: 0; transform: translateY(-10px) scale(.94); } }
.price { position: absolute; left: 7px; bottom: 7px; padding: 3px 8px; border-radius: var(--pill); background: rgba(255,255,255,.82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #111; font-size: var(--fs-xs); font-weight: 600; }
.play { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.26); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 1px 0 rgba(255,255,255,.75), inset 0 0 0 1px rgba(255,255,255,.4), 0 6px 18px rgba(0,0,0,.18); color: #fff; }
.toast { position: absolute; left: 50%; bottom: 18px; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: var(--pill); font-size: var(--fs-md); white-space: nowrap; opacity: 0; transform: translate(-50%, 12px); transition: opacity .35s, transform .35s; }
.filed .toast { opacity: 1; transform: translate(-50%, 0); }

/* Vault and the AI door: two smaller cards, grouped under Inkling (law of proximity). */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 24px); margin-top: clamp(14px, 2vw, 24px); }
.card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 520px; border-radius: var(--r-lg); overflow: hidden; background: var(--card); box-shadow: var(--sh); }
.card-copy { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(24px, 3vw, 40px); }
.card h3 { font: 400 clamp(32px, 3.4vw, 46px)/1.05 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.tag { padding: 5px 12px; border-radius: var(--pill); background: var(--chip); font-size: 13px; font-weight: 600; }
.vault { background: var(--night); color: #F1F1F7; }
.vault > img { position: absolute; inset: 0 0 auto; width: 100%; height: 74%; object-fit: cover; object-position: 50% 42%; transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.vault:hover > img { transform: scale(1.04); }
.vault .card-copy { padding-top: 110px; background: linear-gradient(180deg, transparent, rgba(11,12,20,.9) 38%, #0B0C14 60%); }
.vault .body { color: #C3C5D6; max-width: 26em; }
.vault .tag { background: rgba(255,255,255,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ai { justify-content: center; background: linear-gradient(160deg, #FFFFFF 40%, #EEF6FB); }
.ai::after { content: ""; position: absolute; right: -90px; top: -90px; width: 300px; height: 300px; border-radius: 50%; background: conic-gradient(#A9A8FF, #F7A8E4, #FFA58A, #FFCB66, #2FD3A6, #22BFE0, #A9A8FF); filter: blur(60px); opacity: .5; pointer-events: none; }
.copy { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 420px; margin-top: 10px; padding: 6px 6px 6px 18px; border-radius: var(--pill); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); }
.copy code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 14px ui-monospace, "SF Mono", Menlo, Consolas, monospace; }

/* Promises. */
#promises { padding-top: clamp(80px, 11vw, 160px); }
.band { position: relative; display: flex; align-items: center; min-height: clamp(320px, 38vw, 480px); border-radius: var(--r-xl); overflow: hidden; background: #EEE7E4; }
.band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 50%; }
.band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--wash, #EFE8E6) 0, transparent 58%); opacity: .8; pointer-events: none; }
.band-copy { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; max-width: 640px; padding: clamp(24px, 5vw, 72px); }
.promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 48px); padding: clamp(32px, 4vw, 56px) clamp(4px, 1vw, 16px) 0; }
.promises li { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--line); }
.num { font: 400 20px var(--serif); font-style: italic; color: var(--muted); }
.promises h3 { font: 600 20px/1.25 var(--sans); letter-spacing: -.01em; }
.promises p { color: var(--muted); text-wrap: pretty; }

/* The last thing people see (peak-end rule): one line, one button. */
.closer { --wash: #F3F0FA; min-height: clamp(380px, 44vw, 560px); margin-top: clamp(80px, 11vw, 160px); background: #F3F0FA; }
.closer > img { object-position: 78% 40%; }
.closer h2 { font-size: clamp(48px, 7.4vw, 104px); }
.closer .lede { margin-top: 0; }
.closer .btn { margin-top: 12px; }

.foot { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; padding-top: clamp(64px, 8vw, 110px); padding-bottom: 40px; }
.foot-brand p { margin-top: 10px; color: var(--muted); }
.foot-col { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.foot-col h4 { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.foot-col a { text-decoration: none; padding: 2px 0; }
.foot-col a:hover { text-decoration: underline; }
.legal { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); }

/* Parts rise in as you reach them. Without script, or with reduced motion, they are simply there. */
.js .rv { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); }
.js .rv.in { opacity: 1; transform: none; }
.hero-copy > * { animation: rise .9s cubic-bezier(.2,.7,.2,1) backwards; }
.hero-copy > :nth-child(2) { animation-delay: .08s; }
.hero-copy > :nth-child(3) { animation-delay: .16s; }
.hero-copy > :nth-child(4) { animation-delay: .24s; }
.hero-copy > :nth-child(5) { animation-delay: .32s; }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .rv { opacity: 1; transform: none; }
  .hero-media video { display: none; }
}

/* Between tablet and desktop the app picture is narrow: drop its side nav so the cards keep their size. */
@media (min-width: 961px) and (max-width: 1180px) { .app-nav { display: none; } .app-main { padding-left: 16px; } }
@media (max-width: 960px) {
  .product { grid-template-columns: 1fr; padding-right: clamp(24px, 4.5vw, 64px); padding-bottom: 0; }
  .app-stage { margin: 0 calc(-1 * clamp(24px, 4.5vw, 64px)) 0 0; }
  .app { border-radius: 22px 0 0 0; min-height: 460px; }
  .duo, .promises { grid-template-columns: 1fr; }
  .card { min-height: 460px; }
  .ai { min-height: 0; }
  .promises { gap: 8px; }
  .band { align-items: flex-start; min-height: 420px; }
  .band > img { object-position: 88% 100%; }
  .band::after { background: linear-gradient(180deg, var(--wash, #EFE8E6) 22%, transparent 62%); opacity: .92; }
  .closer > img { object-position: 70% 100%; top: auto; height: 64%; -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%); mask-image: linear-gradient(180deg, transparent, #000 30%); }
  .foot { grid-template-columns: 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .nav { padding-left: 16px; }
  .nav-links { display: none; }
  .nav .btn { margin-left: auto; }
  .hero-media { height: 340px; margin-top: -30px; }
  .hero-media img, .hero-media video { object-position: 82% 90%; }
  .hero .cta { flex-direction: column; align-self: stretch; }
  .hero .cta > * { width: 100%; }
  .app-nav { display: none; }
  .app-main { padding-left: 14px; }
  .board { columns: 2; }
}