/* Spokey – landningssida
   Systemtypsnitt, neutrala ytor, en accentfärg (ikonens orange). */

:root {
  --bg: #ffffff;
  --tint: #f5f5f7;
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #86868b;
  --line: #d2d2d7;
  --hair: rgba(0, 0, 0, 0.08);
  /* Ikonens orange. Vit text på den blir svag, så ytor med vit text använder --accent-fill,
     och text på vit bakgrund --accent-ink. */
  --accent: #ff8b58;
  --accent-fill: #f26b33;
  --accent-ink: #b94e1c;
  --select: #b3d7ff;

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --wrap: 1120px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 28px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 64px; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

a { color: inherit; text-decoration: none; }
svg { display: block; }
ol, ul { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.nowrap { white-space: nowrap; }
/* Nedladdningen är gömd tills appen är notariserad: ta bort hidden i index.html för att visa den igen.
   Texterna om pris och testperiod (data-pricing) är gömda på samma sätt. */
[hidden] { display: none !important; }

.ico {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 10px; font-size: 14px;
}
.skip:focus { top: 12px; }

/* ---------- Knappar och länkar ---------- */

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: #fff;
  font-size: 17px; font-weight: 500; letter-spacing: -0.01em;
  padding: 12px 22px; border-radius: 980px;
  transition: background 0.2s, transform 0.2s var(--ease);
}
.btn:hover { background: #000; }
.btn:active { transform: scale(0.97); }
.btn .ico { font-size: 18px; }
.btn-small { font-size: 13px; padding: 6px 14px; }
.btn-large { font-size: 19px; padding: 15px 28px; }

.link { color: var(--accent-ink); font-size: 17px; }
.link::after { content: " ›"; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Navigering ---------- */

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: rgba(255, 255, 255, 0.72);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s;
}
.nav.scrolled { border-bottom-color: var(--hair); }
.nav-in {
  max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter);
  height: 52px; display: flex; align-items: center; gap: 28px;
}
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 17px; letter-spacing: -0.02em; }
.nav-links { display: flex; gap: 28px; margin-left: auto; font-size: 13px; color: var(--ink-2); }
.nav-links a { transition: color 0.2s; }
.nav-links a:hover { color: var(--ink); }

/* ---------- Hero ---------- */

.hero { padding: 132px 0 40px; text-align: center; }
.eyebrow { font-size: 17px; font-weight: 600; color: var(--accent-ink); margin-bottom: 14px; }
h1 {
  font-size: clamp(46px, 8.4vw, 92px);
  font-weight: 600; line-height: 1.03; letter-spacing: -0.035em;
}
.lede {
  font-size: clamp(19px, 2.1vw, 24px); line-height: 1.35; letter-spacing: -0.015em;
  color: var(--ink-2); max-width: 640px; margin: 22px auto 0;
  text-wrap: balance;
}
.cta { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 26px; margin-top: 30px; }
.fine { font-size: 13px; color: var(--ink-3); margin-top: 16px; letter-spacing: 0; }

/* Ytan där hjulet visas och går att prova */
.pad {
  position: relative; margin-top: 56px;
  height: clamp(440px, 54vw, 620px);
  border-radius: 36px; overflow: hidden;
  background:
    radial-gradient(55% 75% at 14% 8%, #ffd5c2 0%, transparent 70%),
    radial-gradient(50% 70% at 88% 16%, #cfe1ff 0%, transparent 70%),
    radial-gradient(70% 80% at 62% 104%, #ffe7b0 0%, transparent 70%),
    #f3f1ee;
  user-select: none; -webkit-user-select: none;
  touch-action: pan-y;
  cursor: default;
}
.pad-glow {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(40% 46% at 50% 46%, rgba(255, 255, 255, 0.55), transparent 70%);
}
.pad-wheel { left: 50%; top: 46%; scale: 1.34; }
.pad-wheel .wheel-row { pointer-events: auto; cursor: pointer; }
.pad-readout {
  position: absolute; left: 50%; bottom: 62px; translate: -50% 0;
  background: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border-radius: 980px; padding: 8px 16px;
  font-size: 14px; font-weight: 500; color: var(--ink);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
  opacity: 0; transition: opacity 0.25s, transform 0.25s var(--ease);
  transform: translateY(6px); white-space: nowrap; pointer-events: none;
}
.pad-readout.on { opacity: 1; transform: none; }
.pad-hint {
  position: absolute; left: 0; right: 0; bottom: 22px;
  font-size: 13px; color: rgba(0, 0, 0, 0.5); letter-spacing: 0; pointer-events: none;
  transition: opacity 0.2s;
}

.playpause {
  position: absolute; right: 16px; bottom: 16px; z-index: 5;
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0, 0, 0, 0.08); color: rgba(0, 0, 0, 0.6);
  transition: background 0.2s;
}
.playpause:hover { background: rgba(0, 0, 0, 0.14); }
.playpause .ico { font-size: 18px; stroke-width: 2.2; }

/* ---------- Hjulet ---------- */

.wheel {
  position: absolute; display: flex; align-items: center; gap: 10px;
  height: 230px; margin: -115px 0 0 -253px;
  transform-origin: 253px 115px;
  pointer-events: none; text-align: left; letter-spacing: 0;
  --w-ink: #1d1d1f;
  --w-glass: rgba(255, 255, 255, 0.66);
  --w-edge: rgba(255, 255, 255, 0.8);
  --w-seg: rgba(0, 0, 0, 0.08);
  --w-seg-empty: rgba(0, 0, 0, 0.03);
}
.wheel.dark {
  --w-ink: #f5f5f7;
  --w-glass: rgba(44, 44, 46, 0.86);
  --w-edge: rgba(255, 255, 255, 0.12);
  --w-seg: rgba(255, 255, 255, 0.1);
  --w-seg-empty: rgba(255, 255, 255, 0.04);
}
.wheel-list {
  width: 128px; flex: none; padding: 8px; display: grid; gap: 4px;
  background: var(--w-glass); border-radius: 14px;
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 0 0 0.5px var(--w-edge) inset, 0 12px 36px rgba(0, 0, 0, 0.14);
}
.wheel-row {
  height: 26px; line-height: 26px; padding: 0 10px; border-radius: 7px;
  font-size: 12px; font-weight: 600; color: var(--w-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background 0.1s ease-out, color 0.1s ease-out;
}
.wheel-row.on { background: var(--accent-fill); color: #fff; }
.wheel-face { position: relative; width: 230px; height: 230px; flex: none; }
.wheel-face::before {
  content: ""; position: absolute; inset: -5px; border-radius: 50%;
  background: var(--w-glass);
  -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%);
  box-shadow: 0 0 0 0.5px var(--w-edge) inset, 0 18px 50px rgba(0, 0, 0, 0.18);
}
/* Innehållet ligger i ett eget lager, så att bara det tonar vid ringbyte och glaset ligger kvar. */
.wheel-content { position: absolute; inset: 0; }
.wheel-content > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.seg { fill: var(--w-seg); transition: fill 0.12s; }
.seg.empty { fill: var(--w-seg-empty); }
.seg.on { fill: rgba(242, 107, 51, 0.94); }
.seg.fire { animation: fire 0.32s ease-out; }
@keyframes fire { 40% { fill: rgba(255, 139, 88, 0.55); } }
.wheel-label {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center; font-size: 11px; font-weight: 600; line-height: 1.15;
  color: var(--w-ink); transition: color 0.12s;
}
.wheel-label.on { color: #fff; }
.wheel-label .ico { font-size: 19px; stroke-width: 2; }
.wheel-label .sub { font-size: 9px; font-weight: 400; opacity: 0.8; }
.wheel-title {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 66px; text-align: center; font-size: 11px; font-weight: 600; line-height: 1.2;
  color: var(--w-ink);
}
.app-ico {
  width: 24px; height: 24px; border-radius: 6.5px; flex: none;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 82%, #fff), var(--c));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}
.app-ico .ico { font-size: 15px; stroke-width: 2; }
.fav { width: 24px; height: 24px; border-radius: 6px; }

.cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; pointer-events: none; z-index: 9; }
.cursor svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }
.wheel > .cursor { left: 253px; top: 115px; transition: opacity 0.15s; }

/* ---------- Sektioner ---------- */

.section { padding: clamp(88px, 12vw, 160px) 0; }
.tint { background: var(--tint); }
.dark { background: #000; color: #f5f5f7; --ink-2: #a1a1a6; --ink-3: #86868b; --hair: rgba(255, 255, 255, 0.14); }

.head { text-align: center; max-width: 760px; margin: 0 auto clamp(48px, 6vw, 80px); }
h2 {
  font-size: clamp(36px, 5.6vw, 64px);
  font-weight: 600; line-height: 1.06; letter-spacing: -0.03em;
  text-wrap: balance;
}
.head p {
  font-size: clamp(19px, 2vw, 22px); line-height: 1.4; color: var(--ink-2);
  margin-top: 18px; text-wrap: balance; letter-spacing: -0.015em;
}
h3 { font-size: 21px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; }

/* Bara bilderna (stegen, rutorna, Use cases, Switch apps) glider in. Rubriker och text står still. */
.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Steg ---------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.step { text-align: center; }
.step:nth-child(2) { transition-delay: 0.08s; }
.step:nth-child(3) { transition-delay: 0.16s; }
.step-art {
  height: 220px; border-radius: var(--radius); background: var(--tint);
  display: grid; place-items: center; margin-bottom: 24px;
}
.step h3 { display: inline-flex; align-items: center; gap: 10px; }
.step p { color: var(--ink-2); margin: 8px auto 0; max-width: 300px; }
.num {
  width: 24px; height: 24px; border-radius: 50%; flex: none;
  display: inline-grid; place-items: center;
  background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 0;
}

.keys { display: flex; gap: 10px; }
.key, .caps kbd, .hud kbd {
  font-family: var(--font); font-weight: 500;
  background: #fff; color: var(--ink);
  border-radius: 10px;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.14), 0 1.5px 0 0.5px rgba(0, 0, 0, 0.16), 0 6px 14px rgba(0, 0, 0, 0.06);
}
.key { width: 60px; height: 60px; display: grid; place-items: center; font-size: 24px; }
/* Små animationer (stegen, Text tools, Ask) spelas en gång när de syns och vilar sedan på slutläget.
   main.js sätter klassen once och startar dem (pausade tills dess). Slutläget är också stillbilden
   utan JS och med Minska rörelse. Under 5 s var, så de behöver ingen pausknapp. */
.once .key { animation: press 3.2s var(--ease) both paused; }
.once .key:nth-child(2) { animation-delay: 0.12s; }
.once .key:nth-child(3) { animation-delay: 0.24s; }
/* Stegen spelas i tur och ordning (main.js, 1,4 s mellan dem): tangenterna trycks ned och hålls
   medan Flick spelas, och släpps när Release börjar. */
@keyframes press {
  0%, 6%, 92%, 100% { transform: none; background: #fff; color: var(--ink); }
  14%, 84% { transform: translateY(2px); background: var(--ink); color: #fff; }
}

.mini { width: 150px; height: 150px; overflow: visible; }
.mini .m-seg { fill: rgba(0, 0, 0, 0.09); }
.mini .m-dot { fill: var(--ink); }
.mini .m-check { fill: none; stroke: var(--ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 40; stroke-dashoffset: 0; }
.mini[data-mini="flick"] .m-hot { fill: var(--accent); }
.mini[data-mini="flick"] .m-dot { transform: translate(34px, 0); }
.mini[data-mini="release"] .m-hot { fill: var(--accent); }
.mini[data-mini="release"] .m-dot { transform: translate(34px, 0); opacity: 0; }
.once .mini[data-mini="flick"] .m-dot { animation: flick-dot 1.6s var(--ease) both paused; }
.once .mini[data-mini="flick"] .m-hot { animation: flick-seg 1.6s linear both paused; }
.once .mini[data-mini="release"] .m-hot { animation: rel-seg 1.6s var(--ease) both paused; }
.once .mini[data-mini="release"] .m-dot { animation: rel-dot 1.6s var(--ease) both paused; }
.once .mini[data-mini="release"] .m-check { animation: rel-check 1.6s var(--ease) both paused; }
@keyframes flick-dot {
  0%, 15% { transform: none; }
  55%, 100% { transform: translate(34px, 0); }
}
@keyframes flick-seg {
  0%, 25% { fill: rgba(0, 0, 0, 0.09); }
  28%, 100% { fill: var(--accent); }
}
@keyframes rel-seg {
  0%, 10% { fill: var(--accent); opacity: 1; }
  25% { opacity: 0.5; }
  40%, 100% { fill: var(--accent); opacity: 1; }
}
@keyframes rel-dot {
  0%, 12% { opacity: 1; }
  28%, 100% { opacity: 0; }
}
@keyframes rel-check {
  0%, 25% { stroke-dashoffset: 40; }
  60%, 100% { stroke-dashoffset: 0; }
}

/* ---------- Rutnät med actions ---------- */

.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.tile {
  background: #fff; border-radius: var(--radius); padding: 32px;
  display: flex; flex-direction: column; gap: 28px; min-height: 360px; overflow: hidden;
}
.tile-wide { grid-column: span 2; }
.tile-wide:last-child { grid-column: 1 / -1; flex-direction: row; align-items: center; min-height: 0; gap: 40px; }
.tile-wide:last-child .tile-copy { flex: 1; }
.tile-wide:last-child .tile-art { flex: 1.2; }
.tile-copy p { color: var(--ink-2); margin-top: 8px; max-width: 440px; }
.tile-art { margin-top: auto; }

.combo-list { display: grid; gap: 8px; }
.combo {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--tint); border-radius: 14px; padding: 10px 12px 10px 16px;
  font-size: 15px; font-weight: 500;
}
.caps { display: flex; gap: 4px; }
.caps kbd { min-width: 28px; height: 28px; padding: 0 7px; border-radius: 7px; display: grid; place-items: center; font-size: 14px; }

.appgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; justify-items: center; }
.appgrid .app-ico { width: 60px; height: 60px; border-radius: 15px; }
.appgrid .app-ico .ico { font-size: 32px; stroke-width: 1.7; }
.appgrid .fav { width: 60px; height: 60px; border-radius: 15px; }
/* Ingen studs: nära full storlek och sidans egen easing, lugnt som resten av sidan. */
.js .appgrid > * { opacity: 0; transform: scale(0.94); transition: opacity 0.4s var(--ease), transform 0.4s var(--ease); }
.js .in .appgrid > * { opacity: 1; transform: none; }

/* Raden under rutnätet: det som finns men inte ska ta plats från rutorna. */
.bento-note { text-align: center; margin-top: 28px; font-size: 15px; color: var(--ink-2); text-wrap: balance; }

.proof { font-size: 19px; line-height: 1.5; font-weight: 500; letter-spacing: -0.015em; container-type: inline-size; }
/* Får "Thanks for you’re quick reply." inte plats bryts raden före "reply." redan från början,
   så att inget ord byter rad när "you’re" blir det kortare "your". */
@container (min-width: 13.2em) { .proof .fit { display: none; } }
/* Rättningen, ett ord i taget: felet syns först som vanlig text (1,8 s), sedan stryks det över
   och blir orange, och sist byts det mot rätt ord. Bredden följer med, så att raden inte får ett glapp.
   Utan animation (ingen JS, Minska rörelse) syns bara de rätta orden. */
.swap { display: inline-grid; }
.swap > * { grid-area: 1 / 1; white-space: nowrap; overflow: hidden; }
.swap s { position: relative; text-decoration: none; color: var(--accent-ink); opacity: 0; max-width: 0; }
.swap s::after {
  content: ""; position: absolute; left: 0; right: 0; top: 54%; height: 1.5px;
  background: currentColor; transform-origin: left;
}
.swap b { font-weight: 500; }
.once .swap s { animation: typo 3s var(--ease) both paused; }
.once .swap s::after { animation: strike 3s var(--ease) both paused; }
.once .swap b { animation: fixed 3s var(--ease) both paused; }
.once .swap ~ .swap s, .once .swap ~ .swap s::after, .once .swap ~ .swap b { animation-delay: 1.2s; }
@keyframes typo {
  0%, 60% { opacity: 1; max-width: 6em; color: var(--ink); }
  70%, 83% { opacity: 1; max-width: 6em; color: var(--accent-ink); }
  93%, 100% { opacity: 0; max-width: 0; color: var(--accent-ink); }
}
@keyframes strike { 0%, 60% { transform: scaleX(0); } 70%, 100% { transform: scaleX(1); } }
@keyframes fixed { 0%, 83% { opacity: 0; max-width: 0; } 93%, 100% { opacity: 1; max-width: 6em; } }

.prompt-card { background: var(--tint); border-radius: 16px; padding: 16px 18px; }
.prompt-name { font-size: 13px; font-weight: 600; color: var(--accent-ink); }
.prompt-text { font-size: 15px; margin-top: 4px; color: var(--ink); }

.ask {
  border-radius: 20px; padding: 18px 20px; background: var(--tint);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.06) inset;
}
.ask-field { font-size: 19px; font-weight: 500; letter-spacing: -0.015em; }
.caret { display: inline-block; width: 2px; height: 1.1em; background: var(--accent); margin-left: 2px; vertical-align: -0.18em; }
.once .caret { animation: blink 1.1s steps(1) 4 both paused; }
@keyframes blink { 50% { opacity: 0; } }
.ask-quote { margin-top: 12px; padding-left: 12px; border-left: 2px solid var(--line); color: var(--ink-2); font-size: 15px; }

/* ---------- Use cases ---------- */

.tabs {
  display: flex; width: max-content; max-width: 100%; margin: 0 auto;
  background: var(--tint); border-radius: 980px; padding: 4px; gap: 2px;
}
.tabs button {
  padding: 9px 22px; border-radius: 980px; font-size: 15px; font-weight: 500; color: var(--ink-2);
  transition: background 0.25s, color 0.25s, box-shadow 0.25s;
}
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { background: #fff; color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12); }

.case-copy { text-align: center; max-width: 620px; margin: 36px auto 36px; min-height: 132px; }
.case-copy h3 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -0.025em; }
.case-copy p { color: var(--ink-2); margin-top: 10px; text-wrap: balance; }

.stage {
  position: relative; max-width: 980px; margin: 0 auto; aspect-ratio: 760 / 480;
  border-radius: var(--radius); overflow: hidden;
  background:
    radial-gradient(60% 80% at 10% 0%, #ffe0d2 0%, transparent 70%),
    radial-gradient(60% 80% at 100% 100%, #d5e4ff 0%, transparent 70%),
    #f1efec;
}
.stage-in {
  position: absolute; left: 0; top: 0; width: 760px; height: 480px;
  transform-origin: 0 0; letter-spacing: 0; text-align: left; font-size: 13px; line-height: 1.5;
}
.scene { position: absolute; inset: 0; }

.win {
  position: absolute; background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.14), 0 22px 60px rgba(0, 0, 0, 0.18);
}
.win-bar {
  height: 36px; display: flex; align-items: center; gap: 7px; padding: 0 13px;
  background: #f6f6f6; border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}
.win-bar i { width: 11px; height: 11px; border-radius: 50%; background: #d8d8d8; }
.win-title { flex: 1; text-align: center; font-weight: 600; font-size: 12px; color: #4a4a4a; margin-right: 47px; }
.addr {
  flex: 1; height: 24px; border-radius: 7px; background: rgba(0, 0, 0, 0.055);
  font-size: 11.5px; color: #555; display: flex; align-items: center; justify-content: center;
  margin: 0 60px 0 14px;
}
.sel { background: linear-gradient(var(--select), var(--select)) no-repeat 0 0 / 0% 100%; border-radius: 2px; }
.sel.flash { animation: flash 1.2s ease-out; }
@keyframes flash { 0% { background-color: rgba(255, 139, 88, 0.22); } 100% { background-color: transparent; } }

.mail-row { padding: 9px 18px; border-bottom: 1px solid rgba(0, 0, 0, 0.07); color: var(--ink); }
.mail-row span { color: var(--ink-3); margin-right: 4px; }
.mail-body { padding: 16px 18px; font-size: 15px; line-height: 1.6; }
.mail-body p + p { margin-top: 12px; }

.article { padding: 26px 44px; }
.article .kicker { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.article h4 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; margin: 6px 0 14px; font-family: "New York", "Iowan Old Style", Georgia, serif; }
.article p { font-size: 15px; line-height: 1.65; color: #333; font-family: "New York", "Iowan Old Style", Georgia, serif; }
.article p + p { margin-top: 12px; }

.note { padding: 18px 22px; font-size: 14px; line-height: 1.9; }
.note b { display: block; font-size: 18px; margin-bottom: 4px; letter-spacing: -0.01em; }
.note span { display: block; color: #333; }
.note span::before { content: ""; display: inline-block; width: 13px; height: 13px; border: 1.5px solid #c4c4c4; border-radius: 50%; margin-right: 9px; vertical-align: -2px; }

.cal { padding: 14px 18px 18px; }
.cal-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.cal-head b { font-size: 19px; letter-spacing: -0.02em; }
.cal-head span { font-size: 12px; color: var(--ink-3); }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; font-size: 12px; }
.cal-grid em { font-style: normal; font-size: 10px; font-weight: 600; color: var(--ink-3); padding-bottom: 4px; }
.cal-grid span { height: 34px; display: grid; place-items: center; border-radius: 8px; }
.cal-grid .today { background: var(--accent-fill); color: #fff; font-weight: 600; }
.cal-grid .ev { background: var(--tint); }

.canvas {
  position: absolute; inset: 36px 0 0 0;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.14) 1px, transparent 1.2px) 0 0 / 22px 22px, #fafafa;
}
.canvas svg { width: 100%; height: 100%; }
.setpill {
  position: absolute; left: 14px; top: 14px;
  background: var(--ink); color: #fff; font-size: 11.5px; font-weight: 500;
  padding: 5px 11px; border-radius: 980px;
}
.setpill b { font-weight: 600; }
.hud {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 9px;
  background: rgba(255, 255, 255, 0.9); border-radius: 980px; padding: 7px 14px 7px 8px;
  font-size: 12.5px; font-weight: 500; box-shadow: 0 6px 22px rgba(0, 0, 0, 0.12);
}
.hud kbd { min-width: 24px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-size: 12.5px; }

.think, .bubble {
  position: absolute; z-index: 6;
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  box-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.12), 0 14px 40px rgba(0, 0, 0, 0.18);
}
.think { display: flex; align-items: center; gap: 8px; border-radius: 980px; padding: 6px 13px 6px 9px; font-size: 12px; font-weight: 500; }
.spin { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(0, 0, 0, 0.14); border-top-color: var(--ink-2); animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.bubble { width: 316px; border-radius: 14px; padding: 13px 14px 11px; font-size: 13px; line-height: 1.5; }
.bubble-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }
.bbtn { display: inline-block; background: rgba(0, 0, 0, 0.07); border-radius: 7px; padding: 4px 11px; font-size: 12px; font-weight: 500; }
.bbtn.primary { background: var(--accent-fill); color: #fff; }

/* ---------- Uppsättningar ---------- */

.sets { display: flex; flex-direction: column; align-items: center; gap: 44px; }
.sets-apps { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.set-chip {
  display: flex; align-items: center; gap: 10px;
  border-radius: 16px; padding: 10px 16px 10px 10px;
  background: rgba(255, 255, 255, 0.06); color: #a1a1a6;
  transition: background 0.4s, color 0.4s;
}
.set-chip .app-ico { width: 32px; height: 32px; border-radius: 8.5px; filter: saturate(0.2) brightness(0.8); transition: filter 0.4s; }
.set-chip .app-ico .ico { font-size: 19px; }
.set-chip small { display: block; font-size: 12px; opacity: 0.7; }
.set-chip strong { display: block; font-size: 15px; font-weight: 600; line-height: 1.2; }
.set-chip.on { background: rgba(255, 255, 255, 0.14); color: #fff; }
.set-chip.on .app-ico { filter: none; }
.sets-wheel { position: relative; width: 368px; height: 230px; flex: none; }
/* Pausknappen under hjulet, ljus på den svarta bakgrunden. */
.sets .playpause { position: static; margin-top: -20px; background: rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.7); }
.sets .playpause:hover { background: rgba(255, 255, 255, 0.2); }

.facts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  margin: clamp(64px, 8vw, 104px) 0; padding: 44px 0;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); text-align: center;
}
.facts dt { font-size: clamp(56px, 8vw, 88px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; }
.facts dd { color: var(--ink-2); margin-top: 8px; }

.duo { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px 56px; max-width: 880px; margin: 0 auto; }
.duo p, .trio p { color: var(--ink-2); margin-top: 8px; }

/* ---------- Integritet ---------- */

.trio { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.trio-item { background: var(--tint); border-radius: var(--radius); padding: 32px; }

/* ---------- Ladda ner ---------- */

.get { text-align: center; }
.get-logo { margin: 0 auto 28px; border-radius: 21px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.2); }
.install {
  display: grid; gap: 12px; max-width: 520px; margin: 56px auto 0; text-align: left;
  background: #fff; border-radius: var(--radius); padding: 28px 32px;
}
.install li { display: flex; gap: 14px; align-items: flex-start; }
.install .num { margin-top: 1px; }
.install ~ .fine { max-width: 520px; margin-left: auto; margin-right: auto; margin-top: 20px; }

/* ---------- Sidfot ---------- */

.footer { padding: 28px 0 40px; border-top: 1px solid var(--hair); background: var(--tint); }
.footer-in { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.footer .brand { font-size: 15px; }
.footer p { font-size: 12px; color: var(--ink-3); letter-spacing: 0; flex: 1; min-width: 260px; }

/* ---------- Mindre skärmar ---------- */

@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, 1fr); }
  .tile-wide { grid-column: 1 / -1; }
  .tile-wide:last-child { flex-direction: column; align-items: stretch; }
  .trio { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-in .btn { margin-left: auto; }
  .hero { padding-top: 104px; }
  .steps { grid-template-columns: 1fr; gap: 44px; }
  .bento { grid-template-columns: 1fr; }
  .tile { min-height: 0; padding: 26px; }
  .duo { grid-template-columns: 1fr; }
  .pad { border-radius: 28px; height: 440px; }
  .pad-wheel { scale: 0.86; left: calc(50% + 58px); }
  .pad-readout { font-size: 13px; bottom: 58px; }
  .sets-wheel { scale: 0.82; }
  .pad-hint { padding: 0 64px; }
  .facts { gap: 8px; }
  .facts dd { font-size: 14px; }
  .case-copy { min-height: 170px; }
  .tabs button { padding: 9px 15px; }
  .stage { border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal, .js .appgrid > * { opacity: 1; transform: none; transition: none; }
  .key, .mini *, .swap *, .caret, .seg.fire, .sel.flash { animation: none !important; }
  .playpause { display: none; }
}