/* Second Page — the four tool cards from the "second page new" reference.
   Split from second.css only because of size; same page, same tokens. */

.tools4 {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(1.17 * var(--su));
  margin-top: calc(1.82 * var(--su));
}

.tool {
  display: flex;
  flex-direction: column;
  gap: calc(0.72 * var(--su));
  padding: calc(1.43 * var(--su));
  border: 1px solid rgba(201, 160, 99, 0.2);
  border-radius: calc(1.17 * var(--su));
  background: linear-gradient(158deg, rgba(28, 23, 18, 0.55) 0%, rgba(11, 9, 7, 0.8) 62%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  min-width: 0;
}

.tool__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(0.6 * var(--su));
}

.tool__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(1.43 * var(--su));
  font-weight: 400;
  /* Gold in the reference, not cream. */
  color: var(--gold-bright);
}

.tool__desc {
  margin: calc(0.42 * var(--su)) 0 0;
  font-size: calc(0.85 * var(--su));
  font-weight: 300;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.56);
  max-width: 24ch;
}

.tool__go {
  display: grid;
  place-items: center;
  width: calc(2.21 * var(--su));
  height: calc(2.21 * var(--su));
  min-width: 28px;
  min-height: 28px;
  flex-shrink: 0;
  border: 1px solid rgba(201, 160, 99, 0.3);
  border-radius: 50%;
  color: var(--gold);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.tool__go:hover { background: rgba(201, 160, 99, 0.1); border-color: rgba(201, 160, 99, 0.55); }
.tool__go:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.tool__go .icon { width: calc(0.98 * var(--su)); min-width: 11px; }

/* Shared inner panel */
.tool__panel {
  padding: calc(0.78 * var(--su)) calc(0.85 * var(--su));
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: calc(0.65 * var(--su));
  background: rgba(255, 255, 255, 0.028);
  min-width: 0;
}

.mkt__label {
  margin: 0;
  font-size: calc(0.72 * var(--su));
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.5);
}

/* ---- Meta Ads AI ---------------------------------------------------- */

.adchip {
  display: flex;
  align-items: center;
  gap: calc(0.46 * var(--su));
  margin: 0;
  font-size: calc(0.81 * var(--su));
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}

.fbdot {
  display: grid;
  place-items: center;
  width: calc(1.17 * var(--su));
  height: calc(1.17 * var(--su));
  min-width: 14px;
  min-height: 14px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #1877f2;
  color: #fff;
  font-style: normal;
  font-weight: 700;
  font-size: calc(0.72 * var(--su));
  line-height: 1;
}

/* Placeholder well for the generated ad still. */
.adshot {
  position: relative;
  height: calc(6.5 * var(--su));
  min-height: 68px;
  margin-top: calc(0.6 * var(--su));
  border-radius: calc(0.52 * var(--su));
  background-image: url('/gen/ad-thumb.jpg'), linear-gradient(158deg, #3a3227 0%, #191510 100%);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

.adshot__generate {
  position: absolute;
  right: calc(0.55 * var(--su));
  bottom: calc(0.55 * var(--su));
  padding: calc(0.29 * var(--su)) calc(0.72 * var(--su));
  border-radius: 999px;
  background: #f2ede3;
  color: #17130d;
  font-size: calc(0.75 * var(--su));
  font-weight: 600;
}

.adstats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(0.52 * var(--su));
}

.adstat {
  display: flex;
  flex-direction: column;
  gap: calc(0.2 * var(--su));
  padding: calc(0.65 * var(--su));
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: calc(0.52 * var(--su));
  background: rgba(255, 255, 255, 0.028);
  min-width: 0;
}

.adstat i { font-style: normal; font-size: calc(0.68 * var(--su)); color: rgba(255, 255, 255, 0.45); }
.adstat b { font-size: calc(1.12 * var(--su)); font-weight: 600; color: var(--white); white-space: nowrap; }
.adstat em {
  display: inline-flex;
  align-items: center;
  gap: calc(0.16 * var(--su));
  font-style: normal;
  font-size: calc(0.68 * var(--su));
  font-weight: 500;
}
.adstat em .icon { width: calc(0.6 * var(--su)); min-width: 7px; }
.up { color: #6fbf73; }
.down { color: #d06a5f; }
.down .icon { transform: rotate(180deg); }

/* ---- Market Insights ------------------------------------------------- */

.mkt__cap { margin: calc(0.55 * var(--su)) 0 0; font-size: calc(0.72 * var(--su)); color: rgba(255, 255, 255, 0.45); }

.mkt__row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(0.6 * var(--su));
  margin-top: calc(0.16 * var(--su));
}

.mkt__price { font-size: calc(1.24 * var(--su)); font-weight: 600; color: var(--white); white-space: nowrap; }
.mkt__line { width: calc(6 * var(--su)); height: calc(2.3 * var(--su)); flex-shrink: 0; }

.mkt__delta {
  display: inline-flex;
  align-items: center;
  gap: calc(0.26 * var(--su));
  margin: calc(0.42 * var(--su)) 0 0;
  font-size: calc(0.72 * var(--su));
  font-weight: 400;
  color: rgba(255, 255, 255, 0.5);
}
.mkt__delta em {
  display: inline-flex;
  align-items: center;
  gap: calc(0.16 * var(--su));
  font-style: normal;
  font-weight: 600;
}
.mkt__delta .icon { width: calc(0.6 * var(--su)); min-width: 7px; }

.locs { display: flex; flex-direction: column; gap: calc(0.55 * var(--su)); }

.loc {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: calc(0.46 * var(--su));
}

.loc__dot {
  width: calc(1.04 * var(--su));
  height: calc(1.04 * var(--su));
  min-width: 12px;
  min-height: 12px;
  border-radius: 50%;
}
.loc__dot--a { background: linear-gradient(150deg, #6f87a8, #33445c); }
.loc__dot--b { background: linear-gradient(150deg, #c98a5e, #6e3f27); }
.loc__dot--c { background: linear-gradient(150deg, #b8a26b, #6b5a33); }

.loc__name {
  font-size: calc(0.78 * var(--su));
  color: rgba(255, 255, 255, 0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.loc__meter {
  width: calc(3.2 * var(--su));
  height: calc(0.26 * var(--su));
  min-height: 3px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.loc__meter i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #e0bd82, #9a7947);
}

.loc__price { font-size: calc(0.78 * var(--su)); font-weight: 600; color: var(--white); }

/* ---- Motion Edit ----------------------------------------------------- */

.mba {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(0.52 * var(--su));
}

.mba__shot {
  position: relative;
  height: calc(5.3 * var(--su));
  min-height: 56px;
  border-radius: calc(0.52 * var(--su));
  background-image: url('/gen/villa-before.jpg'), linear-gradient(158deg, #2e2a24 0%, #15120e 100%);
  background-size: cover;
  background-position: center;
  overflow: hidden;
}
.mba__shot--after {
  background-image: url('/gen/villa-after.jpg'), linear-gradient(158deg, #3d3325 0%, #1a150e 100%);
  background-size: cover;
  background-position: center;
}

.mba__tag {
  position: absolute;
  top: calc(0.42 * var(--su));
  left: calc(0.42 * var(--su));
  display: inline-flex;
  align-items: center;
  gap: calc(0.2 * var(--su));
  padding: calc(0.16 * var(--su)) calc(0.5 * var(--su));
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.55);
  font-style: normal;
  font-size: calc(0.65 * var(--su));
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
}
.mba__tag--gold { color: var(--gold-bright); }
.mba__tag .icon { width: calc(0.55 * var(--su)); min-width: 6px; }

.tracks {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: calc(0.42 * var(--su));
  overflow: hidden;
}

.tracks__ruler {
  display: flex;
  align-items: center;
  gap: calc(0.4 * var(--su));
  height: calc(1 * var(--su));
  min-height: 11px;
  color: rgba(255, 255, 255, 0.85);
}
.tracks__ruler .icon { width: calc(0.6 * var(--su)); min-width: 7px; }
.tracks__ruler i {
  flex: 1;
  height: calc(0.36 * var(--su));
  background: repeating-linear-gradient(
    to right,
    rgba(255, 255, 255, 0.22) 0 1px,
    transparent 1px 12%
  );
}

/* The playhead drops from the ruler through the lanes, a fifth of the way
   in, with the reference's diamond scrubber at its head. */
.tracks__playhead {
  position: absolute;
  top: calc(1.2 * var(--su));
  bottom: calc(0.4 * var(--su));
  left: calc(38% + (100% - 38%) * 0.2);
  width: 1.5px;
  background: rgba(255, 255, 255, 0.75);
  z-index: 1;
}
.tracks__playhead::before {
  content: '';
  position: absolute;
  top: calc(-0.3 * var(--su));
  left: 50%;
  width: calc(0.42 * var(--su));
  height: calc(0.42 * var(--su));
  min-width: 5px;
  min-height: 5px;
  transform: translateX(-50%) rotate(45deg);
  background: #fff;
}

.track4 {
  display: grid;
  grid-template-columns: auto 6.4em minmax(0, 1fr);
  align-items: center;
  gap: calc(0.4 * var(--su));
}

.track4__ico {
  width: calc(0.72 * var(--su));
  height: calc(0.72 * var(--su));
  min-width: 8px;
  min-height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.28);
}

.track4__name {
  font-style: normal;
  font-size: calc(0.65 * var(--su));
  color: rgba(255, 255, 255, 0.5);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.track4__lane {
  position: relative;
  height: calc(0.85 * var(--su));
  min-height: 9px;
  border-radius: calc(0.2 * var(--su));
  background: rgba(255, 255, 255, 0.055);
  overflow: hidden;
}

.track4__bar { position: absolute; top: 0; bottom: 0; left: 0; border-radius: calc(0.2 * var(--su)); }
.track4__bar--violet { background: linear-gradient(180deg, #8a6cf0, #5b43b8); }
.track4__bar--blue { background: linear-gradient(180deg, #5d8ad9, #35569a); }
.track4__bar--blue2 { background: linear-gradient(180deg, #7aa3e8, #4a6cb0); }
.track4__bar--teal { background: linear-gradient(180deg, #46a3a0, #275f5d); }

/* ---- Video Insights -------------------------------------------------- */

.vlink {
  display: flex;
  align-items: center;
  gap: calc(0.46 * var(--su));
  margin: calc(0.5 * var(--su)) 0 0;
  font-size: calc(0.75 * var(--su));
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The flow arrow points down; the glyph set only has arrowUp. */
.vflow {
  display: grid;
  place-items: center;
  color: var(--gold);
  transform: rotate(180deg);
}
.vflow .icon { width: calc(0.85 * var(--su)); min-width: 10px; }

.vgrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: calc(0.52 * var(--su));
  flex: 1;
  min-height: 0;
}

.vpanel { display: flex; flex-direction: column; gap: calc(0.42 * var(--su)); }

.vcheck {
  display: inline-flex;
  align-items: center;
  gap: calc(0.36 * var(--su));
  font-size: calc(0.7 * var(--su));
  /* Gold labels with green ticks, exactly as the reference sets them. */
  color: var(--gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.vcheck .icon { width: calc(0.65 * var(--su)); min-width: 8px; color: #6fbf73; flex-shrink: 0; }

.vprompt {
  margin: 0;
  font-size: calc(0.7 * var(--su));
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
}

@media (prefers-reduced-motion: reduce) {
  .tool__go { transition: none; }
}

/* ---- Vision showcase ("second page new 2" reference) ----------------- */
/* Land Vision tall on the left; Interior Vision and Agent Studio stacked
   on the right. The left card is a full-bleed image card, so its copy sits
   on a scrim; the right two are panel cards with a media area. */

.vision3 {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 46fr) minmax(0, 53fr);
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: calc(1.17 * var(--su));
  margin-top: calc(1.82 * var(--su));
  height: calc(25.5 * var(--su));
  min-height: 300px;
}

.vcard {
  position: relative;
  border: 1px solid rgba(201, 160, 99, 0.2);
  border-radius: calc(1.17 * var(--su));
  background: linear-gradient(158deg, rgba(28, 23, 18, 0.55) 0%, rgba(11, 9, 7, 0.8) 62%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}

.vcard--land { grid-row: span 2; }

/* Placeholder for the before/after plate: barren land left, lit villa
   right, split at the seam the play chip sits on. */
.vcard__split {
  position: absolute;
  inset: 0;
  /* One composited plate: generated barren land on the left 40%, the villa
     photograph on the right, joined at the seam the play chip sits on. */
  background-image: url('/gen/land-plate.jpg');
  background-size: cover;
  background-position: center;
}
.vcard__split::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 40%;
  width: 1px;
  background: rgba(255, 255, 255, 0.22);
}

/* Copy on the image needs its own footing. */
.vcard--land .vcard__copy {
  position: absolute;
  top: calc(1.6 * var(--su));
  left: calc(1.6 * var(--su));
  right: 20%;
  z-index: 1;
}

.vcard__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: calc(1.85 * var(--su));
  font-weight: 400;
  color: var(--gold-bright);
}

.vcard__desc {
  margin: calc(0.55 * var(--su)) 0 0;
  font-size: calc(0.94 * var(--su));
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
}

.vcard__go {
  position: absolute;
  top: calc(1.17 * var(--su));
  right: calc(1.17 * var(--su));
  z-index: 2;
  display: grid;
  place-items: center;
  width: calc(2.21 * var(--su));
  height: calc(2.21 * var(--su));
  min-width: 28px;
  min-height: 28px;
  border: 1px solid rgba(201, 160, 99, 0.32);
  border-radius: 50%;
  color: var(--gold);
  text-decoration: none;
  cursor: pointer;
  background: rgba(10, 8, 6, 0.4);
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.vcard__go:hover { background: rgba(201, 160, 99, 0.14); border-color: rgba(201, 160, 99, 0.55); }
.vcard__go:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.vcard__go .icon { width: calc(0.98 * var(--su)); min-width: 11px; }

.vcard__play {
  position: absolute;
  top: 50%;
  left: 40%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: grid;
  place-items: center;
  width: calc(3.1 * var(--su));
  height: calc(3.1 * var(--su));
  min-width: 34px;
  min-height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--white);
}
.vcard__play .icon { width: calc(1.04 * var(--su)); min-width: 11px; }

.explore {
  display: inline-flex;
  align-items: center;
  gap: calc(0.55 * var(--su));
  height: calc(2.6 * var(--su));
  min-height: 32px;
  padding: 0 calc(1.24 * var(--su));
  border: 1px solid rgba(201, 160, 99, 0.4);
  border-radius: 999px;
  font-size: calc(0.85 * var(--su));
  font-weight: 500;
  color: var(--cream);
  text-decoration: none;
  cursor: pointer;
  background: rgba(10, 8, 6, 0.35);
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease);
}
.explore:hover { background: rgba(201, 160, 99, 0.12); border-color: rgba(201, 160, 99, 0.6); }
.explore:focus-visible { outline: 2px solid var(--gold-bright); outline-offset: 3px; }
.explore .icon { width: calc(0.91 * var(--su)); min-width: 10px; }

.vcard--land > .explore {
  position: absolute;
  left: calc(1.6 * var(--su));
  bottom: calc(1.6 * var(--su));
  z-index: 1;
}

/* Right-hand cards: copy column beside a media area. */
.vcard--interior,
.vcard--agent {
  display: grid;
  grid-template-columns: minmax(0, 42fr) minmax(0, 58fr);
  align-items: stretch;
  gap: calc(1 * var(--su));
  padding: calc(1.43 * var(--su));
}

/* Interior: the photo is the whole card, and the copy sits over it on the
   left — full-bleed, like Land Vision, rather than a photo panel beside a
   text column. */
.vcard--interior {
  display: block;
  gap: 0;
  padding: 0;
}

/* The shot fills the entire card. */
.vcard--interior .vcard__shot {
  position: absolute;
  inset: 0;
  border-radius: 0;
  border: none;
}

/* A left-to-right scrim so the copy reads against the image. The photograph
   is already dark on its left, so this only has to deepen it, fading out
   before the sofas on the right. */
.vcard--interior::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to right,
    rgba(7, 5, 4, 0.94) 0%,
    rgba(7, 5, 4, 0.72) 30%,
    rgba(7, 5, 4, 0.15) 52%,
    transparent 66%
  );
  pointer-events: none;
}

.vcard--interior .vcard__copy {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: calc(0.85 * var(--su));
  height: 100%;
  max-width: 56%;
  padding: calc(1.8 * var(--su));
  min-width: 0;
}

.vcard--interior .vcard__title { font-size: calc(1.5 * var(--su)); }

/* Agent keeps its two-column copy-beside-media layout. */
.vcard--agent .vcard__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: calc(0.2 * var(--su));
  min-width: 0;
}

.vcard--agent .vcard__title { font-size: calc(1.5 * var(--su)); }

.vcard--agent .explore { margin-top: auto; }

/* Interior photo well — placeholder until the still lands. */
.vcard__shot {
  border-radius: calc(0.72 * var(--su));
  background-image: url('/gen/interior-shot.jpg'), linear-gradient(158deg, #4a3c2a 0%, #241c12 55%, #120e09 100%);
  background-size: cover;
  background-position: center;
  border: 1px solid rgba(255, 255, 255, 0.06);
  min-height: 0;
}

/* Four presenter portraits. */
.vcard__faces {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: calc(0.55 * var(--su));
  min-height: 0;
}

.vcard__faces i {
  border-radius: calc(0.55 * var(--su));
  border: 1px solid rgba(255, 255, 255, 0.07);
  min-height: 0;
}
/* The same presenter set Agent Studio generates in the app, so the marketing
   card and the tool show the same people.

   These are full-body plates dropped into a 73x114 slot — at `cover` the
   figures render thumbnail-sized and unreadable. Scaled up and anchored near
   the top instead, so each tile frames head-and-shoulders the way the card
   was designed for. */
.vcard__faces i {
  background-repeat: no-repeat;
  background-size: 250% auto;
  background-position: 50% 4%;
}
/* Each plate frames its subject slightly differently, so the vertical anchor
   is tuned per image — the point is that the four heads sit on one line
   across the row, not that the crops share a number. */
.vcard__faces i:nth-child(1) { background-image: url('/prop%20ai/as1.png'); background-position: 50% 0%; }
.vcard__faces i:nth-child(2) { background-image: url('/prop%20ai/as2.png'); }
.vcard__faces i:nth-child(3) { background-image: url('/prop%20ai/as3.png'); }
.vcard__faces i:nth-child(4) { background-image: url('/prop%20ai/as4.png'); }

@media (prefers-reduced-motion: reduce) {
  .vcard__go, .explore { transition: none; }
}