/* RevMatic AI | apps.css
   Patterns shared by /apps/ and the three app pages (Smooth Flow, Investor Desk, RoofCue). Loaded after site.css,
   uses its tokens only. Each demo has its own file: smooth-flow.css, investor-desk.css, roofcue.css.

   1 Hero credit line        4 The rule it keeps       7 Segmented buttons
   2 Demo stage              5 Who it is for / what     8 The overview: triptych hero, app chapters
   3 (demo files)            6 Next app poster
*/

/* ================================================================ 1 Hero credit line */
.app-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 26px; margin-top: 26px; }
.app-meta__by { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--smoke); }
.app-meta__by::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--plasma); box-shadow: 0 0 0 3px rgba(140, 112, 255, 0.2), 0 0 10px rgba(140, 112, 255, 0.9); }
.app-hero .hero__copy { max-width: 820px; }
@media (max-width: 767px) {
  .app-meta { margin-top: 14px; gap: 0 20px; }
  .app-meta .textlink { align-self: auto; }
}

/* ================================================================ 2 Demo stage (the sample, one big surface like the audit card) */
.demo__stage {
  position: relative; border-radius: var(--r-card); overflow: hidden; min-width: 0;
  background: linear-gradient(180deg, rgba(30, 24, 41, 0.92) 0%, rgba(20, 16, 29, 0.96) 100%);
  border: 1px solid rgba(243, 240, 248, 0.14);
  box-shadow: 0 50px 120px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(140, 112, 255, 0.08), 0 30px 100px rgba(140, 112, 255, 0.14);
}
.demo__stage::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; z-index: 1; background: linear-gradient(90deg, rgba(140, 112, 255, 0), rgba(187, 169, 255, 0.7), rgba(255, 79, 154, 0.5), rgba(255, 138, 60, 0)); }
.demo__sample { display: flex; align-items: center; gap: 10px; margin: 0; padding: 15px 32px; border-bottom: 1px solid var(--line); letter-spacing: 0.07em; }
.demo__sample i { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 3px rgba(255, 79, 154, 0.18), 0 0 10px rgba(255, 79, 154, 0.8); }
.demo__lab { display: block; margin: 0 0 12px; letter-spacing: 0.07em; }
@media (max-width: 767px) {
  .demo__sample { padding: 12px 16px; font-size: 11px; line-height: 1.45; align-items: flex-start; }
  .demo__sample i { margin-top: 4px; }
}

/* ================================================================ 4 The rule it keeps (one line, alone, between sections) */
.rule { position: relative; isolation: isolate; overflow: hidden; border-top: 1px solid var(--line); text-align: center; }
.rule::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(46% 70% at 50% 50%, rgba(140, 112, 255, 0.13), rgba(140, 112, 255, 0) 72%);
}
.rule__in { padding-top: clamp(76px, 3rem + 5vw, 150px); padding-bottom: clamp(76px, 3rem + 5vw, 150px); }
.rule__k {
  display: inline-flex; align-items: center; gap: 12px; margin: 0;
  font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal-soft);
}
.rule__k::before, .rule__k::after { content: ""; width: 28px; height: 1px; background: var(--afterglow); }
.rule__k::after { transform: scaleX(-1); }
.rule__line {
  max-width: 15em; margin: 24px auto 0; font: 400 clamp(2.3rem, 1.1rem + 3.8vw, 4.8rem)/1.02 var(--font-sig); font-style: italic;
  letter-spacing: -0.012em; color: var(--platinum); text-wrap: balance;
}
.rule__line .ln { display: block; }
.rule__line .ln + .ln { color: var(--plasma-soft); }
@media (max-width: 767px) {
  .rule__line { font-size: clamp(2.1rem, 9.4vw, 2.6rem); line-height: 1.06; }
}

/* ================================================================ 5 Who it is for, and what it does (rows as on the Services page) */
.appwho { display: grid; grid-template-columns: minmax(0, 1fr); gap: 44px; }
.appwho__lede { margin-top: 20px; }
.appwho__who { margin: 30px 0 0; border-top: 1px solid var(--line); }
.appwho__who li { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; padding: 15px 0; border-bottom: 1px solid var(--line); font: 400 16.5px/1.5 var(--font-text); color: var(--ink-88); }
.appwho__who .mono { padding-top: 3px; color: var(--plasma-soft); }
.appwho__wl { display: block; margin-bottom: 4px; letter-spacing: 0.1em; }
.appwho__what .acc__rows { border-bottom: 1px solid var(--line); }
@media (min-width: 1024px) {
  .appwho { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 88px; align-items: start; }
  .appwho__head { position: sticky; top: calc(var(--stick) + 16px); transition: top 0.4s var(--ease-out); }
  [data-hdr="up"] .appwho__head { top: calc(var(--header-h) + 24px); }
  .appwho__what { padding-top: 6px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .appwho__what .acc__row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ================================================================ 6 Next app poster */
.nextapp {
  --pos: 50% 50%;
  position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: clamp(300px, 30vw, 440px);
  border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line-strong); background: var(--plum);
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.45);
}
.nextapp__img { position: absolute; inset: 0; z-index: -1; }
.nextapp__img img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pos); transition: transform 1.4s var(--ease-out); }
.nextapp:hover .nextapp__img img { transform: scale(1.04); }
.nextapp__img::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 6, 11, 0.94) 0%, rgba(7, 6, 11, 0.78) 34%, rgba(7, 6, 11, 0.22) 70%, rgba(7, 6, 11, 0.1) 100%),
    linear-gradient(0deg, rgba(7, 6, 11, 0.7) 0%, rgba(7, 6, 11, 0) 50%);
}
.nextapp__copy { max-width: 640px; padding: clamp(24px, 1rem + 2.6vw, 52px); }
.nextapp__k { letter-spacing: 0.12em; color: var(--signal-soft); }
.nextapp__name {
  display: flex; align-items: center; gap: 14px; margin-top: 12px;
  font-family: var(--font-display); font-weight: 800; font-stretch: 108%; font-size: var(--fs-h2); line-height: 1; letter-spacing: -0.022em; color: var(--platinum);
}
.nextapp__name .arr { width: 30px; height: 30px; color: var(--plasma-soft); transition: transform 0.25s var(--ease-out); }
.nextapp:hover .nextapp__name .arr { transform: translateX(5px); }
.nextapp__line { margin-top: 14px; font: 400 clamp(1.3rem, 1.05rem + 0.7vw, 1.7rem)/1.25 var(--font-sig); font-style: italic; color: var(--ink-88); }
.nextapp__for { margin-top: 12px; font: 400 15px/1.45 var(--font-text); color: var(--smoke); }
.nextapp:focus-visible { outline-offset: 4px; border-radius: var(--r-card); }
.nextapp__more { display: grid; gap: 6px; margin-top: 26px; font: 400 16px/1.6 var(--font-text); color: var(--smoke); }
.nextapp__more a { display: inline-block; padding: 10px 0; margin: -10px 0; color: var(--platinum); border-bottom: 1px solid var(--line-strong); background-clip: content-box; transition: border-color 0.18s; }
.nextapp__more a:hover { border-color: var(--plasma-soft); }
@media (max-width: 767px) {
  .nextapp { min-height: 340px; }
  .nextapp__img::after { background: linear-gradient(0deg, rgba(7, 6, 11, 0.95) 0%, rgba(7, 6, 11, 0.7) 45%, rgba(7, 6, 11, 0.1) 100%); }
  .nextapp__name { font-size: 31px; }
  .nextapp__name .arr { width: 22px; height: 22px; }
  .nextapp__more { font-size: 15.5px; }
}

/* ================================================================ 7 Segmented buttons (the sample controls) */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }
.seg__b {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 14px;
  border: 1px solid var(--line-strong); border-radius: var(--r-btn); background: rgba(7, 6, 11, 0.3);
  font: 500 15px/1.2 var(--font-text); color: var(--ink-78); white-space: nowrap;
  transition: color 0.18s, background-color 0.18s, border-color 0.18s;
}
.seg__b:hover { color: var(--platinum); border-color: rgba(243, 240, 248, 0.4); }
.seg__b[aria-pressed="true"] { border-color: rgba(187, 169, 255, 0.75); background: rgba(140, 112, 255, 0.22); color: var(--platinum); }
.seg__b:focus-visible { outline-offset: 2px; }
@media (max-width: 767px) {
  .seg__b { padding: 0 12px; font-size: 14.5px; }
}

/* ================================================================ 8 The overview (/apps/) */
/* the overview hero: one photo (a palm street of tile, shingle and metal roofs), feathered in like every inner hero */
.apps-hero .hero__copy { max-width: 700px; }

/* the app chapters: photo beside words, alternating */
.appchs { display: grid; gap: clamp(64px, 3rem + 4vw, 120px); }
.appch { align-items: center; }
.appch__media { aspect-ratio: 4 / 3; }
.appch__media img { object-position: var(--pos, 50% 50%); }
.appch__n {
  position: absolute; left: 22px; bottom: 16px; z-index: 1;
  font-family: var(--font-display); font-weight: 800; font-stretch: 108%; font-size: 64px; line-height: 0.8; letter-spacing: -0.04em;
  color: transparent; -webkit-text-stroke: 1.2px rgba(243, 240, 248, 0.6);
}
.appch__name { font-family: var(--font-display); font-weight: 800; font-stretch: 108%; font-size: var(--fs-h2); line-height: 1; letter-spacing: -0.022em; }
.appch__name a { display: inline-block; padding: 7px 0; color: var(--platinum); transition: color 0.18s; }
.appch__name a:hover { color: var(--plasma-soft); }
.appch__line { margin-top: 16px; max-width: 22em; font: 400 clamp(1.35rem, 1.1rem + 0.7vw, 1.75rem)/1.22 var(--font-sig); font-style: italic; color: var(--platinum); text-wrap: balance; }
.appch__p { margin-top: 16px; max-width: 34em; font: 400 16.5px/1.62 var(--font-text); color: var(--ink-88); }
.appch__pts { margin-top: 22px; gap: 10px; }
.appch__ctas { margin-top: 28px; gap: 12px 28px; }
@media (min-width: 900px) {
  .appch { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .appch.split--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
}
@media (max-width: 899px) {
  .appch { gap: 24px; }
  .appch__media { aspect-ratio: 16 / 10; }
}
@media (max-width: 767px) {
  .appch__n { font-size: 44px; left: 16px; bottom: 12px; }
  .appch__name { font-size: 31px; }
  .appch__ctas { flex-direction: column; align-items: stretch; gap: 6px; }
  .appch__ctas .btn { width: 100%; }
  .appch__ctas .textlink { align-self: flex-start; }
}