/* ==========================================================================
   THE PRODUCT CARDS
   ==========================================================================
   Eight cards, each carrying a small piece of the interface it names. These
   were stripped in "Clear the graveyard before rebuilding" on a misreading —
   the note was to stop *inventing* product imagery, not to remove the cards
   that were already the strongest thing on the page.

   Restored from 494ecea and remapped onto the Equilibrium palette: 494ecea
   predates the colour purge, so every #1a17cf, #358d6d and stray warm grey in
   it has been pulled onto the page's own ramp.

   Loaded after styles.css and before theme.css: the cards outrank the legacy
   sheet, and the art-direction layer still outranks the cards.
   ========================================================================== */

.library-card{--card-glow-x:50%;--card-glow-y:70%;position:relative;display:flex;flex-direction:column;min-height:460px;overflow:hidden;border:1px solid rgba(23,22,28,.052);border-radius:19px;background:#F6F5F1;box-shadow:0 18px 54px rgba(24,22,46,.022);transition:transform .42s var(--ease),border-color .42s,box-shadow .42s}

.library-card:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(260px circle at var(--card-glow-x) var(--card-glow-y),rgba(29,27,196,.075),transparent 62%);transition:opacity .3s}

.library-card:hover:after{opacity:.7}

.library-card.tone-lilac{background:#EAE9FC}

.library-card.tone-sage{background:#E4F0EA}

.library-card:hover{transform:translateY(-3px);border-color:rgba(29,27,196,.11);box-shadow:0 24px 64px rgba(24,22,46,.055)}

.library-card-header{position:relative;min-height:144px;padding:24px 23px 18px}

.library-card-header>a{position:absolute;top:19px;right:19px;display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(23,22,28,.052);border-radius:50%;color:var(--quiet);background:rgba(253,252,249,.45);font-size:12px}

.library-card-header h3{max-width:230px;margin:26px 0 0;font-size:20px;font-weight:560;line-height:1.09;letter-spacing:-.035em}

.library-card-header p{max-width:250px;margin:10px 0 0;color:var(--quiet);font-size:11px;line-height:1.6}

/* v135: product-specific choreography. It is scoped to the feature grid only. */
.library-card[data-showcase] .library-preview>*{will-change:transform,opacity}

/* =====================================================================
   v135 corrected baseline restoration
   Restores the approved v133/v134 Outcomes and Fits your finance stack
   sections. Product showcase animation styles above remain the v135 delta.
   ===================================================================== */
.v112-difference{position:relative}

/* ==========================================================================
   The grid, and the scale the previews are actually read at
   ==========================================================================
   Two things were wrong the moment these came back.

   1. Eight identical 322px tiles. Same weight, same size, no entry point —
      the eye had nothing to land on. The grid is now twelve columns: the two
      cards that carry the AI story take six each and open the section, the
      six modules beneath them take four. Same eight cards, with a hierarchy.

   2. Every figure inside a preview was authored between 5px and 9px — a grey
      smudge the eye reads as texture and skips. That was patched with `zoom`
      for a while, which worked but meant nothing on the screen was the size
      it claimed to be. The screens are now drawn in `product-ui.css` at 1:1
      and the patch is gone.
   ========================================================================== */

@media (min-width:1180px){
  .feature-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
  .library-card{grid-column:span 4}
  .library-card:nth-child(1),
  .library-card:nth-child(2){grid-column:span 6}
}
@media (min-width:900px) and (max-width:1179px){
  .feature-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .library-card{grid-column:auto}}

/* One column below 900. The base sheet held two all the way down from 1120,
   which put the mockup pane at 216px at a 620px viewport — and a double-entry
   table needs an account name and two money columns, which is about 330px
   before anything ellipses. Two cards of that width need ~840px of viewport,
   so the second column has to go before then. Measured, not assumed: the
   panes were 216px there and every cell in the ledger was truncating. */
@media (max-width:899px){
  .feature-grid{grid-template-columns:minmax(0,1fr)}
  .library-card{grid-column:auto}
}

/* Cards grow to their content. */
.library-card{min-height:0}

/* The preview is a window onto a taller surface, so its last row is always
   cut. At 6px that read as noise; at the real scale it reads as a mistake.
   A fade over the bottom edge makes the cut deliberate — the interface
   continues past the frame rather than stopping in the middle of a row. */
.library-preview::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:64px;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(253,252,249,0),rgba(253,252,249,.92) 78%,var(--paper));
}

/* --------------------------------------------------------------------------
   Card head, at the size the card actually is.
   The 20px/11px pair was drawn for a 322px tile. On a 437-668px card the
   description reads as a caption for something else — and at 11px Instrument
   Sans puts under 2px between words (its space is .175em), so "books into"
   sets as "booksinto". Both sizes go up; the two lead cards go up further,
   because a card twice the width should not whisper at the same volume.
   -------------------------------------------------------------------------- */
.library-card-header{padding:28px 28px 22px;min-height:0}

.library-card-header h3{max-width:20ch;margin:0;font-size:23px;letter-spacing:-.028em}

.library-card-header p{max-width:44ch;margin:12px 0 0;font-size:14.5px;line-height:1.55;letter-spacing:-.006em}

.library-card-header>a{top:24px;right:24px;width:32px;height:32px;font-size:13px}
@media (min-width:1180px){
  .library-card:nth-child(1) .library-card-header,
  .library-card:nth-child(2) .library-card-header{padding:34px 34px 24px}
  .library-card:nth-child(1) .library-card-header h3,
  .library-card:nth-child(2) .library-card-header h3{font-size:29px;letter-spacing:-.032em}
  .library-card:nth-child(1) .library-card-header p,
  .library-card:nth-child(2) .library-card-header p{font-size:16px;max-width:46ch}}
@media (max-width:620px){
  .library-card-header{padding:22px 20px 18px}
  .library-card-header h3{font-size:21px}
  .library-card-header p{font-size:14px}}

/* Instrument Sans sets its space at roughly .18em — narrow for the face, and
   at preview sizes that is under two rendered pixels, so "Bank feed" fuses
   into "Bankfeed" and "On track" into "Ontrack". Opening the word gap inside
   the previews costs nothing anywhere else and is the difference between a
   label you read and a smudge you skip. */

/* ==========================================================================
   The preview slot
   ==========================================================================
   The card does not draw the fragment. `product-ui.css` does. This is only
   the box it sits in, and the box has no surface of its own — the fragment
   floats on the card's own ground, which is what makes it read as a close-up
   rather than as a small application embedded in a card.
   ========================================================================== */

/* Always content-sized. The fragments are deliberately different heights —
   a ring is not a mail draft — so a common fixed height would only pad the
   short ones out with air. `margin-top:auto` pins each one the same distance
   from the bottom of its card instead, and the grid row equalises the cards
   themselves. */
.library-preview{
  position:relative;
  height:auto;
  margin:auto 18px 18px;
  isolation:isolate;
  transition:transform .45s var(--ease);
}
.library-card:hover .library-preview{transform:translateY(-2px)}

@media (min-width:1180px){
  /* The two lead cards are half again as wide; their fragments get the extra
     width rather than extra height. */
  .library-card:nth-child(1) .library-preview,
  .library-card:nth-child(2) .library-preview{margin:auto 24px 24px}
}
@media (max-width:620px){
  .library-preview{margin:auto 14px 14px}
}

@media (prefers-reduced-motion:reduce){
  .library-preview,
  .library-card:hover .library-preview{transition:none;transform:none}
}

/* ==========================================================================
   Where the eye should land
   ==========================================================================
   The screens got so much better that they took the card over: 23px of title
   and a 14.5px sentence sitting on top of a 492px application panel, and the
   eye went straight past the words to the interface. On a marketing page that
   is backwards. The title makes the claim, the sentence explains it, and the
   screen is the evidence — in that order, and the sizes should say so.

   The fragments are one moment each now (see product-ui.css); this
   is the other half of the same correction. The copy goes up, the screens come
   down, and the head gets room to breathe before the evidence starts.
   ========================================================================== */

.library-card-header{padding:32px 30px 30px}
.library-card-header h3{font-size:26px;letter-spacing:-.03em;line-height:1.06}
.library-card-header p{
  max-width:42ch;
  margin:14px 0 0;
  color:var(--muted);            /* was the quiet grey — this is the argument */
  font-size:15.5px;
  line-height:1.58;
}

@media (min-width:1180px){
  .library-card:nth-child(1) .library-card-header,
  .library-card:nth-child(2) .library-card-header{padding:38px 38px 34px}
  .library-card:nth-child(1) .library-card-header h3,
  .library-card:nth-child(2) .library-card-header h3{font-size:34px;letter-spacing:-.034em}
  .library-card:nth-child(1) .library-card-header p,
  .library-card:nth-child(2) .library-card-header p{font-size:17px;max-width:52ch;line-height:1.55}

  .library-card:nth-child(1) .library-preview,
  .library-card:nth-child(2) .library-preview{margin:auto 24px 24px}
}
@media (max-width:620px){
  .library-card-header{padding:24px 22px 22px}
  .library-card-header h3{font-size:23px}
  .library-card-header p{font-size:15px}
}