/* Blixtflow – bransch: frisörer och barbershops (prefix hr-). Salongskänsla: diagonala ränder som en
   barberarstång, en klipplinje med sax, skyltlika versaler. ind-hair.js fyller lördagens schema när man
   skrollar, sköter bokningen, kvittot, före/efter och språken. Bygger på ai.css. */
.page-hair { --stripe-a: rgba(200, 168, 242, .14); --stripe-b: rgba(155, 93, 229, .08); --honey: #E8C27A; --brown: #5A3A2A; }

/* ==========================================================================
   1. Hjälten
   ========================================================================== */
.hr-hero { background: radial-gradient(80% 70% at 85% 0%, rgba(155, 93, 229, .3), transparent 60%), var(--natt); }
.hr-stripes { position: absolute; inset: -20% -10% auto auto; z-index: -1; width: 46%; height: 140%; background: repeating-linear-gradient(-45deg, var(--stripe-a) 0 26px, transparent 26px 52px, var(--stripe-b) 52px 78px, transparent 78px 104px); -webkit-mask-image: linear-gradient(90deg, transparent, #000 40%); mask-image: linear-gradient(90deg, transparent, #000 40%); }
.motion .hr-stripes { animation: hr-pole 12s linear infinite; }
.hr-hero .air-title { max-width: 13ch; }
.hr-show { position: relative; display: grid; justify-items: end; padding: 10px 0 60px; }
.hr-board { width: min(440px, 100%); padding: 16px; border-radius: 24px; color: var(--ink); background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .1), 0 60px 110px -40px rgba(0, 0, 0, .95), 0 30px 90px -40px rgba(155, 93, 229, .7); }
.motion .hr-board { animation: chp-rise 1.2s .2s var(--ease-out) backwards; }
.hr-board__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.hr-board__top b { display: inline-flex; align-items: center; gap: 8px; font-size: 1.05rem; }
.hr-board__top .ic { width: 17px; height: 17px; color: var(--primar-ink); }
.hr-board__top span { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hr-board__cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.hr-col { display: grid; align-content: start; gap: 6px; padding: 8px; border-radius: 14px; background: var(--ljus); min-height: 230px; }
.hr-col__name { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 800; }
.hr-col__name i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: .66rem; font-style: normal; color: #fff; background: var(--natt); }
.hr-slot { display: grid; min-height: calc(var(--len) * 36px); align-content: start; padding: 6px 8px; border-radius: 10px; font-size: .7rem; font-weight: 700; line-height: 1.25; color: #fff; background: var(--primar-ink); }
.hr-slot small { font-weight: 600; opacity: .8; }
.hr-col:nth-child(2) .hr-slot { background: var(--natt); }
.hr-col:nth-child(3) .hr-slot { color: var(--natt); background: var(--ton); }
.hr-slot--new { color: var(--natt) !important; background: var(--gnista) !important; box-shadow: 0 0 0 2px #fff, 0 10px 20px -8px rgba(44, 14, 61, .5); }
.motion .hr-slot { animation: chp-pop .5s var(--spring) backwards; animation-delay: calc(.8s + var(--i) * .18s); }
.motion .hr-slot--new { animation: hr-snap .9s 3.2s var(--spring) backwards, glow-ring-g 2.4s 4.2s ease-in-out infinite; }
.hr-call { position: absolute; left: -10px; bottom: 6px; z-index: 3; width: min(270px, 66%); padding: 14px; border-radius: 20px; color: var(--ink); background: #fff; box-shadow: 0 40px 80px -24px rgba(0, 0, 0, .9); }
.motion .hr-call { animation: hr-slide 1s 1.6s var(--ease-out) backwards; }
.hr-call__top { display: flex; align-items: center; gap: 10px; }
.hr-call__top span:last-child { display: grid; }
.hr-call__top small { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ok); }
.hr-call__top b { font-variant-numeric: tabular-nums; }
.hr-call__ic { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #fff; background: var(--ok); }
.hr-call__ic .ic { width: 16px; height: 16px; }
.motion .hr-call__ic { animation: air-buzz 1.4s 2s ease-in-out 3; }
.hr-call__q, .hr-call__a { margin-top: 8px; padding: 8px 11px; border-radius: 14px; font-size: .8rem; line-height: 1.4; }
.hr-call__q { background: var(--line-2); border-bottom-left-radius: 4px; }
.hr-call__a { color: #fff; background: var(--primar-ink); border-bottom-right-radius: 4px; }
.motion .hr-call__a { animation: fade-up .5s 2.8s var(--ease-out) backwards; }
.hr-dm { position: absolute; right: -8px; top: -6px; z-index: 3; display: flex; align-items: center; gap: 9px; max-width: 250px; padding: 9px 12px 9px 9px; border-radius: 16px; font-size: .78rem; line-height: 1.35; color: var(--ink); background: #fff; box-shadow: 0 24px 50px -18px rgba(0, 0, 0, .8); }
.hr-dm i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: #fff; background: linear-gradient(45deg, #f9a03f, #e1306c 50%, #833ab4); }
.hr-dm .ic { width: 16px; height: 16px; }
.hr-dm span { display: grid; }
.motion .hr-dm { animation: chp-pop .7s 4.2s var(--spring) backwards, bob 6s 5s ease-in-out infinite; }
.hr-bx { position: absolute; left: 0; top: -40px; z-index: 4; width: 150px; }
@media (min-width: 1000px) { .hr-show { padding-top: 60px; } .hr-board { margin-right: 10px; } }
.hr-cut { position: absolute; left: 0; right: 0; bottom: calc(var(--sheet-r) + 18px); height: 30px; pointer-events: none; }
.hr-cut i { position: absolute; left: 0; right: 0; top: 50%; border-top: 2px dashed rgba(242, 250, 163, .35); }
.hr-cut span { position: absolute; left: 0; top: 50%; display: grid; place-items: center; width: 30px; height: 30px; margin-top: -15px; color: var(--gnista); }
.hr-cut .ic { width: 22px; height: 22px; transform: rotate(-90deg); }
.motion .hr-cut span { animation: hr-cutline 9s linear infinite; }
@media (max-width: 999px) { .hr-show { justify-items: center; } }
@media (max-width: 599px) {
  .hr-show { padding-bottom: 140px; }
  .hr-col { min-height: 190px; padding: 6px; }
  .hr-slot { font-size: .62rem; padding: 5px 6px; }
  .hr-call { top: auto; bottom: 0; left: -4px; width: 72%; }
  .hr-dm { right: 0; top: -40px; max-width: 220px; }
  .hr-bx { top: auto; left: auto; right: -10px; bottom: -6px; width: 104px; }
  .hr-cut { display: none; }
}

/* ==========================================================================
   2. Lördagsrusningen
   ========================================================================== */
.hr-rush { color: #fff; background: linear-gradient(180deg, #321147, var(--natt)); }
.hr-rush__grid { display: grid; gap: 28px; align-items: center; }
@media (min-width: 1000px) { .hr-rush__grid { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 56px; } }
.hr-rush__copy .lead { color: var(--on-dark-muted); }
.hr-meter { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; }
.hr-meter p { display: grid; gap: 4px; padding: 14px; border-radius: 18px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--on-dark-line); }
.hr-meter b { font-size: 2.2rem; font-weight: 800; line-height: 1; color: var(--gnista); font-variant-numeric: tabular-nums; }
.hr-meter b.is-bump { animation: bump .45s var(--spring); }
.hr-meter span { font-size: .84rem; color: var(--on-dark-muted); }
.hr-meter--zero b { color: #fff; }
.hr-ring { position: relative; display: grid; place-items: center; width: 64px; height: 64px; margin-top: 20px; }
.hr-ring span { position: relative; z-index: 1; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; color: var(--natt); background: var(--gnista); }
.hr-ring .ic { width: 24px; height: 24px; }
.hr-ring i { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gnista); opacity: 0; }
.hr-ring.is-ring span { animation: air-buzz .5s ease-in-out; }
.hr-ring.is-ring i { animation: ring-out 1s ease-out; }
.hr-ring.is-ring i + i { animation-delay: .25s; }
.hr-sched { --rowh: 58px; padding: 16px; border-radius: 26px; color: var(--ink); background: #fff; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9); }
.hr-sched__head { display: grid; grid-template-columns: 34px repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.hr-sched__head b { padding: 6px; border-radius: 10px; font-size: .8rem; text-align: center; background: var(--ljus); }
.hr-sched__body { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; }
.hr-sched__hours { display: grid; grid-auto-rows: var(--rowh); font-size: .72rem; font-weight: 700; color: var(--muted); }
.hr-sched__grid { position: relative; height: calc(var(--rows) * var(--rowh)); border-radius: 12px; background: repeating-linear-gradient(180deg, transparent 0 calc(var(--rowh) - 1px), var(--line-2) calc(var(--rowh) - 1px) var(--rowh)), linear-gradient(90deg, var(--ljus) 0 calc(33.33% - 4px), #fff calc(33.33% - 4px) calc(33.33% + 4px), var(--ljus) calc(33.33% + 4px) calc(66.66% - 4px), #fff calc(66.66% - 4px) calc(66.66% + 4px), var(--ljus) calc(66.66% + 4px)); }
.hr-bk { position: absolute; left: calc(var(--c) * 33.33% + 4px); top: calc(var(--h) * var(--rowh) + 3px); width: calc(33.33% - 8px); height: calc(var(--len) * var(--rowh) - 6px); display: flex; align-items: flex-start; gap: 6px; overflow: hidden; padding: 8px; border-radius: 12px; font-size: .78rem; font-weight: 700; line-height: 1.25; color: #fff; background: var(--primar-ink); opacity: 0; transform: scale(.6) rotate(-6deg); transition: opacity .35s, transform .6s var(--spring); }
.hr-bk:nth-child(3n + 2) { background: var(--natt); }
.hr-bk:nth-child(3n) { color: var(--natt); background: var(--ton); }
.hr-bk i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: rgba(255, 255, 255, .2); }
.hr-bk .ic { width: 13px; height: 13px; }
.hr-bk.is-on { opacity: 1; transform: none; }
.hr-bk.is-new { box-shadow: 0 0 0 3px var(--gnista); }
@media (max-width: 999px) {
  .hr-rush.is-pinned .hr-rush__copy .lead, .hr-rush.is-pinned .hr-ring { display: none; }
  .hr-rush.is-pinned .hr-meter { margin-top: 12px; }
  .hr-rush.is-pinned .hr-meter b { font-size: 1.6rem; }
  .hr-sched { --rowh: 46px; padding: 10px; }
  .hr-bk { font-size: .64rem; padding: 5px; }
  .hr-bk i { display: none; }
}

/* ==========================================================================
   3. Boka själv
   ========================================================================== */
.hr-flow { display: grid; gap: 18px; padding: clamp(20px, 3vw, 28px); border-radius: 28px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
.hr-flow__h { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.hr-flow__h span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; font-size: .74rem; letter-spacing: 0; color: var(--natt); background: var(--gnista); }
.hr-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.hr-chips button { display: grid; gap: 2px; padding: 11px 13px; border: 0; border-radius: 14px; cursor: pointer; text-align: left; font: inherit; color: var(--ink); background: var(--ljus); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .2s, color .2s, transform .3s var(--spring), box-shadow .2s; }
.hr-chips button:hover { transform: translateY(-2px); }
.hr-chips button small { font-size: .76rem; color: var(--muted); }
.hr-chips button[aria-pressed="true"] { color: #fff; background: var(--natt); box-shadow: 0 12px 24px -12px rgba(44, 14, 61, .7); }
.hr-chips button[aria-pressed="true"] small { color: var(--ton); }
.hr-chips--who { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hr-chips--who button { justify-items: center; gap: 6px; text-align: center; font-size: .82rem; font-weight: 700; }
.hr-chips--who i { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; font-style: normal; font-weight: 800; color: #fff; background: var(--primar-ink); }
.hr-chips--who button[aria-pressed="true"] i { color: var(--natt); background: var(--gnista); }
.hr-chips--time { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hr-chips--time button { justify-items: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.hr-chips--time.is-busy button { animation: hr-shimmer .7s ease; }
.hr-done { display: grid; gap: 10px; padding: 14px; border-radius: 18px; background: var(--ok-soft); opacity: .45; filter: grayscale(1); transition: opacity .4s, filter .4s; }
.hr-done.is-on { opacity: 1; filter: none; }
.hr-done__ok { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--ok); }
.hr-done__ok .ic { width: 18px; height: 18px; stroke-width: 3; }
.hr-done__sms { padding: 10px 13px; border-radius: 14px 14px 14px 4px; font-size: .88rem; line-height: 1.45; background: #fff; box-shadow: 0 0 0 1px var(--line); }
.hr-done.is-on .hr-done__sms { animation: fade-up .5s var(--spring); }
.hr-flow__note { font-size: .8rem; color: var(--muted); }
@media (max-width: 479px) { .hr-chips--who, .hr-chips--time { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==========================================================================
   4. Kvittot
   ========================================================================== */
.hr-calc { background: repeating-linear-gradient(-45deg, rgba(200, 168, 242, .04) 0 22px, transparent 22px 44px), linear-gradient(180deg, var(--natt), #321147); }
.hr-sliders { display: grid; gap: 16px; margin-top: 24px; }
.hr-range p { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.hr-range label { font-weight: 700; }
.hr-range output { font-size: 1.1rem; font-weight: 800; color: var(--gnista); font-variant-numeric: tabular-nums; }
.hr-range input { --fill: 50%; width: 100%; height: 28px; margin: 0; appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; }
.hr-range input::-webkit-slider-runnable-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--gnista) var(--fill), rgba(255, 255, 255, .15) var(--fill)); }
.hr-range input::-moz-range-track { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--gnista) var(--fill), rgba(255, 255, 255, .15) var(--fill)); }
.hr-range input::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 4px var(--gnista); }
.hr-range input::-moz-range-thumb { width: 20px; height: 20px; border: 4px solid var(--gnista); border-radius: 50%; background: #fff; }
.hr-range input:focus-visible { outline: 3px solid var(--gnista); outline-offset: 4px; border-radius: 8px; }
.hr-receipt { display: grid; justify-items: center; }
.hr-receipt__paper { position: relative; width: min(360px, 100%); padding: 26px 24px 34px; color: #2a2230; background: #FFFDF8; font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .95); transform: rotate(1.5deg); -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 12px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 20px 12px repeat-x; mask: linear-gradient(#000 0 0) top / 100% calc(100% - 12px) no-repeat, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / 20px 12px repeat-x; }
.motion .hr-receipt.is-in .hr-receipt__paper { animation: hr-print 1.2s var(--ease-out) backwards; }
.hr-receipt__logo { display: grid; justify-items: center; gap: 4px; padding-bottom: 14px; margin-bottom: 10px; border-bottom: 2px dashed #d8d0e0; text-align: center; }
.hr-receipt__logo .ic { width: 26px; height: 26px; color: var(--primar-ink); }
.hr-receipt__logo b { font-family: var(--font, inherit); font-size: 1.05rem; letter-spacing: .06em; text-transform: uppercase; }
.hr-receipt__logo small { font-size: .74rem; color: #7b6f86; }
.hr-receipt__row, .hr-receipt__total { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: .84rem; }
.hr-receipt__row b { font-variant-numeric: tabular-nums; }
.hr-receipt__total { margin-top: 8px; padding: 12px 0; border-top: 2px dashed #d8d0e0; border-bottom: 2px dashed #d8d0e0; font-size: 1rem; font-weight: 800; }
.hr-receipt__total b { font-size: 1.3rem; color: #b42318; }
.hr-receipt__row--vs { margin-top: 6px; }
.hr-receipt__row--vs b { color: var(--ok); }
.hr-receipt__row--vs .air-price { font: inherit; color: inherit; }
.hr-receipt__bar { display: flex; justify-content: center; gap: 2px; height: 40px; margin-top: 16px; }
.hr-receipt__bar i { width: calc(var(--w) * 1.5px); background: #2a2230; }
.hr-receipt__thanks { margin-top: 10px; text-align: center; font-size: .78rem; color: #7b6f86; }
.hr-calc__note { max-width: 420px; margin-top: 18px; font-size: .78rem; line-height: 1.5; text-align: center; color: var(--on-dark-muted); }

/* ==========================================================================
   5. Instagram – före och efter
   ========================================================================== */
.hr-ig { position: relative; display: grid; gap: 16px; }
@media (min-width: 640px) { .hr-ig { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; } }
.hr-post { overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
.hr-post__head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; font-size: .86rem; }
.hr-post__av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 800; color: #fff; background: linear-gradient(45deg, #f9a03f, #e1306c 50%, #833ab4); }
.hr-post__head small { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 3px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700; color: var(--natt); background: var(--gnista); }
.hr-post__head .ic { width: 12px; height: 12px; }
.hr-ba { position: relative; aspect-ratio: 1; overflow: hidden; user-select: none; }
.hr-ba__img { position: absolute; inset: 0; display: flex; align-items: flex-end; padding: 12px; }
.hr-ba__img--before { background: #EDE6F3; }
.hr-ba__img--after { justify-content: flex-end; background: #F6EBDD; clip-path: inset(0 0 0 var(--x)); }
.hr-hair { position: absolute; inset: 0; width: 100%; height: 100%; }
.hr-ba__img span { position: relative; padding: 4px 10px; border-radius: 999px; font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, .45); }
.hr-ba__line { position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1.5px; background: #fff; pointer-events: none; }
.hr-ba__line b { position: absolute; left: 50%; top: 50%; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; color: var(--natt); background: #fff; box-shadow: 0 8px 20px -6px rgba(0, 0, 0, .5); }
.hr-ba__line .ic { width: 15px; height: 15px; margin: 0 -3px; transform: rotate(90deg); }
.hr-ba__line .ic + .ic { transform: rotate(-90deg); }
.hr-ba input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.hr-ba input:focus-visible + .hr-ba__line, .hr-ba:focus-within .hr-ba__line b { box-shadow: 0 0 0 3px var(--primar); }
.hr-post__cap { padding: 12px 14px 16px; font-size: .86rem; line-height: 1.45; }

.hr-dms { overflow: hidden; border-radius: 24px; background: #fff; box-shadow: 0 0 0 1px var(--line), var(--shadow-2); }
.hr-dms__h { display: flex; align-items: center; gap: 8px; padding: 14px 16px; border-bottom: 1px solid var(--line-2); }
.hr-dms__h img { padding: 3px; border-radius: 7px; background: var(--ljus); }
.hr-dms__h span { margin-left: auto; padding: 2px 9px; border-radius: 999px; font-size: .72rem; font-weight: 800; color: var(--natt); background: var(--gnista); }
.hr-dms li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line-2); transition: background-color .2s; }
.hr-dms li:last-child { border-bottom: 0; }
.hr-dms li:hover { background: var(--ljus); }
.hr-dms__av { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 800; color: #fff; background: hsl(calc(270 + var(--h) * 40) 55% 52%); }
.hr-dms__av i { position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; color: #fff; background: linear-gradient(45deg, #f9a03f, #e1306c 50%, #833ab4); box-shadow: 0 0 0 2px #fff; }
.hr-dms__av .ic { width: 12px; height: 12px; }
.hr-dms__txt { display: grid; min-width: 0; }
.hr-dms__txt b { font-size: .9rem; }
.hr-dms__txt small { font-size: .84rem; line-height: 1.35; color: var(--muted); }
.hr-dms__meta { display: grid; justify-items: end; gap: 4px; }
.hr-dms__meta time { font-size: .72rem; color: var(--muted); }
.hr-dms__meta em { padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-style: normal; font-weight: 800; color: var(--primar-ink); background: #F1E9FC; }
.reveal-on .hr-ig.is-in .hr-dms li { animation: hr-fly .7s var(--spring) backwards; animation-delay: calc(.5s + var(--i) * .25s); }

/* ==========================================================================
   6. Språken
   ========================================================================== */
.hr-lang { max-width: 560px; margin-inline: auto; padding: clamp(18px, 3vw, 26px); border-radius: 28px; color: var(--ink); background: #fff; box-shadow: 0 50px 100px -40px rgba(0, 0, 0, .9); }
.hr-lang__tabs { display: flex; justify-content: center; gap: 6px; }
.hr-lang__tabs button { min-width: 64px; padding: 9px 14px; border: 0; border-radius: 999px; cursor: pointer; font: inherit; font-weight: 800; letter-spacing: .08em; color: var(--muted); background: var(--ljus); transition: background-color .2s, color .2s; }
.hr-lang__tabs button[aria-pressed="true"] { color: #fff; background: var(--natt); }
.hr-lang__chat { display: grid; gap: 10px; min-height: 130px; margin-top: 18px; }
.hr-lang__chat[hidden] { display: none; }
.hr-lang__chat:not([hidden]) { animation: fade-up .45s var(--ease-out); }
.hr-lang__q { justify-self: start; max-width: 85%; padding: 10px 14px; border-radius: 18px 18px 18px 5px; background: var(--line-2); }
.hr-lang__a { justify-self: end; max-width: 85%; padding: 10px 14px; border-radius: 18px 18px 5px 18px; color: #fff; background: var(--primar-ink); }
.hr-lang__chat[dir="rtl"] .hr-lang__q { justify-self: end; border-radius: 18px 18px 5px 18px; }
.hr-lang__chat[dir="rtl"] .hr-lang__a { justify-self: start; border-radius: 18px 18px 18px 5px; }
.hr-lang__res { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 14px; padding: 11px; border-radius: 14px; font-weight: 800; color: var(--natt); background: var(--gnista); }
.hr-lang__res .ic { width: 17px; height: 17px; stroke-width: 3; }
.hr-def { padding-bottom: calc(clamp(76px, 10vw, 136px) + var(--sheet-r)); }

@keyframes hr-pole { to { background-position: 0 -148px; } }
@keyframes hr-cutline { 0% { left: -40px; } 100% { left: 100%; } }
@keyframes hr-slide { from { opacity: 0; transform: translateX(-40px); } }
@keyframes hr-snap { 0% { opacity: 0; transform: translateY(-30px) scale(.7); } 60% { opacity: 1; } }
@keyframes hr-shimmer { 50% { opacity: .4; transform: scale(.96); } }
@keyframes hr-print { from { clip-path: inset(0 0 100% 0); transform: translateY(-30px) rotate(1.5deg); } }
@keyframes hr-fly { from { opacity: 0; transform: translateX(-60px) rotate(-6deg); } }