/* Shared product hero UI for FieldKit, Mobile App, and PayLync Payments.
   Everything is body-scoped so integration detail pages, including QBO, are untouched. */
:is(.fieldkit-page,.mobile-app-page,.payments-page) .hero{
  position:relative;
  isolation:isolate;
  padding:78px 0 84px;
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .hero::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:
    radial-gradient(circle at 88% 8%,rgba(0,140,255,.12),transparent 34%),
    radial-gradient(circle at 8% 82%,rgba(19,122,69,.08),transparent 30%);
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .hero-grid{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:64px;
  align-items:center;
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .hero h1{margin:22px 0 20px}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .hero-sub{
  max-width:50ch;
  margin:0 0 30px;
  color:var(--muted);
  font-size:19px;
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:30px;
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .feature-chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding-top:22px;
  border-top:1px solid var(--line);
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .f-chip{
  padding:8px 14px;
  border:1px solid var(--line-strong);
  border-radius:var(--r-pill);
  background:#fff;
  color:var(--ink-soft);
  font-family:var(--label);
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
}

:is(.fieldkit-page,.mobile-app-page,.payments-page) .sync-wrap{position:relative;min-width:0}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .sync-card{
  position:relative;
  overflow:hidden;
  padding:26px;
  border-radius:var(--r-lg);
  background:var(--ink);
  color:#e8ecf4;
  box-shadow:0 40px 90px rgba(11,15,26,.35);
  font-family:var(--label);
  font-size:13.5px;
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .sync-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin-bottom:16px;
  padding-bottom:14px;
  border-bottom:1px dashed rgba(255,255,255,.18);
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .sync-head b{font-weight:600;letter-spacing:.04em}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .sync-head .data{white-space:nowrap}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .sync-flow{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .node{
  flex:1;
  min-width:0;
  padding:14px 8px;
  border:1px solid rgba(255,255,255,.1);
  border-radius:12px;
  background:rgba(255,255,255,.05);
  text-align:center;
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .node b{
  display:block;
  color:#fff;
  font-size:12px;
  letter-spacing:.08em;
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .node small{
  display:block;
  color:#8e9ab3;
  font-size:10.5px;
  letter-spacing:.06em;
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .pipe{
  position:relative;
  flex:none;
  width:52px;
  height:2px;
  background:rgba(255,255,255,.15);
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .pipe::after{
  content:"";
  position:absolute;
  top:-3px;
  left:0;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 10px rgba(0,140,255,.9);
  animation:product-hero-flow 1.8s linear infinite;
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .pipe.rev::after{
  background:var(--green-bright);
  box-shadow:0 0 10px rgba(47,203,119,.9);
  animation-name:product-hero-flow-reverse;
}
@keyframes product-hero-flow{to{transform:translateX(44px)}}
@keyframes product-hero-flow-reverse{from{transform:translateX(44px)}to{transform:translateX(0)}}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .inv-rows{display:grid;gap:8px}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .inv{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:11px 14px;
  border:1px solid rgba(255,255,255,.08);
  border-radius:10px;
  background:rgba(255,255,255,.04);
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .inv>span:first-child{
  min-width:0;
  overflow:hidden;
  color:#cbd3e1;
  text-overflow:ellipsis;
  white-space:nowrap;
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .inv .st{
  flex:none;
  padding:4px 10px;
  border-radius:var(--r-pill);
  font-size:10.5px;
  font-weight:600;
  letter-spacing:.1em;
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .st.sent{background:rgba(0,140,255,.18);color:#7cc7ff}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .st.paid{background:rgba(47,203,119,.18);color:#8fe6b4}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .st.synced{background:rgba(255,255,255,.1);color:#e8ecf4}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .sync-chip{
  position:absolute;
  display:flex;
  align-items:center;
  gap:10px;
  padding:13px 16px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:#fff;
  color:var(--ink);
  box-shadow:0 18px 44px rgba(11,15,26,.22);
  font-family:var(--sans);
  font-size:13px;
  font-weight:700;
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .sync-chip small{
  display:block;
  color:var(--muted);
  font-size:11.5px;
  font-weight:500;
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .sync-chip .ico{
  display:grid;
  flex:none;
  width:34px;
  height:34px;
  place-items:center;
  border-radius:9px;
  background:var(--blue);
  color:#fff;
  font-family:var(--label);
  font-size:10px;
  font-weight:700;
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .chip-a{right:-24px;top:-26px}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .chip-b{left:-30px;bottom:-26px}

@media(max-width:980px){
  :is(.fieldkit-page,.mobile-app-page,.payments-page) .hero-grid{grid-template-columns:1fr;gap:56px}
  :is(.fieldkit-page,.mobile-app-page,.payments-page) .chip-a{right:6px}
  :is(.fieldkit-page,.mobile-app-page,.payments-page) .chip-b{left:6px}
}
@media(max-width:620px){
  :is(.fieldkit-page,.mobile-app-page,.payments-page) .hero{padding:58px 0 66px}
  :is(.fieldkit-page,.mobile-app-page,.payments-page) .hero-sub{font-size:16px}
  :is(.fieldkit-page,.mobile-app-page,.payments-page) .sync-card{padding:20px 16px}
  :is(.fieldkit-page,.mobile-app-page,.payments-page) .sync-head{align-items:flex-start;font-size:11px}
  :is(.fieldkit-page,.mobile-app-page,.payments-page) .sync-head .data{font-size:10px}
  :is(.fieldkit-page,.mobile-app-page,.payments-page) .sync-flow{gap:6px}
  :is(.fieldkit-page,.mobile-app-page,.payments-page) .node{padding:12px 5px}
  :is(.fieldkit-page,.mobile-app-page,.payments-page) .node b{font-size:9px}
  :is(.fieldkit-page,.mobile-app-page,.payments-page) .node small{font-size:8px}
  :is(.fieldkit-page,.mobile-app-page,.payments-page) .pipe{width:22px}
  :is(.fieldkit-page,.mobile-app-page,.payments-page) .pipe::after{animation:none}
  :is(.fieldkit-page,.mobile-app-page,.payments-page) .inv{padding:10px;font-size:10px}
  :is(.fieldkit-page,.mobile-app-page,.payments-page) .sync-chip{max-width:78%;padding:10px 12px;font-size:11px}
  :is(.fieldkit-page,.mobile-app-page,.payments-page) .sync-chip small{font-size:9.5px}
  :is(.fieldkit-page,.mobile-app-page,.payments-page) .chip-a{right:4px;top:-31px}
  :is(.fieldkit-page,.mobile-app-page,.payments-page) .chip-b{left:4px;bottom:-31px}
}

.fk-heading{max-width:820px;margin-bottom:40px}.fk-heading .section-copy{margin-top:12px}
.fk-core{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.fk-core .feat{height:100%}
.fk-connected{background:#fff;border-block:1px solid var(--line)}
.fk-flow-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:13px}.fk-flow-step{min-height:145px;padding:21px 17px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);text-align:center}.fk-flow-step i{width:31px;height:31px;display:grid;place-items:center;margin:0 auto 12px;border-radius:10px;background:var(--blue-soft);color:var(--blue);font-family:var(--label);font-size:10px;font-style:normal;font-weight:700}.fk-flow-step b,.fk-flow-step span{display:block}.fk-flow-step b{font-size:12.5px}.fk-flow-step span{margin-top:4px;color:var(--muted);font-size:10.5px}
.fk-workflow{background:linear-gradient(180deg,#f4f8ff,#fbfbfa)}.fk-workflow-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.fk-work-card{padding:25px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;box-shadow:0 8px 24px rgba(11,15,26,.045)}.fk-work-card>span{font-family:var(--label);font-size:9px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--blue)}.fk-work-card h3{margin:9px 0 8px;font-size:25px}.fk-work-card p{margin:0;color:var(--muted);font-size:13px}.fk-work-card ul{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0 0;padding:0;list-style:none}.fk-work-card li{padding:5px 8px;border-radius:99px;background:var(--blue-soft);color:var(--blue-deep);font-size:9px;font-weight:600}
.fk-common{text-align:center}.fk-common .fk-heading{margin-inline:auto}.fk-pills{display:flex;justify-content:center;gap:9px;flex-wrap:wrap}.fk-pills span{padding:9px 14px;border:1px solid var(--line);border-radius:99px;background:#fff;color:var(--ink-soft);font-family:var(--label);font-size:10.5px;font-weight:600;box-shadow:var(--shadow-sm)}
.fk-example .fk-heading{text-align:center;margin-inline:auto}.fk-example .section-copy{margin-inline:auto}.fk-example-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;max-width:850px;margin:0 auto;padding:22px;border:1px solid var(--line);border-radius:var(--r-lg);background:#fff}.fk-example-grid>div{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:10px;background:#f6f8fc;color:var(--ink-soft);font-size:12px}.fk-example-grid i{width:23px;height:23px;display:grid;place-items:center;border-radius:8px;background:var(--blue);color:#fff;font-family:var(--label);font-size:8px;font-style:normal;font-weight:700}
@media(max-width:980px){.fk-core{grid-template-columns:repeat(2,1fr)}.fk-flow-grid{grid-template-columns:repeat(2,1fr)}.fk-flow-step:last-child{grid-column:span 2}.fk-workflow-grid{grid-template-columns:1fr}}
@media(max-width:620px){.fk-core,.fk-flow-grid,.fk-example-grid{grid-template-columns:1fr}.fk-flow-step:last-child{grid-column:auto}.fk-example-grid{padding:14px}.fk-work-card{padding:21px}}

/* ==============================================================
   Shared product-detail components
   Restores the product page blocks that were present in the markup
   but had no matching styles, and styles the PHP-only inquiry form.
   ============================================================== */
:is(.fieldkit-page,.mobile-app-page,.payments-page) .statusboard{
  position:relative;
  z-index:3;
}

:is(.fieldkit-page,.mobile-app-page,.payments-page) .steps{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .step,
.mobile-app-page .feat{
  position:relative;
  min-height:100%;
  padding:27px 25px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:#fff;
  box-shadow:0 8px 26px rgba(11,15,26,.045);
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .step::before{
  content:"";
  display:block;
  width:42px;
  height:4px;
  margin-bottom:20px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--blue),#7457ff);
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .step h4,
.mobile-app-page .feat h4{
  margin:0 0 9px;
  color:var(--ink);
  font-size:18px;
  line-height:1.35;
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .step p,
.mobile-app-page .feat p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.7;
}
.mobile-app-page .features{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
}
.mobile-app-page .feat .ico{
  display:grid;
  width:42px;
  height:42px;
  place-items:center;
  margin-bottom:18px;
  border-radius:12px;
  background:var(--blue-soft);
  color:var(--blue-deep);
  font-family:var(--label);
  font-size:18px;
  font-weight:700;
}

.mobile-app-page .recon{
  overflow:hidden;
  padding:10px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:#fff;
  box-shadow:0 24px 60px rgba(11,15,26,.08);
}
.mobile-app-page .recon .table-wrap{
  border-radius:calc(var(--r-lg) - 8px);
}

.mobile-app-page .ext-band{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  margin:46px 18px 28px;
  padding:88px 0;
  border-radius:34px;
  background:linear-gradient(135deg,#071426 0%,#0d1d36 58%,#123b6c 100%);
  color:#eaf0fb;
}
.mobile-app-page .ext-band::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:520px;
  height:520px;
  right:-210px;
  top:-250px;
  border:1px solid rgba(124,199,255,.18);
  border-radius:50%;
  box-shadow:0 0 0 72px rgba(0,140,255,.05),0 0 0 144px rgba(116,87,255,.03);
}
.mobile-app-page .ext-band .section-copy{
  color:rgba(234,240,251,.72);
}
.mobile-app-page .ext-inner{
  position:relative;
  z-index:1;
}
.mobile-app-page .browser{
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  border-radius:18px;
  background:#fff;
  box-shadow:0 34px 90px rgba(0,0,0,.35);
}
.mobile-app-page .browser-top{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:48px;
  padding:0 17px;
  border-bottom:1px solid #e8edf4;
  background:#f8fafc;
}
.mobile-app-page .b-dot{
  display:block;
  flex:none;
  width:10px;
  height:10px;
  border-radius:50%;
}
.mobile-app-page .browser-url{
  overflow:hidden;
  margin-left:8px;
  color:#61708a;
  font-family:var(--label);
  font-size:11px;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.mobile-app-page .browser-body{
  padding:30px;
  color:var(--ink);
  background:linear-gradient(180deg,#fff,#f7faff);
}
.mobile-app-page .pl-popup{
  padding:22px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 14px 38px rgba(11,15,26,.09);
}
.mobile-app-page .pl-popup>b{
  display:block;
  margin-bottom:6px;
  color:var(--ink);
  font-size:14px;
}
.mobile-app-page .amt{
  margin:0 0 20px;
  color:var(--ink);
  font-family:var(--serif);
  font-size:46px;
  line-height:1;
}

.mobile-app-page .quote-band{
  position:relative;
  overflow:hidden;
  padding:46px 50px;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:linear-gradient(145deg,#fff 0%,#f4f9ff 100%);
  box-shadow:0 16px 42px rgba(11,15,26,.05);
}
.mobile-app-page .quote-band::after{
  content:"“";
  position:absolute;
  right:35px;
  top:12px;
  color:rgba(0,140,255,.09);
  font-family:var(--serif);
  font-size:140px;
  line-height:1;
}
.mobile-app-page .quote-band blockquote{
  position:relative;
  z-index:1;
  max-width:38ch;
  margin:0;
  color:var(--ink);
  font-family:var(--serif);
  font-size:clamp(28px,3vw,40px);
  line-height:1.15;
}
.mobile-app-page .quote-band blockquote footer{
  margin-top:18px;
  color:var(--muted);
  font-family:var(--sans);
  font-size:13px;
}

:is(.fieldkit-page,.mobile-app-page,.payments-page) .cta{
  padding:28px 0 104px;
  text-align:center;
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .cta>.container{
  position:relative;
  overflow:hidden;
  padding:62px 46px;
  border-radius:31px;
  background:linear-gradient(125deg,var(--blue),#2966de 48%,#7457ff);
  color:#fff;
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .cta>.container::after{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  right:-150px;
  top:-210px;
  border:1px solid rgba(255,255,255,.2);
  border-radius:50%;
  box-shadow:0 0 0 65px rgba(255,255,255,.05);
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .cta .field-tag,
:is(.fieldkit-page,.mobile-app-page,.payments-page) .cta h2,
:is(.fieldkit-page,.mobile-app-page,.payments-page) .cta p,
:is(.fieldkit-page,.mobile-app-page,.payments-page) .cta .hero-actions{
  position:relative;
  z-index:1;
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .cta .field-tag{
  border-color:rgba(255,255,255,.25);
  background:rgba(255,255,255,.12);
  color:#fff;
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .cta h2{
  max-width:17ch;
  margin:18px auto 14px;
  color:#fff;
  font-size:clamp(38px,4vw,58px);
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .cta .accent{
  color:#dff3ff;
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .cta p{
  max-width:58ch;
  margin:0 auto 28px;
  color:#e3eeff;
  font-size:16px;
  line-height:1.7;
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .cta .hero-actions{
  justify-content:center;
  margin:0;
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .cta .btn-ghost{
  border-color:rgba(255,255,255,.38);
  background:rgba(255,255,255,.08);
  color:#fff;
}
:is(.fieldkit-page,.mobile-app-page,.payments-page) .cta .btn-ghost:hover{
  background:rgba(255,255,255,.16);
}

@media(max-width:900px){
  :is(.fieldkit-page,.mobile-app-page,.payments-page) .steps,
  .mobile-app-page .features{grid-template-columns:1fr}
  .mobile-app-page .ext-band{margin-inline:10px}
}
@media(max-width:620px){
  .mobile-app-page .ext-band{padding:68px 0}
  .mobile-app-page .browser-body{padding:20px 16px}
  .mobile-app-page .quote-band{padding:36px 26px}
  :is(.fieldkit-page,.mobile-app-page,.payments-page) .cta>.container{padding:48px 24px}
  :is(.fieldkit-page,.mobile-app-page,.payments-page) .cta .hero-actions{display:grid}
  :is(.fieldkit-page,.mobile-app-page,.payments-page) .cta .btn{width:100%}
}