/* kiomigo landing — the "night atlas" stage.
   Layers on top of the shared brand shell (kiomigo.css). */

body.landing { overflow: hidden; }

/* ---------- slide stage ---------- */
.stage { position: fixed; inset: 0; }
.slide {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 84px 24px 40px;
  opacity: 0; visibility: hidden; transform: translateX(6vw);
  transition: opacity .45s ease, transform .45s ease, visibility 0s linear .45s;
}
.slide.active {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .45s ease, transform .45s ease;
}
.slide.leaving-back { transform: translateX(-6vw); }

.eyebrow {
  font-family: var(--sans); font-size: .74rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--kio); font-weight: 600; margin: 0 0 14px;
  text-align: center;   /* the flex column centres the BOX; wrapped lines inside
                           it were still ragged-left, which read as misaligned */
}
/* The hero tagline drops the letterspaced-uppercase voice (it read as terminal
   output, and wrapped badly on phones) and says the brand instead: its three
   phases in the three logo colours, sentence case, body face. */
.eyebrow.tagline {
  font-family: var(--body); font-size: .92rem; font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--muted);
}
.eyebrow.tagline .t-kio { color: var(--kio); }
.eyebrow.tagline .t-mi { color: var(--mi); }
.eyebrow.tagline .t-go { color: var(--go); }
.eyebrow.tagline .t-sep { color: var(--muted); opacity: .7; }
@media (max-width: 640px) {
  .eyebrow.tagline { font-size: .84rem; max-width: 30ch; line-height: 1.5; }
}
h1 {
  font-family: var(--sans);
  font-size: clamp(1.9rem, 4.6vw, 3.4rem); font-weight: 800; letter-spacing: -.025em;
  line-height: 1.08; margin: 0 0 12px; text-align: center; text-wrap: balance;
}
.sub {
  font-family: var(--body);
  color: var(--muted); font-size: clamp(.98rem, 2vw, 1.1rem); margin: 0; text-align: center; max-width: 52ch;
}

/* ---------- slide 1 · world map ---------- */
.map-wrap {
  width: min(1080px, 94vw); margin-top: 2.5vh;
  flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; align-items: center;
  perspective: 1400px; /* the unfolded globe gently bends toward the cursor */
}
/* The world is 2.33:1 and a phone's map box is about 0.3:1, so "fit" left the
   map at ~13% of the space with a screenful of nothing under it. Let it grow
   past the box's width instead and centre it: the poles are empty anyway, so
   overflowing them costs nothing and the continents get bigger. */
@media (max-width: 760px) {
  .map-wrap { width: 100vw; margin-left: calc(50% - 50vw); }
  .wizmap:not(.zoomed) { width: 165%; height: auto; }
}
/* The world map IS step 1 now: every country is its own <g class="c">, grouped
   into continents by our data rather than by the drawing. Pointing at any
   country lights its whole continent; clicking opens it. Step 2 swaps in that
   continent's detail map, where regions are picked. */
.wizmap {
  width: 100%; height: 100%; display: block;
  transform-style: preserve-3d; will-change: transform;
  transition: transform .5s cubic-bezier(.22, .8, .3, 1);
}
/* Unzoomed the viewBox holds the whole drawing, so nothing can spill and the
   shadows want room. Zoomed, the viewBox is one continent and everything else
   is still painted: overflow must clip, or Brazil turns up beside the frame
   while you are looking at Asia. */
/* The landing never scrolls, so the browser's own pinch/drag has nothing
   legitimate to do on the map slide — yet it was claiming the gesture and
   zooming the PAGE whenever fingers landed on the ocean. Hand the whole slide's
   gestures to us; the other slides keep native behaviour. */
#slide-world { touch-action: none; }
.wizmap:not(.zoomed) { overflow: visible; }
/* Step-1 free look: once the world map is pinched off its resting frame it
   clips like any map (no continents spilling over the headline), and the
   cursor says it can be grabbed. */
.wizmap.explore { overflow: hidden; cursor: grab; }
.wizmap.explore.dragging { cursor: grabbing; }

/* Step 2 takes the whole viewport and sits BEHIND the copy and the chips: the
   continent is the thing you are looking at, and a map boxed into a column with
   a screenful of gradient around it reads like a diagram, not a place.
   `position: fixed` only escapes to the viewport if no ancestor makes a
   containing block — and BOTH `perspective` (on .map-wrap, for the globe tilt)
   and `will-change: transform` (on .wizmap) do exactly that. So both are lifted
   while zoomed, and the tilt's inline transform is cleared in zoomInto(). */
.map-wrap:has(.wizmap.zoomed), .map-wrap:has(.wizmap.explore), .map-wrap:has(.detail-map:not(.gone)) { perspective: none; }
/* .explore rides along: the moment a step-1 pinch leaves the resting frame, the
   world map earns the same full viewport step 2 gets — zooming into a strip
   while two thirds of the screen sits empty is the worst of both. Zooming back
   out to the resting frame drops the class and returns the map to its band. */
.wizmap.zoomed, .wizmap.explore, .detail-map:not(.gone) {
  position: fixed; inset: 0; z-index: 0;
  width: 100vw; height: 100dvh;
  will-change: auto; transform: none; transform-style: flat;
}
.slide.active > .eyebrow, .slide.active > h1, .slide.active > .sub { position: relative; z-index: 2; }
.wizmap.zoomed {
  overflow: hidden;
  /* Step 2 owns the gestures. Without this the browser claims the drag for page
     scrolling and the pinch for page zoom, so panning a phone map does nothing
     but move the page. Step 1 keeps default touch behaviour: a tap is all it
     needs, and the page should still scroll there. */
  touch-action: none;
}
.wizmap.tilting { transition: transform .12s ease-out; }
/* Swapping the world map for a continent's map hides one of the two. NOT via
   `hidden`: that is an IDL property of HTMLElement, so svg.hidden = true sets a
   JS expando, reflects to no attribute, and the world map stayed on screen while
   step 2 tried to draw over it. A class means the same thing to both. */
.wizmap.gone, .detail-map.gone { display: none; }
/* ---- the heatmap ----
   A country's colour says how much we can show you there, on the logo's ramp:
   kio teal -> mi orange -> go gold. JS computes --heat per region and sets
   data-state; every rule below is ONE state at the SAME weight, read in order.
   That is deliberate: the previous version had .on, .sel and .has-picks rules at
   different specificities fighting each other, and a picked region could lose
   its own colour to the "included" rule without a trace. State lives in one
   place now, so it cannot. */
.wizmap g.c path {
  fill: #264a63; stroke: #0a1a28; stroke-width: .4;
  vector-effect: non-scaling-stroke;   /* borders stay hairline at any zoom */
  transition: fill .2s ease, opacity .2s ease;
}
.wizmap g.c[data-state="included"] path { fill: var(--heat, #264a63); }
.wizmap g.c[data-state="dimmed"]   path { fill: var(--heat, #264a63); opacity: .28; }
.wizmap g.c[data-state="picked"]   path {
  fill: var(--heat, #F5794F);
  filter: drop-shadow(0 0 14px rgba(238, 190, 78, .5));
  stroke: #fff; stroke-width: 1.2;
}
/* nothing to offer: not clickable, so it must not look clickable */
.wizmap g.c[data-state="off"] path { fill: #16283a; opacity: .45; }
.wizmap g.c.on { cursor: pointer; }
.wizmap g.c.on:hover path { filter: brightness(1.35); opacity: 1; }

/* Step 1: the continent under the cursor lifts, the rest of the world recedes.
   The delay absorbs quick hover swaps at shared borders, so sliding across
   Europe into Asia does not strobe the map. */
.wizmap:not(.zoomed):has(g.c.lit) g.c:not(.lit) path {
  filter: blur(2px) saturate(.5) brightness(.7);
  opacity: .5; transition-delay: .09s;
}
/* The lit continent keeps its heat and simply comes forward — overriding the
   fill here would flatten the whole point of the heatmap on hover. */
.wizmap g.c.lit path {
  filter: brightness(1.3) drop-shadow(0 10px 24px rgba(3, 18, 33, .6));
  opacity: 1;
}

/* Each region is a <g tabindex="0"> so it can be tabbed to, and a focused <g>
   gets the browser's ring around its BOUNDING BOX — a rectangle, not the shape.
   On the US that box stretches from Alaska to Hawaii to Florida, so clicking it
   drew a huge box across the Atlantic. Kill the ring and put the focus on the
   shape instead, keyboard only: a mouse user already knows what they clicked. */
.wizmap g.c:focus { outline: none; }
.wizmap g.c:focus-visible path {
  stroke: var(--go, #EEBE4E); stroke-width: 2.5; vector-effect: non-scaling-stroke;
}

/* The continent's own map, fetched when it is opened. */
.detail-map { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.detail-map .map-loading { color: rgba(255, 255, 255, .5); font-size: .9rem; }

/* Region/continent names: a fixed overlay of crisp, non-scaling text. Placed in
   JS at each region's on-screen centre; the layer never intercepts clicks. */
.map-labels { position: fixed; inset: 0; pointer-events: none; z-index: 1; }
.map-label {
  position: absolute; transform: translate(-50%, -50%);
  font-family: var(--sans); font-size: .72rem; font-weight: 700; letter-spacing: .02em;
  color: #fff; white-space: nowrap; text-shadow: 0 1px 3px rgba(3, 18, 33, .95), 0 0 10px rgba(3, 18, 33, .7);
  /* names condense out of the map and dissolve back into it: JS drives opacity
     (including the viewport-edge fade) and blur, this makes the change breathe.
     left/top are NOT transitioned — while panning, a label must ride its region
     exactly, not chase it. */
  transition: opacity .35s ease, filter .35s ease;
  will-change: opacity, filter;
}
.map-label.continent {
  font-size: .8rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .92);
}
.map-label.picked { color: var(--go, #EEBE4E); }
/* the chips float above everything and stay readable */
.map-hint, .subregion-bar { position: relative; z-index: 6; }
.subregion-bar { display: flex; gap: 10px; margin-top: 1.6vh; flex-wrap: wrap; justify-content: center; }
/* These float over the MAP, which since the heatmap can be anything from navy
   ocean to solid gold Brazil — a translucent chip disappears on the bright
   half. Solid frosted navy reads on every fill the ramp can produce. */
.sub-chip {
  font-family: var(--sans); font-size: .85rem; font-weight: 700; cursor: pointer;
  padding: 10px 18px; border-radius: 22px; border: 1px solid var(--kio);
  background: rgba(6, 26, 46, .88); color: #fff;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 6px 20px rgba(3, 18, 33, .55);
}
.sub-chip:hover { background: rgba(23, 63, 82, .95); }
/* once regions are picked, the forward button turns full brand teal: the one
   thing on screen that says "this is the way on" */
.sub-chip.has-picks { background: var(--kio); border-color: var(--kio); color: #04222e; }
.sub-chip.has-picks:hover { background: #52c3d0; }
/* the back control: same chip, just round with an icon — the arrow says
   everything the sentence did, without competing with the forward action */
.sub-chip.icon { width: 46px; height: 46px; padding: 0; border-radius: 50%; display: grid; place-items: center; }
.sub-chip.icon .material-icons { font-size: 1.3rem; }

/* mobile first: the pins must be big, readable and easy to hit on a phone */
@media (max-width: 640px) {
  .sub-chip { padding: 12px 18px; font-size: .95rem; }
  .subregion-bar { gap: 8px; padding: 0 8px; }
  .map-hint { padding: 0 12px; text-align: center; }
}
.map-hint {
  margin-top: 2vh; font-family: var(--sans); font-size: .78rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted);
}
.map-hint .pulse {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--mi); margin-right: 10px; animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(245,121,79,.5);} 50% { box-shadow: 0 0 0 9px rgba(245,121,79,0);} }

/* ---------- slide 2 · journeys ---------- */
.tiles {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  width: min(1120px, 94vw); margin-top: 4vh;
}
.tile {
  position: relative; border: 1px solid var(--line); border-radius: 18px;
  background: var(--night-2); min-height: 300px; padding: 22px;
  display: flex; flex-direction: column; justify-content: flex-end;
  cursor: pointer; overflow: hidden; text-align: left; color: var(--ink);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.tile:hover, .tile:focus-visible { transform: translateY(-5px); border-color: rgba(234,242,245,.28); box-shadow: 0 18px 44px rgba(0,0,0,.45); }
.tile .art { position: absolute; inset: 0; opacity: .9; }
.tile .art::after { /* readability scrim */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 30%, rgba(10, 20, 31, .92) 82%);
}
.tile .route-deco { position: absolute; top: 26px; left: 18px; right: 18px; height: 60px; }
.tile .pick-chip {
  position: absolute; top: 12px; right: 12px;
  background: rgba(238, 190, 78, .92); color: #123; font-weight: 800; font-size: .68rem;
  padding: 4px 10px; border-radius: 12px; letter-spacing: .04em;
}
.tile h3 { position: relative; margin: 0 0 2px; font-size: 1.18rem; font-weight: 800; letter-spacing: -.015em; }
.tile .meta { position: relative; font-family: var(--sans); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tile .desc { position: relative; font-family: var(--body); color: #B9C8D2; font-size: .86rem; margin: 8px 0 0; line-height: 1.45; }
.tile.custom {
  border-style: dashed; border-color: rgba(234,242,245,.22); background: transparent;
  align-items: center; justify-content: center; text-align: center;
}
.tile.custom .plus {
  width: 58px; height: 58px; border-radius: 50%; border: 2px dashed var(--kio);
  display: grid; place-items: center; font-size: 30px; color: var(--kio); margin-bottom: 14px;
}
.tile.custom h3 { font-size: 1.15rem; }
.tile.custom .desc { text-align: center; }

/* ---------- wizard ---------- */
.panel {
  width: min(620px, 94vw); background: var(--panel); border: 1px solid var(--line);
  border-radius: 20px; padding: 34px 36px; margin-top: 3.5vh;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5);
}
.field { margin: 0 0 22px; }
.field label { display: block; font-weight: 600; font-size: .95rem; margin-bottom: 8px; }
.field .help { font-family: var(--body); color: var(--muted); font-size: .8rem; margin-top: 6px; }
input[type="text"], input[type="date"], select {
  width: 100%; padding: 13px 15px; border-radius: 12px; font-size: 1rem;
  background: var(--night); color: var(--ink); border: 1px solid rgba(234,242,245,.16);
  font-family: var(--sans); color-scheme: dark;
}
input:focus-visible, select:focus-visible, .stepper button:focus-visible {
  outline: 2px solid var(--kio); outline-offset: 1px;
}
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.stepper { display: flex; align-items: center; gap: 0; border: 1px solid rgba(234,242,245,.16); border-radius: 12px; overflow: hidden; width: fit-content; }
.stepper button {
  width: 46px; height: 46px; border: none; background: var(--night); color: var(--ink);
  font-size: 20px; cursor: pointer; font-weight: 700;
}
.stepper button:hover { background: #16293d; }
.stepper output {
  min-width: 64px; text-align: center; font-weight: 800; font-size: 1.1rem;
  font-variant-numeric: tabular-nums; background: var(--night); align-self: stretch;
  display: grid; place-items: center; border-inline: 1px solid rgba(234,242,245,.12);
}
.kids-ages { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; }
.kid-age { display: flex; flex-direction: column; gap: 8px; }
.kid-age .kid-label { font-family: var(--sans); font-size: .88rem; font-weight: 600; color: var(--ink); }
.kid-age select {
  width: 132px; padding: 11px 34px 11px 13px; border-radius: 12px; font-size: .95rem; font-weight: 600;
  background-color: var(--night); color: var(--ink); border: 1px solid rgba(234,242,245,.16);
  font-family: var(--sans); color-scheme: dark; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%233BB3C1' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 14px;
}
.kid-age select:hover { border-color: rgba(234,242,245,.32); }
.kid-age select:focus-visible { outline: 2px solid var(--kio); outline-offset: 1px; }

/* vibe cards */
.vibes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 6px; }
.vibe {
  border: 1px solid rgba(234,242,245,.14); border-radius: 14px; background: var(--night);
  padding: 16px 10px 13px; text-align: center; cursor: pointer; color: var(--ink);
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.vibe svg { width: 30px; height: 30px; display: block; margin: 0 auto 8px; stroke: var(--muted); fill: none; stroke-width: 1.6; transition: stroke .2s ease; }
.vibe span { font-size: .82rem; font-weight: 600; }
.vibe:hover { transform: translateY(-2px); border-color: rgba(234,242,245,.3); }
.vibe[aria-pressed="true"] { border-color: var(--kio); background: rgba(59, 179, 193, .12); }
.vibe[aria-pressed="true"] svg { stroke: var(--kio); }

/* wizard nav + progress */
.wiz-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 26px; }
.btn-primary {
  border: none; border-radius: 12px; padding: 14px 26px; font-size: 1rem; font-weight: 700;
  background: linear-gradient(120deg, var(--mi), #e2603b); color: #fff; cursor: pointer;
  font-family: var(--sans); transition: transform .2s ease, box-shadow .2s ease;
}
.btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(245, 121, 79, .35); }
.btn-primary:disabled { opacity: .4; cursor: not-allowed; }
.btn-back {
  background: none; border: none; color: var(--muted); font-size: .92rem; cursor: pointer;
  font-family: var(--sans); padding: 10px 6px;
}
.btn-back:hover { color: var(--ink); }
.dots { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }
.dots i { width: 26px; height: 4px; border-radius: 4px; background: rgba(234,242,245,.15); transition: background .3s ease; }
.dots i.on { background: var(--kio); }

/* step header inside wizard slides */
.step-eyebrow { text-align: center; }

@media (max-width: 900px) {
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .vibes { grid-template-columns: repeat(2, 1fr); }
  .stage { position: static; }
  body.landing { overflow: hidden; }         /* the active step owns the viewport and scrolls internally */
  .slide { position: relative; }
  .slide:not(.active) { display: none; }
  /* On mobile the slides swap via display:none, so the translateX slide
     transition is never visible here. Leaving those transforms on could offset
     the active slide sideways (a residual leaving-back translateX(-6vw) shifted
     the whole step left and clipped its left edge on iOS). Neutralise them. */
  .slide, .slide.active, .slide.leaving-back { transform: none !important; }
  #slide-world { min-height: 100svh; }        /* the map step keeps its own full-height flow */

  /* Every form step fills the viewport as a flex column: a compact header, a
     scrollable body, and the Back/Continue nav pinned to the SAME spot at the
     bottom on every step. The page itself never scrolls or overflows. */
  /* The wizard is a full-screen focused flow with its own Back/Continue nav,
     so the app bottom bar (logged-in users) would both duplicate navigation
     and cover the wizard's own buttons — hide it here, like the planner does.
     The body padding it reserved goes too, so the step gets the full height. */
  body.landing .bottombar { display: none !important; }
  body.landing { padding-bottom: 0 !important; }

  .slide.active:not(#slide-world) {
    height: 100vh; height: 100dvh;
    justify-content: flex-start;
    overflow-x: clip;                 /* never bleed sideways (clip avoids the overflow-y:auto quirk) */
    /* top clears the fixed header (~49px) so the step title is never hidden
       under it; the map step already carries its own 84px top pad. */
    padding: calc(56px + env(safe-area-inset-top, 0px)) 10px calc(10px + env(safe-area-inset-bottom));
  }
  .slide.active:not(#slide-world) > .eyebrow { margin-bottom: 6px; }
  .slide.active:not(#slide-world) > h1 { font-size: clamp(1.4rem, 6vw, 2rem); margin-bottom: 6px; }
  .slide.active:not(#slide-world) > .sub { font-size: .88rem; margin-bottom: 0; }

  /* the panel becomes the scroll area; full width, minimal side margin */
  .slide.active .panel {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    width: 100%; max-width: 560px; margin: 12px auto 0; padding: 18px 16px;
    display: flex; flex-direction: column;
  }
  /* the journeys step has no panel: its tiles scroll instead */
  .slide.active #tiles {
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    align-content: start; margin-top: 12px; width: 100%; max-width: 100%; min-width: 0;
  }
  .slide.active #tiles .tile { min-width: 0; max-width: 100%; } /* grid items must not force width */

  /* nav pinned at the bottom, identical position on every step */
  .slide.active .wiz-nav {
    position: sticky; bottom: 0; margin-top: auto;
    background: var(--panel); padding: 12px 0 2px;
  }
  .slide.active > .wiz-nav { background: transparent; }  /* journeys nav sits on the stage, no card */
  .dots { display: none; }                                /* the "step X of 5" eyebrow already shows progress */
}
@media (max-width: 560px) {
  .tiles { grid-template-columns: 1fr; }
  .row2 { grid-template-columns: 1fr; }
  .panel { padding: 26px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .slide, .tile, .vibe, .wizmap g.c path, .btn-primary { transition: none !important; }
  .map-hint .pulse { animation: none; }
}

/* ---- travel style step: A/B choice rows ---- */
.style-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.style-label { flex: 1; min-width: 120px; font-size: .88rem; font-weight: 600; }
.style-choices { display: flex; gap: 8px; }
.style-opt {
  padding: 8px 16px; border-radius: 12px; border: 1px solid var(--line);
  background: rgba(14, 29, 46, .4); color: var(--muted);
  font: inherit; font-size: .84rem; cursor: pointer; transition: all .15s;
}
.style-opt.on {
  border-color: var(--kio); color: #fff;
  background: rgba(59, 179, 193, .18); font-weight: 600;
}
@media (max-width: 560px) {
  .style-row { flex-direction: column; align-items: flex-start; gap: 6px; }
  .style-choices { width: 100%; }
  .style-opt { flex: 1; }
}

/* travel style v2: interest-chip look, two questions per row on wide screens */
.style-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
@media (max-width: 640px) { .style-grid { grid-template-columns: 1fr; } }
.style-q { display: block; }
.style-q .style-label { display: block; margin-bottom: 8px; font-size: .88rem; font-weight: 600; }
.style-q .style-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.style-q .style-opt {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px; border-radius: 14px; border: 1px solid var(--line);
  background: rgba(14, 29, 46, .4); color: var(--muted);
  font: inherit; font-size: .8rem; cursor: pointer; transition: all .15s; opacity: 1;
}
.style-q .style-opt .material-icons { font-size: 1.7rem; color: var(--muted); transition: color .15s; }
.style-q .style-opt.on { border-color: var(--kio); color: #fff; background: rgba(59, 179, 193, .16); font-weight: 600; }
.style-q .style-opt.on .material-icons { color: var(--kio); }

/* step 2 behaves like a map: grab to pan, wheel/pinch to zoom */
.wizmap.zoomed { cursor: grab; }
.wizmap.zoomed.dragging { cursor: grabbing; }
.wizmap.zoomed g.c.on { cursor: pointer; }
.wizmap.zoomed.dragging g.c.on { cursor: grabbing; }