/* =============================================================================
   Opsy website — the Bli kund page.

   Five blocks down the page, after a picture the user sent: the opening, six
   challenges with a drawing each, what the customer gets (three number
   cards, one wide row, a framed grid of four), four steps on one line, and
   the closing.

   Flat plain CSS on the kit's tokens, `op-` prefix, as css/site.css. Most of
   the page is other pages' parts, used as they stand: the opening, the
   section heading, the reasons grid, the small line drawings and the closing
   panel (css/home.css); the card (css/security.css). New here is the step
   row, and this page's arrangement of the rest.
   Spec: docs/specs/2026-10-06-website-bli-kund-page.md
   ========================================================================== */

/* --- The opening ------------------------------------------------------------ */
/* One phrase of the lead stands out by weight and ink alone: semibold, in
   the brand's deep teal -- the user's ruling (spec, Rev 1). It stood on the
   number highlight's mint chip first, which read as cramped inside a
   sentence. The words are the brief's; marking them is the user's own, from
   every round of their pictures. It names its ink, the lead around it being
   in the quieter one (css/home.css, .op-hero__lead). */
.op-customer__key {
  font-weight: 600;
  color: var(--brand-primary);
}

/* --- Utmaningen ni känner igen ---------------------------------------------- */
/* The section step above the block as under it. An opening leaves 64px to
   what follows it (css/home.css, Opening), which reads as too close where the
   block opens with a section title -- the user's ruling on Bli rådgivare
   (css/advisor.css, Who and what): the block adds what is missing to the
   step, at any width. */
.op-challenges {
  padding-top: calc(var(--op-space-section) - var(--space-8) * 2);
  padding-bottom: var(--op-space-section);
}
/* Six statements, three by two, in reading order. No line between them and
   no card around them -- the user's ruling: they stand apart by their
   spacing, as the three values on Om oss do. 40px between columns, and more
   between the rows, since a cell reads downwards. */
.op-challenges__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(var(--space-7) * 2) var(--space-10);
  margin-top: var(--op-space-intro);
}
/* A challenge: its drawing, then its one sentence. No title: the sentence is
   the whole of it, so it wears the larger body style in the markup. */
.op-challenge {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
/* In a reasons cell the drawing sits at the cell's far end; here it leads,
   on the text's own edge. */
.op-challenge .op-spot {
  align-self: flex-start;
}
.op-challenge p {
  max-width: 34ch;
}

/* --- Vad ni får -------------------------------------------------------------- */
/* Eight benefits under one heading, in three blocks one under the other: the
   three with a number as cards, one across the page's width, and four in the
   home page's reasons grid. The blocks stand a card's gap apart, so the
   three read as one group. */
.op-gains {
  /* A card's padding and the gap between two cards: the card reads them
     (css/security.css, .op-topic), so they are said here as on the page it
     comes from. The padding is a reasons cell's 24px, where that page's
     cards have 40px: the cards' text then starts on the edge the grid's text
     starts from, under them, and the longest of the three titles keeps to
     one line -- at 40px it stood a few pixels wider than its card's column
     and took two, alone of the three. */
  --op-card-pad: var(--space-6);
  --op-card-gap: var(--space-6);
  padding-bottom: var(--op-space-section);
}
.op-gains__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--op-card-gap);
  margin-top: var(--op-space-intro);
}
/* The card is the Säkerhet page's, as it stands. There its ground comes from
   its place in the list, a checkerboard; here it comes from its kind: a
   number card is mint, the wide row grey. Both are that page's own two
   tones -- primitives, as there. These rules weigh the same as the
   checkerboard's and come after them, this stylesheet being loaded last. */
.op-gains .op-topic {
  background: var(--genoa-100);
}
/* A number: the largest type on the card, in the brand's deep teal, as a
   number on its chip (css/home.css, .op-stat__value). Its sign and its unit
   stay on its line. */
.op-gains__figure {
  color: var(--brand-primary);
  white-space: nowrap;
}
/* Full spårbarhet, across the three columns. One sentence under its title:
   the row is kept low, so its text stands in the middle of its height and
   its drawing keeps the small drawing's own size and outline, where a card's
   is one and a half times that. */
.op-gains .op-gains__wide {
  grid-column: 1 / -1;
  align-items: center;
  background: var(--submarine-100);
}
.op-gains__wide .op-spot {
  width: 88px;
  height: 72px;
}
/* The four in the home page's reasons grid (css/home.css, .op-reasons__grid),
   frame and cross with it -- the user's ruling. Under a heading that grid
   stands the intro step down; here it follows the cards as their third
   block. */
.op-gains .op-reasons__grid {
  margin-top: var(--op-card-gap);
}

/* --- Hur ni kommer igång ----------------------------------------------------- */
.op-start {
  /* The number's disc, said once: the disc takes it and the line reads it to
     pass through the disc's middle. The process page's disc (css/process.css,
     .op-steps__num). */
  --op-disc: 40px;
  --op-start-gap: var(--space-10);
  padding-bottom: var(--op-space-section);
}
/* Four steps on one line, equally wide. */
.op-start__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: var(--op-start-gap);
  margin-top: var(--op-space-intro);
}
.op-start__step {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
/* The line through the numbers: one sequence -- the user's ruling. Each step
   draws its own stretch, from its disc on to the next step's, and the last
   draws none: the line ends at the fourth disc, at any width -- the user's
   ruling too (spec, Rev 3); it ran on to the row's end first, as in their
   picture. The disc stands on top of the line. The light ink of the product
   page's connector (css/products.css, --op-step-ink): a line that joins
   steps, where a hairline between cells would be the grey. */
.op-start__step::before {
  content: '';
  position: absolute;
  top: calc(var(--op-disc) / 2);
  left: 0;
  width: calc(100% + var(--op-start-gap));
  border-top: 1px solid var(--brand-border);
}
.op-start__step:last-child::before {
  display: none;
}
/* The number on its disc; its type is the markup's (label-md). The disc's
   mint is one step deeper than the picture panels' -- a primitive: the kit's
   only alias for it names a hover. A label, not text that is read, so it
   names its ink: the brand's deep teal, as on a number chip. Positioned, so
   it paints over the line. */
.op-start__num {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  width: var(--op-disc);
  height: var(--op-disc);
  border-radius: var(--radius-full);
  background: var(--genoa-100);
  color: var(--brand-primary);
}
/* 8px from title to text, as in a product's point: the same pair of type
   styles (css/products.css, .op-point__body). */
.op-start__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* --- Narrow ------------------------------------------------------------------- */
/* As on the other pages: no phone design pass, the page only stacks sensibly. */
@media (max-width: 960px) {
  /* Two challenges a row, and the number cards one over the other. */
  .op-challenges__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .op-gains__cards {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The steps one under the other, each number beside its text, and the line
     turned to run down through the discs: from each on to the next. */
  .op-start__list {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-8);
  }
  .op-start__step {
    flex-direction: row;
    gap: var(--space-5);
  }
  .op-start__step::before {
    top: 0;
    left: calc(var(--op-disc) / 2);
    width: 0;
    height: calc(100% + var(--space-8));
    border-top: 0;
    border-left: 1px solid var(--brand-border);
  }
}
@media (max-width: 560px) {
  .op-challenges__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  /* The wide row stacks as a card does on a phone, its drawing above its
     text (css/security.css): back on the text's edge. */
  .op-gains .op-gains__wide {
    align-items: flex-start;
  }
}