/* ==========================================================================
   THE PRACTICE LAYER
   ==========================================================================
   This section used to be a scroll-driven sequence called "What Zenday is
   for": a month of books coming into balance, with an unexplained variance
   resolving to zero. Two things were wrong with it. It restated the hero and
   the closing block — the same variance, the same resolution, three times on
   one page — and underneath the motion there was no information in it. Four
   acts of atmosphere.

   What was actually missing from the page is this: the feature grid above is
   the accounting engine — ledger, bank feed, reconciliation, close, forecast.
   A firm does not only need the numbers prepared. It needs the clients, the
   correspondence, the work in progress and the paper handled too, and the
   page never said Zenday does any of it.

   So the section is now four solutions, told plainly, each with a small view
   of the thing it names. No scroll hijack: it is four panels, read at a
   glance, in the order a firm meets them.

   Tonally it inverts the feature grid — paper ground, canvas panels — so the
   two product sections do not read as one long field of cards.
   ========================================================================== */

.practice{
  padding:124px 0 128px;
  background:var(--paper);
  border-top:1px solid var(--line-soft);
}


.practice-heading{margin-bottom:66px}


.practice-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:22px;
}


/* --------------------------------------------------------------------------
   A panel
   -------------------------------------------------------------------------- */

.prac{
  display:flex;
  flex-direction:column;
  padding:34px 34px 0;
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:0 1px 2px rgba(24,22,46,.03),0 14px 34px rgba(24,22,46,.04);
  /* Paper, like the product cards, and told apart from the paper section
     behind it by its hairline and a soft lift rather than by a step in value.
     It used to be --canvas, which now sits at the same value as the window
     inside it — the window would have disappeared. */
  background:
    radial-gradient(120% 90% at 14% 0%,rgba(29,27,196,.03),transparent 60%),
    var(--paper);
  overflow:hidden;
  transition:border-color .45s var(--ease),box-shadow .45s var(--ease),transform .45s var(--ease);
}

.prac:hover{
  transform:translateY(-4px);
  border-color:rgba(29,27,196,.18);
  box-shadow:0 28px 66px rgba(24,22,46,.09);
}


.prac h3{
  margin:0;
  font-family:var(--font-display);
  font-optical-sizing:auto;
  font-size:26px;
  font-weight:560;
  line-height:1.1;
  letter-spacing:-.024em;
}

.prac header p{
  max-width:46ch;
  margin:14px 0 0;
  color:var(--muted);
  font-size:14.5px;
  line-height:1.62;
}


/* The three concretes. Set as a list because they are one, and ruled so they
   read as three claims rather than as a run-on. */



/* --------------------------------------------------------------------------
   The view slot
   --------------------------------------------------------------------------
   The panel does not draw the screen — `product-ui.css` does, and it is the
   same kit the eight feature cards use. This is the box it sits in: full
   bleed to the panel's edges, pinned to the bottom so the four line up along
   one edge whatever length the descriptions above them run to.
   -------------------------------------------------------------------------- */

/* The same window the product cards use, so the two sections read as one
   system: the panel is paper, a window is cut through it to the ground, and
   the fragment rests in the window. Filling the remaining space rather than
   pinning to the bottom equalises the four windows across a row. */
.prac-view{
  position:relative;
  flex:1 1 auto;
  display:grid;
  align-content:center;
  margin:26px 0 34px;
  padding:20px 18px;
  border-radius:13px;
  overflow:hidden;
}

/* --------------------------------------------------------------------------
   Narrow
   -------------------------------------------------------------------------- */

@media (max-width:1080px){
  .practice-grid{grid-template-columns:1fr;gap:18px}
  .prac header p{max-width:none}
}
@media (max-width:820px){
  .practice{padding:96px 0 100px}
  .practice-heading{margin-bottom:44px}
  .prac{padding:28px 24px 0;border-radius:16px}
  .prac h3{font-size:24px}
  .prac-view{margin:20px 0 24px;padding:16px 14px}}
@media (prefers-reduced-motion:reduce){
  .prac{transition:none}
  .prac:hover{transform:none}}

/* The same correction as the cards: the sentence is the argument, the
   fragment beneath it is the evidence. */
.prac h3{font-size:29px}
.prac header p{max-width:52ch;font-size:15.5px;line-height:1.6}
.prac-points li{font-size:13.5px}
@media (max-width:820px){ .prac h3{font-size:25px} .prac header p{font-size:15px} }

/* --------------------------------------------------------------------------
   This section's header is centred, and it is the only one that is
   --------------------------------------------------------------------------
   Five of the seven sections open with the identical device: eyebrow in a
   104px column, heading in the middle, lede in a 292px column on the right.
   It is a good composition and it is used five times in a row, which is what
   makes the page read as competent rather than authored — the eye learns the
   shape by the third section and stops reading the header at all.

   The practice layer is the page's midpoint and its pivot: everything above
   is the ledger, everything below is the firm around it. Centring the one
   header that introduces that turn marks it, and breaks the run.
   -------------------------------------------------------------------------- */
.practice .practice-heading{
  grid-template-columns:minmax(0,1fr);
  justify-items:center;
  text-align:center;
  gap:20px;
  max-width:820px;
  margin-inline:auto;
}
.practice .practice-heading>.section-label{padding-top:0}
.practice .practice-heading h2{max-width:22ch;margin-inline:auto}
.practice .practice-heading>p:last-child{max-width:60ch;margin:0 auto}

@media (max-width:820px){
  .practice .practice-heading{text-align:left;justify-items:start}
  .practice .practice-heading h2,
  .practice .practice-heading>p:last-child{margin-inline:0}
}