/* Home page — hero, mosaic, editorial, bento, comparison, built-for, discover. */

/* =========================================================
   Hero
   ========================================================= */
.hero { position: relative; }
.hero-copy { position: relative; z-index: 2; }
.hero-title {
  margin: 0 auto;
  padding-top: 200px;
  max-width: 1032px;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 70px;
  line-height: 67.2px;
  letter-spacing: -2.1px;
  text-transform: uppercase;
  text-align: center;
  color: var(--title);
}
.hero-sub {
  margin: 16px auto 0;
  max-width: 600px;
}
.hero-sub span { color: var(--muted-strong); }
.hero-ctas {
  margin-top: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
}
.hero-note {
  margin-top: 40px;
  text-align: center;
  color: var(--faint);
}

/* Mosaic */
.mosaic {
  position: relative;
  margin-top: 140px;
  height: 872px;
}
.mosaic-inner {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  z-index: 1;
}
.mosaic-row {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex: none;
}
.mosaic-row img {
  width: 278px;
  height: 348px;
  object-fit: cover;
  border-radius: 12px;
  flex: none;
}
.mosaic-row--mid img { height: 347px; }
.mosaic-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: linear-gradient(rgba(20, 20, 20, 0.02) 27.7414%, rgb(0, 0, 0) 100%);
  pointer-events: none;
}
.mosaic-side {
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.48) 0px, rgba(0, 0, 0, 0) 215px, rgba(0, 0, 0, 0) calc(100% - 215px), rgba(0, 0, 0, 0.48) 100%);
  pointer-events: none;
}
/* light: the mosaic is designed to melt into a black page — fade the bottom
   and the side vignettes toward the light bg instead, so the grid dissolves
   into the page exactly as it does in dark (just inverted target color). */
[data-theme="light"] .mosaic-shade {
  background-image: linear-gradient(rgba(251, 251, 251, 0.02) 27.7414%, var(--bg) 100%);
}
[data-theme="light"] .mosaic-side {
  background-image: linear-gradient(90deg, rgba(251, 251, 251, 0.9) 0px, rgba(251, 251, 251, 0) 215px, rgba(251, 251, 251, 0) calc(100% - 215px), rgba(251, 251, 251, 0.9) 100%);
}
.mosaic-row:nth-child(3) { opacity: 0.5; }

@media (max-width: 1199.98px) {
  .hero-title { font-size: 56px; line-height: 53.76px; letter-spacing: -1.68px; max-width: 976px; }
  .mosaic { margin-top: 80px; height: 842px; }
  .mosaic-row img { width: 263px; height: 329px; }
  .mosaic-row--mid img { width: 253px; height: 316px; }
}
@media (max-width: 809.98px) {
  .hero-title { padding-top: 120px; font-size: 48px; line-height: 46.08px; letter-spacing: -1.44px; max-width: 390px; padding-left: 24px; padding-right: 24px; text-align: left; }
  .hero-sub { margin-top: 12px; max-width: 368px; padding: 0 24px; }
  .hero-ctas { margin-top: 20px; flex-direction: column; align-items: stretch; gap: 12px; padding: 0 24px; }
  .hero-note { margin-top: 40px; }
  .mosaic { margin-top: 48px; height: 416px; }
  .mosaic-inner, .mosaic-row { gap: 8px; }
  .mosaic-side { background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.45) 0px, rgba(0, 0, 0, 0) 90px, rgba(0, 0, 0, 0) calc(100% - 90px), rgba(0, 0, 0, 0.45) 100%); }
  [data-theme="light"] .mosaic-side { background-image: linear-gradient(90deg, rgba(251, 251, 251, 0.9) 0px, rgba(251, 251, 251, 0) 90px, rgba(251, 251, 251, 0) calc(100% - 90px), rgba(251, 251, 251, 0.9) 100%); }
  .mosaic-row img { width: 123px; height: 154px; border-radius: 8px; }
  .mosaic-row--mid img { width: 121px; height: 152px; }
}

/* =========================================================
   Editorial — "Hypra fills the gap"
   ========================================================= */
.editorial {
  position: relative;
  z-index: 2;
  padding: 40px 0 160px;
}
.editorial-col {
  max-width: 619px;
  margin: 0 auto;
}
.editorial-label { text-align: left; }
.editorial-text {
  margin-top: 16px;
  font-family: var(--font-book);
  font-weight: 400;
  font-size: 32px;
  line-height: 41.6px;
  letter-spacing: -0.64px;
  color: var(--title);
}
.editorial-cta { margin-top: 32px; display: inline-flex; }
/* per-character reveal (spans injected by main.js) — opacity .3 -> 1 */
.editorial-text .rv-ch { opacity: 0.3; }

@media (max-width: 1199.98px) {
  .editorial-col { max-width: 586px; }
}
@media (max-width: 809.98px) {
  .editorial { padding: 48px 0; }
  .editorial-col { max-width: 390px; padding: 0 var(--gutter); }
  .editorial-text { margin-top: 8px; font-size: 24px; line-height: 33.6px; letter-spacing: -0.2px; }
  .editorial-cta { margin-top: 8px; }
}

/* =========================================================
   Bento — "Subscribe. Download. Create."
   ========================================================= */
.bento { background: var(--bg); padding: 120px 0; overflow: hidden; }
.bento-sub { margin: 16px auto 0; max-width: 560px; }
.bento-grid {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 396px 396px;
  gap: 16px;
}
.bento-card { align-self: start; }
.card--drops { grid-column: span 5; height: 396px; background-image: linear-gradient(var(--card) 27%, var(--card-deep) 100%); display: flex; flex-direction: column; }
.card--downloads { grid-column: span 7; height: 396px; background: var(--bg); padding: 0; }
.card--search { grid-column: span 4; height: 340px; display: flex; flex-direction: column; gap: 16px; }
.card--license { grid-column: span 4; height: 340px; display: flex; flex-direction: column; gap: 16px; }
.card--plans { grid-column: span 4; height: 340px; display: flex; flex-direction: column; gap: 16px; }

/* two-tone card copy — ". Book" 20/23/-0.6 */
.card-copy p, .card-copy {
  font-family: var(--font-book);
  font-size: 20px;
  line-height: 23px;
  letter-spacing: -0.6px;
  color: var(--muted);
}
.card-copy .lead { color: var(--title); }
.only-mob { display: none; }
@media (max-width: 809.98px) {
  .desk-br { display: none; }
  .only-desk { display: none; }
  .only-mob { display: inline; }
}

/* card 1 — drops: two trios of fixed images swap places vertically every 5 s
   (opposed slide through the card's bottom edge, no fade — CSS keyframes,
   10 s loop = swap 1.4 s + hold 3.6 s, ×2). Values measured on the original. */
.card--drops .card-copy { position: relative; z-index: 2; }
.drops-media {
  position: relative;
  margin-top: 0;
  flex: 1;
}
.swap-stage {
  position: relative;
  width: 456px;
  height: 100%;
  margin: 0 auto;
}
.swap-col { position: absolute; width: 177.8px; }
.swap-col--a { left: 37px;    top: 155.3px; z-index: 3; --travel: 288px; }
.swap-col--b { left: 143.6px; top: 109px;   z-index: 2; --travel: 334.8px; --stagger: .11s; }
.swap-col--c { left: 237.2px; top: 168.8px; z-index: 1; --travel: 288px;   --stagger: .22s; }
.swap-col img {
  position: absolute;
  left: 0;
  width: 100%;
  height: 236.7px;
  object-fit: cover;
  border-radius: 16px 16px 0 0;
  will-change: transform;
  box-shadow: rgba(0, 0, 0, 0.01) 0px 0.6px 1.08px, rgba(0, 0, 0, 0.03) 0px 2.29px 4.12px, rgba(0, 0, 0, 0.14) 0px 10px 18px;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-delay: calc(3.6s + var(--stagger, 0s));
}
.swap-col--c img { height: 235.2px; }
.swap-up   { top: 0;             animation-name: swap-up; }
.swap-down { top: var(--travel); animation-name: swap-down; }

/* 14% of 10s = 1.4s swap; holds of 3.6s; 2 swaps per loop (0% and 50%) */
@keyframes swap-up {
  0%   { transform: translateY(0); animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  14%, 50% { transform: translateY(var(--travel)); }
  50%  { animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  64%, 100% { transform: translateY(0); }
}
@keyframes swap-down {
  0%   { transform: translateY(0); animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  14%, 50% { transform: translateY(calc(-1 * var(--travel))); }
  50%  { animation-timing-function: cubic-bezier(.2,.8,.2,1); }
  64%, 100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) { .swap-col img { animation: none; } }

/* card 2 — unlimited downloads (image wall + glass pill) */
.card--downloads { position: relative; }
.dl-wall {
  position: absolute;
  left: 0; top: 0;
  width: 783px;
  display: grid;
  grid-template-columns: repeat(5, 150px);
  gap: 8px;
  transform: translate(-36px, -123px);
  transform-origin: top left;
}
.dl-wall img {
  width: 150px;
  height: 206px;
  object-fit: cover;
  border-radius: 8px;
}
.dl-shade {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.61);
}
.dl-pill {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 32px;
  border-radius: 40px;
  background-color: rgba(255, 255, 255, 0.18);
  box-shadow: rgba(255, 255, 255, 0.38) 0px 2px 22px 0px inset;
  backdrop-filter: blur(20px);
  white-space: nowrap;
}
.dl-pill svg { width: 26px; height: 26px; display: block; }
.dl-pill p {
  font-family: var(--font-medium);
  font-size: 36px;
  line-height: 48.6px;
  letter-spacing: -1.08px;
  color: var(--title);
}

/* card 3 — search / filter / recolor tiles */
.tiles-viewport {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tiles-row {
  display: flex;
  gap: 12px;
  flex: none;
}
.tile {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  background-color: var(--tile);
  box-shadow: rgba(255, 255, 255, 0.18) 0px 0px 10px 0px inset;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  flex: none;
}
.tile svg { width: 36px; height: 36px; display: block; }
.tile .mini {
  position: absolute;
  top: 8px;
  right: 8px;
  font-family: var(--font-book);
  font-size: 8px;
  line-height: 8px;
  letter-spacing: -0.24px;
  color: var(--title);
}
.card--search .card-copy, .card--license .card-copy, .card--plans .card-copy { margin-top: auto; }

/* card 4 — licensing thumbs */
.license-viewport {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  overflow: hidden;
}
.license-thumb {
  width: 96px;
  height: 120px;
  border-radius: 10px;
  padding: 8px;
  background-color: rgba(143, 143, 143, 0.75);
  background-image: linear-gradient(150deg, rgb(196, 196, 196) 0%, rgb(132, 132, 132) 42%, rgb(203, 203, 203) 78%, rgb(157, 157, 157) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  overflow: hidden;
  flex: none;
}
.license-thumb svg { width: 20px; height: 20px; display: block; }

/* card 5 — plans slideshow */
.card--plans { position: relative; }
.plans-media {
  position: relative;
  flex: 1;
}
.plans-thumbs {
  position: absolute;
  left: 50%;
  top: 29px;
  width: 0;
  height: 150px;
}
.plans-thumbs img {
  position: absolute;
  object-fit: cover;
  border-radius: 8px;
  top: 15px;
  width: 88px;
  height: 120px;
}
.plans-thumbs .t-center { left: -55px; top: 0; width: 110px; height: 150px; }
.plans-thumbs .t-s1 { left: -553px; }
.plans-thumbs .t-s2 { left: -423px; }
.plans-thumbs .t-s3 { left: -293px; }
.plans-thumbs .t-s4 { left: -163px; }
.plans-thumbs .t-s5 { left: 75px; }
.plans-thumbs .t-s6 { left: 205px; }
.plans-thumbs .t-s7 { left: 335px; }
.plans-thumbs .t-s8 { left: 465px; }
.card--plans .card-copy p { max-width: 315px; }
.plans-pill {
  position: absolute;
  left: 50%;
  top: 84px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 20px;
  background-color: rgba(0, 0, 0, 0.2);
  box-shadow: rgba(255, 255, 255, 0.25) 0px 1px 11px 0px inset;
  backdrop-filter: blur(9px);
  white-space: nowrap;
}
.plans-pill p {
  font-family: var(--font-medium);
  font-size: 18px;
  line-height: 24.3px;
  letter-spacing: -0.54px;
  color: var(--title);
}

@media (max-width: 1199.98px) {
  .bento { padding: 64px 0 80px; }
  .bento-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 360px 360px 260px 308px; }
  .card--drops { grid-column: span 2; grid-row: 1; height: 360px; }
  .card--downloads { grid-column: span 2; grid-row: 2; height: 360px; }
  .card--search { grid-column: 1; grid-row: 3; height: 260px; }
  .card--license { grid-column: 2; grid-row: 3; height: 260px; }
  .card--plans { grid-column: span 2; grid-row: 4; height: 308px; }
  .swap-col { width: 181.7px; }
  .swap-col img { height: 241.9px; }
  .swap-col--c img { height: 240.3px; }
  .swap-col--a { left: 32.5px;  top: 116px; }
  .swap-col--b { left: 141.8px; top: 82.3px;  --travel: 294px; }
  .swap-col--c { left: 238.8px; top: 128.9px; }
  .dl-wall { width: 1392px; grid-template-columns: repeat(5, 273.6px); gap: 6px; transform: translate(-232px, -390px); }
  .dl-wall img { width: 273.6px; height: 375px; }
  .license-thumb { width: 80px; height: 100px; }
  .plans-thumbs { top: 13px; }
  .plans-pill { top: 68px; }
}
@media (max-width: 809.98px) {
  .bento { padding: 40px 0; }
  .bento .h-section { text-align: left; }
  .bento-sub { text-align: left; margin-left: 0; max-width: none; }
  .bento-grid { margin-top: 32px; grid-template-columns: 1fr; grid-template-rows: none; }
  .swap-stage { width: auto; margin: 0; }
  .swap-col { width: 114.7px; }
  .swap-col img { height: 152.6px; border-radius: 10px 10px 0 0; }
  .swap-col--c img { height: 151.6px; }
  .swap-col--a { left: 37.5px;  top: 113.5px; }
  .swap-col--b { left: 92.6px;  top: 71.5px;  --travel: 149px; }
  .swap-col--c { left: 138.8px; top: 126.5px; }
  .card--drops, .card--downloads, .card--search, .card--license, .card--plans { grid-column: 1; grid-row: auto; }
  .card--drops { height: 270px; }
  .card--downloads { height: 280px; }
  .card--search { height: 280px; }
  .card--license { height: 280px; }
  .card--plans { height: 320px; }
  .dl-wall { width: 376px; grid-template-columns: repeat(5, 72px); gap: 4px; transform: translate(-17px, -14px); }
  .dl-wall img { width: 72px; height: 100px; border-radius: 5px; }
  .dl-pill { padding: 10px 20px; gap: 10px; border-radius: 28px; }
  .dl-pill svg { width: 18px; height: 18px; }
  .dl-pill p { font-size: 24px; line-height: 32.4px; letter-spacing: -0.72px; }
  .plans-thumbs { top: -1px; }
  .plans-pill { top: 54px; }
}

/* =========================================================
   Upcoming — "Your New Creative Sidekicks"
   Four feature cards: Hypracolor (Available now — interactive
   before/after: draggable divider, tint dots, clickable hue-sorted
   previews), Hypramotion (Coming soon, video), Ask Arpy (Beta —
   scripted 4-message chat loop, app styles), Figma extension
   (Coming soon — canvas scene + faithful plugin panel).
   Both grid rows share the same card height (second row = first).
   ========================================================= */
.upcoming {
  background: var(--bg);
  padding: 0 0 40px;
  overflow: hidden;
  /* Arpy iridescent gradient — exact app value (BetaPill + avatar) */
  --grad-arpy: linear-gradient(90deg, #cd93ff 0%, #70e2ff 20%, #9fff5b 40%, #ffe83f 60%, #ffa647 80%, #ff75c3 100%);
}
.upcoming .h-section { max-width: 700px; margin: 0 auto; text-wrap: balance; }
.grad-word {
  background: var(--grad-arpy);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.up-sub { margin: 16px auto 0; max-width: 560px; }

.up-grid {
  margin-top: 80px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.up-card { position: relative; min-width: 0; }

/* corner tag (reuses .tag visuals, repositioned inside the card) */
.up-card .tag--corner {
  position: absolute;
  top: 16px;
  left: 16px;
  transform: none;
  padding: 6px 14px;
  border-radius: 999px;
  z-index: 6;
}
.up-card .tag--corner p {
  font-family: var(--font-book);
  font-size: 14px;
  line-height: 18px;
  letter-spacing: -0.14px;
}

/* ---- card 1: Hypracolor (interactive before/after + hue-sorted strip) ----
   Thumbnails swap the base image, dots retint the After side, the divider
   ping-pongs and is draggable (engine in main.js, [data-hc]). */
.up-card--color { grid-column: span 7; height: 396px; padding: 0; display: flex; }
.hc-ba { position: relative; width: 46%; flex-shrink: 0; overflow: hidden; }
.hc-ba img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}
.hc-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--hc-x, 58%)); }
.hc-after img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hc-line {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--hc-x, 58%);
  width: 2px;
  margin-left: -1px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 8px 0px;
  cursor: ew-resize;
  touch-action: none;
  z-index: 4;
}
.hc-line::before { /* wider invisible hit area for the drag */
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  left: -14px; right: -14px;
}
.hc-knob {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* no-JS fallback keeps the original CSS sweep; JS (.hc-js) drives --hc-x */
@media (prefers-reduced-motion: no-preference) {
  .up-card--color:not(.hc-js) .hc-after { animation: hc-sweep 7s ease-in-out infinite alternate; }
  .up-card--color:not(.hc-js) .hc-line { animation: hc-sweep-line 7s ease-in-out infinite alternate; }
}
@keyframes hc-sweep { from { clip-path: inset(0 0 0 58%); } to { clip-path: inset(0 0 0 34%); } }
@keyframes hc-sweep-line { from { left: 58%; } to { left: 34%; } }
.hc-cap {
  position: absolute;
  bottom: 12px;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(6px);
  color: var(--title);
  z-index: 3;
}
.hc-cap--before { left: 12px; }
.hc-cap--after { right: 12px; }
.hc-side {
  flex: 1;
  min-width: 0;
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.hc-side .card-copy p { max-width: 330px; }

/* ---- card 2: Hypramotion (video) ---- */
.up-card--motion { grid-column: span 5; height: 396px; padding: 0; background: #000; }
.up-card--motion video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.up-motion-shade {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0.6) 62%, rgba(0, 0, 0, 0.92) 100%);
  pointer-events: none;
}
.up-card--motion .card-copy {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 24px;
  z-index: 2;
  text-shadow: rgba(0, 0, 0, 0.55) 0px 1px 10px;
}

/* ---- card 3: Ask Arpy (scripted chat loop — script, timings and specs
   from the app's ArpyChatMockup: messages hold 1800ms, typing 1000ms,
   proposal 6500ms; series cards fade + slide-from-left 8px over 420ms,
   140ms stagger; typing dots 6px neutral-400 bounce -0.2s/-0.1s/0).
   Bubble styles unchanged (app values). ---- */
.up-card--arpy { grid-column: span 6; height: 396px; display: flex; flex-direction: column; gap: 16px; }

/* BetaPill — exact app component: iridescent gradient, "Beta" 9px bold
   uppercase (tracking reproduced from the app), black 80%, ring 1px black 10% */
.beta-pill {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  padding: 4px 6px;
  border-radius: 999px;
  background: var(--grad-arpy);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
}
.beta-pill p {
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: 9px;
  line-height: 12px;
  letter-spacing: 0.05em; /* app value (tracking-wider) — deliberate exception */
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.8);
}

/* masked chat zone: the thread anchors to the bottom and grows upward;
   protection gradients (to the card background) melt the bubbles out
   before the bottom copy and under the Beta pill — no bubble ever sits
   on top of text. Card height never changes (overflow hidden). */
.arpy-chat {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-top: 8px;
  overflow: hidden;
}
.arpy-chat::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 40px;
  background: linear-gradient(to top, rgba(28, 28, 28, 0), var(--card));
  pointer-events: none;
  z-index: 2;
}
.arpy-chat::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 30px;
  background: linear-gradient(to bottom, rgba(28, 28, 28, 0), var(--card));
  pointer-events: none;
  z-index: 2;
}
/* light: fade uses the transparent form of the light card so no dark fringe */
[data-theme="light"] .arpy-chat::before { background: linear-gradient(to top, rgba(244, 244, 244, 0), var(--card)); }
[data-theme="light"] .arpy-chat::after { background: linear-gradient(to bottom, rgba(244, 244, 244, 0), var(--card)); }
.arpy-thread {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 18px;
}
.chat-row { display: flex; align-items: flex-end; gap: 8px; }
.chat-row--user { justify-content: flex-end; }
.arpy-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex: none;
  background: var(--grad-arpy);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-inter);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
/* iMessage bubbles — app values: radius 14, tucked corner 3, padding 14/10 */
.chat-bubble {
  border-radius: 14px;
  padding: 10px 14px;
  max-width: 400px;
}
.chat-bubble p { color: #fff; }
.chat-bubble--user {
  background: #0b84ff;
  border-bottom-right-radius: 3px;
}
.chat-bubble--arpy {
  background: #2a2a2a;
  border-bottom-left-radius: 3px;
}
.chat-bubble--proposal { flex: 1; }

/* typing indicator — app spec: three 6px neutral-400 dots, bounce with
   -0.2s / -0.1s / 0 stagger */
.typing-dots { display: flex; gap: 4px; padding: 3px 0; }
.typing-dots span { width: 6px; height: 6px; border-radius: 50%; background: #a3a3a3; }
@media (prefers-reduced-motion: no-preference) {
  .typing-dots span { animation: arpy-bounce 1s infinite; }
  .typing-dots span:nth-child(1) { animation-delay: -0.2s; }
  .typing-dots span:nth-child(2) { animation-delay: -0.1s; }
}
@keyframes arpy-bounce {
  0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
  50% { transform: none; animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

/* proposed series — app spec: 3 columns gap 6px, each card 4:5 radius 6px
   holding a 2x2 mini-grid of images */
.arpy-series {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.arpy-serie {
  aspect-ratio: 4 / 5;
  border-radius: 6px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  background: rgba(0, 0, 0, 0.2);
}
.arpy-serie img {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: cover;
  display: block;
  background: #2f2f2f;
}

/* static / no-JS state: full conversation visible, typing rows hidden */
.chat-row--typing { display: none; }
/* JS-driven loop ([data-arpy] gets .arpy-js): rows show frame by frame */
.arpy-js .chat-row { display: none; }
.arpy-js .chat-row.row-on { display: flex; animation: arpy-msg-in 0.3s ease both; }
.arpy-js .row-on .arpy-serie { animation: arpy-card-in 0.42s ease both; }
.arpy-js .row-on .arpy-serie:nth-child(2) { animation-delay: 0.14s; }
.arpy-js .row-on .arpy-serie:nth-child(3) { animation-delay: 0.28s; }
@keyframes arpy-msg-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes arpy-card-in { from { opacity: 0; transform: translateX(-8px); } }

.up-card--arpy .card-copy { margin-top: auto; position: relative; z-index: 3; }
.up-card--arpy .card-copy p { max-width: 420px; }

/* ---- card 4: Figma extension. Scene = dark Figma-like canvas window
   (Figma mark + file name + Share/avatar in the title bar, vertical tool
   rail on the left), an image at rest on the canvas plus the selected
   image centered, and the Hypra extension panel docked to the right
   inside the canvas. Panel specs from figma-plugin/ui.html (~25% smaller
   here): #1E1E1E, border #333, bordered header, 3-col 4:5 grid, selected
   cell = white border + white tick, full-width pill "Insert into Figma".
   The window runs to the bottom of the card and melts into the card grey
   under .fg-fade so the copy stays readable on top of the canvas. ---- */
.up-card--figma { grid-column: span 6; height: 396px; display: flex; flex-direction: column; }
.figma-mock { position: absolute; inset: 0; }
.fg-window {
  position: absolute;
  inset: 24px 24px 0;
  border-radius: 10px;
  background: var(--card-deep);
  border: 1px solid var(--border-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.fg-bar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.fg-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tile); }
/* window title: official Figma mark (5 colored shapes) + file name */
.fg-file {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-inter);
  font-size: 11px;
  line-height: 14px;
  color: var(--muted);
  white-space: nowrap;
}
.fg-figma { height: 13px; width: auto; display: block; }
/* right side of the title bar: avatar + Share pill (Figma-style) */
.fg-actions {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
}
.fg-avatar {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, #cd93ff, #70e2ff);
}
.fg-share {
  font-family: var(--font-inter);
  font-size: 9.5px;
  line-height: 12px;
  font-weight: 500;
  color: #fff;
  background: rgb(0, 153, 255);
  border-radius: 5px;
  padding: 3px 8px;
}
/* window body: vertical tool rail + dotted canvas */
.fg-body { display: flex; flex: 1; min-height: 0; }
.fg-rail {
  flex: 0 0 34px;
  border-right: 1px solid rgba(255, 255, 255, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
}
.fg-tool {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6e7075;
}
.fg-tool svg { width: 13px; height: 13px; display: block; }
.fg-tool.is-active { background: rgb(0, 153, 255); color: #fff; }
.fg-canvas {
  position: relative;
  flex: 1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1px, transparent 1px);
  background-size: 14px 14px;
}
/* an image already imported, at rest on the canvas (no selection chrome) */
.fg-rest {
  position: absolute;
  left: 56px;
  top: 30px;
  width: 96px;
  height: 120px;
  opacity: 0.75;
}
.fg-rest img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the image just inserted on the canvas (same as the panel selection),
   centered in the work zone */
.fg-sel {
  position: absolute;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  width: 150px;
  height: 188px;
}
.fg-sel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  outline: 1.5px solid rgb(0, 153, 255);
}
.fg-sel i {
  position: absolute;
  width: 7px;
  height: 7px;
  background: #fff;
  border: 1.5px solid rgb(0, 153, 255);
}
.fg-sel i:nth-of-type(1) { top: -4px; left: -4px; }
.fg-sel i:nth-of-type(2) { top: -4px; right: -4px; }
.fg-sel i:nth-of-type(3) { bottom: -4px; left: -4px; }
.fg-sel i:nth-of-type(4) { bottom: -4px; right: -4px; }
.fg-dims {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  background: rgb(0, 153, 255);
  color: #fff;
  font-family: var(--font-inter);
  font-size: 10px;
  line-height: 14px;
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
}
/* the extension panel: docked to the right inside the canvas, straight,
   ~25% smaller than the real plugin (172px -> 129px, values scaled),
   above the fade (z-index) so it never melts */
.fg-panel {
  position: absolute;
  top: 18px;
  right: 14px;
  width: 129px;
  border-radius: 12px;
  background: #1e1e1e;
  border: 1px solid #333;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 3;
}
.fg-head {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  border-bottom: 1px solid #333;
}
.fg-hypra { height: 11px; width: auto; display: block; }
.fg-iconbtn {
  width: 17px;
  height: 17px;
  border: 1px solid #333;
  border-radius: 6px;
  color: #8e9196;
  font-size: 9px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.fg-head .fg-iconbtn:first-of-type { margin-left: auto; }
.fg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5px;
  padding: 8px 10px;
}
.fg-cell {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: 7px;
  overflow: hidden;
  background: #262626;
  border: 1.5px solid transparent;
}
.fg-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fg-cell.is-sel { border-color: #fff; }
.fg-tick {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #fff;
  color: #000;
  font-family: var(--font-inter);
  font-size: 8px;
  line-height: 12px;
  font-weight: 600;
  text-align: center;
}
.fg-foot { padding: 6px 9px 8px; border-top: 1px solid #333; }
.fg-insert {
  display: block;
  text-align: center;
  background: #fff;
  color: #000;
  border-radius: 999px;
  padding: 6px 9px;
  font-family: var(--font-inter);
  font-weight: 500;
  font-size: 9.5px;
  line-height: 12px;
}
/* grey fade (cf. .up-motion-shade): melts the lower canvas into the card
   background so the copy reads perfectly; canvas keeps running under it.
   Dosed to only eat the bottom zone where the text lives. */
.fg-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(28, 28, 28, 0) 54%, rgba(28, 28, 28, 0.55) 73%, rgba(28, 28, 28, 0.92) 85%, var(--card) 95%);
  pointer-events: none;
  z-index: 2;
}
/* light: the Figma window itself is a dark product screenshot (stays dark on
   purpose), but the fade that melts it into the card must resolve to the light
   card so the copy underneath reads on the light surface. */
[data-theme="light"] .fg-fade {
  background: linear-gradient(rgba(244, 244, 244, 0) 54%, rgba(244, 244, 244, 0.55) 73%, rgba(244, 244, 244, 0.92) 85%, var(--card) 95%);
}
.up-card--figma .card-copy { margin-top: auto; position: relative; z-index: 3; }
.up-card--figma .card-copy p { max-width: 420px; }

/* ---- tablet (rows 2 and 3 match row 1 = 340px; the tall Hypramotion
   card spans both, so every row edge still lines up) ---- */
@media (max-width: 1199.98px) {
  .up-grid { grid-template-columns: 1fr 1fr; grid-template-rows: 340px 340px 340px; }
  .up-card--color { grid-column: span 2; grid-row: 1; height: 340px; }
  .up-card--motion { grid-column: 1; grid-row: 2 / span 2; height: 696px; }
  .up-card--arpy { grid-column: 2; grid-row: 2; height: 340px; }
  .up-card--figma { grid-column: 2; grid-row: 3; height: 340px; }
  .chat-bubble { max-width: 320px; }
  .arpy-chat { padding-top: 4px; }
  /* sel stays visually centered but its center is capped so the image
     (and its handles) never reaches the docked panel on narrow tablets;
     the resting image hangs off its left (clips at the canvas edge on
     the narrowest widths, like a canvas being panned) */
  .fg-rest { left: calc(min(45%, 100% - 195px) - 127px); top: 22px; width: 64px; height: 80px; }
  .fg-sel { left: min(45%, calc(100% - 195px)); top: 16px; width: 110px; height: 138px; }
  .fg-panel { top: 12px; right: 12px; transform: scale(0.85); transform-origin: top right; }
}

/* ---- mobile (single column: heights tuned per card content) ---- */
@media (max-width: 809.98px) {
  .up-grid { margin-top: 32px; grid-template-columns: 1fr; grid-template-rows: none; }
  .up-card--color, .up-card--motion, .up-card--arpy, .up-card--figma { grid-column: 1; grid-row: auto; }
  .up-card--color { height: 560px; flex-direction: column; }
  .hc-ba { width: 100%; height: 240px; flex-shrink: 0; }
  .hc-side { padding: 20px; }
  .up-card--motion { height: 440px; }
  .up-card--arpy { height: 460px; }
  .up-card--figma { height: 420px; }
  .arpy-chat { padding-top: 24px; }
  .chat-bubble { max-width: 260px; }
  .fg-rail { display: none; }
  .fg-rest { left: calc(min(40%, 100% - 179px) - 114px); top: 12px; width: 54px; height: 68px; }
  .fg-sel { left: min(40%, calc(100% - 179px)); top: 20px; width: 104px; height: 130px; }
  .fg-panel { top: 12px; right: 10px; transform: scale(0.82); transform-origin: top right; }
}

/* =========================================================
   Comparison — "Your creative vision, without compromise."
   Two bento cards: pains (Without) vs benefits (With).
   ========================================================= */
.comparison { background: var(--bg); padding: 80px 0 120px; }
.comparison .h-section { max-width: 700px; margin: 0 auto; text-wrap: balance; }
.cmp-sub { margin: 16px auto 0; max-width: 640px; }

.cmp-cards {
  margin-top: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cmp-card {
  position: relative;
  border-radius: 16px;
  padding: 40px 32px 24px;
}
.cmp-card--without {
  background: var(--bg);
  border: 1px solid var(--border-soft);
}
.cmp-card--with {
  background: var(--card);
  border: 1px solid var(--border);
  box-shadow: rgba(255, 255, 255, 0.25) 0px 0px 40px 0px inset;
}
/* light: the white inner bloom is invisible on a light card — swap for a soft
   dark inset so the "With" card keeps its lifted, highlighted feel. */
[data-theme="light"] .cmp-card--with {
  box-shadow: rgba(0, 0, 0, 0.06) 0px 0px 40px 0px inset;
}
.cmp-list {
  display: flex;
  flex-direction: column;
}
.cmp-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 19px 0;
}
.cmp-list li + li { border-top: 1px solid var(--border-soft); }
.cmp-ico {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmp-card--without .cmp-ico { background: var(--tile); }
.cmp-card--with .cmp-ico { background: #fff; }
/* light: the "With" check chip is white-on-white — flip the chip to near-black
   and invert the (hardcoded black) check stroke to light so it reads. */
[data-theme="light"] .cmp-card--with .cmp-ico { background: var(--title); }
[data-theme="light"] .cmp-card--with .cmp-ico svg path { stroke: var(--bg); }
.cmp-list p {
  font-family: var(--font-book);
  font-size: 18px;
  line-height: 22px;
  letter-spacing: -0.36px;
}
.cmp-card--without .cmp-list p { color: var(--muted); }
.cmp-card--with .cmp-list p { color: var(--text); }

.cmp-note {
  margin: 32px auto 0;
  max-width: 740px;
  text-align: center;
  color: var(--title);
  opacity: 0.5;
}

/* Comparison appear: cards first, then rows line by line
   (delays live on the data-anim-delay attributes in index.html). */
.cmp-card { --anim-y: 28px; }
.cmp-list li { --anim-y: 10px; --anim-dur: 0.45s; }

@media (max-width: 1199.98px) {
  .comparison { padding: 64px 0; }
  .cmp-cards { margin-top: 64px; }
  .cmp-note { margin-top: 38px; }
}
@media (max-width: 809.98px) {
  .comparison { padding: 48px 0; }
  .comparison .h-section { text-align: left; margin-left: 0; max-width: none; }
  .cmp-sub { text-align: left; margin-left: 0; max-width: none; }
  .cmp-cards { margin-top: 56px; grid-template-columns: 1fr; gap: 44px; }
  .cmp-card { padding: 32px 20px 16px; }
  .cmp-list li { padding: 15px 0; }
  .cmp-note { margin-top: 20px; }
  .tag p { font-size: 16px; line-height: 21.6px; letter-spacing: -0.48px; }
}

/* =========================================================
   Built for — pinned horizontal scroll
   .bf-stage gets its height extended by JS (content + horizontal
   course); .bf-sticky pins under the nav while the vertical progress
   drives translateX of the track (engine in main.js, .bf-pin flag).
   Default (no JS / reduced motion): plain scrollable strip.
   ========================================================= */
/* overflow-x: clip (not hidden!) — clips the horizontal bleed without
   creating a scroll container, so the inner position: sticky still works */
.built-for { background: var(--bg); overflow-x: clip; }
.built-for .h-section { text-align: left; }
.bf-sticky { padding: 80px 0; }
.bf-pin .bf-sticky { position: sticky; top: 0; }
.bf-track {
  margin-top: 48px;
  display: flex;
  gap: 24px;
  /* fallback: simple scrollable carousel (no pin) */
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.bf-pin .bf-track { overflow: visible; will-change: transform; }
.bf-card {
  position: relative;
  width: 320px;
  height: 480px;
  flex: none;
  border-radius: 16px;
  background: var(--bg);
  box-shadow: var(--border) 0px 0px 0px 1px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 32px;
}
.bf-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}
.bf-card::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 144px;
  background-image: linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  z-index: 2;
}
.bf-card h3 {
  position: relative;
  z-index: 3;
  max-width: 240px;
  text-wrap: balance;
  font-family: var(--font-medium);
  font-weight: 400;
  font-size: 22px;
  line-height: 22.44px;
  letter-spacing: -0.44px;
  color: var(--title);
}
/* light: the title sits over the photo + its dark bottom gradient, so it must
   stay light in BOTH themes (theme-following --title would go dark = unreadable). */
[data-theme="light"] .bf-card h3 { color: rgba(240, 240, 240, 0.96); }
.bf-card:nth-child(3) h3 { max-width: 256px; }

@media (max-width: 809.98px) {
  .bf-sticky { padding: 40px 0; }
  /* mobile: 40px section padding alone would slide the title under the
     fixed nav (77px) — pin a bit lower so the title clears it */
  .bf-pin .bf-sticky { top: 48px; }
  .bf-track { margin-top: 40px; }
}

/* =========================================================
   Discover — CTA card
   ========================================================= */
.discover { background: var(--bg); padding: 80px 0 160px; }
.discover-card {
  position: relative;
  border-radius: 16px;
  background: var(--card);
  padding: 48px 48px 0;
  height: 365px;
  display: flex;
  gap: 10px;
  overflow: hidden;
}
.discover-glow {
  position: absolute;
  border-radius: 101px;
  filter: blur(100px);
  overflow: hidden;
  z-index: 1;
  pointer-events: none;
}
.discover-glow--a { left: 216px; top: -110px; width: 801px; height: 202px; background: #fff; opacity: 0.04; }
.discover-glow--b { left: 1093px; top: -102px; width: 189px; height: 540px; background: #fff; opacity: 0.04; }
.discover-glow--c { left: 792px; top: -110px; width: 356px; height: 202px; background: rgba(171, 171, 171, 0.67); opacity: 0.04; }
.discover-glow--d { left: 740px; top: 273px; width: 356px; height: 202px; background: rgb(120, 77, 38); opacity: 0.13; }
.discover-spectrum {
  position: absolute;
  left: 387px;
  top: -84px;
  width: 1032px;
  height: 582px;
  border-radius: 20px;
  background-image: linear-gradient(120deg, rgb(242, 255, 0) 0%, rgb(194, 10, 0) 22.1794%, rgb(0, 58, 158) 49.9331%, rgb(255, 0, 34) 74.4633%, rgb(87, 0, 0) 100%);
  filter: grayscale(1) blur(80px);
  opacity: 0.32;
  z-index: 0;
  pointer-events: none;
}
.discover-left {
  position: relative;
  z-index: 6;
  max-width: 52%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}
.discover-left h3 {
  font-family: var(--font-medium);
  font-weight: 400;
  font-size: 48px;
  line-height: 50.4px;
  letter-spacing: -1.92px;
  color: var(--disc-title);
}
.discover-left .sub { text-align: left; color: var(--title); opacity: 0.75; }
.discover-cta { margin-top: 12px; }
.discover-visual {
  position: relative;
  z-index: 2;
  margin-left: auto;
  width: 563px;
  flex: none;
  align-self: flex-end;
}
.discover-frame {
  position: relative;
  z-index: 4;
  background: var(--card);
  border-radius: 12px 12px 0 0;
  padding: 3px 3px 0;
  overflow: hidden;
}
.discover-frame img {
  width: 100%;
  height: 314px;
  object-fit: cover;
  object-position: top;
  border-radius: 9px 9px 0 0;
  display: block;
}
.discover-blur {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 157px;
  z-index: 7;
  pointer-events: none;
}
.discover-blur div { position: absolute; inset: 0; }
.discover-blur div:nth-child(1) { backdrop-filter: blur(1px);  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%); mask-image: linear-gradient(to bottom, transparent 0%, black 30%); }
.discover-blur div:nth-child(2) { backdrop-filter: blur(3px);  -webkit-mask-image: linear-gradient(to bottom, transparent 25%, black 55%); mask-image: linear-gradient(to bottom, transparent 25%, black 55%); }
.discover-blur div:nth-child(3) { backdrop-filter: blur(8px);  -webkit-mask-image: linear-gradient(to bottom, transparent 50%, black 80%); mask-image: linear-gradient(to bottom, transparent 50%, black 80%); }
.discover-blur div:nth-child(4) { backdrop-filter: blur(16px); -webkit-mask-image: linear-gradient(to bottom, transparent 70%, black 95%); mask-image: linear-gradient(to bottom, transparent 70%, black 95%); }
.discover-blur div:nth-child(5) { background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.55) 75%, rgba(0, 0, 0, 0.75) 100%); }

@media (max-width: 1199.98px) {
  .discover { padding: 80px 0 160px; }
  .discover-card {
    flex-direction: column;
    height: 784px;
    gap: 48px;
  }
  .discover-left { max-width: none; }
  .discover-visual { margin-left: 0; width: 100%; align-self: center; }
  .discover-frame img { height: 466px; }
}
@media (max-width: 809.98px) {
  .discover { padding: 32px 0; }
  .discover-card { padding: 24px 24px 0; height: 549px; gap: 40px; }
  .discover-left { gap: 20px; }
  .discover-frame img { height: 162px; }
  .discover-blur { height: 90px; }
}