/*
 * Koenig — styling for NATIVE Ghost editor content, in Sophie's palette.
 *
 * The legacy pages carry their whole design as inline-styled HTML cards and
 * are untouched by this file: prose rules are scoped to `.native-prose` /
 * `.native-intro` wrappers (used only by the page-<slug>.hbs templates),
 * and the `.kg-*` card classes only ever appear in native Koenig output.
 */

/* ---------- Reading column for native prose pages ---------- */

/* Deliberately NOT --page-max: prose wants a 70-character measure, and a
   reading column as wide as the showcase grids would be unreadable. */
.native-prose {
  max-width: 780px;
  margin: 0 auto;
  padding: 10px var(--gutter) 70px;
}

.native-prose h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(26px, 6vw, 34px);
  letter-spacing: -.03em;
  color: var(--ink);
  line-height: 1.15;
  margin: 2em 0 .5em;
}

/* The first heading of the page doubles as its display title. */
.native-prose > h2:first-child {
  font-size: clamp(32px, 8.5vw, 52px);
  text-align: center;
  margin: .3em 0 .4em;
}

.native-prose h3 {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 19px;
  color: var(--ink);
  margin: 1.6em 0 .5em;
}

.native-prose p {
  font-size: 14.5px;
  line-height: 1.85;
  color: var(--text-soft);
  margin: 0 0 1.25em;
}

.native-prose a:not(.kg-btn) {
  color: var(--active);
}

.native-prose blockquote {
  border-left: 3px solid var(--accent);
  margin: 1.6em 0;
  padding-left: 20px;
  color: var(--text-soft);
  font-style: italic;
}

.native-prose hr {
  border: none;
  width: 56px;
  height: 2px;
  background: var(--accent);
  margin: 44px auto;
}

.native-prose ul,
.native-prose ol {
  color: var(--text-soft);
  font-size: 14.5px;
  line-height: 1.85;
  margin: 0 0 1.25em;
  padding-left: 1.4em;
}

/* ---------- Centered intro block on the showcase pages ---------- */

.native-intro {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  text-align: center;
}

.native-intro h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(28px, 7vw, 52px);
  color: var(--ink);
  line-height: 1;
  margin: 0;
}

.native-intro p {
  font-size: 15px;
  color: var(--text-soft);
  max-width: 620px;
  margin: 16px auto 0;
  line-height: 1.75;
}

/* ---------- Koenig button card → the site's gold CTA pill ---------- */

.kg-button-card {
  display: flex;
  margin: 26px 0;
}

.kg-button-card.kg-align-center {
  justify-content: center;
}

.kg-btn {
  display: inline-block;
  background: var(--button);
  color: var(--ink) !important;
  padding: 16px 30px;
  border-radius: var(--pill-radius);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s, box-shadow .25s;
}

.kg-btn:hover {
  background: var(--button-hover);
  color: var(--light) !important;
}

/* Outline variant (for a secondary CTA, e.g. on a dark bandeau). */
.kg-btn-outline,
.kg-card.kg-callout-card-accent + .kg-button-card + .kg-button-card .kg-btn {
  background: transparent;
  border: var(--rule) solid var(--ink);
  color: var(--ink) !important;
}

/* ---------- Koenig callout cards → bandeaux & panels ----------
 *
 * Every selector here is compounded with .kg-card, which the card markup
 * always carries. Ghost's own cards.min.css styles the same classes and is
 * injected by {{ghost_head}}, after this file: at equal specificity it wins on
 * order, and the callouts came out in Ghost's colours — a 15% yellow where the
 * design has the palette's. Same trap as .kg-image-card img below.
 */

.kg-card.kg-callout-card {
  display: flex;
  gap: 14px;
  border-radius: 10px;
  padding: 32px 36px;
  margin: 30px 0;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.85;
}

.kg-card.kg-callout-card .kg-callout-text {
  color: inherit;
}

/* Dark bandeau, like the "On se rencontre ?" sections. */
.kg-card.kg-callout-card-accent {
  background: var(--ink);
  color: var(--text-on-dark);
}

.kg-card.kg-callout-card-accent .kg-callout-text strong {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 26px;
  color: var(--accent-light);
  margin-bottom: 6px;
}

/* Cream panel, like the var(--band) info boxes. */
.kg-card.kg-callout-card-grey,
.kg-card.kg-callout-card-white,
.kg-card.kg-callout-card-yellow {
  background: var(--band);
  color: var(--text-soft);
}

.kg-card.kg-callout-card-grey .kg-callout-text strong,
.kg-card.kg-callout-card-white .kg-callout-text strong,
.kg-card.kg-callout-card-yellow .kg-callout-text strong {
  color: var(--ink);
  font-size: 15px;
}

.kg-card.kg-callout-card-blue {
  background: var(--band);
  color: var(--active);
}

/* ---------- Koenig images & galleries ---------- */

.native-prose .kg-image-card,
.native-prose .kg-gallery-card {
  margin: 30px 0;
}

.kg-image {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  border-radius: 8px;
}

.native-prose .kg-width-wide {
  position: relative;
  width: 85vw;
  min-width: 100%;
  margin-left: calc(50% - 42.5vw);
  margin-right: calc(50% - 42.5vw);
}

.native-prose .kg-width-full {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
}

.kg-gallery-container {
  display: flex;
  flex-direction: column;
  max-width: 1040px;
  margin: 0 auto;
}

.kg-gallery-row {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.kg-gallery-image img {
  display: block;
  margin: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.kg-gallery-row:not(:first-of-type) {
  margin: 8px 0 0;
}

.kg-gallery-image:not(:first-of-type) {
  margin: 0 0 0 8px;
}

.native-prose figcaption {
  font-size: 12px;
  color: #9a8c6e;
  text-align: center;
  margin-top: 10px;
}

/* ---------- Showcase card bodies (post {{content}} inside a card) ---------- */

.native-card-body p {
  font-size: 13px;
  line-height: 1.8;
  color: var(--text-soft);
  margin: 0 0 8px;
}

.native-card-body p:last-child {
  margin-bottom: 0;
}

.native-feature-body p {
  font-size: 14px;
  line-height: 1.9;
  color: var(--text-soft);
  margin: 0 0 12px;
}

.native-feature-body p:last-child {
  margin-bottom: 0;
}

/* ---------- The landing (home.hbs) ---------- */

/* Koenig button cards written into a block page's body. .kg-btn above already
 * carries the design's pill; these only lay them out and give the second one
 * the outline treatment the hero uses against the teal. */

.blk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.blk-actions:empty {
  display: none;
}

.blk-actions-centre {
  justify-content: center;
  margin-top: 28px;
}

.blk-actions .kg-button-card,
.v5-hero-prose .kg-button-card {
  margin: 0;
  width: auto;
}

.v5-hero-prose .kg-button-card {
  display: inline-flex;
  margin: 0 12px 0 0;
}

.blk-actions .kg-card + .kg-card .kg-btn,
.v5-hero-prose .kg-card + .kg-card .kg-btn {
  background: transparent;
  border: 2px solid var(--light);
  color: var(--light) !important;
}

.blk-actions .kg-card + .kg-card .kg-btn:hover,
.v5-hero-prose .kg-card + .kg-card .kg-btn:hover {
  background: var(--light);
  color: var(--active) !important;
}

/* ---------- "Qui suis-je": one page, its chapters written in the editor ------
 *
 * The body is a flat stream of editor blocks with no way to wrap or class
 * them, so every rule below keys off what an element is and what precedes it.
 * The convention is in page-qui-suis-je.hbs and, for Sophie, in
 * ampoule-editing.md.
 */

.qsj {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  padding: 72px var(--gutter) 80px;
}

.qsj-eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}

.qsj-title {
  margin: 0 0 22px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--ink);
  text-wrap: balance;
}

/* Floated rather than a column of a grid: the eyebrow, the title and the
   opening paragraph have to set beside it, and only the first of those three
   is the theme's own markup — the paragraph comes out of the editor. */
.qsj-portrait {
  float: right;
  width: min(42%, 420px);
  margin: 0 0 32px 48px;
  aspect-ratio: 4/5;
}

/* The portrait floats only where the margin column exists. Between the two
   the label had no clearance — it is granted in the rules below — and a
   chapter's rule, which spans the container, ran straight across the picture.
   Below that width the title needs the room more than the picture needs to sit
   beside it anyway. */
@media (max-width: 900px) {
  .qsj-portrait {
    float: none;
    width: 100%;
    max-width: 340px;
    margin: 0 0 32px;
  }
}

.qsj p {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-soft);
  text-wrap: pretty;
}

/* The opening paragraph, whatever it says: it follows the title and nothing
   else can. */
.qsj > .qsj-title + p {
  font-size: 18px;
  line-height: 1.7;
}

.qsj > h2 {
  margin: 48px 0 18px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--ink);
  text-wrap: balance;
}

.qsj > h3 {
  clear: both;
  margin: 48px 0 14px;
  padding-top: 5px;
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* The chapter rule, drawn from the label because every chapter starts with
   one. Absolute with no `top`, so it lands at the label's own position in the
   flow and is lifted from there; left and right reach the container's text
   edges, which a border on the label itself could never do. */
.qsj > h3::before {
  content: "";
  position: absolute;
  left: var(--gutter);
  right: var(--gutter);
  margin-top: -24px;
  border-top: 1px solid rgba(43, 27, 61, .18);
}

/* The parcours: a bullet list whose items open in bold. The bold run is the
   date, set in its own column; the rest of the item follows it. */
.qsj ul,
.qsj ol {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

/* A hanging indent, not a flex row: the rest of the item is a bare text node,
   which no rule can reach to let it shrink — as a flex item it keeps its full
   width and drops to a line of its own. */
.qsj ul > li,
.qsj ol > li {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-soft);
  text-wrap: pretty;
}

/* The parcours item is written as a bold line — the date and what happened —
   then a soft break and the story. So the bold run is the item's own heading,
   set on its own line, and the break that follows it in the source would only
   add an empty one. */
.qsj ul > li > strong:first-child {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  /* Tight enough that the first item's line box starts where a heading's
     would: the label beside it has to align with either. */
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--ink);
}

.qsj ul > li > strong:first-child + br {
  display: none;
}

/* The method: a numbered list. The editor's own numbering is replaced by a
   counter, so the steps read 01, 02 in the accent as the design has them. */
.qsj ol {
  counter-reset: qsj-step;
}

.qsj ol > li {
  counter-increment: qsj-step;
  position: relative;
  padding-left: 44px;
  margin-bottom: 18px;
}

.qsj ol > li::before {
  content: counter(qsj-step, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--accent);
}

.qsj ol > li > strong:first-child {
  font-weight: 500;
  color: var(--ink);
}

/* The closing panel: a yellow callout card, with its buttons under it. */
.qsj .kg-callout-card-yellow {
  border-radius: var(--photo-radius);
  padding: 44px 40px;
}

.qsj .kg-callout-card-yellow .kg-callout-text {
  font-size: 17px;
  line-height: 1.7;
}

/* A photograph of its own spans the whole width, label column included. */
.qsj > figure {
  margin: 44px 0;
}

/* height:auto is load-bearing: Ghost writes the file's pixel size onto the
   img as width/height attributes, and those act as a specified height once
   the width is overridden — the picture then stretches as the column narrows.
   The two other pages pin an aspect ratio instead, which does the same job. */
.qsj > figure img {
  width: 100%;
  height: auto;
  border-radius: var(--photo-radius);
}

/* Wide enough for the margin to hold a label: below this the labels sit above
   their headings, as they do on a phone in the reference. */
@media (min-width: 900px) {
  /* The text column is the container's own padding; the label steps back out
     of it with a negative margin. */
  .qsj {
    padding-left: calc(var(--gutter) + 248px);
  }

  /* The label takes no height at all: whatever follows it therefore begins at
     exactly the label's own top, whether that is a heading, a list or a
     paragraph, and however many lines the label runs to. Floating it instead
     puts it at the mercy of the next element's clearance, which is not the
     same position. */
  .qsj > h3 {
    clear: both;
    width: 200px;
    height: 0;
    margin: 48px 0 0 -248px;
    padding-top: 5px;
    overflow: visible;
  }

  .qsj > h3 + * {
    margin-top: 0;
  }

  /* The opening, and anything that is a picture or a panel, span the label
     column too. */
  .qsj-eyebrow,
  .qsj-title,
  .qsj > .qsj-title + p,
  .qsj > figure,
  .qsj > .kg-card {
    margin-left: -248px;
  }

  .qsj > h2,
  .qsj > p,
  .qsj > ul,
  .qsj > ol {
    max-width: 62ch;
  }
}

/* ---------- "Professionnels": one page, its bands opened by HTML cards ------
 *
 * Same principle as .qsj — the body is a flat stream styled by what each
 * element is — with one addition: a pair of HTML cards wraps a run of blocks
 * so it can be a band or a grid. The wrappers are listed in
 * page-professionnels.hbs.
 */

.pro {
  max-width: 1180px;
  margin: 0 auto;
  padding: 72px var(--gutter) 80px;
}

.pro-eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}

.pro-title {
  margin: 0 0 22px;
  max-width: 22ch;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(40px, 6.4vw, 88px);
  line-height: .98;
  letter-spacing: -.04em;
  color: var(--ink);
  text-wrap: balance;
}

.pro p {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--text-soft);
  text-wrap: pretty;
}

/* The measure belongs to the page's own paragraphs. Inside a card it made the
   half holding the text narrower than the half holding the heading — which
   only showed once the cards stacked into one column. */
.pro > p {
  max-width: 62ch;
}

.pro > .pro-title + p {
  max-width: 58ch;
  font-size: 19px;
  line-height: 1.65;
  margin-bottom: 28px;
}

.pro h2 {
  margin: 76px 0 8px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink);
  text-wrap: balance;
}

/* The two hero buttons sit side by side; a button card is block-level and
   would otherwise stack them. The second one is the secondary action, and
   takes the outline the bands give theirs — the same "second card" idiom, on
   cream rather than on a dark panel. */
.pro > .kg-button-card {
  display: inline-flex;
  margin: 0 12px 44px 0;
}

/* The design's buttons are a size up from the theme's default pill, and set in
   the body weight rather than semibold. Against the cream the primary one is
   ink with a yellow label — the reverse of the pill the landing uses, which
   would be yellow on yellow-ish here; inside the ink band it stays the pill. */
.pro .kg-btn {
  font-size: 15px;
  font-weight: 500;
}

.pro > .kg-button-card .kg-btn {
  background: var(--ink);
  color: var(--accent-light) !important;
}

.pro > .kg-button-card .kg-btn:hover {
  background: var(--active);
  color: var(--light) !important;
}

.pro > .kg-button-card + .kg-button-card .kg-btn {
  background: transparent;
  border: var(--rule) solid var(--ink);
  color: var(--ink) !important;
}

.pro > .kg-button-card + .kg-button-card .kg-btn:hover {
  background: var(--ink);
  color: var(--light) !important;
}

.pro > figure {
  margin: 0 0 44px;
}

/* The design has a strip, not whatever shape the photograph happens to be:
   a portrait crop here fills the fold and pushes the page down. The striped
   ground shows while it loads, as it does for the landing's photos. */
.pro > figure img {
  width: 100%;
  aspect-ratio: 16 / 7;
  height: auto;
  object-fit: cover;
  border-radius: var(--photo-radius);
  background: repeating-linear-gradient(130deg, #f5b944 0, #f5b944 22px, #efae33 22px, #efae33 44px);
}

/* A band runs to the window edge and pads its own content back to the page
   measure, since it has no inner wrapper to do it. */
.pro-band {
  width: 100vw;
  margin: 72px 0 72px calc(50% - 50vw);
  padding: 76px max(var(--gutter), calc(50vw - 1180px / 2));
}

/* Floated rather than gridded: in a grid the two columns share rows, so the
   first reason's body would be pushed down by the height of the heading
   opposite it. Floats let each side set its own rhythm, which is what the
   design has. */
.pro-why {
  background: var(--active);
  color: var(--light);
}

.pro-why::after {
  content: "";
  display: block;
  clear: both;
}

.pro-why h2 {
  float: left;
  clear: left;
  width: 45%;
  margin: 0 0 18px;
  color: var(--light);
}

.pro-why > h2 + p {
  float: left;
  clear: left;
  width: 45%;
  max-width: 46ch;
  margin: 0;
  color: var(--text-on-dark);
}

.pro-why > h3 {
  margin: 0 0 0 55%;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 243, 224, .25);
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--accent-light);
}

.pro-why > h3 + p {
  margin: 6px 0 22px 55%;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-on-dark);
}

/* The three pledges: a rule, a name, a line. Column flow so each pair keeps
   its own column, the way .v5-pairs does. */
.pro-pledges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto 1fr;
  grid-auto-flow: column;
  gap: 0 40px;
  margin: 0 0 32px;
}

.pro-pledges h3 {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid rgba(43, 27, 61, .25);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--ink);
}

.pro-pledges p {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.55;
}

/* Four cards rather than three, and no step numbers: they are what I do, not
   an order to do it in. */
.pro-cards {
  grid-template-columns: repeat(4, 1fr);
  margin-top: 32px;
}

.pro-cards h3::before {
  content: none;
}

.pro-cards h3 {
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.02em;
}

/* The landing's cards are fenced in ink at the design's border weight; these
   are drawn in a hairline, and rounded a notch tighter. Both halves, since a
   card here is a heading and a paragraph rather than one box. */
.pro-cards h3,
.pro-cards p {
  border-color: rgba(43, 27, 61, .22);
  border-width: 1px;
}

.pro-cards h3 {
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
}

.pro-cards p {
  border-top: 0;
  border-radius: 0 0 22px 22px;
}

.pro-cards p {
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-mid);
}

/* The five steps, numbered by CSS. Same convention as the "Qui suis-je"
   method: the step's name is the bold run, the story follows a soft break. */
.pro > ol {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 36px 24px;
  margin: 32px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: pro-step;
}

.pro > ol > li {
  counter-increment: pro-step;
  padding-top: 18px;
  border-top: var(--rule) solid var(--ink);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-soft);
}

.pro > ol > li::before {
  content: counter(pro-step, decimal-leading-zero);
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 44px;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--accent);
}

.pro > ol > li > strong:first-child {
  display: block;
  margin-bottom: 4px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
}

.pro > ol > li > strong:first-child + br {
  display: none;
}

/* Three notes, as yellow callout cards in a row. */
.pro-facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 32px 0 0;
}

.pro-facts .kg-card.kg-callout-card {
  margin: 0;
  border-radius: 22px;
  padding: 28px 26px;
}

.pro-facts .kg-card .kg-callout-text {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.7;
}

.pro-facts .kg-card .kg-callout-text > strong:first-child {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink);
}

.pro-facts .kg-card .kg-callout-text > strong:first-child + br {
  display: none;
}

/* The closing panel. Not Ghost's own header card: that would tie the band to
   markup this theme cannot check, and the buttons are already button cards. */
/* The closing panel. Not Ghost's own header card: that would tie the band to
   markup this theme cannot check, and the buttons are already button cards.
   They sit in a .blk-actions card of their own — the class the bands on the
   landing use — which keeps them in a row, in the order they were written,
   and gives the second one the outline treatment against the ink. */
.pro-cta {
  background: var(--ink);
  color: var(--light);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 48px;
  margin-bottom: 0;
}

.pro-cta h2 {
  grid-column: 1;
  grid-row: 1;
  margin: 0 0 12px;
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--light);
}

.pro-cta > h2 + p {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  color: var(--text-on-dark);
}

.pro-cta > .blk-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
}

@media (max-width: 900px) {
  .pro-why h2,
  .pro-why > h2 + p {
    float: none;
    width: auto;
  }

  .pro-why > h3,
  .pro-why > h3 + p {
    margin-left: 0;
  }

  .pro-why > h3:first-of-type {
    margin-top: 32px;
  }

  .pro-cta {
    grid-template-columns: 1fr;
  }

  .pro-cta > .blk-actions {
    grid-column: 1;
    grid-row: auto;
    margin-top: 28px;
  }

  .pro-facts,
  .pro > ol {
    grid-template-columns: 1fr 1fr;
  }

  /* Pairs, so one column — see the note on .sm-offers. */
  .pro-pledges {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-template-rows: none;
  }

  .pro-pledges p {
    margin-bottom: 28px;
  }

  .pro > .kg-button-card {
    margin-bottom: 12px;
  }
}

@media (max-width: 620px) {
  .pro-facts,
  .pro > ol {
    grid-template-columns: 1fr;
  }
}

/* ---------- "Sur-mesure": one page, its blocks opened by HTML cards ---------
 *
 * Same shape as .pro — a flat stream styled by what each element is, with a
 * pair of HTML cards around anything the editor cannot wrap. The wrappers are
 * listed in page-sur-mesure.hbs. Sizes are the design's own.
 */

.sm {
  max-width: 1180px;
  margin: 0 auto;
  padding: 72px var(--gutter) 0;
}

.sm-eyebrow {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
}

.sm-title {
  margin: 0 0 24px;
  max-width: 20ch;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 80px);
  line-height: .98;
  letter-spacing: -.04em;
  color: var(--ink);
  text-wrap: balance;
}

.sm p {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-mid);
  text-wrap: pretty;
}

.sm > .sm-title + p {
  max-width: 58ch;
  margin-bottom: 32px;
  font-size: 19px;
  line-height: 1.65;
}

.sm h2 {
  margin: 72px 0 10px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  letter-spacing: -.03em;
  color: var(--ink);
  text-wrap: balance;
}

/* A heading with nothing but a wrapper after it introduces that block, so its
   bottom margin belongs to the block, not to a paragraph that is not there. */
.sm h2 + p {
  max-width: 56ch;
  margin-bottom: 36px;
}

.sm .kg-btn {
  font-size: 15px;
  font-weight: 500;
}

.sm > .kg-button-card {
  display: inline-flex;
  margin: 0 12px 0 0;
}

.sm > .kg-button-card .kg-btn {
  background: var(--ink);
  color: var(--accent-light) !important;
}

.sm > .kg-button-card .kg-btn:hover {
  background: var(--accent);
  color: var(--light) !important;
}

.sm > .kg-button-card + .kg-button-card .kg-btn {
  background: transparent;
  border: 2px solid var(--ink);
  color: var(--ink) !important;
}

.sm > .kg-button-card + .kg-button-card .kg-btn:hover {
  background: var(--ink);
  color: var(--accent-light) !important;
}

/* The banner photograph: the design's 21/9, whatever the file's own crop. */
.sm > figure {
  margin: 48px 0 0;
}

.sm > figure img {
  width: 100%;
  aspect-ratio: 21 / 9;
  height: auto;
  object-fit: cover;
  border-radius: 24px;
  background: repeating-linear-gradient(130deg, #f5b944 0, #f5b944 24px, #efae33 24px, #efae33 48px);
}

.sm-pledges {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  grid-auto-flow: column;
  gap: 0 40px;
  margin-top: 32px;
}

.sm-pledges h3 {
  margin: 0 0 4px;
  padding-top: 20px;
  border-top: 1px solid rgba(43, 27, 61, .25);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: -.01em;
  color: var(--ink);
}

.sm-pledges p {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-soft);
}

/* The three offers. A card is drawn in two halves — the heading holds the top,
   the paragraph the bottom — because the editor writes them as siblings and
   nothing can wrap each pair. */
.sm-offers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  grid-auto-flow: column;
  gap: 0 20px;
  margin-top: 32px;
}

.sm-offers h3 {
  margin: 0;
  padding: 30px 28px 0;
  background: var(--card);
  border: 1px solid rgba(43, 27, 61, .22);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}

.sm-offers p {
  margin: 0;
  padding: 10px 28px 30px;
  background: var(--card);
  border: 1px solid rgba(43, 27, 61, .22);
  border-top: 0;
  border-radius: 0 0 22px 22px;
  font-size: 16px;
  line-height: 1.7;
}

/* A band runs to the window edge and pads its content back to the measure. */
.sm-band {
  width: 100vw;
  margin: 72px 0 0 calc(50% - 50vw);
  padding: 72px max(var(--gutter), calc(50vw - 1180px / 2));
}

.sm-how {
  background: var(--active);
  color: var(--light);
}

.sm-how h2 {
  margin: 0 0 10px;
  color: var(--light);
}

.sm-how > h2 + p {
  max-width: 52ch;
  margin-bottom: 40px;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-on-dark);
}

.sm-how > ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px 32px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: sm-step;
}

.sm-how > ol > li {
  counter-increment: sm-step;
  padding-top: 18px;
  border-top: 2px solid var(--accent-light);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text-on-dark);
}

.sm-how > ol > li::before {
  content: counter(sm-step, decimal-leading-zero);
  display: block;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--accent-light);
}

.sm-how > ol > li > strong:first-child {
  display: block;
  margin: 12px 0 8px;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--light);
}

.sm-how > ol > li > strong:first-child + br {
  display: none;
}

/* The prices. The bold run that opens each paragraph is the price itself —
   the only mark the editor can put on it, and the design sets it large. */
.sm-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  grid-auto-flow: column;
  gap: 0 20px;
  margin-top: 36px;
}

.sm-tiers h3 {
  margin: 0;
  padding: 30px 28px 0;
  background: var(--band);
  border-radius: 22px 22px 0 0;
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--active);
}

.sm-tiers p {
  margin: 0;
  padding: 10px 28px 30px;
  background: var(--band);
  border-radius: 0 0 22px 22px;
  font-size: 16px;
  line-height: 1.65;
}

.sm-tiers p > strong:first-child {
  display: block;
  margin-bottom: 10px;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: clamp(28px, 3vw, 38px);
  line-height: 1;
  letter-spacing: -.035em;
  color: var(--ink);
}

.sm-tiers p > strong:first-child + br {
  display: none;
}

/* Questions and answers: two columns that strictly alternate, so each row
   holds one of each and the grid places them without help. The heading's
   padding reaches under the gap, or the rule above a row would break in two. */
.sm-faq {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  column-gap: 40px;
  margin-top: 32px;
}

/* No max-width here, unlike the design's 34ch: the padding that carries the
   rule under the column gap lives inside it, and a capped box would cut the
   rule in two. The column itself is the measure. */
.sm-faq h3 {
  margin: 0 -40px 0 0;
  padding: 24px 40px 24px 0;
  border-top: 1px solid rgba(43, 27, 61, .2);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: var(--ink);
  text-wrap: balance;
}

.sm-faq p {
  max-width: 52ch;
  margin: 0;
  padding: 24px 0;
  border-top: 1px solid rgba(43, 27, 61, .2);
  font-size: 16px;
  line-height: 1.7;
}

.sm-cta {
  background: var(--ink);
  color: var(--light);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 40px;
  padding-top: 76px;
  padding-bottom: 76px;
}

.sm-cta h2 {
  grid-column: 1;
  grid-row: 1;
  max-width: 24ch;
  margin: 0 0 14px;
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--light);
}

.sm-cta > h2 + p {
  grid-column: 1;
  grid-row: 2;
  max-width: 48ch;
  margin: 0;
  color: var(--text-on-dark);
}

.sm-cta > .blk-actions {
  grid-column: 2;
  grid-row: 1 / span 2;
}

@media (max-width: 900px) {
  /* One column, not two: these are heading-and-paragraph pairs laid out in
     column flow, and a two-column row flow would set a heading beside its own
     paragraph. The row gap stays 0 — the two halves of a card have to meet —
     so the space between pairs hangs off the paragraph. */
  .sm-pledges,
  .sm-offers,
  .sm-tiers {
    grid-template-columns: 1fr;
    grid-auto-flow: row;
    grid-template-rows: none;
  }

  .sm-offers p,
  .sm-tiers p {
    margin-bottom: 20px;
  }

  .sm-pledges p {
    margin-bottom: 28px;
  }

  .sm-how > ol {
    grid-template-columns: 1fr 1fr;
  }

  .sm-faq {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .sm-faq h3 {
    padding: 24px 0 0;
    margin-right: 0;
    max-width: none;
  }

  .sm-faq p {
    padding: 8px 0 24px;
    border-top: 0;
  }

  .sm-cta {
    grid-template-columns: 1fr;
  }

  .sm-cta > .blk-actions {
    grid-column: 1;
    grid-row: auto;
    margin-top: 28px;
  }
}

@media (max-width: 620px) {
  .sm-how > ol {
    grid-template-columns: 1fr;
  }
}

/* The reference keeps four across down to about 245px a card, so they hold
   until the content column can no longer give them that, and stack rather than
   growing narrower — at 700px they were four columns of 130. Not two columns: a card is a heading and a paragraph flowing by
   column, so two of them would read 1, 3 / 2, 4 rather than 1, 2 / 3, 4. The
   row gap stays 0 for a card's halves to meet, so the space between cards
   hangs off the paragraph. */
@media (max-width: 1100px) {
  .pro-cards {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }

  .pro-cards p {
    margin-bottom: 24px;
  }
}