/* "Svona virkar það". Three steps as text, one photograph, the questions, the
   way onward. Nothing here draws anything: the page had a drawn illustration
   beside every heading, and drawn artwork beside every heading is what makes a
   page look like a template rather than a brand. */

.steps{padding:clamp(48px,6vw,88px) 0 clamp(36px,4vw,56px)}

/* Three columns on a wide screen, one on a phone. No cards, no borders and no
   background: the space between them is the separation. */
.step-list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,4vw,56px);
}
@media (max-width:860px){.step-list{grid-template-columns:1fr;gap:32px}}
.step-list li{list-style:none;margin:0;max-width:34ch}
.step-num{
  display:block;font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1;
  color:var(--yellow-deep,#E8C64F);margin-bottom:10px;
}
.step-list h2{font-family:var(--display);font-weight:700;font-size:clamp(1.5rem,2.4vw,1.95rem);line-height:1.08;margin:0 0 10px}
.step-list p{color:var(--ink-soft);line-height:1.65;margin:0}

/* Fridge, open, serve. One line, because six words do not need a component. */
.serve-line{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin:clamp(36px,4vw,52px) 0 8px;
  font-size:.98rem;font-weight:600;
}
.serve-line i{font-style:normal;color:var(--yellow-deep,#E8C64F)}
.serve-note{margin:0;font-size:.88rem;color:var(--ink-soft);line-height:1.6;max-width:60ch}

/* The one photograph. Its own shape kept: it is a phone-shot moment, not a
   crop of a product. */
.lifestyle{padding:0 0 clamp(48px,6vw,88px)}
/* Same cap as the product shot on the front page, and for the same reason: a
   photograph the full width of the column stops being a photograph. Centred,
   so the line above it sets the measure and the picture sits under its middle. */
.lifestyle-photo{border-radius:var(--radius-lg);overflow:hidden;background:var(--oat);max-width:640px;margin-inline:auto}
.lifestyle-photo .nd-photo{width:100%;height:auto;display:block}
.lifestyle-photo .photo-slot{width:100%;aspect-ratio:16/10;min-height:0}
/* The line leads, so it is centred over the picture and the measure is capped
   in characters rather than at the column edge. */
.lifestyle-line{
  margin:0 auto clamp(22px,3vw,34px);
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.6rem,3.4vw,2.6rem);line-height:1.12;
  max-width:18em;text-align:center;text-wrap:balance;
}
/* On a phone the picture runs to both edges. The wrap pads 24px either side,
   so it is pulled back out by exactly that and loses its corners: a rounded
   edge-to-edge photograph reads as a mistake. */
@media (max-width:620px){
  .lifestyle-photo{
    max-width:none;border-radius:0;
    margin-left:-24px;margin-right:-24px;width:calc(100% + 48px);
  }
  .lifestyle-photo .photo-slot{aspect-ratio:4/5}
}

.faq-a a{font-weight:600;border-bottom:2px solid var(--yellow);padding-bottom:1px}