/* ============================================================================
   ONE BCG — Products page composition.

   Page-scoped, loaded last. One type scale and one spacing rhythm across the
   page; three deliberately different arrangements so the folds read as a
   family rather than a repeated template.

   Surfaces: hero dark, OP Care white, One Payroll dark, HawkEye warm stone,
   closing dark. That carries the eye down without a long dark run before the
   contact fold and footer.

   Red is reserved for eyebrows, link states and a single rule on each
   product's closing line. It is not used to punctuate capabilities.
   ========================================================================== */

.pr{
  --p-h1:clamp(2rem,1.25rem + 2.3vw,2.875rem);      /* 32 to 46 */
  --p-h2:clamp(1.625rem,1.25rem + 1.3vw,2.125rem);  /* 26 to 34 */
  --p-lead:clamp(1.0625rem,1rem + .35vw,1.3125rem); /* 17 to 21 */
  --p-body:clamp(.9375rem,.9rem + .18vw,1.0625rem); /* 15 to 17 */
  --p-cap:clamp(.9375rem,.9rem + .18vw,1.0625rem);
  --p-eb:.6875rem;
  --p-rule:var(--line-2);
  --p-ink:var(--ink);
  --p-ink2:var(--ink-2);
}
.pr--dark{--p-rule:rgba(255,255,255,.16);--p-ink:#fff;--p-ink2:rgba(255,255,255,.74)}

/* ---- shared roles ---- */
.pr-eb{display:block;margin:0 0 .8rem;font-size:var(--p-eb);font-weight:700;
  letter-spacing:.16em;line-height:1.5;text-transform:uppercase;color:var(--red)}
.pr--dark .pr-eb{color:#ff8c8f}
.pr-name{margin:0;font-size:var(--p-h2);font-weight:600;line-height:1.12;
  letter-spacing:-.012em;color:var(--p-ink)}
.pr-h{margin:.55rem 0 0;font-size:var(--p-lead);font-weight:600;line-height:1.35;
  letter-spacing:-.005em;color:var(--p-ink)}
.pr-p{margin:1rem 0 0;font-size:var(--p-body);font-weight:400;line-height:1.65;color:var(--p-ink2)}
.pr-stmt{margin:0;padding-left:1rem;border-left:2px solid var(--red);
  font-size:var(--p-lead);font-weight:600;line-height:1.4;color:var(--p-ink)}

/* ---- hero: typographic, compact, no photograph ---- */
/* hero: supplied banner behind the existing typographic structure. The left
   third of the photograph is near-black, so the headline sits on it cleanly;
   the gradient eases off across the bulb so the glow still reads. */
.pr-hero{position:relative;isolation:isolate;overflow:hidden;
  background:var(--dark-sec);color:#fff;padding-block:clamp(2.25rem,4.5vw,3.5rem)}
.pr-hero__m{position:absolute;inset:0;z-index:-2;display:block}
.pr-hero__m img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 66%}
.pr-hero__o{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(18,16,14,.66) 0%,rgba(18,16,14,.38) 46%,rgba(18,16,14,0) 76%),
  linear-gradient(90deg,rgba(18,16,14,.95) 0%,rgba(18,16,14,.90) 27%,
    rgba(18,16,14,.58) 45%,rgba(18,16,14,.30) 60%,rgba(18,16,14,.50) 78%,
    rgba(18,16,14,.72) 100%)}
.pr-hero__c{position:relative}
.pr-hero .crumb{margin:0 0 clamp(1.35rem,2.6vw,1.9rem);color:rgba(255,255,255,.86);
  text-shadow:0 1px 10px rgba(10,8,7,.9)}
.pr-hero .crumb a{color:inherit}
.pr-hero .crumb a:hover{color:#ff8c8f}
.pr-hero__g{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  column-gap:clamp(2rem,5vw,5rem);align-items:end}
.pr-hero h1{margin:0;font-size:var(--p-h1);font-weight:600;line-height:1.1;
  letter-spacing:-.016em;color:#fff;max-width:16ch;text-shadow:0 2px 14px rgba(10,8,7,.6)}
.pr-hero__p{margin:0;font-size:var(--p-body);line-height:1.65;color:#fff;max-width:46ch;
  text-shadow:0 1px 10px rgba(10,8,7,.85)}
.pr-hero__jump{display:flex;flex-wrap:wrap;gap:.4rem 2rem;margin-top:1.5rem;
  padding-top:1.25rem;border-top:1px solid rgba(255,255,255,.28)}
.pr-hero__jump a{font-size:var(--p-body);color:#fff;text-decoration:none;text-shadow:0 1px 10px rgba(10,8,7,.85);
  padding:.25rem 0;border-bottom:1px solid rgba(255,255,255,.3);transition:color .2s,border-color .2s}
.pr-hero__jump a:hover{color:#ff8c8f;border-color:#ff8c8f}

/* ---- fold shell ---- */
.pr-fold{padding-block:clamp(2.25rem,4vw,3.25rem)}
.pr-fold--paper{background:var(--paper)}
.pr-fold--stone{background:var(--stone)}
.pr-fold--dark{background:var(--dark-sec)}

/* ======================================================================
   OP CARE — split: photograph left with the real app screen tucked into
   its corner, content right, capabilities two-up on hairlines.
   ====================================================================== */
.pr-op__g{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  column-gap:clamp(2rem,4.5vw,4rem);align-items:stretch}
.pr-op__media{position:relative;margin:0;height:100%}
.pr-op__shot{display:block;width:100%;height:100%;min-height:clamp(300px,34vw,430px);
  object-fit:cover;object-position:82% 50%;border-radius:16px}
.pr-op__app{position:absolute;right:-18px;bottom:-18px;width:clamp(92px,11vw,132px);
  height:auto;border-radius:12px;box-shadow:0 18px 38px rgba(21,20,18,.3)}

.pr-op__caps{list-style:none;margin:clamp(1.35rem,2.5vw,1.9rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,1.9vw,1.4rem) clamp(1.5rem,3vw,2.25rem)}
.pr-op__caps>li{border-top:1px solid var(--p-rule);padding-top:.8rem}
.pr-op__caps h3{margin:0;font-size:var(--p-cap);font-weight:600;line-height:1.35;color:var(--p-ink)}
.pr-op__caps p{margin:.35rem 0 0;font-size:var(--p-body);line-height:1.6;color:var(--p-ink2)}
.pr-op__stmt{margin-top:clamp(1.35rem,2.5vw,1.9rem)}

/* ======================================================================
   ONE PAYROLL — a wide band of the coin photograph, then the argument
   left and the capabilities right as a definition list, not cards.
   ====================================================================== */
.pr-pay__band{display:block;width:100%;height:clamp(140px,16vw,210px);
  object-fit:cover;object-position:50% 50%;border-radius:14px;
  margin-bottom:clamp(1.5rem,2.8vw,2.25rem)}
.pr-pay__g{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  column-gap:clamp(2rem,5vw,5rem);align-items:start}
.pr-pay__stmt{margin-top:clamp(1.35rem,2.5vw,1.9rem)}

.pr-pay__list{margin:0;display:grid;gap:0}
.pr-pay__list>div{display:grid;grid-template-columns:minmax(0,.46fr) minmax(0,1fr);
  gap:.35rem clamp(1.25rem,2.5vw,2rem);
  padding:clamp(.7rem,1.4vw,.95rem) 0;border-top:1px solid var(--p-rule)}
.pr-pay__list>div:last-child{border-bottom:1px solid var(--p-rule)}
.pr-pay__list dt{margin:0;font-size:var(--p-cap);font-weight:600;line-height:1.35;color:var(--p-ink)}
.pr-pay__list dd{margin:0;font-size:var(--p-body);line-height:1.6;color:var(--p-ink2)}

/* ======================================================================
   HAWKEYE — argument and a numbered run of capabilities on the left, the
   photograph stacked over the real platform screen on the right.
   ====================================================================== */
.pr-hk__g{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  column-gap:clamp(2rem,5vw,4.5rem);align-items:start}
.pr-hk__caps{list-style:none;margin:clamp(1.35rem,2.5vw,1.9rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(1rem,1.9vw,1.4rem) clamp(1.5rem,3vw,2.25rem);counter-reset:hk}
.pr-hk__caps>li{counter-increment:hk}
.pr-hk__caps>li::before{content:"0" counter(hk);display:block;margin-bottom:.4rem;
  font-size:var(--p-eb);font-weight:700;letter-spacing:.14em;color:var(--red)}
.pr-hk__caps h3{margin:0;font-size:var(--p-cap);font-weight:600;line-height:1.35;color:var(--p-ink)}
.pr-hk__caps p{margin:.3rem 0 0;font-size:var(--p-body);line-height:1.6;color:var(--p-ink2)}
.pr-hk__stmt{margin-top:clamp(1.35rem,2.5vw,1.9rem)}

.pr-hk__media{margin:0;display:grid;gap:clamp(.9rem,1.8vw,1.25rem)}
.pr-hk__shot{display:block;width:100%;height:clamp(190px,21vw,290px);
  object-fit:cover;object-position:100% 50%;border-radius:14px}
.pr-hk__ui{background:var(--paper);border-radius:14px;padding:clamp(.6rem,1.1vw,.85rem)}
.pr-hk__ui img{display:block;width:100%;height:auto}
.pr-hk__note{margin:.7rem 0 0;font-size:.6875rem;line-height:1.5;color:var(--ink-3);
  padding-left:.7rem;border-left:2px solid var(--line-2)}

/* ---- closing fold, continuous with the contact fold and footer ---- */
.pr-close{background:var(--dark-sec);color:#fff;padding-block:clamp(2.75rem,5.5vw,4.25rem)}
.pr-close__g{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,5vw,5rem);align-items:start}
.pr-close__h{margin:0;font-size:var(--p-h2);font-weight:600;line-height:1.14;
  letter-spacing:-.012em;color:#fff;max-width:20ch}
.pr-close__p{margin:0;font-size:var(--p-body);line-height:1.65;color:rgba(255,255,255,.74)}
.pr-close .tlink{margin-top:1.4rem;color:#fff}
.pr-close .tlink:hover{color:#ff8c8f}

/* ---- responsive ------------------------------------------------------ */
@media(max-width:1040px){
  .pr-hero__m img{object-position:68% 52%}
  .pr-hero__o{background:linear-gradient(180deg,rgba(18,16,14,.84) 0%,rgba(18,16,14,.58) 48%,rgba(18,16,14,.82) 100%)}
  .pr-hero__g{grid-template-columns:minmax(0,1fr);row-gap:1.25rem;align-items:start}
  .pr-hero h1{max-width:22ch}
  .pr-op__g,.pr-pay__g,.pr-hk__g{grid-template-columns:minmax(0,1fr);row-gap:clamp(1.5rem,4vw,2.25rem)}
  .pr-op__media{order:-1}
  .pr-op__shot{height:clamp(300px,42vw,380px)}
  .pr-hk__media{order:-1}
  .pr-pay__list>div{grid-template-columns:minmax(0,1fr)}
  .pr-close__g{grid-template-columns:minmax(0,1fr);gap:1.25rem}
  .pr-close__h{max-width:none}
}
@media(max-width:600px){
  .pr-hero__m img{object-position:74% 50%}
  .pr-hero__o{background:linear-gradient(180deg,rgba(18,16,14,.86) 0%,rgba(18,16,14,.60) 46%,rgba(18,16,14,.84) 100%)}
  .pr-op__caps,.pr-hk__caps{grid-template-columns:minmax(0,1fr)}
  .pr-op__app{right:12px;bottom:-14px;width:84px}
  .pr-hero__jump{gap:.35rem 1.25rem}
}