/* ==========================================================================
   PiPO HRIS — LAYER 21 · PAGE BLOCKS
   The extended blocks the inner pages are built from: split copy/surface,
   the operational journey, fact bands, hub cards, definition columns,
   reference tables and editorial prose. Everything here is token-driven.
   ========================================================================== */

/* ── Split: copy beside a product surface ───────────────────────────────── */
.tpl-split-sec { background: #fff; }
.tpl-split-sec.bg-ink { background: var(--ground); }
.tpl-split-sec.bg-plum { background: var(--ground-indigo); }
.tpl-split-sec--paper { background: var(--paper); }
.tpl-split-sec--mist  { background: var(--mist); }
.tpl-split {
  display: grid; grid-template-columns: .92fr 1.08fr;
  gap: clamp(26px, 3.6vw, 64px); align-items: center;
}
.tpl-split--flip { grid-template-columns: 1.08fr .92fr; }
.tpl-split > * { min-width: 0; }
@media (max-width: 940px) {
  .tpl-split, .tpl-split--flip { grid-template-columns: 1fr; }
  .tpl-split--flip .tpl-split__viz { order: 2; }
}
.tpl-split__copy .h3 { letter-spacing: -.03em; line-height: 1.16; margin-top: .7rem; }
.tpl-split__copy .eyebrow + .h3 { margin-top: .8rem; }
.tpl-split__copy p { font-size: 1rem; line-height: 1.68; color: var(--muted); margin-top: .95rem; max-width: 50ch; }
.on-dark .tpl-split__copy p { color: rgba(255,255,255,.7); }
.on-dark .tpl-split__copy .h3 { color: #fff; }
.tpl-split__copy .tlink { margin-top: 1.4rem; }

.tpl-ticks { list-style: none; margin: 1.3rem 0 0; padding: 0; display: grid; gap: .6rem; }
.tpl-ticks li {
  display: grid; grid-template-columns: 15px 1fr; gap: .7rem; align-items: start;
  font-size: .98rem; line-height: 1.6; color: var(--ink-3);
}
.on-dark .tpl-ticks li { color: rgba(255,255,255,.8); }
.tpl-ticks svg { width: 13px; height: 13px; color: var(--emerald); margin-top: .33rem; }
.on-dark .tpl-ticks svg { color: var(--emerald-300); }

/* ── Operational journey ────────────────────────────────────────────────── */
.tpl-jr-sec .h2 { max-width: 20ch; }
.on-dark.tpl-jr-sec .h2 { color: #fff; }
.tpl-jr-sec .lede { margin-top: 1.1rem; max-width: 60ch; }
.on-dark.tpl-jr-sec .lede { color: rgba(255,255,255,.7); }
.tpl-jr {
  list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 1px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--r-lg); overflow: hidden;
}
.tpl-jr-sec:not(.on-dark) .tpl-jr { background: var(--line); border-color: var(--line); }
@media (max-width: 1080px) { .tpl-jr { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .tpl-jr { grid-template-columns: 1fr; } }
/* Bodies differ in length, so the field lists would start at six different
   heights. Push them to the bottom of the cell and they form one line. */
.tpl-jr__s { background: rgba(255,255,255,.055); padding: clamp(16px, 1.9vw, 24px);
             display: flex; flex-direction: column; }
.tpl-jr-sec:not(.on-dark) .tpl-jr__s { background: #fff; }
.tpl-jr__n {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em;
  color: var(--emerald-300); display: block;
}
.tpl-jr-sec:not(.on-dark) .tpl-jr__n { color: var(--emerald-700); }
.tpl-jr__s h3 { font-size: 1.02rem; font-weight: 700; letter-spacing: -.024em;
  color: #fff; margin-top: .5rem; }
.tpl-jr-sec:not(.on-dark) .tpl-jr__s h3 { color: var(--ink); }
.tpl-jr__s p { font-size: .93rem; line-height: 1.55; color: rgba(255,255,255,.62); margin-top: .5rem; }
.tpl-jr-sec:not(.on-dark) .tpl-jr__s p { color: var(--muted); }
.tpl-jr__s ul {
  list-style: none; margin: .9rem 0 0; padding: .9rem 0 0; margin-top: auto;
  border-top: 1px solid rgba(255,255,255,.1); display: grid; gap: .32rem;
}
.tpl-jr-sec:not(.on-dark) .tpl-jr__s ul { border-top-color: var(--line-soft); }
.tpl-jr__s li {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .04em;
  color: rgba(255,255,255,.58); line-height: 1.45;
}
.tpl-jr-sec:not(.on-dark) .tpl-jr__s li { color: var(--muted-2); }
.tpl-jr__note {
  margin-top: clamp(22px, 2.4vw, 32px); font-size: .95rem; line-height: 1.6;
  color: rgba(255,255,255,.6); max-width: 76ch;
}
.tpl-jr-sec:not(.on-dark) .tpl-jr__note { color: var(--muted); }

/* ── Fact band ──────────────────────────────────────────────────────────── */
.tpl-band-sec { background: var(--paper); }
.tpl-band-sec .lede { margin-top: 1rem; max-width: 62ch; }
.tpl-band {
  margin-top: clamp(26px, 3vw, 40px);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px; background: var(--line); border: 1px solid var(--line);
  border-radius: var(--r-lg); overflow: hidden;
}
.tpl-band__i { background: #fff; padding: clamp(18px, 2.2vw, 26px); }
.tpl-band__i b {
  display: block; font-family: var(--font-display); font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 800; letter-spacing: -.042em; color: var(--ink); line-height: 1;
}
.tpl-band__i span { display: block; font-size: .94rem; line-height: 1.5; color: var(--muted); margin-top: .65rem; }
.tpl-band__i--gold { background: var(--gold-tint); }
.tpl-band__i--gold b { border-top: 2px solid var(--gold); padding-top: .55rem; }

/* ── Hub cards ──────────────────────────────────────────────────────────── */
.tpl-cards-sec { background: #fff; }
.tpl-cards-sec--paper { background: var(--paper); }
.tpl-cards-sec--mist { background: var(--mist); }
/* A hub with short cards and no heading does not need a full section of air
   above them — the hero is right there. */
.tpl-cards-sec--snug { padding-block: clamp(40px, 4.4vw, 68px); }
.tpl-cards-sec--snug .tpl-cards { margin-top: 0; }
.tpl-cards-sec .lede { margin-top: 1.1rem; max-width: 64ch; }
.tpl-cards {
  margin-top: clamp(26px, 3vw, 44px);
  display: grid; grid-template-columns: repeat(var(--cc, 3), 1fr);
  gap: clamp(14px, 1.8vw, 24px);
}
@media (max-width: 980px) { .tpl-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .tpl-cards { grid-template-columns: 1fr; } }
.tpl-card {
  position: relative; display: block; background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(18px, 2.1vw, 26px); text-decoration: none;
  transition: border-color var(--t-fast) var(--e-out), transform var(--t-fast) var(--e-out);
}
.tpl-cards-sec--paper .tpl-card, .tpl-cards-sec--mist .tpl-card { background: #fff; }
a.tpl-card:hover { border-color: var(--emerald); transform: translateY(-2px); }
a.tpl-card:focus-visible { outline: 2px solid var(--emerald); outline-offset: 3px; }
.tpl-card__k {
  display: block; font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--emerald-700); margin-bottom: .7rem;
}
.tpl-card b { display: block; font-size: 1.06rem; font-weight: 700; letter-spacing: -.024em; color: var(--ink); }
.tpl-card > span:not(.tpl-card__k) {
  display: block; font-size: .96rem; line-height: 1.6; color: var(--muted); margin-top: .6rem;
}
.tpl-card__a { width: 15px; height: 15px; color: var(--emerald); margin-top: .8rem; display: block; }
.tpl-card--static { border-style: solid; }
@media (prefers-reduced-motion: reduce) { a.tpl-card:hover { transform: none; } }

/* ── Definition columns ─────────────────────────────────────────────────── */
.tpl-cols-sec { background: var(--paper); }
.tpl-cols-sec .lede { margin-top: 1.1rem; max-width: 64ch; }
.tpl-cols {
  margin-top: clamp(26px, 3vw, 44px);
  display: grid; grid-template-columns: repeat(var(--cc, 3), 1fr);
  gap: clamp(20px, 2.6vw, 44px);
}
@media (max-width: 900px) { .tpl-cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 580px) { .tpl-cols { grid-template-columns: 1fr; } }
.tpl-col { border-top: 2px solid var(--line); padding-top: 1.1rem; }
.tpl-col:first-child { border-top-color: var(--emerald); }
.tpl-col h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: -.024em; color: var(--ink); }
.tpl-col p { font-size: .97rem; line-height: 1.62; color: var(--muted); margin-top: .6rem; }
.tpl-col ul { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .42rem; }
.tpl-col li {
  font-size: .95rem; line-height: 1.55; color: var(--ink-3);
  padding-left: .95rem; position: relative;
}
.tpl-col li::before {
  content: ''; position: absolute; left: 0; top: .6em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--emerald);
}

/* ── Reference table ────────────────────────────────────────────────────── */
.tpl-tbl-sec { background: #fff; }
.tpl-tbl-sec--paper { background: var(--paper); }
.tpl-tbl-sec .lede { margin-top: 1.1rem; max-width: 64ch; }
.tpl-tbl {
  margin-top: clamp(24px, 2.8vw, 40px); overflow-x: auto;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: #fff;
}
.tpl-tbl table { width: 100%; border-collapse: collapse; font-size: .96rem; min-width: 560px; }
.tpl-tbl th, .tpl-tbl td {
  text-align: left; padding: .9rem 1.1rem; border-bottom: 1px solid var(--line-soft);
  vertical-align: top; line-height: 1.55;
}
.tpl-tbl thead th {
  background: var(--paper); font-family: var(--font-mono); font-size: .64rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted-2); font-weight: 500;
}
.tpl-tbl tbody th { font-weight: 700; color: var(--ink); letter-spacing: -.016em; }
.tpl-tbl td { color: var(--muted); }
.tpl-tbl tbody tr:last-child th, .tpl-tbl tbody tr:last-child td { border-bottom: 0; }
.tpl-tbl__n { margin-top: 1rem; font-size: .88rem; line-height: 1.6; color: var(--muted-2); max-width: 78ch; }

/* ── Editorial statement ────────────────────────────────────────────────── */
.tpl-say-sec { background: var(--ground-indigo); }
.tpl-say-sec:not(.on-dark) { background: var(--mist); }
/* The statement lines carry explicit breaks, so the container must be wide
   enough for the longest of them — a 30ch column turned a four-line pull
   quote into a twelve-line one. */
.tpl-say { max-width: min(100%, 1040px); }
.tpl-say__l {
  font-family: var(--font-display); font-size: clamp(1.7rem, 3.2vw, 2.7rem);
  font-weight: 700; letter-spacing: -.036em; line-height: 1.16; color: #fff;
}
.tpl-say-sec:not(.on-dark) .tpl-say__l { color: var(--ink); }
.tpl-say__sub {
  margin-top: 1.5rem; font-size: 1.05rem; line-height: 1.7;
  color: rgba(255,255,255,.66); max-width: 58ch;
}
.tpl-say-sec:not(.on-dark) .tpl-say__sub { color: var(--muted); }
.tpl-say-sec .acc-em { color: var(--emerald-300); }
.tpl-say-sec:not(.on-dark) .acc-em { color: var(--emerald-700); }

/* ── Prose ──────────────────────────────────────────────────────────────── */
.tpl-prose-sec { background: #fff; }
.tpl-prose-sec--paper { background: var(--paper); }
.tpl-prose-sec .lede { margin-top: 1.1rem; max-width: 64ch; }
.tpl-prose { margin-top: clamp(20px, 2.4vw, 32px); max-width: 74ch; }
.tpl-prose > * + * { margin-top: 1.2rem; }
.tpl-prose p { font-size: 1.04rem; line-height: 1.75; color: var(--ink-3); }
.tpl-prose h3 { font-size: clamp(1.14rem, 1.7vw, 1.35rem); letter-spacing: -.024em;
  color: var(--ink); margin-top: 2rem; }
.tpl-prose ul, .tpl-prose ol { padding-left: 1.25rem; display: grid; gap: .55rem; }
.tpl-prose li { font-size: 1.02rem; line-height: 1.68; color: var(--ink-3); }
.tpl-prose strong { color: var(--ink); font-weight: 600; }

/* ── Note ───────────────────────────────────────────────────────────────── */
.tpl-note-sec { background: #fff; padding-block: clamp(30px, 3.2vw, 44px); }
.tpl-note {
  max-width: 82ch; font-size: .94rem; line-height: 1.65; color: var(--ink-3);
  background: var(--st-info-bg); border-left: 3px solid var(--st-info);
  border-radius: 0 var(--r) var(--r) 0; padding: 1rem 1.2rem;
}
.tpl-note--warn { background: var(--st-warning-bg); border-left-color: var(--st-warning); }
.tpl-note--ok { background: var(--emerald-tint); border-left-color: var(--emerald); }
.tpl-note--quiet {
  background: var(--paper); border-left-color: var(--line); color: var(--muted);
  font-size: .88rem;
}

/* ── Surface caption, used under concept UI ─────────────────────────────── */
.tpl-cap-note {
  margin-top: .9rem; font-size: .8rem; line-height: 1.5; color: var(--muted-2);
}
.on-dark .tpl-cap-note { color: rgba(255,255,255,.58); }

/* ── Template hero at phone widths ──────────────────────────────────────────
   The display scale is authored for a reading column, not a 320px viewport:
   at the smallest sizes a single long word ("organisations", "spreadsheets")
   is wider than the gutter allows and pushes the document sideways. Step the
   size down below 420px and let long words break rather than overflow. */
/* Long words may wrap, but they must not hyphenate mid-display-line: a 75px
   headline broken as "spreadsheet-s." is worse than a shorter headline. */
.tpl-hero__copy .h-display,
.tpl-hero__copy .h1,
.tpl-say__l, .tpl-band__i b { overflow-wrap: normal; hyphens: manual; }

/* Beside a product surface the headline shares the row, so it is set smaller
   than a full-bleed display line — otherwise the column is too narrow for the
   words in it. */
.tpl-hero__grid .tpl-hero__copy .h-display {
  font-size: clamp(2.15rem, 3.25vw, 3.15rem);
}
.tpl-hero__grid { align-items: center; }
@media (max-width: 480px) {
  /* Only at phone widths is breaking a long word the lesser evil. */
  .tpl-hero__copy .h-display, .tpl-say__l { overflow-wrap: break-word; }
}
@media (max-width: 420px) {
  .tpl-hero__copy .h-display,
  .tpl-hero__grid .tpl-hero__copy .h-display { font-size: clamp(1.8rem, 8.2vw, 2.35rem); }
  .tpl-hero__copy .lede { font-size: 1rem; }
  .tpl-say__l { font-size: clamp(1.45rem, 7.4vw, 1.9rem); }
}
@media (max-width: 340px) {
  .tpl-hero__copy .h-display,
  .tpl-hero__grid .tpl-hero__copy .h-display { font-size: 1.62rem; }
}

/* ── CTA rows on template pages ─────────────────────────────────────────────
   .ctas is declared per section on the homepage; the template pages need the
   same row, declared once. */
.tpl-hero__cta, .tpl-cta .ctas {
  display: flex; flex-wrap: wrap; align-items: center; gap: .85rem 1.5rem;
}
@media (max-width: 640px) {
  .tpl-hero__cta, .tpl-cta .ctas { gap: .75rem; }
  .tpl-hero__cta .tlink, .tpl-cta .ctas .btn { width: 100%; justify-content: center; }
}

/* ── Hero without a product surface ─────────────────────────────────────────
   Capping the whole copy block at 22ch also capped the lede and the CTA row,
   so a headline-only hero came out as one narrow column with the buttons
   stacked. Cap the headline; let everything else use a reading measure. */
.tpl-hero .tpl-hero__copy { max-width: 100%; }
.tpl-hero__copy .h-display { max-width: 17ch; }
.tpl-hero__grid .tpl-hero__copy .h-display { max-width: 20ch; }
.tpl-hero__copy .lede { max-width: 54ch; }
/* The compact hero must survive this: :not(:has()) outscores the single
   class in layer 19, so --tight was being quietly overruled on every
   calculator page and every article. */
.tpl-hero:not(:has(.tpl-hero__grid)):not(.tpl-hero--tight)
  { padding-block: clamp(56px, 7vw, 104px); }

/* The phone is narrow by nature; centre it in its column rather than letting
   it sit against one edge of a wide split. */
.tpl-split__viz .uxm { margin-inline: auto; }

/* ══════════════════════════════════════════════════════════════════════════
   GOLD, DELIBERATELY MORE PRESENT
   Gold was carrying one metric per surface and little else, which on a green
   site reads as an accident rather than a third brand colour. It now has four
   standing jobs, each of them structural rather than decorative:

     1 · the eyebrow rule that opens every section        (layer 02)
     2 · the rule above a section's leading column        (below)
     3 · the figure that matters on a surface             (existing)
     4 · the hairline that separates a section from the next

   What it is still never: a button, a link, or body text on a light ground —
   #B08F45 is 3.06:1 on white. Where gold must carry words on light, the
   --gold-ink step does it at 5.7:1.
   ══════════════════════════════════════════════════════════════════════════ */

/* 2 · The leading column of every grid opens on gold rather than emerald.
      One rule per section, always in the same place, so it reads as system. */
.tpl-col:first-child,
.tpl-stage:first-child,
.implout > div:first-child { border-top-color: var(--gold) !important; }

/* 4 · A section boundary the eye can find, drawn once and centred. */
.tpl-cards-sec + .tpl-cols-sec::before,
.tpl-prose-sec + .tpl-faq-sec::before,
.tpl-outs-sec + .tpl-split-sec::before {
  content: ''; display: block; width: 54px; height: 2px;
  background: var(--gold); margin: 0 auto clamp(30px, 3.4vw, 46px);
  border-radius: 2px;
}

/* The strategic figure keeps its gold rule, and now so does the band it sits
   in — the number and its ground agree instead of the number floating. */
.tpl-band__i--gold { border-top: 2px solid var(--gold); }
.tpl-band__i--gold span { color: var(--gold-ink); }

/* Tables: the key column heading and the total row carry gold, which is where
   a reader's eye goes on a pricing or comparison table anyway. */
.tpl-tbl thead th:nth-child(2) { color: var(--gold-ink); }
.tpl-tbl tbody tr:first-child th { border-left: 2px solid var(--gold); padding-left: calc(1.1rem - 2px); }

/* On dark grounds gold is safe for text, so the quiet labels use it. */
.on-dark .tpl-jr__note { color: var(--gold-lt); }
.on-dark .tpl-cap-note { color: rgba(212,180,115,.72); }

/* The closing CTA gets a gold edge — the last thing on the page, and the one
   place a little ceremony is earned. */
.tpl-cta-sec { border-top: 2px solid var(--gold); }
.tpl-cta .h2 + .lede { border-left: 2px solid var(--gold-line); padding-left: 1.1rem; }

/* The secondary button on dark: gold outline instead of a white ghost, so the
   CTA pair reads emerald-and-gold rather than green-and-nothing. */
.on-dark .btn--ghost-d,
.tpl-cta .btn--ghost-d {
  border-color: var(--gold-line); color: var(--gold-lt);
}
.on-dark .btn--ghost-d:hover,
.tpl-cta .btn--ghost-d:hover {
  border-color: var(--gold-lt); background: var(--gold-glow); color: #fff;
}