/* The start page in the canvas design (Website in Bekanta Brand), shared by / and /en/. No borders. */
:root { --kant: max(24px, calc((100% - 1240px) / 2)); --text-mork: #3B4E5A; --scen-yta: #142028; --scen-knapp: #24333C; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { background: var(--vitt); }
a:hover { color: var(--dov); }
.pill { display: inline-flex; align-items: center; justify-content: center; min-height: 60px; padding: 0 30px; border-radius: 30px; font: 600 18px var(--text); text-decoration: none; transition: transform 0.42s cubic-bezier(0.34, 1.56, 0.64, 1); }
.pill:active { transform: scale(0.96); transition: transform 0.08s ease-out; }
.pill:focus-visible, .topp a:focus-visible { outline: 3px solid var(--pratar); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pill, .pill:active { transition: none; transform: none; } }

/* The top bar: dark and sticky over the page. */
.topp { position: sticky; top: 0; z-index: 20; padding: 14px var(--kant); background: rgba(10, 19, 24, 0.94); color: var(--scen-text); display: flex; align-items: center; justify-content: space-between; gap: 8px 16px; }
.topp .logga { color: var(--scen-text); font-size: 30px; flex: none; }
.topp .logga svg { width: 36px; height: 36px; flex: none; }
.topp nav { display: flex; align-items: center; gap: 4px 28px; font-size: 17px; font-weight: 500; }
.topp nav a { color: var(--scen-text); text-decoration: none; padding: 12px 0; }
.topp nav a:hover { color: var(--scen-dov); }
.topp nav a.boka { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 24px; background: var(--scen-text); color: var(--black); font-weight: 600; }
.topp nav a.boka:hover { background: #FFFFFF; color: var(--black); }
/* The language switch: a small pill to the other language, a plain link (each language has its own address; / is always Swedish). */
.topp nav a.sprak { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 20px; background: rgba(255, 255, 255, 0.1); color: var(--scen-text); font-size: 15px; font-weight: 600; }
.topp nav a.sprak:hover { background: rgba(255, 255, 255, 0.18); color: var(--scen-text); }
.topp nav a.sprak .sprak-kort { display: none; }
.topp nav a { white-space: nowrap; }
@media (max-width: 900px) { .topp nav a:not(.boka):not(.sprak) { display: none; } .topp nav { gap: 8px; } }
/* On a phone: the logo, EN or SV, and the one button. */
@media (max-width: 760px) { .topp nav a.sprak { min-height: 44px; padding: 0 12px; } .topp nav a.sprak .sprak-lang { display: none; } .topp nav a.sprak .sprak-kort { display: inline; } }
@media (max-width: 760px) { .topp { padding: 12px 24px; } .topp .logga { font-size: 24px; gap: 8px; } .topp .logga svg { width: 32px; height: 32px; } .topp nav a.boka { min-height: 44px; padding: 0 16px; font-size: 16px; } }

/* The hero: full width on the stage. */
.hjalte { position: relative; overflow: hidden; background: var(--scen); color: var(--scen-text); padding: 48px var(--kant) 72px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px 32px; min-height: max(680px, calc(100vh - 78px)); min-height: max(680px, calc(100svh - 78px)); }
.hjalte .text { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 24px; position: relative; z-index: 1; }
.hjalte .over { font-size: 19px; color: var(--scen-dov); }
.hjalte h1 { font-size: clamp(4rem, 10vw, 9.5rem); line-height: 0.88; letter-spacing: -0.045em; }
.hjalte .ingress { font-size: 1.4rem; line-height: 1.4; color: #C4D0D6; max-width: 26em; }
.hjalte .knappar { display: flex; flex-wrap: wrap; gap: 12px; }
.hjalte .pill.gron { background: var(--hittat); color: var(--black); }
.hjalte .pill.mork { background: var(--scen-knapp); color: var(--scen-text); }
.hjalte .pill.mork:hover { background: #2E3F49; }
.hjalte .bild { flex: 1.5 1 460px; min-width: 0; position: relative; padding: 0 0 40px; }
/* The room as in the canvas (RoomBig): the hall cropped to 310 250 1300 845 in the engine's 1920 x 1080 (set in the script), a little past the column on both sides. */
.hjalte .rum { display: block; width: calc(100% + 60px); height: auto; margin: 0 -40px 0 -20px; overflow: visible; }

/* The phone beside the room: what the guest sees when two picked each other. */
.telefon { position: absolute; right: 0; bottom: -20px; width: 212px; height: 430px; border-radius: 38px; background: var(--scen); box-shadow: 0 0 0 9px #1B262D, 0 30px 60px rgba(0, 0, 0, 0.5); overflow: hidden; transform: rotate(5deg); }
.telefon .skarm { position: absolute; inset: 0; }

/* Screen 1, as in the app after answering (Mobile-Svarat): the room's name, the chosen answer, the guest's drop that lights up,
   "Ditt svar är inne." and the dots that fill as the room answers. Paper, like the app's light screens. */
.telefon .svarat { background: var(--papper); color: var(--black); padding: 30px 16px 18px; display: flex; flex-direction: column; gap: 8px; }
.telefon .topp-rad { display: flex; justify-content: space-between; align-items: baseline; font: 600 13px var(--rubrik); }
.telefon .topp-rad .dov { font: 400 11px var(--text); }
.telefon .fragan { margin-top: 10px; font-size: 12px; line-height: 1.3; color: var(--dov); }
.telefon .valt { align-self: flex-start; display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 11px; border-radius: 14px; background: var(--vitt); font-size: 12px; font-weight: 600; }
.telefon .valt i { width: 9px; height: 9px; border-radius: 50%; background: #7FB5F5; }
.telefon .droppe { flex: 1 1 auto; display: grid; place-items: center; }
.telefon .droppe i { width: 74px; height: 74px; border-radius: 50%; background: var(--soker); transform: scale(0.82); transition: background-color 0.25s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.5s; }
.telefon.lyser .droppe i { background: var(--black); transform: scale(1); box-shadow: 0 0 0 3px rgba(15, 31, 42, 0.3), 0 0 0 16px rgba(15, 31, 42, 0.07); }
.telefon .inne { font: 700 22px/1.05 var(--rubrik); letter-spacing: -0.02em; text-align: center; padding-bottom: 6px; }
.telefon .vantar { border-radius: 14px; background: var(--vitt); padding: 9px 11px; display: flex; align-items: center; gap: 8px; font-size: 11px; line-height: 1.3; }
.telefon .prickar { display: flex; gap: 3px; flex: none; }
.telefon .prickar i { width: 8px; height: 8px; border-radius: 50%; background: #D5D0C3; transition: background-color 0.2s; }
.telefon .prickar i.pa { background: var(--black); }

/* Screen 2, the reveal as in the app (Mobile-Reveal): the bubbles sweep up, the confetti falls, the chips land one at a time,
   the initials pop and the heading slides up. The parts move in only while the screen is in (match); on the way out (ut)
   the screen fades with everything in place, and only when it is gone do the parts go back (svarat), out of sight. */
.telefon .avslojad { background: var(--scen); opacity: 0; transition: opacity 0.45s ease; }
.telefon[data-lage="match"] .avslojad { opacity: 1; transition-duration: 0.2s; }
.telefon .klot { position: absolute; border-radius: 50%; transform: translateY(120%); }
.telefon .klot.bla { left: -150px; bottom: -150px; width: 470px; height: 470px; background: #6FB4CE; }
.telefon .klot.gron { left: -190px; bottom: -220px; width: 430px; height: 430px; background: #5FD3A8; }
.telefon .tagg { position: absolute; height: 30px; padding: 0 12px; border-radius: 15px; color: var(--black); display: flex; align-items: center; font-size: 15px; font-weight: 600; opacity: 0; }
.telefon .tagg.t1 { left: 22px; top: 44px; background: #7FB5F5; transform: translateY(-40px) rotate(-8deg); }
.telefon .tagg.t2 { right: 14px; top: 78px; background: #F0D264; transform: translateY(-40px) rotate(6deg); }
.telefon .match { position: absolute; left: 0; right: 0; top: 150px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; color: var(--black); }
.telefon .avatarer { display: flex; align-items: center; height: 54px; padding: 0 8px; border-radius: 27px; background: #FFFFFF; gap: 6px; transform: scale(0); }
.telefon .avatarer span { width: 38px; height: 38px; border-radius: 19px; background: var(--hittat); display: grid; place-items: center; font: 700 16px var(--rubrik); }
.telefon .stor, .telefon .vem { opacity: 0; transform: translateY(18px); }
.telefon .stor { font: 700 30px/1 var(--rubrik); letter-spacing: -0.03em; padding: 0 16px; }
.telefon .vem { font-size: 15px; font-weight: 500; }
.telefon .konfetti i { position: absolute; top: -16px; left: var(--x); width: var(--w); height: var(--h); border-radius: 2px; background: var(--c); opacity: 0; }
.telefon:is([data-lage="match"], [data-lage="ut"]) .klot { transform: none; }
.telefon:is([data-lage="match"], [data-lage="ut"]) .tagg { opacity: 1; }
.telefon:is([data-lage="match"], [data-lage="ut"]) .tagg.t1 { transform: rotate(-8deg); }
.telefon:is([data-lage="match"], [data-lage="ut"]) .tagg.t2 { transform: rotate(6deg); }
.telefon:is([data-lage="match"], [data-lage="ut"]) .avatarer { transform: none; }
.telefon:is([data-lage="match"], [data-lage="ut"]) .stor, .telefon:is([data-lage="match"], [data-lage="ut"]) .vem { opacity: 1; transform: none; }
.telefon[data-lage="match"] .klot { transition: transform 0.75s cubic-bezier(0.2, 0.8, 0.2, 1); }
.telefon[data-lage="match"] .klot.gron { transition-delay: 0.08s; }
.telefon[data-lage="match"] .tagg { transition: opacity 0.25s ease 0.55s, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.55s; }
.telefon[data-lage="match"] .tagg.t2 { transition-delay: 0.75s; }
.telefon[data-lage="match"] .avatarer { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s; }
.telefon[data-lage="match"] .stor { transition: opacity 0.35s ease 0.6s, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 0.6s; }
.telefon[data-lage="match"] .vem { transition: opacity 0.35s ease 0.75s, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) 0.75s; }
.telefon[data-lage="match"] .konfetti i { animation: telefon-konfetti 1.5s ease-in calc(0.35s + var(--d)) both; }
@keyframes telefon-konfetti { 0% { opacity: 1; transform: translateY(0) rotate(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(440px) rotate(320deg); } }
/* Reduced motion: no movement, the match simply stands (phone.js puts it there once). */
@media (prefers-reduced-motion: reduce) {
  .telefon *, .telefon .avslojad { transition: none !important; animation: none !important; }
}

@media (max-width: 760px) {
  /* The phone: the hero is still the whole first screen; the room fills the width under the text and the phone stands smaller at its right edge. */
  .hjalte { padding: 32px 24px 40px; flex-direction: column; align-items: stretch; justify-content: space-between; min-height: calc(100vh - 68px); min-height: calc(100svh - 68px); }
  .hjalte .text { flex: none; gap: 20px; }
  .hjalte .bild { flex: 1 0 auto; display: flex; align-items: center; padding: 8px 0 48px; }
  .hjalte .rum { width: 140%; margin: 0 0 0 -30%; }
  .telefon { transform: rotate(5deg) scale(0.68); transform-origin: bottom right; right: -4px; bottom: 0; }
  .hjalte .pill { flex: 1 1 auto; }
}

/* The sections under the hero. */
.del { width: 100%; max-width: 1240px; margin: 0 auto; padding: 96px 24px 0; display: flex; flex-direction: column; gap: 36px; }
.rubrik { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.rubrik .over { font-size: 15px; color: var(--dov); }
.del h2 { font-size: clamp(2.2rem, 4.4vw, 3.5rem); line-height: 1.03; letter-spacing: -0.03em; }
.del h3 { font-weight: 600; letter-spacing: -0.01em; }
@media (max-width: 760px) { .del { padding: 96px 24px 0; } }

.steg { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.steg > div { border-radius: 28px; background: var(--papper-ljus); padding: 20px 24px 28px; display: flex; flex-direction: column; gap: 10px; }
.steg .steg-rum { display: block; width: 100%; height: auto; margin-bottom: 4px; }
.steg .nr { font-size: 15px; color: var(--dov); }
.steg h3 { font-size: 1.7rem; }
.steg p { font-size: 1.05rem; line-height: 1.5; color: var(--dov); }

.tillfallen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 16px; }
.tillfallen > div { border-radius: 28px; background: var(--papper-ljus); padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.tillfallen .prickar { display: flex; gap: 6px; }
.tillfallen .prickar i { width: 22px; height: 22px; border-radius: 11px; background: var(--scen); }
.tillfallen .prickar i.a { background: #F2C14E; }
.tillfallen .prickar i.b { background: #B79CF2; }
.tillfallen h3 { margin-top: 8px; font-size: 1.6rem; }
.tillfallen p { font-size: 1.05rem; line-height: 1.5; color: var(--dov); }

.motor { border-radius: 40px; background: var(--scen); color: var(--scen-text); padding: 56px 48px; display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.motor .vanster { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.motor .over, .motor .fotnot, .motor .punkt p, .motor .satt p { color: var(--scen-dov); }
.motor .over { font-size: 15px; }
.motor ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.motor .punkt { display: flex; gap: 16px; }
.motor .punkt > span { flex: none; width: 34px; height: 34px; border-radius: 17px; background: var(--scen-knapp); display: grid; place-items: center; font-size: 16px; font-weight: 700; }
.motor .punkt h3 { font-size: 1.35rem; line-height: 1.2; margin-bottom: 2px; }
.motor .punkt p { font-size: 1.05rem; line-height: 1.5; }
.motor .satt { display: flex; flex-direction: column; gap: 10px; }
.motor .satt > p { font-size: 15px; }
.motor .satt > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(182px, 1fr)); gap: 8px; }
.motor .satt > div > div { min-width: 0; border-radius: 18px; background: var(--scen-yta); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.motor .satt h4 { margin: 0; font: 600 1.15rem var(--rubrik); }
.motor .satt div p { font-size: 15px; line-height: 1.35; }
.motor .fotnot { font-size: 1rem; line-height: 1.5; }
.motor .hoger { flex: 1.1 1 420px; min-width: 0; border-radius: 28px; background: var(--scen-yta); padding: 20px 24px; }
.motor .hoger svg { display: block; width: 100%; height: auto; overflow: visible; }
.motor .hoger .pairing-cap { font: 600 21px var(--text); }
@media (max-width: 760px) { .motor { border-radius: 32px; padding: 32px 20px; } .motor .hoger { padding: 12px; } .motor .hoger .pairing-cap { font-size: 30px; } .motor .vanster, .motor .hoger { flex-basis: 100%; } }

.tre { flex-direction: row; flex-wrap: wrap; gap: 16px; }
.tre > div { flex: 1 1 392px; min-width: 0; border-radius: 28px; background: var(--papper-ljus); padding: 36px; display: flex; flex-direction: column; gap: 12px; }
.tre h3 { font-size: 1.9rem; letter-spacing: -0.02em; }
.tre p { font-size: 1.1rem; line-height: 1.5; color: var(--dov); }
@media (max-width: 760px) { .tre > div { padding: 28px 24px; } }

/* Book a room: the green surface with the contact form. */
.boka-yta { border-radius: 40px; background: var(--hittat); padding: 56px 48px; display: flex; flex-direction: column; gap: 32px; }
.boka-yta .rad { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.boka-yta .text { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.boka-yta .text p { font-size: 1.15rem; line-height: 1.5; max-width: 30em; }
.boka-yta .pill { border: 0; background: var(--scen); color: #FFFFFF; cursor: pointer; }
.boka-yta .pill:hover { background: #1B2A33; color: #FFFFFF; }
.boka-yta .pill:disabled { opacity: 0.6; cursor: default; }
.boka-yta form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.boka-yta form .hela { grid-column: 1 / -1; }
.boka-yta form .skicka { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.boka-yta label { color: var(--black); font-weight: 500; }
.boka-yta .svar { font-weight: 600; }
.dold { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 760px) { .boka-yta { border-radius: 32px; padding: 32px 20px; } .boka-yta form { grid-template-columns: 1fr; } }

footer { width: 100%; max-width: 1240px; margin: 0 auto; padding: 56px 24px 48px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; font-size: 15px; color: var(--dov); }
footer nav { display: flex; flex-wrap: wrap; gap: 0 24px; }
footer a { color: var(--dov); padding: 12px 0; display: inline-block; }
@media (max-width: 760px) { footer { padding: 56px 24px 40px; } }
/* The narrowest phones (360): logo, EN or SV and the button still on one line inside the 24 px margins. */
@media (max-width: 380px) { .topp { column-gap: 8px; } .topp nav a.boka { padding: 0 14px; } .topp nav a.sprak { padding: 0 10px; } }
/* "acquainted." is a longer word than "bekanta.": a little smaller in English, so that it stays inside its column. */
:lang(en) .hjalte h1 { font-size: clamp(3.4rem, 8.2vw, 8rem); }