/* Feature pages only. Loads after site.css and adds the page hero and the
   mockup parts the landing page keeps inline. */

/* ---------- hero ---------- */
.fhero{padding:56px 0 64px;border-bottom:1px solid var(--sep);
  background:
    radial-gradient(820px 380px at 78% 6%, rgba(10,132,255,.10) 0%, transparent 62%),
    radial-gradient(620px 380px at 10% 94%, rgba(52,199,89,.08) 0%, transparent 60%),
    linear-gradient(180deg,#F6F9FD 0%,#fff 76%)}
.fherogrid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
@media(max-width:940px){.fherogrid{grid-template-columns:1fr;gap:36px}}
.fhero h1{margin-top:18px}
.fhero .cta{display:flex;gap:12px;margin-top:28px;flex-wrap:wrap}
.eyebrow svg{flex:none}
.shot{min-width:0}

/* ---------- mockup internals ---------- */
.app .sub{font-size:11.5px;color:var(--tertiary);margin-top:6px;line-height:1.45}
.app .lbl{font-size:11.5px;font-weight:600;margin-bottom:6px}
.app .rule{height:1px;background:var(--sep);margin:16px 0}
.app .field{border:1px solid var(--sep-strong);border-radius:8px;padding:8px 11px;font-size:12.5px;
  display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff}
.app .toggle{width:36px;height:21px;border-radius:99px;background:var(--green);position:relative;flex:none}
.app .toggle::after{content:'';position:absolute;top:2px;left:17px;width:17px;height:17px;
  border-radius:50%;background:#fff}
.app .seg{display:inline-flex;background:var(--fill);border-radius:9px;padding:2px;gap:2px;margin-bottom:14px}
.app .seg span{font-size:12px;padding:5px 14px;border-radius:7px;color:var(--tertiary)}
.app .seg span.on{background:#fff;color:var(--label);box-shadow:0 1px 3px rgba(0,0,0,.13)}
.app .cta-mock{margin-top:14px;background:var(--blue-deep);color:#fff;font-size:12.5px;font-weight:500;
  text-align:center;border-radius:8px;padding:9px}
.app .avatar{width:44px;height:44px;border-radius:50%;flex:none;
  background:linear-gradient(180deg,#6FB1E8,#4A8FCB);color:#fff;font-weight:600;font-size:15px;
  display:flex;align-items:center;justify-content:center}
.app .quad{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:16px}
.app .quad .stat{padding:9px}
.app .quad .stat b{font-size:15px}
@media(max-width:420px){.app .quad{grid-template-columns:repeat(2,1fr)}}
.app .rowline{display:flex;align-items:center;gap:10px;padding:8px 2px;font-size:12px;
  border-bottom:1px solid var(--sep);min-width:0}
.app .rowline:last-child{border-bottom:none}
.app .rowline .t{font-weight:600;min-width:52px}
.app .rowline .nm{flex:1;min-width:0}
.app .rowline .meta{color:var(--tertiary);font-size:11px;white-space:nowrap}
.app .matchbar{margin-top:14px;background:rgba(10,132,255,.08);border-radius:8px;padding:9px 12px;
  font-size:12.5px;color:var(--blue-deep)}
.app .matchbar b{font-weight:700}
.app .banner{margin-top:14px;background:rgba(255,59,48,.08);border-radius:8px;padding:8px 12px;
  font-size:11.5px;color:#C4291F}
.app .composer{display:flex;gap:8px;align-items:center;margin-top:14px}
.app .composer span{flex:1;border:1px solid var(--sep-strong);border-radius:99px;padding:7px 13px;
  font-size:12px;color:var(--tertiary)}
.app .composer i{width:26px;height:26px;border-radius:50%;background:var(--blue-deep);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;
  font-style:normal;flex:none}

.app .mmsmock{padding:5px 5px 9px;max-width:78%}
.app .mmsmock img{border-radius:13px;display:block;width:100%;height:auto;aspect-ratio:4/3;
  object-fit:cover;background:#E9E9EB}
.app .mmsmock span{display:block;padding:7px 8px 1px;font-size:12.5px}

.minibars{display:flex;align-items:flex-end;gap:3px;height:70px;margin-top:16px}
.minibars span{flex:1;background:var(--blue-deep);border-radius:2px 2px 0 0;opacity:.85}
.minibars span.hi{background:var(--green)}
.axis{display:flex;justify-content:space-between;font-size:10px;color:var(--tertiary);margin-top:7px}

/* ---------- footer additions ---------- */
.footgrid .here{display:block;font-size:13.5px;color:var(--label);font-weight:500;margin-bottom:9px}
.footgrid .mark{margin-right:0}