/* Sections — the shared blocks the redesigned pages are built from.
   One vocabulary for every page, so the product lines, the solutions and the
   homepage read as one site: an image-and-text row, a framed picture, a figure
   with its caption, a strip of key figures, an icon list, a comparison and a
   card grid. A page adds its own sheet only for what is genuinely its own.

   Every block here is a single column on a narrow screen and a row above the
   breakpoint; nothing is positioned so that a translation or a longer word
   breaks it. */

/* --------------------------------------------------------- Image and text -- */
/* The row the redesigned pages alternate: picture on one side, copy on the
   other, and the sides swap on the next row so the eye moves down the page. */
.feature{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);
  align-items:center;
}

.feature--flip .feature__media{order:2}
.feature--wide-media{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.feature--wide-copy{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
.feature + .feature{margin-top:clamp(40px,6vw,80px)}
.feature__body > :last-child{margin-bottom:0}
.feature__body h2,
.feature__body h3{margin-top:0}
.feature__actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* A picture in a pale frame: the ground is the site's pale grey, so a product
   shot and a site photograph sit in the same box whatever their own edges. */
.media-frame{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  margin:0;
  border:1px solid var(--color-line);
  border-radius:var(--radius-lg);
  background:var(--color-pale);
}

.media-frame img{
  width:100%;
  height:100%;
  object-fit:contain;
}

.media-frame--cover img{object-fit:cover}
.media-frame--4x3{aspect-ratio:4/3}
.media-frame--3x2{aspect-ratio:3/2}
.media-frame--16x9{aspect-ratio:16/9}
.media-frame--1x1{aspect-ratio:1/1}
.media-frame--3x4{aspect-ratio:3/4}
.media-frame--tall{aspect-ratio:3/4;max-height:520px}
.media-frame--flush{border:0;background:transparent}
.media-frame--pad{padding:clamp(16px,3vw,32px)}

/* A figure is a framed picture with the line that says what it shows. The
   caption carries the qualification, never the picture. */
.figure{margin:0}
.figure__caption{
  display:block;
  margin:12px 0 0;
  font-size:12px;
  line-height:1.5;
  color:var(--color-muted);
}

/* ---------------------------------------------------------- Key figures -- */
.stat-strip{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1px;
  margin:0;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-line);
  overflow:hidden;
}

.stat{
  padding:24px clamp(18px,2.4vw,28px);
  background:var(--color-surface);
}

.stat__value{
  display:block;
  font-size:clamp(22px,2.6vw,30px);
  font-weight:700;
  line-height:1.15;
  letter-spacing:-.02em;
  color:var(--color-heading);
  font-variant-numeric:tabular-nums;
}

.stat__label{
  display:block;
  margin-top:8px;
  font-size:13px;
  color:var(--color-muted);
}

.stat__note{
  display:block;
  margin-top:4px;
  font-size:12px;
  color:var(--color-muted);
}

/* ------------------------------------------------------------ Icon list -- */
.icon-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:clamp(20px,3vw,32px);
  margin:0;
  padding:0;
  list-style:none;
}

.icon-grid__item{
  display:flex;
  gap:16px;
  align-items:flex-start;
}

.icon-grid__icon{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:var(--radius-md);
  background:var(--color-accent-pale);
  color:var(--color-accent);
}

.icon-grid__title{
  display:block;
  margin:0 0 4px;
  font-size:16px;
  font-weight:600;
  color:var(--color-heading);
}

.icon-grid__note{
  display:block;
  font-size:14px;
  line-height:1.55;
  color:var(--color-muted);
}

/* A quieter list: a heading and one line, with the line drawing at the left. */
.icon-grid--plain .icon-grid__icon{width:32px;height:32px;background:transparent;border-radius:0}

/* ------------------------------------------------------------- Card grid -- */
.card-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(20px,3vw,32px);
  margin:0;
  padding:0;
  list-style:none;
}

.card-grid--2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.card-grid--4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* The card the redesigned pages use: white ground, thin border, picture area in
   pale grey, and the same order of parts in every card. */
.panel{
  display:flex;
  flex-direction:column;
  padding:clamp(20px,2.4vw,28px);
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-surface);
}

.panel--pale{background:var(--color-pale)}
.panel--navy{background:var(--color-navy);border-color:var(--color-navy);color:#d2deea}
.panel--navy h3,.panel--navy .panel__title{color:#fff}
.panel__title{margin:0 0 8px;font-size:19px;font-weight:600;color:var(--color-heading)}
.panel__note{margin:0;font-size:14px;line-height:1.55;color:var(--color-muted)}
.panel--navy .panel__note{color:#cbd9e7}
.panel__foot{margin-top:auto;padding-top:20px}

/* A card that lifts a little under the pointer. The movement is 2px, inside
   what the visual language allows, and it stops under reduced motion. */
.lift{transition:transform var(--transition-mid),box-shadow var(--transition-mid),border-color var(--transition-mid)}
.lift:hover,.lift:focus-within{transform:translateY(-2px);box-shadow:var(--shadow-card);border-color:var(--color-accent)}

/* ---------------------------------------------------------- Small parts -- */
.pill-list{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.pill-list li{
  padding:6px 12px;
  border:1px solid var(--color-line);
  border-radius:999px;
  background:var(--color-surface);
  font-size:13px;
  font-weight:600;
  color:var(--color-muted);
}

.pill-list--sun li{background:var(--color-sun-pale);border-color:#f0dda8;color:#7a5a12}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:5px 10px;
  border-radius:var(--radius-sm);
  background:var(--color-accent-pale);
  color:var(--color-accent);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.badge--sun{background:var(--color-sun-pale);color:#7a5a12}
.badge--quiet{background:var(--color-pale);color:var(--color-muted)}

.note-line{margin:24px 0 0;font-size:13px;color:var(--color-muted);max-width:80ch}

/* Steps: the order of the work, numbered, each one a row of its own. */
.step-list{margin:0;padding:0;list-style:none;counter-reset:step}
.step-list > li{
  position:relative;
  display:grid;
  grid-template-columns:56px minmax(0,1fr);
  gap:20px;
  padding:0 0 28px;
}
.step-list > li:last-child{padding-bottom:0}
.step-list > li::before{
  counter-increment:step;
  content:counter(step,decimal-leading-zero);
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border:1px solid var(--color-line);
  border-radius:var(--radius-md);
  background:var(--color-surface);
  color:var(--color-accent);
  font-size:14px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}
.step-list__title{display:block;margin:0 0 4px;font-size:17px;font-weight:600;color:var(--color-heading)}
.step-list__note{display:block;font-size:14px;line-height:1.55;color:var(--color-muted)}

/* ----------------------------------------------------------- Comparison -- */
/* Two routes side by side, read as a table rather than as a claim: the first
   column names the dimension, so the reader compares like with like. */
.compare{width:100%;border-collapse:collapse;font-size:15px;background:var(--color-surface)}
.compare caption{text-align:left;margin-bottom:12px;font-size:13px;color:var(--color-muted)}
.compare th,.compare td{padding:14px 16px;border-bottom:1px solid var(--color-line);text-align:left;vertical-align:top}
.compare thead th{background:var(--color-pale);color:var(--color-heading);font-size:14px;font-weight:600}
.compare tbody th{font-weight:600;color:var(--color-heading)}
.compare tbody tr:last-child th,.compare tbody tr:last-child td{border-bottom:0}
.compare__wrap{overflow-x:auto;border:1px solid var(--color-line);border-radius:var(--radius-md)}

/* ------------------------------------------------------------- Responsive -- */
@media (max-width:900px){
  .feature,
  .feature--wide-media,
  .feature--wide-copy{grid-template-columns:minmax(0,1fr);gap:28px}
  .feature--flip .feature__media{order:0}
  .media-frame--tall{max-height:none}
}

@media (max-width:620px){
  .step-list > li{grid-template-columns:44px minmax(0,1fr);gap:14px}
  .step-list > li::before{width:36px;height:36px;font-size:13px}
  .icon-grid{grid-template-columns:minmax(0,1fr)}
}