/* =============================================================================
   Opsy website — the home view.

   Same rules as css/site.css: flat plain CSS, kit tokens, the `op-` prefix.
   Layout follows concept Image 4
   (output/imagegen/2026-10-04-full-page-concepts/01-editorial-continuity.png);
   the copy is the brief's, verbatim.
   Spec: docs/specs/2026-10-04-website-home-style-spike.md
   ========================================================================== */

/* --- Hero ------------------------------------------------------------------ */
/* The near step under the flow panel, where a new section would take the
   larger one: the numbers sit nearer the hero they back up than the section
   they come before (the steps: css/site.css, Page). */
.op-hero {
  padding-block: var(--space-4) var(--op-space-near);
}
.op-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  padding-bottom: var(--space-10);
  text-align: center;
}
/* The listing line as the brief draws it: a pill with a dot in front. The dot
   is decoration -- the line says the same without it. */
.op-hero__listing {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1-5) var(--space-3-5);
  border: 1px solid var(--brand-bg-hover);
  border-radius: var(--radius-full);
  background: var(--brand-bg);
  font-weight: 500;
  color: var(--brand-action);
}
.op-hero__listing::before {
  content: '';
  flex: none; /* stays round when the line wraps on a phone */
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: var(--status-success);
}
/* 13.5em holds the headline to the blueprint's two lines at any size. */
.op-hero__title {
  max-width: 13.5em;
}
/* A lead, the line under a headline, is in the quieter ink so the headline
   keeps the stage. That is the secondary ink's one job on this page: text
   that is read under a title carries no colour of its own and takes the
   kit's body ink. */
.op-hero__lead {
  color: var(--text-secondary);
  text-wrap: balance;
}
.op-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}
/* A shared minimum, so the two buttons read as a pair whatever their labels. */
.op-hero__actions .op-btn {
  min-width: 160px;
}

/* --- Opening: the hero on a page that is not the home page ------------------ */
/* The hero's centred column with room of its own, shared by the pages after
   the home page (it stood in css/products.css while one page had it). Two
   things differ from the hero. Nothing stands between the menu and the
   headline -- the home page has its listing pill there, which is why its
   hero leaves only 16px above -- so an opening leaves 64px, and its headline
   starts at the height the home page's does (16px, the pill, 16px: about
   60px). And what follows an opening is the page's own first block: the 64px
   under the column is the whole gap to it, so the section adds no step of
   its own. These rules come after the hero's, which they override at equal
   weight. */
.op-opening {
  padding-block: calc(var(--space-8) * 2) 0;
}
.op-opening .op-hero__inner {
  padding-bottom: calc(var(--space-8) * 2);
}
/* A lead of several sentences, where the home page's is one: held to the
   descriptions' one width (.op-intro__lead, below), and 8px further under
   the headline than the column's own gap. */
.op-opening__lead {
  max-width: 800px;
  margin-top: var(--space-2);
}
/* A long headline -- over about sixty letters, as Bli kund's and Bli
   rådgivare's -- takes a smaller size on a wider measure: at the display
   style's 68px Bli kund's stood on four lines, too many (the user's ruling,
   2026-10-06). The size runs from the same 32px on a phone to 56px at
   1280px, where the display style (css/site.css, .op-display) goes on to
   68px. The measure is in em, so a smaller letter alone would break at the
   same words: 17em holds Bli kund's to three lines and Bli rådgivare's to
   two. After the hero's rules and the display style, which it overrides at
   equal weight. */
.op-hero__title--long {
  max-width: 17em;
  font-size: clamp(32px, calc(32px + 24 * (100vw - 390px) / 890), 56px);
}

/* --- The flow panel: the page's one loud element ---------------------------- */
/* Two columns: the five steps as an accordion on the left, the open step's
   drawing on the right. Spec: docs/specs/2026-10-05-website-flow-accordion.md */
.op-flow {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr);
  column-gap: var(--space-10);
  align-items: center;
  padding: var(--space-8) var(--space-9) var(--space-9);
  /* No drawn edge: the fill alone marks the panel. The border stays, clear,
     because forced-colors mode drops the fill and paints borders -- there it
     is the panel's only outline. */
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  /* A flat mint, the tone the drawings were approved on: a picture's ground is
     never a gradient (the drawings rule). A primitive: its only alias in the
     kit names a hover. */
  background: var(--genoa-100);
}
.op-flow__side {
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

/* The steps: an accordion with one step always open. A row borrows the kit
   Accordion's 16px header padding and its way of opening -- a grid row going
   from 0fr to 1fr, so the text's own height drives it (components/Accordion);
   the title is the kit's `subhead`. The hairline under a step is the track
   its timer line runs on. */
.op-flow__steps {
  /* Room held so the panel keeps one height while the steps advance:
     js/flow.js measures the longest text and writes the list's full height
     here. The spare room sits under the list. */
  min-height: var(--op-flow-hold, 0px);
}
.op-flow__step {
  position: relative;
  border-bottom: 1px solid var(--brand-border);
}
.op-flow__trigger {
  appearance: none;
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-4) 0;
  border: 0;
  background: none;
  /* The body ink, named outright: a button does not inherit it. A closed step
     reads as dark as any text; the open one is marked by its teal, its text
     and its timer line, and a step pointed at borrows that teal -- going dark
     on hover would not show. */
  color: var(--text-primary);
  text-align: left;
  cursor: pointer;
  transition: color var(--motion-fast) var(--ease-standard);
}
.op-flow__trigger:hover {
  color: var(--brand-primary);
}
.op-flow__trigger[aria-expanded='true'] {
  color: var(--brand-primary);
}
/* The step number. It has one width, which puts the five titles, and the
   text under them, on one left edge. */
.op-flow__num {
  flex: none;
  min-width: var(--space-10);
}
/* visibility rides the same token as the row, as in the kit Accordion: a
   closed step's text leaves the accessibility tree once the row has shut. */
.op-flow__desc {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
  transition:
    grid-template-rows var(--motion-base) var(--ease-standard),
    visibility var(--motion-base);
}
.op-flow__step.is-open .op-flow__desc {
  grid-template-rows: 1fr;
  visibility: visible;
}
.op-flow__desc-in {
  min-height: 0; /* lets the row close to nothing */
  overflow: hidden;
}
.op-flow__text {
  /* In from the left by the number's width and the gap after it. */
  padding: 0 0 var(--space-5) calc(var(--space-10) + var(--space-2));
  color: var(--text-primary);
}
/* The timer line: 2px in --brand-primary on the step's hairline -- the old
   strip's indicator, now moving. It rests at no width and only the timer's
   animation lets it out (Motion, below), so where nothing advances -- reduced
   motion, no script, after a click -- there is no line. */
.op-flow__timer {
  position: absolute;
  right: 0;
  bottom: -1px;
  left: 0;
  height: 2px;
  background: var(--brand-primary);
  transform-origin: left center;
  scale: 0 1;
}
/* The open step's title on a line of its own: only where the steps are
   number chips (Narrow, below). */
.op-flow__current {
  display: none;
}

/* Every step's drawing shares one grid cell, so the stage keeps one size. A
   drawing leaves at once and only the arriving one fades in: at the end of a
   cycle the leaving drawing has already faded part by part, and a fade on the
   panel would flash it whole again on the way out. */
.op-flow__stage {
  display: grid;
  min-width: 0;
}
.op-flow__panel {
  grid-area: 1 / 1;
  min-width: 0;
  visibility: hidden;
  opacity: 0;
}
.op-flow__panel.is-selected {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--motion-base) var(--ease-out);
}

/* --- Pictures ---------------------------------------------------------------- */
/* A picture is a flat file: an image, or in the flow a clip over one. It is
   exported from its master, the drawing in website/drawings/, where every
   rule that draws it lives (.claude/rules/opsy-website-drawings.md); a page
   knows only the box. A picture fills the width it is given, as the drawing
   did, and its ratio is its file's (the width and height on the tag). */
.op-art {
  width: 100%;
  height: auto;
}
/* Where a picture has a render per size its <picture> is no box of its own:
   the image is the layout's child, as the drawing was. */
.op-pic {
  display: contents;
}
/* A flow step's clip lies over its still, in the same box. The still is what
   shows until js/flow.js has clips to play (.is-clips): with reduced motion,
   without the script, or where a clip will not play. While clips play the
   still stands aside, so a step opens on an empty stage, as its drawing does. */
.op-flow__panel {
  position: relative;
}
.op-flow__clip {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}
.op-flow.is-clips .op-flow__still {
  visibility: hidden;
}
.op-flow.is-clips .op-flow__panel.is-selected .op-flow__clip {
  visibility: visible;
}

/* --- Motion ------------------------------------------------------------------- */
/* One clock. --op-loop is how long a step stays open and, the same number,
   the length of its clip: the drawing builds, rests and fades out as one
   while the timer line under the step fills; when the line is full js/flow.js
   opens the next step. A click on a step starts the clock there. How the
   drawing moves inside that time -- the pace, the beats, the keyframes -- is
   the master's (drawings/motion.css); a clip is that motion filmed over one
   loop, so a new length here means a new export.

   --op-loop is a local value and not a kit token on purpose: --motion-base
   cannot carry a loop, because the reduced-motion override zeroes it and a
   zeroed loop strobes (the kit's own note in tokens.scss), and the kit's two
   loop tokens, spin and pulse, mean other things.

   Nothing here applies until flow.js marks the panel .is-live: without the
   script the page shows the open step's complete, still picture. .is-resting
   holds the timer and the clip together while the panel is off screen, and
   .is-waiting holds the timer until the open step's clip can play. The timer
   sits inside a no-preference query, so a reader who asked for reduced motion
   gets still pictures and steps that open only by hand. There is no pause
   control and no pause on hover -- the user's rulings
   (docs/specs/2026-10-05-website-flow-accordion.md). */
.op-flow {
  --op-loop: 6s;
  --op-play: running;
}
.op-flow.is-resting,
.op-flow.is-waiting {
  --op-play: paused;
}

/* The timer line, let out along the step's hairline. */
@keyframes op-flow-timer {
  from { scale: 0 1; }
  to { scale: 1 1; }
}

@media (prefers-reduced-motion: no-preference) {
  /* The timer. `linear`, so the line's length reads as time; it ends where
     the cycle ends, and its animationend is what flow.js listens for. */
  .op-flow.is-live.is-auto .op-flow__step.is-open .op-flow__timer {
    animation: op-flow-timer var(--op-loop) linear both;
    animation-play-state: var(--op-play);
  }
}

/* --- Stats -------------------------------------------------------------------- */
/* A KPI row: five standalone numbers. Figures stay proportional -- tabular
   figures are for columns that must align, and would loosen a lone number.
   The section step under it, the larger of the two gaps around it (see
   Hero): what follows is a new section. */
.op-stats {
  padding-bottom: var(--op-space-section);
}
.op-stats__list {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
/* The markup reads label then value (dt, dd); the eye gets the value first.
   8px between them: the label stands clear of the value's highlight. */
.op-stat {
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding-inline: var(--space-5);
  border-left: 1px solid var(--border-subtle);
  text-align: center;
}
.op-stat:first-child {
  border-left: 0;
}
/* A highlight. A number sits on one as wide as itself (the row centres it, so
   it does not stretch), and so does one word of the closing panel's heading
   (.op-closing__live). A heading's line box already leaves 8px above and
   below the glyphs, so 4px of padding reads as 12px, the same as the sides.
   An 8px corner: a marker's stroke, where a pill would read as a button. */
.op-stat__value,
.op-closing__live {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
}
/* The fill is a primitive: one step deeper than the flow panel's own mint
   (--brand-bg), which is too faint for a mark this small, and the kit's only
   alias for this step names a hover. */
.op-stat__value {
  background: var(--genoa-100);
  color: var(--brand-primary);
  white-space: nowrap;
}
.op-stat__label {
  max-width: 18ch;
}

/* --- Section intro --------------------------------------------------------------- */
/* A section's label, heading and lead, left-aligned: on the edge the content
   under them starts from, so a section has one axis. The page's one centred
   block is its opening, the hero. */
.op-intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
/* The lead's width is 800px, the user's ruling of 2026-10-06, and the one
   width of every description on the site: a section's lead here, a page's
   opening lead (.op-opening__lead) and a step's text on Så fungerar det
   (css/process.css). They were measures in characters -- 64ch, 62ch and 60ch,
   which is where 726px came from: 64 times the width of Inter's 0 at 18px.
   At 800px a lead runs to some 93 characters a line; it is two or three
   lines, so that was taken. */
.op-intro__lead {
  max-width: 800px;
  color: var(--text-secondary);
}

/* --- Offers ------------------------------------------------------------------------ */
.op-offers {
  padding-bottom: var(--op-space-section);
}
.op-offers__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--space-8);
  margin-top: var(--op-space-intro);
}
.op-offer {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
/* A picture's panel: light grey on the white page, so the white paper in the
   drawings has a ground and the mint inside them is the only colour. A
   primitive: --submarine-100's two aliases are a border and a pressed state.
   It is named once here, as a local value, because a part that sits on the
   panel cuts its gap in the panel's own colour (the network's ticks). */
.op-offer__media {
  --op-panel: var(--submarine-100);
  display: grid;
  place-items: center;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--op-panel);
}
.op-offer__media .op-art {
  width: 86%;
}
.op-offer__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
/* Grows, so the three links share a baseline whatever the text lengths. */
.op-offer__text {
  flex: 1;
}

/* --- Trust band ----------------------------------------------------------------------- */
/* A light band: the brand's mint, with dark text on it. The page's dark ground
   is the footer's.
   Spec: docs/specs/2026-10-05-website-trust-section.md */
.op-trust {
  padding-block: calc(var(--space-9) * 2);
  background: var(--brand-bg);
}
.op-trust__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: var(--space-10);
}
.op-trust__eyebrow {
  margin-bottom: var(--space-4);
}
/* A strip of marks: one white panel, a mark and its label in each cell,
   hairlines between. No cell has an outline or a fill of its own -- a label
   in its own outlined box is how a button is drawn, and these do nothing. */
.op-trust__marks {
  display: grid;
  /* The fifth label is twice the length of the others; its cell is a little
     wider, so it stays on one line on a wide screen and breaks at its comma on
     a narrower one. */
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.3fr);
  margin-top: var(--op-space-intro);
  overflow: hidden;
  border: 1px solid var(--brand-border);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.op-trust__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-height: 88px;
  padding: var(--space-4);
  color: var(--text-primary);
}
.op-trust__mark + .op-trust__mark {
  border-left: 1px solid var(--brand-border);
}
/* Not balanced: a label that wraps should break where it fills, which for the
   fifth is at its comma; evened lines would split "EU-baserad drift". */
.op-trust__label {
  min-width: 0;
}

/* --- Reasons ------------------------------------------------------------------------------ */
/* Four framed cells, after a reference the user chose: a picture in each top
   right corner, the title and text at the bottom left.
   Spec: docs/specs/2026-10-05-website-reasons-grid.md */
.op-reasons {
  padding-block: var(--op-space-section);
}
/* The frame takes the page's panel corner, where the reference's is square.
   A row is as tall as its own tallest cell: made equal, the row with the
   shorter texts carried the difference as empty room under them. */
.op-reasons__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: var(--op-space-intro);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
/* The picture, then a fixed step down to the title -- so the four titles sit
   on two shared lines whatever the texts' lengths. The reference anchors its
   text to the cell's foot, which lines titles up only where the texts are
   equally long; these run from two lines to four. */
.op-reason {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  padding: var(--space-6);
}
.op-reason:nth-child(even) {
  border-left: 1px solid var(--border-subtle);
}
.op-reason:nth-child(n + 3) {
  border-top: 1px solid var(--border-subtle);
}
/* A reason's picture: a mark with one mint fill, a flat file like every
   picture (Pictures, above). Decoration: the title says the thing. */
.op-spot {
  flex: none;
  align-self: flex-end;
  width: 88px;
  height: 72px;
}
/* The same at a mark's size: the trust strip. 44px, so the stars of a mark's
   ring read as stars on any screen. */
.op-spot--mark {
  align-self: auto;
  width: 44px;
  height: 44px;
}
/* 12px from title to text, as in an offer card: the same pair of type styles. */
.op-reason__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 40ch;
}

/* --- Closing panel -------------------------------------------------------------------------- */
.op-closing {
  padding-bottom: var(--op-space-section);
}
/* The page's closing call, on the sections' left axis: heading and text on
   the left, the action at the right end, level with them. A grid filled by
   columns: with two rows named, the heading and the text fill the first
   column top to bottom and the action, across both rows, takes the second --
   so the markup stays in reading order, heading, text, action. */
.op-closing__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  grid-auto-flow: column;
  gap: var(--space-4) var(--space-8);
  /* 40px at the sides, the user's ruling on seeing the panel on the OpsyOne &
     OpsyGO page. (It had a reasons' cell's own 24px first, which put its text
     on the line of the cells above it on the home page, and read as cramped
     beside the 56px above and below.) */
  padding: calc(var(--space-7) * 2) var(--space-10);
  /* The fill alone marks the panel, behind a clear border as the flow panel's
     is (see .op-flow). One tone deeper than that panel's mint: the tone of
     the number chips. A primitive: the kit's only alias for this step names
     a hover. */
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: var(--genoa-100);
}
.op-closing__text {
  color: var(--text-secondary);
}
/* The heading's word "live" as a tag: the numbers' highlight (its shape is
   set with theirs, under Stats) and the listing pill's dot before it (Hero).
   An inline box and not a flex one, which would take its baseline from the
   dot and drop the word below the heading's line. The negative margin takes
   the padding back, so the line keeps its height. The fill is a primitive:
   the drawings' highlight (--op-lit), a step deeper than the numbers', whose
   own tone is this panel's ground; the kit's only alias for it names a
   border. */
.op-closing__live {
  display: inline-block;
  margin-block: calc(var(--space-1) * -1);
  background: var(--genoa-200);
  white-space: nowrap;
}
/* 0.13em up puts the dot's middle on the middle of the letters' x-height. */
.op-closing__live::before {
  content: '';
  display: inline-block;
  width: 0.3em;
  height: 0.3em;
  margin-right: 0.25em;
  border-radius: var(--radius-full);
  background: var(--status-success);
  vertical-align: 0.13em;
}
/* The dot breathes, by CSS alone: the page's one motion outside the flow.
   Under reduced motion the rule is not there and the dot stands still. 2s is
   a local length, like the flow's --op-loop: the kit's motion tokens time
   transitions and are zeroed for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .op-closing__live::before {
    animation: op-closing-pulse 2s ease-in-out infinite;
  }
}
@keyframes op-closing-pulse {
  50% {
    opacity: 0.35;
  }
}
/* Across both rows of the second column, centred on the heading and text. */
.op-closing__action {
  grid-row: span 2;
  align-self: center;
}

/* --- Narrow ------------------------------------------------------------------------------------ */
/* The flow has its phone layout (just below); the rest of the page has had no
   phone design pass and only stacks sensibly. */
@media (max-width: 960px) {
  /* The flow on a phone. The panel becomes one five-column grid and the
     accordion's wrappers dissolve into it (display: contents), so its parts
     can be set out in rows: the head, the five steps as number chips, the open
     step's title, the timer line, the drawing, the text.
     Specs: docs/specs/2026-10-05-website-phone-flow-chips.md (the chips),
     docs/specs/2026-10-05-website-flow-accordion.md (the rest). */
  .op-flow {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    column-gap: var(--space-2);
    align-items: stretch;
    padding: var(--space-6) var(--space-5);
  }
  .op-flow__side,
  .op-flow__steps,
  .op-flow__step {
    display: contents;
  }
  /* The panel's label, across the first row. */
  .op-flow__head {
    grid-area: 1 / 1 / auto / -1;
  }
  /* Number chips: all five steps in view as numbers. Each heading is locked
     to the row and takes the next free column. */
  .op-flow__heading {
    grid-row: 2;
    margin-top: var(--space-5);
  }
  /* 44px is a comfortable touch target; 16px numerals are the kit
     SegmentedControl's large size. */
  .op-flow__trigger {
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 0;
    border: 1px solid var(--brand-border);
    border-radius: var(--radius-sm);
    background: var(--surface-card);
    font-size: 16px;
  }
  .op-flow__trigger[aria-expanded='true'] {
    border-color: var(--brand-primary);
    background: var(--brand-primary);
    color: var(--white);
  }
  /* A chip centres its number: the width that lines up the wide list's
     titles is not wanted here. */
  .op-flow__num {
    min-width: 0;
  }
  /* Out of sight, still the chip's name for a screen reader and voice control. */
  .op-flow__title {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* The open step's title, on the hairline its timer runs along. */
  .op-flow__current {
    grid-area: 3 / 1 / auto / -1;
    display: block;
    margin-top: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--brand-border);
    color: var(--brand-primary);
    text-wrap: balance;
  }
  /* Only the open step's line takes a place in the grid. */
  .op-flow__timer {
    grid-area: 4 / 1 / auto / -1;
    position: static;
    display: none;
    margin-top: -1px;
  }
  .op-flow__step.is-open .op-flow__timer {
    display: block;
  }
  .op-flow__stage {
    grid-area: 5 / 1 / auto / -1;
    margin-top: var(--space-5);
  }
  /* All five texts share one cell and none closes, so the cell is as tall as
     the longest and the page below holds still while the steps advance. */
  .op-flow__desc {
    grid-area: 6 / 1 / auto / -1;
    grid-template-rows: 1fr;
    margin-top: var(--space-5);
  }
  .op-flow__text {
    padding: 0;
  }
  /* The gaps between sections tighten here too: the steps' narrow values are
     set where the steps are (css/site.css). */
  .op-stats__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: var(--space-8);
  }
  .op-stat:nth-child(4) {
    border-left: 0;
  }
  /* One column, 560px at most, on the left edge its heading starts from. */
  .op-offers__grid {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--space-10);
    max-width: 560px;
  }
  .op-trust__top {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-5);
  }
  /* The strip as a list: a mark a row, a hairline between rows. */
  .op-trust__marks {
    grid-template-columns: minmax(0, 1fr);
  }
  .op-trust__mark {
    justify-content: flex-start;
    min-height: 64px;
    padding-inline: var(--space-5);
  }
  .op-trust__mark + .op-trust__mark {
    border-top: 1px solid var(--brand-border);
    border-left: 0;
  }
  /* One column: the cells keep the frame. */
  .op-reasons__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .op-reason:nth-child(even) {
    border-left: 0;
  }
  .op-reason + .op-reason {
    border-top: 1px solid var(--border-subtle);
  }
  /* The closing call stacks: heading, text, then the action, all left. */
  .op-closing__panel {
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
  }
  /* With the panel's row gap, 24px from the lead to the button, as in the hero. */
  .op-closing__action {
    grid-row: auto;
    justify-self: start;
    margin-top: var(--space-2);
  }
}
@media (max-width: 560px) {
  /* Two of the five titles take two lines at this width. The line holds that
     room for all five, a short title resting on the hairline, so the page
     below does not shift as the steps advance. 2.4em is two lines of the
     title's 120% leading; the rest is its own padding and hairline. */
  .op-flow__current {
    display: flex;
    align-items: flex-end;
    min-height: calc(2.4em + var(--space-3) + 1px);
  }
  /* The two actions stack, each as wide as the column. */
  .op-hero__actions {
    flex-direction: column;
    align-self: stretch;
  }
  .op-stats__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .op-stat:nth-child(4) {
    border-left: 1px solid var(--border-subtle);
  }
  .op-stat:nth-child(odd) {
    border-left: 0;
  }
  /* Five in two columns leaves one over; it takes the full row, centred. */
  .op-stat:last-child {
    grid-column: 1 / -1;
  }
  /* A phone keeps the narrower sides the panel had. */
  .op-closing__panel {
    padding: var(--space-10) var(--space-6);
  }
}
/* The listing line is 376px long and wraps on every phone; left to itself it
   put its last word alone on the second line. On a phone it breaks at its
   dot into two whole lines, and the dot, with nothing left to part, is not
   shown. The words are the brief's, unchanged: the break and the dot are in
   the markup at every width. The user's ruling (spec
   docs/specs/2026-10-07-website-phone-menu-and-phone-fixes.md, decision 9). */
.op-hero__break {
  display: none;
}
@media (max-width: 480px) {
  .op-hero__break {
    display: inline;
  }
  .op-hero__dot {
    display: none;
  }
}
/* Under a finger (css/site.css, Narrow): on a touch screen an offer's text
   link is a 44px target, a 20px line with 12px above and below, where a
   mouse has the bare line. Padding, and not a flex box with a height, so the
   words and the arrow keep the spacing they have in the markup. */
@media (hover: none) and (pointer: coarse) {
  .op-offer .op-link {
    display: inline-block;
    padding-block: var(--space-3);
    line-height: 20px;
  }
}