/* ============================================================
   LEVRG v3 — INNER-PAGE CHROME

   The first capability page (custom automations) needs a header that is NOT
   the home hero: the hero's composition is a job-sheet fan cropped at the fold
   with centred type, and it is founder-locked for the home page specifically.
   Repeating it on every inner page would make each one look like a second
   home page and would bury the thing the page is actually about.

   So an inner page keeps the ONE piece of the hero that carries identity — the
   floating white pill nav — and drops everything else. Type goes left-aligned,
   because an inner page is read rather than landed on.

   This file is the template for the other four capability pages. Anything
   added here should be a thing every capability page needs, not a thing this
   one page wants.
   ============================================================ */

.ph { position: relative; background: var(--paper); padding-block: var(--s3) var(--s7); }
.ph__nav { position: relative; z-index: 50; }
/* the pill, identical to the home hero's — same component, same shadow, so the
   two pages read as one site */
.ph__pill {
  background: var(--white); border-radius: var(--r-pill); padding: 10px 12px 10px 22px;
  box-shadow: 0 1px 2px rgba(15,15,15,0.05), 0 10px 26px -14px rgba(15,15,15,0.22);
}
.ph__pill .nav { border: 0; padding: 0; }
@media (max-width: 900px) { .ph__pill { padding: 10px 12px; } }

.ph__body { margin-top: var(--s7); max-width: 100%; }
.ph h1 { font-size: clamp(38px, 5.0vw, 68px); line-height: 1.04; letter-spacing: -0.018em; max-width: 18ch; }
.ph__lede { margin-top: var(--s4); max-width: 54ch; }
.ph__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s5); }
.ph__alt { font-size: var(--t-sm); color: var(--ink-3); }
.ph__alt a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--line-2); }
.ph__alt a:hover { border-bottom-color: var(--ink); }

/* ⚠️ THE BREADCRUMB IS DEFINED IN shell.css, NOT HERE. It was defined in BOTH,
   and page.css loads after shell.css — so this copy silently won, and a
   contrast fix applied to the real one had no effect on any page that loads
   this file. The failure was invisible in the stylesheet and only showed up as
   the sweep reporting the same 4.33 after the colour had been changed.
   Two definitions of one component is not redundancy, it is a coin toss
   decided by load order. → shell.css `.crumb`. */

/* ---- GROUPED RULE SETS --------------------------------------
   The home page shows four rules. This page shows all of them, grouped, and a
   group needs a heading that is not another <h2> competing with the section. */
.grp + .grp { margin-top: var(--s7); }
.grp__h { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s3);
  padding-bottom: var(--s3); }
.grp__t { font-size: var(--t-lg); font-weight: var(--w-display); font-family: var(--display);
  color: var(--ink); letter-spacing: -0.028em; line-height: 1.1; }
.grp__n { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-4); white-space: nowrap; }

/* ---- THE ANATOMY OF ONE RULE --------------------------------
   One worked example, opened up. Three parts, because a rule has exactly three
   parts and a reader who sees them once can read every row on the rest of the
   page without a key.

   Sized from the container, never from the copy, so a longer label cannot move
   the connectors (#263). */
.anat { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--s5); }
@media (max-width: 900px) { .anat { grid-template-columns: 1fr; gap: var(--s4); } }
.anat__c { border-top: 1px solid var(--line-2); padding-top: var(--s3); }
.anat__k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--brand); }
.anat__t { font-size: var(--t-md); font-weight: 600; color: var(--ink);
  letter-spacing: -0.018em; margin-top: 10px; line-height: 1.2; font-family: var(--display); }
.anat__b { font-size: var(--t-sm); line-height: 1.55; color: var(--ink-3); margin-top: 8px; }

/* ---- THE CLOSING ARGUMENT EVERY CAPABILITY PAGE ENDS ON -----
   D-142.2, guard 2: every capability page ends the same way — it does not come
   on its own, and here is the call. This is that block, made a component so
   the other four pages cannot quietly drift out of it.

   🔴 It is INK, not green, and it quotes no price. Both of those are load-
   bearing: green is a signal on this site and never a fill, and no page on
   this site quotes a price anywhere. */
.onlyw { background: var(--ink); color: var(--white); border-radius: var(--r-xl);
  padding: var(--s6); position: relative; overflow: hidden; }
.onlyw h2 { color: var(--white); max-width: 20ch; }
.onlyw p { color: rgba(255,255,255,0.78); margin-top: var(--s3); max-width: 52ch;
  font-size: var(--t-md); line-height: 1.45; }
.onlyw__acts { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); margin-top: var(--s5); }
.onlyw .btn--ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,0.3); box-shadow: none; }
.onlyw .btn--ghost:hover { border-color: var(--white); }
.onlyw .btn--brand { background: var(--white); color: var(--ink); }
.onlyw .btn--brand:hover { background: #EDEDED; }
@media (max-width: 700px) { .onlyw { padding: var(--s5) var(--s4); } }

/* ---- TOUCH TARGETS ------------------------------------------
   The sweep found the breadcrumb links rendering 16px tall and the "ring it
   yourself" link 20px on every touch width — the line box and nothing more.
   Same fix as the home page's footer links: padding, not font-size, because
   the type scale is not the problem.

   The breadcrumb matters more than it looks. A capability page is reachable
   from search, so for some visitors it is the FIRST page of the site they see
   and the crumb is their only way up (D-142.4 — this is a website, not a
   landing page). A way up that cannot be tapped is not a way up. */
@media (max-width: 1000px) {
  .crumb { flex-wrap: wrap; }
  .crumb a, .ph__alt a { display: inline-flex; align-items: center; min-height: 44px; }
  .nav__brand { min-height: 44px; }
}

/* ---- RULES, AS A LIST NOT A TABLE ---------------------------
   ⚠️ REPLACED THE THREE-COLUMN ROWS. Founder: "I don't like the table format,
   mainly because phones would have issues displaying in a professional way."

   He was right twice over. The third column ("typically / weekly / daily") is
   what made a list of rules read as a table — and its values were invented to
   give the column something to hold, which is a worse problem than the layout.
   Both are gone.

   auto-fit rather than a column count, so it reflows to one column on its own.
   There is no breakpoint to get wrong and no row that can half-collapse — the
   exact failure mode a table has on a narrow screen. */
.rules { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: var(--s5) var(--s6); align-items: start; }
.rule { border-top: 1px solid var(--line); padding-top: var(--s3); }
.rule__n { font-size: var(--t-md); font-weight: 600; color: var(--ink);
  letter-spacing: -0.018em; line-height: 1.2; font-family: var(--display); }
.rule__d { font-size: var(--t-sm); line-height: 1.55; color: var(--ink-3); margin-top: 8px; }
/* the arrow is the trigger/action hinge — ink so it reads at a glance */
.rule__d b { color: var(--ink); font-weight: 600; }

/* the page head sat --s7 clear of the first section, on top of that section's
   own --s8 — 224px of nothing between the CTA and the page's first line */
.ph { padding-bottom: var(--s4); }