/* PropAI — the light tool workspace.
   A deliberate inversion of the dark app: white paper, quiet grey type,
   and gold held back for the active tool and the money buttons. The shared
   gold is the only thing tying the two worlds together, which is exactly
   how it should be — one brand, two rooms. */

.pai {
  --ink: #17181a;
  --ink-2: #5f6368;
  --ink-3: #8b8f96;
  --line: #ebeced;
  --line-2: #f2f3f4;
  --paper: #ffffff;
  --paper-2: #fafbfb;
  --gold: #d9a441;
  --gold-2: #f0cd82;
  --gold-wash: #fdf7ec;

  display: grid;
  grid-template-columns: 226px minmax(0, 1fr);
  min-height: 100vh;
  background: var(--paper);
  font-family: var(--font-ui);
  color: var(--ink);
}

.pai .icon {
  width: 17px;
  height: auto;
  flex-shrink: 0;
}

/* ---- Sidebar ----------------------------------------------------------- */

.pside {
  display: flex;
  flex-direction: column;
  padding: 22px 14px 16px;
  border-right: 1px solid var(--line);
  background: var(--paper);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.pside__logo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 8px 22px;
}

.pside__badge {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--gold);
}
.pside__badge .icon { width: 30px; height: 30px; color: var(--gold); }

.pside__word {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.pside__word b { color: var(--gold); font-weight: 700; }

/* Four groups now instead of two, so each heading needs a clear rest above it
   to read as a divider rather than another nav row. */
.pside__group {
  margin: 18px 0 7px;
  padding: 0 10px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.pside__nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pnav {
  display: flex;
  align-items: center;
  gap: 11px;
  height: 40px;
  padding: 0 10px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms var(--ease), color 160ms var(--ease);
}

.pnav .icon { color: var(--ink-3); }
.pnav:hover { background: var(--paper-2); color: var(--ink); }

.pnav.is-active {
  background: var(--gold-wash);
  color: var(--gold);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(217, 164, 65, 0.16);
}

.pnav.is-active .icon { color: var(--gold); }

.pnav__new {
  margin-left: auto;
  padding: 2px 7px;
  border-radius: 5px;
  background: var(--gold-wash);
  font-size: 10px;
  font-weight: 600;
  color: var(--gold);
}

.pnav.is-active .pnav__new { background: rgba(217, 164, 65, 0.16); }

/* Tools without a screen yet — visibly not-yet rather than silently dead. */
.pnav.is-soon { color: var(--ink-3); }
.pnav.is-soon .icon { opacity: 0.55; }
.pnav__new--soon { background: var(--line-2); color: var(--ink-3); }

.pside__user {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 14px 8px 0;
  border-top: 1px solid var(--line);
}

.pside__av {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: var(--gold-wash);
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
}

.pside__who { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.pside__who b { font-size: 13.5px; font-weight: 500; }
.pside__who i { font-size: 11.5px; font-style: normal; color: var(--ink-3); }
.pside__user .icon { color: var(--ink-3); width: 12px; }

/* ---- Top bar and page head ---------------------------------------------- */

.pmain { padding: 0 0 60px; min-width: 0; }

.ptop {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 62px;
  padding: 0 30px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.ptop__crumb { margin: 0; font-size: 13.5px; color: var(--ink-3); }
.ptop__crumb em { font-style: normal; margin: 0 4px; }
.ptop__crumb b { font-weight: 600; color: var(--gold); }

.ptop__right { display: flex; align-items: center; gap: 12px; }

.plang {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper-2);
}

.plang b {
  padding: 5px 13px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
}

.plang .is-on { background: var(--paper); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); color: var(--ink); }

.pcredits {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
}

.pcredits i { width: 7px; height: 7px; border-radius: 50%; background: #34c759; }

.pav {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink-2);
}

.phead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 26px 30px 18px;
}

.phead__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 30px;
  font-weight: 650;
  letter-spacing: -0.022em;
  color: var(--ink);
}

.phead__title .spark { color: var(--gold); display: inline-flex; }
.phead__sub { margin: 9px 0 0; max-width: 64ch; font-size: 14px; line-height: 1.5; color: var(--ink-2); }

.pbeta {
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--paper-2);
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--ink-3);
}

/* ---- Layout ------------------------------------------------------------- */

.pgrid, .pgrid2, .ptabs, .pcard, .plats, .pmain > .pfield { margin: 0 30px 18px; }

.pgrid--rail { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
.pgrid--rail > div, .prail { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pstack { display: flex; flex-direction: column; gap: 18px; margin: 0 30px 18px; min-width: 0; }
.pstack .pcard { margin: 0; }
.pcol2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.pcol2 > .pcard { margin: 0; }

.exlist { display: flex; flex-direction: column; gap: 16px; margin-top: 14px; }
.exrow__t { margin: 0 0 8px; font-size: 12.5px; font-weight: 600; color: var(--ink-2); }
.exframe { border-radius: 10px; }
.exframe--blank {
  /* Matches the 3:2 image frames it sits beside (.frames2__c .pshot). */
  display: grid; place-items: center; aspect-ratio: 3 / 2;
  background: var(--paper-2); border: 1.5px dashed var(--line); color: var(--ink-3); font-size: 11px;
}
.exframe--blank::after { content: 'Add image'; }

/* Example frames are buttons now — they open a full-size reference. */
.exhint {
  display: flex; align-items: center; gap: 6px;
  margin: 12px 0 0; font-size: 11.5px; color: var(--ink-3);
}
.exhint .icon { width: 12px; }

.frames2__c[data-exview] {
  border: none; background: none; padding: 0; cursor: zoom-in; font: inherit;
}
.frames2__c[data-exview] .exframe {
  transition: transform 180ms var(--ease), box-shadow 180ms var(--ease);
}
.frames2__c[data-exview]:hover .exframe {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -8px rgba(24, 20, 14, 0.35);
}
.frames2__c[data-exview]:focus-visible .exframe {
  outline: 2px solid var(--gold, #c9a063); outline-offset: 2px;
}

/* Per-frame caption: what this frame actually shows. */
.excap {
  display: block; margin-top: -3px;
  font-size: 10.5px; line-height: 1.4; font-style: normal; text-decoration: none;
  color: var(--ink-3);
}

/* Row note — what the pair replaced. Tinted panel so it reads as the payoff
   line for the row rather than a third caption. */
.exrow__note {
  display: flex; gap: 8px; margin: 10px 0 0;
  padding: 10px 12px; border-radius: 9px;
  background: rgba(201, 160, 99, 0.08);
  border: 1px solid rgba(201, 160, 99, 0.18);
  font-size: 11.5px; line-height: 1.5; color: var(--ink-3);
}
.exrow__note .icon { width: 12px; flex-shrink: 0; margin-top: 3px; color: var(--gold, #c9a063); }
.exrow__note span { color: var(--ink-2); }

/* Lead-in: the one thing Open Canvas does that nothing else does. */
.prail .pcard__s b { color: var(--ink); font-weight: 600; }

/* ---- Full-size example viewer ---- */
.exlight {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 30px;
}
.exlight[hidden] { display: none; }
.exlight__scrim { position: absolute; inset: 0; background: rgba(18, 15, 11, 0.62); backdrop-filter: blur(4px); }
.exlight__box {
  position: relative; z-index: 1; margin: 0;
  max-width: min(900px, 100%); max-height: 100%;
  display: flex; flex-direction: column; gap: 12px;
  animation: exlightIn 180ms var(--ease) both;
}
@keyframes exlightIn {
  from { opacity: 0; transform: scale(0.97); }
  to { opacity: 1; transform: none; }
}
.exlight__img {
  display: block; max-width: 100%; max-height: calc(100vh - 140px);
  object-fit: contain; border-radius: 12px;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6);
}
.exlight__cap { text-align: center; font-size: 12.5px; color: #f3ece1; }
.exlight__x {
  position: absolute; top: -12px; right: -12px; z-index: 2;
  display: grid; place-items: center; width: 34px; height: 34px;
  border: none; border-radius: 50%; cursor: pointer;
  background: #fff; color: #1b1712;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.5);
}
.exlight__x .icon { width: 15px; }
.pgrid--rail .pcard, .prail .pcard { margin: 0; }

.pgrid2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.pgrid2 .pcard { margin: 0; }

.pcard {
  padding: 24px 26px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.03), 0 4px 16px -8px rgba(16, 24, 40, 0.05);
}

.pcard--tint { background: var(--paper-2); box-shadow: none; }
.pcard__t { display: flex; align-items: baseline; gap: 8px; margin: 0; font-size: 17.5px; font-weight: 600; letter-spacing: -0.011em; }
.pcard__hint { font-size: 13px; font-weight: 400; font-style: normal; color: var(--ink-3); }
.pcard__s { margin: 7px 0 18px; font-size: 13.5px; line-height: 1.55; color: var(--ink-2); }
.prow { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.plink { font-size: 13.5px; color: var(--gold); cursor: pointer; }

/* ---- Tabs, steps, chips --------------------------------------------------- */

.ptabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line); }
.ptab {
  padding: 12px 22px;
  border-bottom: 2px solid transparent;
  font-size: 14.5px;
  color: var(--ink-2);
  cursor: pointer;
  margin-bottom: -1px;
}
.ptab.is-on { border-bottom-color: var(--gold); color: var(--ink); font-weight: 500; }

/* Tab panels — only the active one shows; when shown it stacks its cards with
   the same rhythm as the rail column. */
.ptabpanel { display: none; }
.ptabpanel.is-shown { display: flex; flex-direction: column; gap: 18px; }

/* Inline "Sample" badge on the demo heading, and the help note on the create
   tab that points people to the sample. */
.psample-tag {
  display: inline-flex; align-items: center; vertical-align: middle;
  margin-left: 10px; padding: 3px 10px; border-radius: 999px;
  background: var(--gold-wash); color: var(--gold);
  font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
}
.pnote {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 18px; padding: 12px 15px; border-radius: 11px;
  background: var(--gold-wash); color: var(--ink-2); font-size: 13px; line-height: 1.5;
}
.pnote b { color: var(--ink); font-weight: 600; }
.pnote .icon { width: 15px; color: var(--gold); flex-shrink: 0; }

/* Empty-state line for the Room Order card before any rooms are uploaded. */
.porder-empty {
  margin: 4px 0 0; padding: 20px; border: 1px dashed var(--line);
  border-radius: 11px; text-align: center;
  font-size: 13px; color: var(--ink-3);
}

/* Sample rooms grid sits above the demo flow with a little breathing room. */
.rooms4--sample { margin: 16px 0 4px; }

/* Create-tab room uploader: a stack of room cards, each a labelled bucket that
   holds any number of photos, plus an "Add Room" button (capped in JS). */
.rooms { display: flex; flex-direction: column; gap: 9px; margin-top: 4px; }

.room2 {
  position: relative;
  border: 1px solid var(--line); border-radius: 13px; background: var(--paper);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.room2:hover { border-color: #dcdee0; box-shadow: 0 5px 18px rgba(16, 24, 40, 0.07); }
.room2.is-drag { border-color: var(--gold); background: var(--gold-wash); }

.room2__head { display: flex; align-items: center; gap: 11px; padding: 11px 13px; }
.room2__ico {
  display: grid; place-items: center; width: 32px; height: 32px; flex: none;
  border-radius: 9px; background: var(--line-2); color: var(--ink-3);
}
.room2__ico .icon { width: 17px; }
.room2:hover .room2__ico { background: #eef4fb; color: #6a7a8c; }
.room2__type {
  appearance: none; -webkit-appearance: none;
  padding: 6px 28px 6px 11px; border: 1px solid var(--line); border-radius: 9px;
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23888' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 11px center;
  font-size: 13.5px; font-weight: 500; color: var(--ink); cursor: pointer;
}
.room2__count {
  font-size: 11.5px; font-weight: 600; color: var(--ink-2);
  padding: 3px 10px; border-radius: 20px; background: var(--line-2);
}
.room2__rm {
  margin-left: auto; display: grid; place-items: center; width: 30px; height: 30px;
  border: none; border-radius: 8px; background: transparent; color: var(--ink-3); cursor: pointer;
  transition: background-color 0.16s var(--ease), color 0.16s var(--ease);
}
.room2__rm:hover { background: #fbeaea; color: #c2413a; }
.room2__rm:disabled { opacity: 0.3; cursor: not-allowed; }
.room2__rm .icon { width: 15px; }

.room2__photos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 9px; padding: 0 12px 12px;
}
/* 16:9 like the room stills (owner sweep 2026-07-25 — frames fit the
   image; squares cropped nearly half of each photo). */
.room2__thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; }
.room2__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.room2__thumbrm {
  position: absolute; top: 5px; right: 5px; display: grid; place-items: center;
  width: 22px; height: 22px; border: none; border-radius: 50%;
  background: rgba(20, 20, 20, 0.62); color: #fff; cursor: pointer;
}
.room2__thumbrm .icon { width: 12px; }

.room2__add {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; aspect-ratio: 16 / 9; border: 1.5px dashed #d7dade; border-radius: 10px;
  background: var(--paper-2);
  color: var(--ink-3); font-size: 12px; font-weight: 500; cursor: pointer; text-align: center;
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease), background-color 0.16s var(--ease);
}
.room2__add:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-wash); }
.room2__add .icon { width: 18px; }
.room2__add[hidden] { display: none; }

.phototally {
  display: inline-block; margin-left: 8px; vertical-align: middle;
  padding: 3px 10px; border-radius: 20px; background: var(--line-2);
  font-size: 11.5px; font-weight: 600; color: var(--ink-2);
}
.phototally.is-full { background: var(--gold-wash); color: var(--gold); }

.room2__addroom {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  align-self: flex-start; padding: 11px 18px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
  color: var(--ink); font-size: 13.5px; font-weight: 500; cursor: pointer;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
.room2__addroom:hover { border-color: var(--gold); color: var(--gold); box-shadow: 0 4px 12px rgba(16, 24, 40, 0.08); }
.room2__addroom .icon { width: 16px; }
.room2__addroom[hidden] { display: none; }

/* Sample tab — pre-filled demo columns (non-interactive teaching example) */
.rooms--demo { margin-top: 14px; }
/* Nothing in the worked example answers the pointer — no hover lift, no
   drop highlight. It is a picture of a finished step. */
.room2--demo { cursor: default; }
.room2--demo:hover { border-color: var(--line); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04); }
.room2--demo:hover .room2__ico { background: #eef4fb; color: #6a7a8c; }
.room2__name {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px; border: 1px solid var(--line); border-radius: 9px; background: #fff;
  font-size: 13.5px; font-weight: 500; color: var(--ink);
}
.room2__name .icon { width: 11px; color: var(--ink-3); }
.room2__ico--on { background: #eef4fb; color: #6a7a8c; }
.room2__count--on {
  display: inline-flex; align-items: center; gap: 4px;
  color: #2f9e6f; background: #eaf7f0;
}
.room2__count--on .icon { width: 11px; }
/* The demo column is a picture of a finished step, so nothing in it should
   read as operable: no add tile, and the room name is a plain label. */
.room2__name--demo { background: var(--paper-2); color: var(--ink-2); }

.order__n {
  margin-left: 4px; padding: 1px 7px; border-radius: 999px;
  background: var(--gold-wash); color: var(--gold); font-size: 11px; font-style: normal;
}

.pstep { display: flex; align-items: flex-start; gap: 11px; margin: 0 0 14px; }
.pstep b {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--line-2);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
}
.pstep.is-on b, .psteps4 .pstep:first-child b, .pstep--rail b {
  background: linear-gradient(150deg, var(--gold-2), var(--gold));
  color: #fff;
  box-shadow: 0 4px 10px -3px rgba(217, 164, 65, 0.5);
}
.pstep span { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pstep i { font-size: 14px; font-style: normal; font-weight: 500; color: var(--ink); }
.pstep em { font-size: 12.5px; font-style: normal; line-height: 1.55; color: var(--ink-2); }
.plight { color: var(--ink-3) !important; font-weight: 400 !important; }

.psteps4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.psteps4 .pstep { margin: 0; }
.psteps4 .pstep:first-child { border-bottom: 2px solid var(--gold); padding-bottom: 14px; margin-bottom: -14px; }

.pchip {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.pchip .icon { color: var(--ink-3); }
.pchip:hover { border-color: #dcdddf; }
.pchip.is-on { border-color: var(--gold); background: var(--gold-wash); }
.pchip.is-on .icon { color: var(--gold); }
.pchip b { font-weight: 500; }
.pchip i { width: 100%; font-size: 11.5px; font-style: normal; color: var(--ink-3); }

.pchoice2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pchoice2--wide .pchip { flex-direction: column; align-items: flex-start; gap: 5px; }
.pchoice4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pchoice5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }

/* ---- Fields --------------------------------------------------------------- */

.pfields2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.pfield { display: flex; flex-direction: column; min-width: 0; }
.pfield label {
  margin-bottom: 9px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pfield label i { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 400; }
.pfield__hint { margin: 8px 0 10px; font-size: 12.5px; font-style: normal; color: var(--ink-2); }
/* Spans the taller left column on Interior Vision so its dropzone lines up
   with the stacked selects beside it. */
.pfield--tall { grid-row: span 2; }

.pselect {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
}
.pselect .icon:last-child { margin-left: auto; color: var(--ink-3); width: 12px; }

.pselect2 {
  appearance: none; -webkit-appearance: none;
  height: 46px; padding: 0 38px 0 14px;
  border: 1px solid var(--line); border-radius: 10px;
  background: #fff
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23888' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    no-repeat right 14px center;
  font-size: 14px; color: var(--ink); cursor: pointer;
}
.pselect2:focus { outline: none; border-color: var(--gold); }

.ptextarea {
  display: block;
  position: relative;
  min-height: 92px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper-2);
  font-size: 13.5px;
  color: var(--ink-3);
}
.ptextarea b { position: absolute; right: 12px; bottom: 10px; font-size: 11.5px; font-weight: 400; }

/* Label, then its "(max N characters)" qualifier glued right after it, with
   the live counter pushed to the far edge. `space-between` alone stranded
   the qualifier in the middle of the row, reading as a layout fault. */
.pfield__lblrow { display: flex; align-items: center; gap: 7px; }
.pfield__lblrow .pcharcount { margin-left: auto; }
.pcharcount { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-3); }
.ptextarea2 {
  display: block; width: 100%; min-height: 110px; resize: vertical;
  padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper-2); font-family: inherit; font-size: 13.5px; line-height: 1.55; color: var(--ink);
}
.ptextarea2::placeholder { color: var(--ink-3); }
.ptextarea2:focus { outline: none; border-color: var(--gold, #c9a063); box-shadow: 0 0 0 3px rgba(201, 160, 99, 0.14); }
/* Counter sitting under a textarea that has no label row of its own. */
.pfield__count { margin: 6px 0 0; text-align: right; font-size: 11.5px; color: var(--ink-3); }
.pfield__count b { font-weight: 400; }
.ptextarea2:focus { outline: none; border-color: var(--gold); background: #fff; }
.ptextarea2--demo { color: var(--ink); }
.ptextarea2--big { min-height: 140px; }
.pchip--center { justify-content: center; text-align: center; font-weight: 500; padding: 15px; }

.voicedemo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.voicedemo__opt {
  display: flex; align-items: center; gap: 9px; padding: 15px 16px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--paper);
  font-size: 13.5px; font-weight: 500; color: var(--ink);
  cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.voicedemo__opt:hover { border-color: var(--gold); background: var(--gold-wash); }
.voicedemo__opt .icon { width: 16px; color: var(--ink-3); }
.voicedemo__opt.is-on { border-color: var(--gold); background: var(--gold-wash); }

.pinput {
  display: flex;
  align-items: center;
  flex: 1;
  height: 48px;
  padding: 0 15px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 13.5px;
  color: var(--ink-3);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.plinkrow { display: flex; gap: 10px; }
.pprivacy { display: flex; align-items: center; gap: 7px; margin: 11px 0 0; font-size: 12.5px; color: var(--ink-3); }
.pprivacy .icon { width: 13px; }

/* ---- Dropzones ------------------------------------------------------------- */

.pdrop {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 30px 20px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--paper-2);
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.pdrop:hover { border-color: #dcdee0; background: #fff; }
/* Every dropzone is a <label> wrapping a hidden file input, so the whole tile
   is clickable — these states are the feedback for that. */
.pdrop[data-upload] { cursor: pointer; }
.pdrop.is-drag { border-color: var(--gold); background: var(--gold-wash); }
.pdrop.is-filled { border-color: #2f9e6f; background: #f2faf6; }
.pdrop.is-filled .pdrop__i { background: #dff3e8; color: #2f9e6f; }
.pdrop--lg { padding: 52px 20px; }
.pdrop__i {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 15px;
  border-radius: 50%;
  background: #ede9fd;
  color: #7c6bd4;
}
.pdrop__i--outfit { background: #e7edfd; color: #5b7fd4; }
.pdrop__i--music { background: #f1ecfd; color: #7c6bd4; font-size: 22px; }
.pdrop__i .icon { width: 22px; }
.pdrop b { font-size: 14.5px; font-weight: 500; }
.pdrop i { margin-top: 6px; font-size: 12.5px; font-style: normal; color: var(--ink-2); }
.pdrop em { margin-top: 9px; font-size: 11.5px; font-style: normal; color: var(--ink-3); }

.phostlabel {
  display: block; margin-bottom: 11px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ink-2);
}
.phostlabel b { color: var(--gold); }
.phostlabel i { font-style: normal; font-weight: 500; color: var(--ink-3); }
.pdrop--host { border: 1.5px dashed var(--gold-2); transition: border-color 0.16s var(--ease), background-color 0.16s var(--ease); }
.pdrop--host:hover, .pdrop--host.is-drag { border-color: var(--gold); background: var(--gold-wash); }
.pdrop--host.is-filled { border-style: solid; border-color: var(--line); }

/* Host references are people, so the tiles are portrait. As wide landscape
   bands the figure was cropped to a strip and the reference told you nothing
   about the shot you are meant to supply. Capped so two portraits do not
   dominate the card. */
.hostdemo { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 14px; margin: 14px 0 4px; }
.hostdemo__ph { margin: 0; }
/* Each reference frame takes its own image's ratio (owner sweep 2026-07-25):
   the full-body plate is a 2:3 portrait, the face close-up a 1:1 square.
   The shared 3:4 either letterboxed the figure or cropped the face. Uneven
   heights are fine — they read as two photo prints. */
.hostdemo__ph .pshot { display: block; height: auto; border-radius: 12px; }
.hostdemo__ph .pshot--hostfull { aspect-ratio: 2 / 3; background-size: cover; }
.hostdemo__ph .pshot--hostface { aspect-ratio: 1 / 1; }

.hostdemo__ph figcaption {
  display: flex; align-items: center; gap: 6px; margin-top: 9px;
  font-size: 13px; font-weight: 500; color: var(--ink);
}
.hostdemo__ph figcaption em { font-style: normal; font-weight: 500; color: var(--ink-3); }
.hostdemo__ok {
  display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  background: #eaf7f0; color: #2f9e6f;
}
.hostdemo__ok .icon { width: 10px; }

.ptip {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 9px;
  background: var(--gold-wash);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ink-2);
}
.ptip .icon { width: 14px; color: var(--gold); margin-top: 1px; }
.ptip b { color: var(--ink); font-weight: 600; }
.ptip--purple { background: #f4f2fd; }
.ptip--purple .icon { color: #7c6bd4; }

/* ---- Buttons ---------------------------------------------------------------- */

.pgen {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 54px;
  margin-top: 20px;
  border-radius: 12px;
  background: linear-gradient(100deg, var(--gold-2), var(--gold));
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.005em;
  cursor: pointer;
  box-shadow: 0 8px 20px -8px rgba(217, 164, 65, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.28);
  transition: filter 160ms var(--ease), transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.pgen:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 12px 26px -8px rgba(217, 164, 65, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.pgen--sm { height: 46px; font-size: 14.5px; }
.pgen--inline { display: inline-flex; height: 48px; margin: 0; padding: 0 26px; font-size: 14.5px; }
.pgen__cap { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 11px 0 0; font-size: 12.5px; color: var(--ink-3); }
.pgen__cap .icon { width: 13px; }

.pbtn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 42px;
  padding: 0 20px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font-size: 13.5px;
  color: var(--ink);
  cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.pbtn-ghost:hover { border-color: #dcdddf; background: var(--paper-2); }
.pbtn-ghost--center { display: flex; width: 220px; margin: 20px auto 0; }
.pbtn-ghost .icon { color: var(--ink-3); }

/* ---- Media placeholders ------------------------------------------------------ */
/* Stand-ins with a horizon and glow so empty tiles read as photography
   rather than as missing assets. */

.pshot {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: 10px;
  overflow: hidden;
  background: linear-gradient(160deg, #dfe5e8, #c3ccd2);
}
.pshot::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.16), transparent 55%);
}
/* Real stills, each with its original gradient kept as a second layer so a
   tile degrades to its own tone rather than to bare white. */
.pshot--land,
.pshot--villa,
.pshot--presenter,
.pshot--before,
.pshot--after,
.pshot--op1,
.pshot--op2,
.pshot--car1,
.pshot--car2,
.pshot--r0,
.pshot--r1,
.pshot--r2,
.pshot--r3,
.pshot--h0,
.pshot--h1,
.pshot--h2,
.pshot--h3,
.pshot--h4,
.pshot--showroom {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* The actual before/after aerial pair — same lot, same angle, empty plot vs.
   the finished development — rather than two unrelated stock stills. */
/* The two reference shots. `contain` on the full-body plate because cutting
   the feet off the picture that demonstrates "full body" defeats the point;
   `cover` on the headshot, which is already framed tight. */
.pshot--hostfull {
  background-image: url('/prop%20ai/as1.png');
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-color: #efe6da;
}
.pshot--hostface {
  background-image: url('/pv-h0.jpg');
  background-size: cover;
  background-position: center 12%;
  background-repeat: no-repeat;
}

.pshot--land { height: 152px; background-image: url('/prop%20ai/land%20vision%20before.png'), linear-gradient(170deg, #a8cfe8, #7fa86a); }
.pshot--villa { height: 152px; background-image: url('/prop%20ai/land%20vision%20after.png'), linear-gradient(165deg, #6b7f96, #4a3c30); }
.pshot--presenter { height: 158px; background-image: url('/pv-presenter.jpg'), linear-gradient(160deg, #cbb9a4, #8d7660); }
.pshot--before { background-image: url('/pv-before.jpg'), linear-gradient(160deg, #cfc7bd, #8f867c); }
.pshot--after { background-image: url('/pv-after.jpg'), linear-gradient(160deg, #b99b74, #6d5540); }
/* Open Canvas example rail — Restaurant and Car Dealer first/last pairs. */
.pshot--op1 { background-image: url('/prop%20ai/op1.png'), linear-gradient(160deg, #4a4438, #201d18); }
.pshot--op2 { background-image: url('/prop%20ai/op2.png'), linear-gradient(160deg, #4a4438, #201d18); }
.pshot--car1 { background-image: url('/prop%20ai/car1.png'), linear-gradient(160deg, #5b86c4, #24406e); }
.pshot--car2 { background-image: url('/prop%20ai/car2.jpg'), linear-gradient(160deg, #5b86c4, #24406e); }
.pshot--showroom { background-image: url('/ds-showroom.jpg'), linear-gradient(160deg, #6b7a8c, #2c3a4a); }
.pshot--r0 { background-image: url('/pv-r0.jpg'), linear-gradient(160deg, #d8cec2, #a4968a); }
.pshot--r1 { background-image: url('/pv-r1.jpg'), linear-gradient(160deg, #ddd6cb, #b0a293); }
.pshot--r2 { background-image: url('/pv-r2.jpg'), linear-gradient(160deg, #cfc4b6, #948575); }
.pshot--r3 { background-image: url('/pv-r3.jpg'), linear-gradient(160deg, #e0dbd2, #b5aca0); }

/* Headshots crop from the upper third — a centre crop in a short tile
   slices the face. */
/* These are full-body portraits, not headshot crops — `cover` was cutting
   off the legs to fill a squarish tile. `contain` shows the whole figure;
   the gradient fallback on `.pshot` reads as a soft frame around it instead
   of a hard crop. */
.pshot--h0, .pshot--h1, .pshot--h2, .pshot--h3, .pshot--h4 {
  background-size: contain;
  background-position: center;
}
.pshot--h0 { background-image: url('/prop%20ai/as1.png'), linear-gradient(160deg, #c3ced9, #7d8b99); }
.pshot--h1 { background-image: url('/prop%20ai/as2.png'), linear-gradient(160deg, #d9c9b8, #a08d79); }
.pshot--h2 { background-image: url('/prop%20ai/as3.png'), linear-gradient(160deg, #cfd3d6, #83898f); }
.pshot--h3 { background-image: url('/prop%20ai/as4.png'), linear-gradient(160deg, #dcd6cd, #a49c92); }
.pshot--h4 { background-image: url('/prop%20ai/as5.png'), linear-gradient(160deg, #c9ac8c, #7a5f45); }

/* The presenter and the before/after frames are people too — keep heads
   in frame rather than centring on the body. */
.pshot--presenter,
.pshot--before,
.pshot--after { background-position: center 20%; }

.pplay {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(20, 20, 20, 0.55);
  color: #fff;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.pplay .icon { width: 16px; }

/* ---- Land Vision demo strip ---------------------------------------------------- */

.demo3 { display: grid; grid-template-columns: 1fr 28px 1fr 28px 1fr; gap: 14px; align-items: start; }
/* Frames match the artwork (owner sweep, 2026-07-25: every frame fits its
   image). Both aerials are 3:2 — the fixed 152px well was a 2.5:1 letterbox
   that cover-cropped a third of each picture. */
.demo3 .pshot { height: auto; aspect-ratio: 3 / 2; }
.demo3__col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.demo3__col .pbtn-ghost { align-self: center; }
.demo3__arrow { display: grid; place-items: center; padding-top: 92px; color: var(--gold); }
.demo3__cap { text-align: center; font-size: 12px; color: var(--ink-3); }

.pgenbox {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  height: 152px;
  justify-content: center;
  padding: 16px;
  border-radius: 10px;
  background: var(--paper-2);
  font-size: 13px;
  color: var(--ink-2);
}
.pgenbox__i {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--gold);
}
.pgenbox b { font-size: 12.5px; color: var(--gold); }
.pbar { display: block; width: 100%; height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.pbar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), var(--gold-2)); }

.prail__t { margin: 0 0 14px; font-size: 15px; font-weight: 600; letter-spacing: -0.008em; }
.pstep--rail { margin-bottom: 16px; }
.pcheck { display: flex; align-items: center; gap: 9px; margin: 0 0 11px; font-size: 13px; color: var(--ink-2); }
.pcheck .icon { width: 15px; color: #34a853; }

/* ---- Interior Vision ------------------------------------------------------------ */

.rooms4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 13px; }
.room { display: flex; flex-direction: column; }
.room .pshot { height: 122px; align-items: end; }
.room__ok {
  position: absolute; top: 8px; right: 8px; z-index: 1;
  display: grid; place-items: center; width: 22px; height: 22px;
  border-radius: 50%; background: #34a853; color: #fff;
}
.room__ok .icon { width: 12px; }
.room__cap { position: relative; z-index: 1; width: 100%; padding: 0 0 9px; text-align: center; font-size: 12.5px; font-style: normal; color: #fff; }
.room__re {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 36px; margin-top: 8px;
  border: 1px solid var(--line); border-top: none;
  border-radius: 0 0 9px 9px;
  font-size: 12.5px; color: var(--ink-2); cursor: pointer;
}
.room__re .icon { width: 13px; }

.addroom {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  width: 196px; padding: 20px; margin-top: 13px;
  border: 1px dashed #dcdddf; border-radius: 12px;
}
.addroom__i {
  display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 10px;
  border-radius: 50%; border: 1px solid var(--gold); color: var(--gold);
}
.addroom__i .icon { width: 15px; }
.addroom b { font-size: 13px; font-weight: 500; }
.addroom i { margin-top: 5px; font-size: 11.5px; font-style: normal; color: var(--ink-3); }

.order4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.order {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 13.5px;
}
.order b {
  display: grid; place-items: center; width: 22px; height: 22px; flex-shrink: 0;
  border-radius: 6px; background: var(--gold-wash); font-size: 12px; color: var(--gold);
}
.order .icon { margin-left: auto; color: #cfd1d4; width: 14px; }

.pflow { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.pflow > span { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.pflow > span > span:first-child, .pflow > span .icon:first-child { color: var(--gold); }
.pflow i { font-size: 11px; font-style: normal; color: var(--ink-2); white-space: nowrap; }
.pflow > .icon { color: var(--gold); }

.pcard--cost { display: flex; flex-direction: column; gap: 14px; }
.pcost { display: flex; align-items: center; gap: 12px; margin: 0; }
.pcost > span:first-child {
  display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 10px; background: var(--gold-wash); color: var(--gold);
}
.pcost > span:last-child { display: flex; flex-direction: column; }
.pcost i { font-size: 12px; font-style: normal; color: var(--ink-2); }
.pcost b { font-size: 18px; font-weight: 600; }
.pcost em { font-size: 11.5px; font-style: normal; color: var(--ink-3); }

/* ---- Agent Studio ----------------------------------------------------------------- */

.heads { display: flex; align-items: center; gap: 12px; }
/* 2:3 portrait, matching as1–as5 (1024x1536). The fixed 208px landscape
   strip either cropped the figures or floated them mid-pill over the
   gradient; ratio-locked, each card IS the portrait. (Phone keeps its own
   carousel sizing — mobile.css sets both dimensions, so this ratio is
   inert there.) */
.heads__shot { flex: 1; aspect-ratio: 2 / 3; }
.heads__nav {
  display: grid; place-items: center; width: 34px; height: 34px; flex-shrink: 0;
  border: 1px solid var(--line); border-radius: 50%; background: var(--paper);
  color: var(--ink-2); cursor: pointer;
}
.heads__nav .icon { width: 12px; }

/* ---- Smart Edit --------------------------------------------------------------------- */

.pfeats3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pfeat { display: flex; align-items: center; gap: 13px; }
.pfeat__i {
  display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 10px; background: var(--gold-wash); color: var(--gold);
}
.pfeat b { display: block; font-size: 14.5px; font-weight: 600; }
.pfeat i { display: block; margin-top: 4px; font-size: 12.5px; font-style: normal; color: var(--ink-2); }

.ba { display: grid; grid-template-columns: 1fr 46px 1fr; gap: 12px; align-items: center; padding: 16px; border-radius: 11px; background: var(--paper-2); }
/* The before/after stills are 9:16 vertical reels — a 176px landscape well
   cover-cropped ~70% of each frame. Ratio-locked and width-capped so the
   pair reads as two phone screens side by side rather than filling the
   column at full height. */
.ba .pshot { height: auto; aspect-ratio: 9 / 16; width: min(100%, 250px); justify-self: center; }
.ba__tag {
  position: absolute; left: 8px; bottom: 8px; z-index: 1;
  padding: 3px 9px; border-radius: 6px; background: rgba(20,20,20,0.6);
  font-size: 11px; font-style: normal; color: #fff;
}
.ba__tag--dark { left: auto; right: 8px; top: 8px; bottom: auto; background: rgba(20,20,20,0.8); }
.ba__caption {
  position: absolute; z-index: 1; bottom: 34px; left: 0; right: 0;
  text-align: center; font-size: 13px; font-weight: 800; line-height: 1.3;
  color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,0.6);
}
.ba__mid { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(150deg, var(--gold-2), var(--gold)); color: #fff; }
.ba__player { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 12.5px; color: var(--ink-2); }
.ba__player .icon { width: 14px; }
.ba__player i { font-style: normal; }

.penh { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.penh__right { display: flex; flex-direction: column; align-items: flex-end; }
.penh .pgen { margin: 0; padding: 0 40px; }

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

.plats { display: flex; gap: 11px; }
.plat {
  display: inline-flex; align-items: center; gap: 9px;
  height: 46px; padding: 0 20px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); color: var(--ink);
  font-family: inherit; font-size: 14px; cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.plat:hover { border-color: #b5a9ea; background: #faf9ff; }
.plat.is-on { border-color: #7c6bd4; background: #f6f4fe; }
.plat__i { display: block; width: 18px; height: 18px; flex-shrink: 0; }
.plat__i svg { display: block; width: 18px; height: 18px; }

.pget5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; }
.pget { display: flex; flex-direction: column; padding: 17px; border: 1px solid var(--line); border-radius: 11px; }
.pget__i { display: grid; place-items: center; width: 38px; height: 38px; margin-bottom: 13px; border-radius: 9px; background: #f1eefe; color: #7c6bd4; }
.pget b { font-size: 14px; font-weight: 600; }
.pget i { margin-top: 7px; font-size: 12.5px; font-style: normal; line-height: 1.5; color: var(--ink-2); }

.prows { display: flex; flex-direction: column; }
.panal { display: flex; align-items: center; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line-2); }
.panal:first-child { border-top: none; }
/* overflow visible so the platform badge, which sits deliberately outside
   the frame at bottom-right, is not sliced off by .pshot's clipping. */
.panal__thumb { width: 88px; height: 52px; flex-shrink: 0; place-items: start; overflow: visible; }
.panal__thumb::after { border-radius: 10px; }
.panal__plat { position: absolute; right: -7px; bottom: -7px; z-index: 1; width: 20px; height: 20px; border: 2px solid #fff; }
.panal__x { display: flex; flex-direction: column; gap: 5px; flex: 1; min-width: 0; }
.panal__x b { font-size: 14.5px; font-weight: 500; }
.panal__x i { font-size: 12.5px; font-style: normal; color: var(--ink-3); }
.panal__m { display: flex; flex-direction: column; gap: 4px; width: 78px; flex-shrink: 0; }
.panal__m b { font-size: 14px; font-weight: 600; }
.panal__m i { font-size: 11.5px; font-style: normal; color: var(--ink-3); }
.panal__w { width: 92px; flex-shrink: 0; text-align: right; font-size: 12.5px; color: var(--ink-3); }
.panal .icon { color: var(--ink-3); width: 13px; }

/* ---- Open Canvas ----------------------------------------------------------- */

.pgrid--wide { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.pgrid--wide > div, .pgrid--wide .prail { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pgrid--wide .pcard { margin: 0; }

.pcard--violet { background: #f8f7fe; border-color: #e9e5fb; }
.pcheck--violet .icon { color: var(--violet, #7c6bd4); }
.pai { --violet: #7c6bd4; }

.pflow--lg { flex-direction: column; gap: 0; align-items: stretch; }
.pflow--lg > span { flex-direction: column; text-align: center; gap: 9px; padding: 4px 0; }
.pflow--lg > .icon { margin: 6px auto; transform: rotate(90deg); }
.pflow__i {
  display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto;
  border-radius: 50%; background: var(--gold-wash); color: var(--gold);
}
.pflow--lg b { font-size: 14px; font-weight: 600; }
.pflow--lg i { font-size: 12px; font-style: normal; line-height: 1.5; color: var(--ink-2); white-space: normal; }

.frames2 { display: grid; grid-template-columns: 1fr 28px 1fr; gap: 12px; align-items: center; }
.frames2__c { display: flex; flex-direction: column; gap: 9px; text-align: center; }
/* 3:2 like all six example stills — 118px fixed was a 2.9:1 slit. */
.frames2__c .pshot { height: auto; aspect-ratio: 3 / 2; }
.frames2__c i { font-size: 12.5px; font-style: normal; color: var(--ink-2); }
.frames2__c i em { font-style: normal; color: var(--ink-3); }
.frames2 > .icon { color: var(--ink-3); margin: 0 auto; }

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

.pgrid2--stack { align-items: start; }
.pstack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.pstack .pcard { margin: 0; }

.paccess { display: flex; align-items: flex-start; gap: 13px; margin: 0; }
.paccess__i { font-size: 26px; line-height: 1; }
.paccess b { display: block; font-size: 16px; font-weight: 600; }
.paccess i { display: block; margin-top: 5px; font-size: 13px; font-style: normal; color: var(--ink-2); }

.pchip--green {
  border-color: #34a853; background: #34a853; color: #fff; justify-content: center;
}
.pchip--green .icon { color: #fff; }

.pcard--center { text-align: center; display: flex; flex-direction: column; align-items: center; }
.pcard__t--center, .pcard__s--center { text-align: center; }

.fbmark {
  display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 16px;
  border-radius: 14px; background: #1877f2; color: #fff;
  font-family: Georgia, serif; font-size: 32px; font-weight: 700; line-height: 1;
}
.fbbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 46px; padding: 0 26px; margin-top: 18px;
  border-radius: 9px; background: #1877f2; color: #fff;
  font-size: 14.5px; font-weight: 600; cursor: pointer;
}
.fbbtn b { font-family: Georgia, serif; font-size: 18px; }
.psafe { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 14px 0 0; font-size: 12.5px; color: var(--gold); }
.psafe .icon { width: 13px; }
.pperms { margin: 8px 0 0; font-family: ui-monospace, monospace; font-size: 11.5px; color: var(--ink-3); }

.pcando { display: flex; flex-direction: column; }
.pcan { display: flex; align-items: flex-start; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line-2); }
.pcan:first-child { border-top: none; padding-top: 4px; }
.pcan__i {
  display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0;
  border-radius: 11px; background: #f1eefe; color: var(--violet);
}
.pcan b { display: block; font-size: 15px; font-weight: 600; }
.pcan i { display: block; margin-top: 6px; font-size: 13px; font-style: normal; line-height: 1.55; color: var(--ink-2); }

.phow { margin: 0 30px 18px; }
.phow4 { display: flex; align-items: flex-start; gap: 14px; margin-top: 18px; }
.phow__step { display: flex; align-items: flex-start; gap: 13px; flex: 1; min-width: 0; }
.phow__i {
  display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 50%; background: #fff; color: var(--violet);
  box-shadow: 0 1px 3px rgba(23, 24, 26, 0.08);
}
.fbdot { color: #1877f2; font-family: Georgia, serif; font-size: 22px; font-weight: 700; }
.phow__step b { display: block; font-size: 14.5px; font-weight: 600; }
.phow__step i { display: block; margin-top: 6px; font-size: 12.5px; font-style: normal; line-height: 1.5; color: var(--ink-2); }
.phow__arrow { display: grid; place-items: center; padding-top: 14px; color: var(--ink-3); flex-shrink: 0; }

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

.pexample { text-align: center; }
.pexample__t { margin: 0 0 18px; font-size: 14px; font-weight: 500; color: var(--gold); }
.pexample__cap { margin: 18px 0 0; font-size: 13.5px; color: var(--ink-2); }

.report {
  max-width: 420px; margin: 0 auto; padding: 18px;
  border: 1px solid var(--line); border-radius: 10px;
  background: var(--paper); text-align: left;
  box-shadow: 0 10px 30px -16px rgba(23, 24, 26, 0.22);
}
.report__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.report__head b { display: block; font-size: 13px; font-weight: 600; }
.report__head i { display: block; margin-top: 3px; font-size: 10.5px; font-style: normal; color: var(--ink-3); }
.report__date { font-size: 9.5px; text-align: right; color: var(--ink-3); }
.report__h { margin: 16px 0 6px; font-size: 10.5px; font-weight: 600; color: var(--ink); }
.report__p { margin: 0; font-size: 10px; line-height: 1.6; color: var(--ink-2); }
.report__kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px 0; border-top: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.report__kpis span { text-align: center; }
.report__kpis b { display: block; font-size: 13px; font-weight: 600; }
.report__kpis .up { color: #1a9c4b; }
.report__kpis i { display: block; margin-top: 3px; font-size: 8.5px; font-style: normal; color: var(--ink-3); }
.report__kpis span + span { border-left: 1px solid var(--line-2); }
.report__list { margin: 6px 0 0; padding-left: 15px; }
.report__list li { font-size: 10px; line-height: 1.8; color: var(--ink-2); }

.pbytopic {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 15px; border-color: var(--gold); background: var(--gold-wash);
  font-size: 14.5px; font-weight: 500; color: var(--gold);
}
.pbytopic .icon { color: var(--gold); }

.pinput--mono { font-family: ui-monospace, monospace; height: 54px; }
input.pinput { display: block; width: 100%; color: var(--ink); background: #fff; }
input.pinput::placeholder { color: var(--ink-3); }
input.pinput:focus { outline: none; border-color: var(--gold); }

.vsample {
  aspect-ratio: 16 / 9; border-radius: 12px; display: grid; place-items: center;
  background: var(--line-2); border: 1px dashed var(--line);
}

/* Scoped to .pai — these class names also exist in the dark app's credit
   history; unscoped they overwrote it (dark ink titles on a dark bg, wrong
   grid) and broke that screen. */
.pai .histlist { display: flex; flex-direction: column; }
/* Each row is its own grid, so `auto` columns sized per-row left the badge,
   date and buttons at a different x on every line (owner flagged the ragged
   column, 2026-07-25). Fixed tracks for everything right of the title keep
   all rows on the same vertical lines; the action buttons stretch to their
   track so Play/View and Download read as two tidy columns. */
.pai .histrow {
  display: grid; grid-template-columns: 72px minmax(0, 1fr) 108px 148px 96px 136px;
  align-items: center; gap: 16px; padding: 14px 2px; border-bottom: 1px solid var(--line-2);
}
.pai .histrow:last-child { border-bottom: none; }
.pai .histrow__thumb {
  width: 72px; height: 48px; border-radius: 8px; position: relative;
  display: grid; place-items: center;
}
.pai .histrow__play {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(20, 20, 20, 0.55); color: #fff;
}
.pai .histrow__play .icon { width: 12px; }
.pai .histrow__x { min-width: 0; }
.pai .histrow__x b { display: block; font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pai .histrow__x i { display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; font-size: 12.5px; font-style: normal; color: var(--ink-3); }
.pai .histrow__tool { display: inline-flex; align-items: center; gap: 5px; }
.pai .histrow__tool .icon { width: 13px; }
.pai .histrow__badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px;
  background: #eaf7f0; color: #2f9e6f; font-size: 11.5px; font-weight: 600;
  justify-self: start;
}
.pai .histrow__badge .icon { width: 11px; }
.pai .histrow__date { font-size: 12.5px; color: var(--ink-3); white-space: nowrap; }
/* Grid-stretched to their fixed tracks (no width of their own) so both
   button columns are flush across every row; content stays centred. */
.pai .histrow__act { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; }
.pai .histrow__act .icon { width: 14px; }
.pmeta { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin: 10px 0 0; font-size: 13px; color: var(--ink-2); }
.pmeta b { font-weight: 400; color: var(--ink-3); }

.ptopics { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 0 30px 20px; }
.ptopics__lab { font-size: 13.5px; color: var(--ink-2); margin-right: 4px; }
.ptopic {
  padding: 10px 16px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--paper); font-size: 13px; cursor: pointer;
  transition: border-color 160ms var(--ease), background-color 160ms var(--ease);
}
.ptopic:hover { border-color: var(--gold); background: var(--gold-wash); }

.pgen--deep { background: linear-gradient(100deg, #e8bd63, #c08a2c); }

/* ---- Smart Edit 2 ---------------------------------------------------------------- */

.pgrid--se2 { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; margin: 0 30px 18px; }
.pgrid--se2 .pcard { margin: 0; }

.paudio {
  display: flex; align-items: center; gap: 14px;
  padding: 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper-2);
}
.paudio.is-on { border-color: var(--gold); background: var(--gold-wash); }
.paudio[data-upload] { cursor: pointer; transition: border-color 160ms var(--ease), background-color 160ms var(--ease); }
.paudio[data-upload]:hover { border-color: var(--gold); }
.paudio.is-drag { border-color: var(--gold); background: var(--gold-wash); }
.paudio.is-filled { border-color: #2f9e6f; background: #f2faf6; }
.paudio.is-filled .paudio__i { background: #dff3e8; color: #2f9e6f; }
.paudio__i {
  display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 50%; background: rgba(217, 164, 65, 0.16); color: var(--gold);
}
.paudio__i--grey { background: #eceded; color: var(--ink-2); }
.paudio b { display: block; font-size: 14.5px; font-weight: 500; }
.paudio i { display: block; margin-top: 4px; font-size: 12px; font-style: normal; color: var(--ink-2); }

.pdrop__i--grey { background: #eceded; color: var(--ink-2); }
.prec {
  padding: 2px 8px; border-radius: 5px; border: 1px solid var(--line);
  font-size: 10.5px; font-style: normal; color: var(--ink-2);
}

.pcard--empty { display: flex; flex-direction: column; align-items: center; text-align: center; }
.pfield__label {
  align-self: flex-start; margin: 0 0 20px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-3);
}
.pempty__i {
  display: grid; place-items: center; width: 62px; height: 62px; margin-bottom: 16px;
  border-radius: 14px; background: #f1eefe; color: var(--violet);
}
.pempty__i .icon { width: 26px; }
.pcard--empty b { font-size: 15.5px; font-weight: 600; }
.pcard--empty i { margin-top: 7px; font-size: 12.5px; font-style: normal; color: var(--ink-2); }
.pcard--empty .pbtn-ghost { margin-top: 18px; }