/* Säljsidan. Kapitel: papper (levande scen) → röd affisch → vitt galleri → process → papper → espresso → kvitton → frågor. */

.knapprad { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-top: 2rem; }
.lugnande { margin-top: 1rem; font-size: .9rem; color: var(--dampad); }
.etikett-ljus { color: #ffffff; }
.ingress-ljus { color: rgba(240, 235, 226, .82); }

/* 1. Scenen: rubrik, namnkapsel och en levande inbjudan i en telefon */
.scen { position: relative; overflow: hidden; padding: 3rem 0 4.5rem; }
.scen-ram { position: relative; }
.scen-text { position: relative; z-index: 2; max-width: 72rem; margin: 0 auto; text-align: center; }
.scen-text .etikett { margin-bottom: 1.1rem; }
.scen .display { font-size: clamp(2.75rem, 7.4vw, 6rem); }
.scen-text .ingress { margin: 1.5rem auto 0; max-width: 34rem; }

/* Vad firar ni? Väljer exemplet i telefonen och följer med till redigeraren */
.tillfallen { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: 1.6rem auto 0; }
.tillfalle-knapp { min-height: 2.75rem; padding: 0 1.1rem; border: 0; border-radius: 9999px; background: rgba(33, 12, 2, .06); color: var(--dampad); font: 500 .92rem/1 var(--sans); cursor: pointer; transition: background-color .15s var(--ut), color .15s var(--ut); }
.tillfalle-knapp:hover { background: rgba(33, 12, 2, .1); color: var(--blaeck); }
.tillfalle-knapp[aria-pressed="true"] { background: var(--blaeck); color: var(--papper); }
.kapsel.ett-namn .kapsel-och, .kapsel.ett-namn #k-namn2 { display: none; }
@media (max-width: 560px) { .kapsel.ett-namn input { flex-basis: 100%; } }

/* Kapseln: Givinglis sökfält, här en levande handling */
.kapsel {
  display: flex;
  align-items: center;
  gap: .35rem;
  max-width: 40rem;
  margin: 2rem auto 0;
  padding: .4rem .4rem .4rem 1.4rem;
  border: 1px solid rgba(33, 12, 2, .12);
  border-radius: 9999px;
  background: var(--vit);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1), 0 22px 40px -28px rgba(33, 12, 2, .45);
}
.kapsel input {
  flex: 1 1 0;
  min-width: 0;
  height: 3rem;
  border: 0;
  background: transparent;
  color: var(--blaeck);
  font: 400 1.15rem/1 var(--sans);
  letter-spacing: -.01em;
}
.kapsel input:focus { outline: none; }
.kapsel input::placeholder { color: #a0938a; }
.kapsel:focus-within { box-shadow: 0 0 0 2px var(--blaeck), 0 22px 40px -28px rgba(33, 12, 2, .45); }
.kapsel-och { font-size: 1.3rem; color: var(--rod); }
.kapsel .knapp { flex: none; }
@media (max-width: 560px) {
  .kapsel { flex-wrap: wrap; padding: .5rem; border-radius: 28px; justify-content: center; }
  .kapsel input { flex: 1 1 40%; padding: 0 .9rem; height: 3.1rem; border-radius: 9999px; background: var(--papper); text-align: center; }
  .kapsel-och { flex: none; }
  .kapsel .knapp { flex: 1 1 100%; }
}

/* Den levande telefonen. iframen är alltid 390 x 844 och skalas med transform. */
.levande { position: relative; z-index: 2; display: grid; justify-items: center; gap: 1.1rem; margin-top: 3rem; }
.levande-telefon {
  --b: min(19rem, 76vw);
  position: relative;
  width: var(--b);
  height: calc(var(--b) * 844 / 390);
  border-radius: calc(var(--b) * .12);
  padding: calc(var(--b) * .028);
  background: #17110d;
  box-shadow: 0 50px 90px -40px rgba(33, 12, 2, .65), 0 18px 34px -18px rgba(33, 12, 2, .4), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.levande-telefon iframe {
  position: absolute;
  top: calc(var(--b) * .028);
  left: calc(var(--b) * .028);
  width: 390px;
  height: 844px;
  border: 0;
  border-radius: 42px;
  background: var(--papper);
  transform-origin: 0 0;
  transform: scale(.7); /* sida.js räknar fram den exakta skalan */
}
.levande-tips {
  position: absolute;
  top: calc(min(19rem, 76vw) * 1.06);
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  pointer-events: none;
  transition: opacity .4s;
}
.levande-tips span {
  display: inline-block;
  padding: .45rem .9rem;
  border-radius: 9999px;
  background: var(--blaeck);
  color: var(--papper);
  font-weight: 600;
  font-size: .8rem;
  white-space: nowrap;
}
.levande-tips span::before { content: ""; display: inline-block; width: .5rem; height: .5rem; margin-right: .45rem; border-radius: 50%; background: var(--rod); vertical-align: .05em; }
@media (prefers-reduced-motion: no-preference) {
  .levande-tips span { animation: knacka 2.4s var(--ut) infinite; }
}
@keyframes knacka { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-4px); } 90% { transform: none; } }
.levande-tips.borta { opacity: 0; }
.levande-val { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .75rem 1.25rem; }
.segment { display: inline-flex; padding: .25rem; border-radius: 9999px; background: var(--vit); box-shadow: inset 0 0 0 1px var(--kant); }
.segment-knapp { min-height: 2.75rem; padding: 0 1.1rem; border: 0; border-radius: 9999px; background: transparent; color: var(--dampad); font: 500 .9rem/1 var(--sans); cursor: pointer; }
.segment-knapp[aria-pressed="true"] { background: var(--blaeck); color: var(--papper); }
.prickval { display: flex; gap: .3rem; }
.prick { width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center; }
.prick::before { content: ""; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: var(--p); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); transition: transform .15s var(--ut); }
.prick[aria-pressed="true"]::before { box-shadow: 0 0 0 2px var(--papper), 0 0 0 4px var(--blaeck); }
.prick:hover::before { transform: scale(1.1); }
.omstart { min-height: 2.75rem; border: 0; background: none; color: var(--blaeck); font: 500 .9rem/1 var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* Föremålen vid kanterna: riktiga inbjudningar som pappersföremål */
.foremal {
  position: absolute;
  z-index: 1;
  margin: 0;
  width: clamp(9rem, 15vw, 15rem);
  border-radius: 22px;
  overflow: hidden;
  background: var(--vit);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 26px 50px -22px rgba(33, 12, 2, .45), 0 8px 18px -10px rgba(33, 12, 2, .25);
  aspect-ratio: 1 / 1.62;
}
.foremal img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.foremal-v { left: 0; top: 34rem; transform: rotate(-9deg); }
.foremal-h { right: 0; top: 30rem; transform: rotate(8deg); }
@media (max-width: 1099px) { .foremal { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .foremal { animation: svava 8s ease-in-out infinite; }
  .foremal-h { animation-delay: -4s; }
}
@keyframes svava { 50% { translate: 0 -10px; } }

/* Avtäckning rad för rad (webb-rorelse teknik 2). Utan JS syns allt. */
.avtack { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.avtack > span { display: block; }
.js .dyk-grupp:not(.in) .avtack > span { transform: translateY(105%); }
.js .dyk-grupp .avtack > span { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .dyk-grupp.in .avtack + .avtack > span { transition-delay: .1s; }
.rubrik-stor .avtack { display: inline-block; vertical-align: top; }
@media (prefers-reduced-motion: reduce) { .js .dyk-grupp .avtack > span { transform: none !important; transition: none; } }

/* Affischen: nedräkningen i monumental storlek på rött */
.affisch { background: var(--rod); color: var(--vit); padding: 6rem 0 6.5rem; overflow: hidden; }
.affisch-siffror {
  display: grid;
  grid-template-columns: repeat(2, max-content);
  gap: .15em .45em;
  margin: 1.5rem 0 2rem;
  font-size: clamp(3.6rem, 19vw, 6rem);
  line-height: .9;
  letter-spacing: -.05em;
  font-variant-numeric: tabular-nums;
}
.affisch-siffror span { display: inline-flex; align-items: baseline; gap: .12em; }
.affisch-siffror b { font-weight: 400; }
.affisch-siffror i { font-style: normal; font-family: var(--sans); font-size: .16em; letter-spacing: .1em; text-transform: uppercase; opacity: .85; }
@media (min-width: 900px) {
  .affisch-siffror { grid-template-columns: repeat(4, max-content); font-size: clamp(5rem, 9.6vw, 10.5rem); }
}
.affisch .rubrik-stor { max-width: 16ch; }
.affisch-text { margin-top: 1.5rem; max-width: 34rem; font-size: 1.125rem; }

/* 2. Galleriet */
.galleri { background: var(--vit); padding: 6rem 0; }
.galleri .ingress { margin-top: 1.5rem; }
.galleri .rubrik-stor { margin-top: 1rem; max-width: 18ch; }
.mallrad { display: grid; gap: 1.5rem; margin-top: 3.5rem; }
.mallkort { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); gap: 1.5rem; align-items: center; padding: 1.25rem; border-radius: 24px; background: var(--papper); }
@media (max-width: 520px) { .mallkort { grid-template-columns: 1fr; } .mallkort-bild { max-width: 14rem; margin: 0 auto; } }
.mallkort-bild { border-radius: 16px; overflow: hidden; aspect-ratio: 1 / 1.45; background: var(--vit); box-shadow: 0 18px 36px -24px rgba(33, 12, 2, .5); }
.mallkort-bild img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .5s var(--ut); }
.mallkort:hover .mallkort-bild img { transform: scale(1.03); }
.mallkort-text p { margin-top: .6rem; color: var(--dampad); }
/* Tre mallar: liggande kort under varandra, tre stående i rad på breda skärmar */
@media (min-width: 1100px) {
  .mallrad { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mallkort { grid-template-columns: 1fr; align-items: start; }
  .mallkort-bild { width: 100%; max-width: 15rem; margin: 0 auto; }
}
.prickar { display: flex; gap: .45rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.prickar li { width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--p); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
.mallkort-knappar { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: 1.25rem; }
.lank-pil { display: inline-flex; align-items: center; min-height: 2.75rem; font-weight: 500; font-size: .9rem; text-underline-offset: 3px; }

/* 3. Processen: låst telefon, stegen passerar (webb-rorelse teknik 3) */
.process { padding: 6.5rem 0 4rem; }
.process .rubrik-stor { margin-top: 1rem; max-width: 16ch; }
.process-ram { display: grid; gap: 2rem; margin-top: 3rem; }
.process-skarm { display: none; }
.process-steg { list-style: none; margin: 0; padding: 0; display: grid; gap: 3.5rem; }
/* Stegmarkören är ett litet lacksigill, samma röda prick som i loggan.
   Lite ojämn rundning och en präglad inre ring, som riktigt lack. */
.process-nr {
  display: block; width: .95rem; height: .95rem; margin-bottom: 1rem;
  border-radius: 52% 47% 50% 46% / 48% 53% 47% 52%;
  background: var(--rod);
  box-shadow: inset 0 0 0 .19rem var(--rod), inset 0 0 0 .25rem rgba(255, 255, 255, .28), 0 1px 2px rgba(33, 12, 2, .25);
}
.process-punkt p { margin-top: 1rem; max-width: 30rem; color: var(--dampad); font-size: 1.1rem; }
.process-mobilbild { width: min(15rem, 70%); margin-top: 1.5rem; border-radius: 20px; box-shadow: 0 30px 50px -30px rgba(33, 12, 2, .55); aspect-ratio: 1 / 1.6; object-fit: cover; object-position: top; }
@media (min-width: 960px) {
  .process-ram { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
  .process-skarm { display: block; position: sticky; top: 6rem; height: calc(100svh - 8rem); }
  .process-telefon {
    position: relative;
    height: min(100%, 40rem);
    aspect-ratio: 1 / 1.95;
    margin: 0 auto;
    border-radius: 2.6rem;
    padding: .65rem;
    background: #17110d;
    box-shadow: 0 50px 90px -40px rgba(33, 12, 2, .6);
  }
  .process-bild { position: absolute; inset: .65rem; width: calc(100% - 1.3rem); height: calc(100% - 1.3rem); object-fit: cover; object-position: top; border-radius: 2rem; opacity: 0; transform: scale(.97); transition: opacity .5s var(--ut), transform .6s var(--ut); }
  .process-bild.aktiv { opacity: 1; transform: none; }
  .process-steg { gap: 0; }
  .process-punkt { min-height: 72svh; display: flex; flex-direction: column; justify-content: center; opacity: .28; transition: opacity .4s; }
  .process-punkt.aktiv { opacity: 1; }
  .process-mobilbild { display: none; }
  .no-js .process-punkt { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .process-bild, .process-punkt { transition: none; } }

/* 4. Delad: text bredvid föremål */
.delad { padding: 6.5rem 0; }
.delad-ram { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 900px) { .delad-ram { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5rem; } }
.delad-text .rubrik { margin-top: 1rem; }
.delad-text .ingress { margin-top: 1.5rem; }
.bocklista { list-style: none; margin: 1.75rem 0 0; padding: 0; display: grid; gap: .6rem; }
.bocklista li { position: relative; padding-left: 1.9rem; }
.bocklista li::before {
  content: ""; position: absolute; left: 0; top: .3em; width: 1.15rem; height: 1.15rem; border-radius: 50%;
  background: var(--blaeck) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23f0ebe2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}

/* Kvittot: gästlistan som pappersföremål */
.kvitto, .pris {
  position: relative;
  padding: 2.5rem 2rem;
  border: 1px dashed rgba(33, 12, 2, .3);
  border-radius: 24px;
  background: var(--papper);
}
.kvitto { max-width: 26rem; margin: 0 auto; width: 100%; background: var(--vit); transform: rotate(1.5deg); box-shadow: 0 30px 60px -36px rgba(33, 12, 2, .45); }
.kvitto-etikett { font-family: var(--mono); font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; color: var(--etikett); }
.kvitto-siffra { margin-top: 1.25rem; font-size: clamp(4rem, 12vw, 6rem); line-height: 1; letter-spacing: -.03em; }
.kvitto-under { margin-top: .4rem; color: var(--dampad); }
.kvitto-rader { margin: 1.75rem 0 0; padding-top: 1.25rem; border-top: 1px dashed rgba(33, 12, 2, .3); display: grid; gap: .6rem; }
.kvitto-rader div { display: flex; justify-content: space-between; gap: 1rem; }
.kvitto-rader dt { color: var(--dampad); }
.kvitto-rader dd { margin: 0; }
.kvitto-fot { margin-top: 1.5rem; font-size: .78rem; color: var(--etikett); }

/* Mejlet som kunden får när en gäst svarar, som en notis på låsskärmen.
   Den lägger sig snett över gästlistans överkant och glider in när
   kapitlet syns (bara transform och opacity). */
.svarsstapel { position: relative; max-width: 26rem; width: 100%; margin: 0 auto; }
/* Notisen ligger i flödet och kvittot drar upp sig under dess nederkant,
   så att överlappet blir lika stort oavsett hur många rader notisen får. */
.svarsstapel .kvitto { margin-top: -1.1rem; }
.notis {
  position: relative; z-index: 1; margin: 0 1.5rem 0 -1rem;
  display: grid; gap: .1rem; padding: .85rem 1rem 1rem;
  border-radius: 22px; background: rgba(250, 248, 244, .94);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 24px 48px -22px rgba(33, 12, 2, .55), 0 0 0 1px rgba(33, 12, 2, .06);
  transform: rotate(-2deg);
}
@supports (backdrop-filter: blur(1px)) { .notis { background: rgba(250, 248, 244, .82); backdrop-filter: blur(14px) saturate(1.2); } }
.notis-topp { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; font-size: .72rem; letter-spacing: .04em; color: var(--dampad); }
.notis-ikon { display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 6px; background: var(--rod); color: var(--vit); }
.notis-ikon svg { width: 1rem; height: 1rem; }
.notis-app { text-transform: uppercase; font-weight: 600; }
.notis-tid { margin-left: auto; }
.notis-fran { font-weight: 600; font-size: .95rem; }
.notis-amne { font-size: .95rem; }
.notis-text { font-size: .88rem; color: var(--dampad); }
@media (max-width: 480px) { .notis { margin: 0 .5rem 0 -.25rem; } }
@media (prefers-reduced-motion: no-preference) {
  .js .delad:not(.in) .notis { transform: translateY(-1.25rem) rotate(-2deg); opacity: 0; }
  .js .delad .notis { transition: transform .7s cubic-bezier(.2, .7, .2, 1) .45s, opacity .5s linear .45s; }
}

/* 5. Espresso */
.morkt { background: var(--blaeck); color: var(--papper); padding: 6.5rem 0; }
.morkt .rubrik-stor { margin-top: 1rem; max-width: 17ch; }
.kort-rad { display: grid; gap: 1.25rem; margin-top: 3.5rem; }
@media (min-width: 900px) { .kort-rad { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.morkt-kort { padding: 2rem; border-radius: 24px; background: rgba(240, 235, 226, .06); border: 1px solid rgba(240, 235, 226, .12); }
.morkt-kort:nth-child(2) { background: var(--bla); border-color: transparent; }
.morkt-kort:nth-child(2) p { color: #ffffff; }
.morkt-kort p { margin-top: .8rem; color: rgba(240, 235, 226, .82); }

/* 6. Priser */
.priser { padding: 6.5rem 0; }
.priser .rubrik-stor { margin-top: 1rem; }
.priser .ingress { margin-top: 1.5rem; }
.prisrad { display: grid; gap: 1.25rem; margin-top: 3.5rem; align-items: stretch; }
@media (min-width: 960px) { .prisrad { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; } }
.pris { display: flex; flex-direction: column; gap: 1.5rem; }
.pris-mest { background: var(--vit); border-style: solid; border-color: var(--blaeck); box-shadow: 0 30px 60px -40px rgba(33, 12, 2, .55); }
.pris-siffra { font-size: clamp(3rem, 7vw, 4.5rem); line-height: 1; letter-spacing: -.04em; }
.pris-siffra span { margin-left: .25em; font-size: .38em; letter-spacing: 0; color: var(--dampad); }
.pris-siffra .fran { display: block; margin-bottom: .35rem; font-size: .26em; letter-spacing: .2em; text-transform: uppercase; }
.pris-lista { flex: 1; list-style: none; margin: 0; padding: 1.25rem 0 0; border-top: 1px dashed rgba(33, 12, 2, .3); display: grid; gap: .55rem; align-content: start; }
.pris-lista li { position: relative; padding-left: 1.4rem; color: var(--dampad); }
.pris-lista li::before { content: ""; position: absolute; left: .1rem; top: .62em; width: .5rem; height: .5rem; border-radius: 50%; background: var(--rod); }
.pris .knapp { width: 100%; }

/* 7. Frågor */
.fragor { padding: 6.5rem 0; background: var(--vit); }
.fragor-ram { display: grid; gap: 3rem; }
@media (min-width: 960px) { .fragor-ram { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 4rem; align-items: start; } }
.fragelista { display: grid; gap: .75rem; }
.fragelista details { border-radius: 16px; background: var(--blaeck); color: var(--vit); }
.fragelista summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.5rem; padding: 1rem 1.5rem; cursor: pointer; list-style: none; font-weight: 500;
}
.fragelista summary::-webkit-details-marker { display: none; }
.fragelista summary::after { content: "+"; flex: none; font-size: 1.4rem; line-height: 1; transition: transform .2s var(--ut); }
.fragelista details[open] summary::after { transform: rotate(45deg); }
.fragelista details p { padding: 0 1.5rem 1.25rem; color: rgba(255, 255, 255, .8); font-size: 1rem; }

/* 8. Skräddarsytt: pappersark på espresso */
.skraddarsytt { background: var(--blaeck); color: var(--papper); padding: 6.5rem 0; }
.skraddarsytt .rubrik { margin-top: 1rem; }
.skraddarsytt .ingress { margin-top: 1.5rem; }
.pappersark { display: grid; gap: 1rem; padding: 2rem; border-radius: 6px; background: var(--papper); color: var(--blaeck); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.pappersark .knapp { justify-self: start; }

/* 9. Avslut */
.avslut { padding: 7rem 0; text-align: center; }
.avslut .rubrik-stor { max-width: 16ch; margin: 0 auto 2.25rem; }

/* Telefonen som en iPhone 17 Pro: titanram, tunn svart kant, Dynamic Island
   och sidoknappar. Allt i CSS, skalar med bredden --b. */
.levande-telefon {
  padding: calc(var(--b) * .028);
  border-radius: calc(var(--b) * .15);
  background: #050505;
  box-shadow: 0 0 0 calc(var(--b) * .004) #1b1a19, 0 0 0 calc(var(--b) * .014) #c9c3b9, 0 0 0 calc(var(--b) * .017) #8d877e, inset 0 0 0 1px rgba(255,255,255,.06), 0 50px 90px -40px rgba(33,12,2,.65), 0 18px 34px -18px rgba(33,12,2,.4);
}
.levande-telefon iframe { border-radius: 50px; }
.levande-telefon::before, .process-telefon::before {
  content: ""; position: absolute; z-index: 3; left: 50%; transform: translateX(-50%);
  background: #000; border-radius: 9999px; pointer-events: none;
}
.levande-telefon::before { top: calc(var(--b) * .054); width: calc(var(--b) * .3); height: calc(var(--b) * .088); }
.levande-telefon::after, .process-telefon::after {
  content: ""; position: absolute; top: 0; bottom: 0; pointer-events: none;
}
.levande-telefon::after {
  left: calc(var(--b) * -.026); right: calc(var(--b) * -.026);
  background: linear-gradient(to bottom, transparent 17%, #a39d94 17% 21%, transparent 21% 25%, #a39d94 25% 32.5%, transparent 32.5% 34.5%, #a39d94 34.5% 42%, transparent 42%) left / calc(var(--b) * .011) 100% no-repeat,
    linear-gradient(to bottom, transparent 27%, #a39d94 27% 39%, transparent 39% 57%, #8f8980 57% 64.5%, transparent 64.5%) right / calc(var(--b) * .011) 100% no-repeat;
}
@media (min-width: 960px) {
  .process-telefon { padding: .6rem; border-radius: 3.1rem; background: #050505; box-shadow: 0 0 0 1px #1b1a19, 0 0 0 .24rem #c9c3b9, 0 0 0 .3rem #8d877e, inset 0 0 0 1px rgba(255,255,255,.06), 0 50px 90px -40px rgba(33,12,2,.65), 0 18px 34px -18px rgba(33,12,2,.4); }
  .process-bild { inset: .6rem; width: calc(100% - 1.2rem); height: calc(100% - 1.2rem); border-radius: 2.55rem; }
  .process-telefon::before { top: 1.25rem; width: 30%; aspect-ratio: 125 / 37; }
  .process-telefon::after { left: -.48rem; right: -.48rem; background: linear-gradient(to bottom, transparent 17%, #a39d94 17% 21%, transparent 21% 25%, #a39d94 25% 32.5%, transparent 32.5% 34.5%, #a39d94 34.5% 42%, transparent 42%) left / .2rem 100% no-repeat,
    linear-gradient(to bottom, transparent 27%, #a39d94 27% 39%, transparent 39% 57%, #8f8980 57% 64.5%, transparent 64.5%) right / .2rem 100% no-repeat; }
}
/* Höjden följer skärmen exakt (390 x 844 skalad), så att ingen svart remsa syns nedtill */
.levande-telefon { height: calc(var(--b) * .944 * 844 / 390 + var(--b) * .056); }
/* Affischen i sigillets lackröda (samma som vaxet i mallen Klassisk: #7a1e26) */
.affisch { background: #7a1e26; }

/* Priset i ett eget span (data-pris) efter "från": full storlek, bara "kr" är litet */
.pris-siffra > span[data-pris] { margin-left: 0; font-size: 1em; letter-spacing: inherit; color: inherit; }