/* Sottixon site. It follows the app: a sage page with white cards, ink text, pill buttons (ink with mint text), mint chips, and the
   offline map's colours behind the hero. The colours are the app's (the reference palette's exact light and dark values).
   Light and dark follow the phone. No external requests. */
@font-face {
  font-family: "Inter";
  src: url("../assets/fonts/inter-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* palette */
  --ink: #2a362f;
  --green-800: #1e482f;
  --mint: #80ffb6;
  --mint-2: #b4f5d0;
  --mint-3: #c7ffdf;

  /* light */
  --bg: #dfe5e2;
  --band: #d6deda;
  --surface: #ffffff;
  --soft: #f1f6f3;
  --text: #2a362f;
  --text-2: #3a4841;
  --muted: #52655c;
  --line: #c7d1cc;
  --line-strong: #a5b6ad;
  --link: #2a362f;
  --link-hover: #1e482f;
  --focus: #2a362f;
  --btn-bg: #2a362f;
  --btn-fg: #80ffb6;
  --btn-hover: #1e482f;
  --chip-bg: #c7ffdf;
  --chip-fg: #2a362f;
  --dot: #80ffb6;
  --dot-edge: rgba(42, 54, 47, 0.22);
  --frame: #1f2823;
  --radius: 20px;
  --wrap: 1080px;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #2a362f;
    --band: #1f2823;
    --surface: #334239;
    --soft: #2f4a3b;
    --text: #ffffff;
    --text-2: #dfe5e2;
    --muted: #adbfb5;
    --line: #475c50;
    --line-strong: #5e7869;
    --link: #80ffb6;
    --link-hover: #c7ffdf;
    --focus: #80ffb6;
    --btn-bg: #80ffb6;
    --btn-fg: #2a362f;
    --btn-hover: #c7ffdf;
    --chip-bg: #344b3e;
    --chip-fg: #c7ffdf;
    --dot-edge: rgba(0, 0, 0, 0);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 17px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
h1, h2, h3 { margin: 0; line-height: 1.15; overflow-wrap: break-word; }
p { margin: 0 0 14px; }
a { color: var(--link); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }
b { font-weight: 700; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.wrap.narrow { max-width: 760px; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 10; background: var(--btn-bg); color: var(--btn-fg); padding: 12px 16px; border-radius: 10px; font-weight: 600; text-decoration: none; }
.skip:focus { top: 12px; }

/* ----- language switch ----- */
.lang { display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); }
.lang button {
  min-width: 48px; min-height: 44px; padding: 0 12px; border: 0; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--text); font: 600 14px/1 "Inter", system-ui, sans-serif; letter-spacing: 0.04em;
}
.lang button[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-fg); }

/* ----- hero: light, with the app's map behind the phone ----- */
.hero { position: relative; overflow: hidden; background: var(--bg); isolation: isolate; }
.hero-map {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../assets/map-light.svg?v=1478c0f6c2") center / cover no-repeat;
  -webkit-mask-image: linear-gradient(180deg, transparent 48%, #000 72%);
  mask-image: linear-gradient(180deg, transparent 48%, #000 72%);
}
@media (prefers-color-scheme: dark) { .hero-map { background-image: url("../assets/map-dark.svg?v=1478c0f6c2"); } }
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; z-index: -1; background: linear-gradient(transparent, var(--bg)); pointer-events: none; }
.top { display: flex; align-items: center; justify-content: flex-end; padding-block: 16px; min-height: 72px; }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none; font-weight: 800; font-size: 20px; min-height: 48px; }

.hero-grid { display: grid; gap: 32px; padding-top: 16px; align-items: end; }
.hero-copy { padding-bottom: 8px; }
.hero h1 { font-size: clamp(32px, 7.4vw, 54px); font-weight: 800; letter-spacing: -0.02em; color: var(--text); }
.lead { font-size: clamp(17px, 2.4vw, 20px); color: var(--text-2); margin: 18px 0 26px; max-width: 34em; }
.fine { font-size: 14px; line-height: 1.5; color: var(--text-2); margin: 0 0 6px; }

.hero-phone { margin: 0; justify-self: center; max-height: 440px; overflow: hidden; }
.hero-phone .phone { width: 260px; }

/* ----- download button: ink pill with mint text, as in the app ----- */
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 30px; border-radius: 999px;
  background: var(--btn-bg); color: var(--btn-fg); font: 700 17px/1.2 "Inter", system-ui, sans-serif; text-decoration: none; text-align: center;
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.btn:hover { background: var(--btn-hover); }
.btn:active { transform: scale(0.98); }
.btn .lbl-soon { display: none; }
.btn.is-off { background: var(--surface); color: var(--muted); border: 1px solid var(--line); cursor: not-allowed; }
.btn.is-off:hover, .btn.is-off:active { background: var(--surface); transform: none; }
.btn.is-off .lbl-ready { display: none; }
.btn.is-off .lbl-soon { display: inline; }

/* ----- phone frame: plain CSS, no brand marks ----- */
.phone { --r: 34px; width: 100%; max-width: 300px; padding: 8px; border-radius: var(--r); background: var(--frame); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 18px -12px rgba(0, 0, 0, 0.35); }
.phone img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 20; object-fit: cover; border-radius: calc(var(--r) - 8px); background: var(--band); }
.phone.sm { --r: 26px; padding: 6px; }

/* ----- sections ----- */
.sec { padding-block: 56px; }
.band { background: var(--band); }
.sec h2 { font-size: clamp(26px, 4.6vw, 36px); font-weight: 800; letter-spacing: -0.015em; margin-bottom: 28px; }
.sec h2::before, .get h2::before {
  content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 12px; border-radius: 50%; vertical-align: 0.12em;
  background: var(--dot); box-shadow: inset 0 0 0 1.5px var(--dot-edge);
}
.sec h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.sec p { color: var(--text-2); }

.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.steps li, .cards li, .features li, .addsteps li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; position: relative; }
.num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--btn-bg); color: var(--btn-fg); font-weight: 800; margin-bottom: 12px; }
.steps p, .cards p, .features p, .addsteps p { margin: 0; }

.cards, .features { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.features li { padding: 18px 22px; }

/* ----- screenshots ----- */
.shots { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -20px; padding: 4px 20px 16px; scrollbar-width: thin; }
.shots figure { flex: 0 0 210px; margin: 0; scroll-snap-align: center; }
.shots figcaption { margin-top: 12px; text-align: center; font-size: 14px; color: var(--text-2); }

/* ----- community: a lead, tags, three pages, four steps ----- */
.lead-sm { max-width: 46em; margin-bottom: 18px; }
.tags { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tag { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px; border-radius: 999px; background: var(--chip-bg); color: var(--chip-fg); font: 600 14px/1.2 "Inter", system-ui, sans-serif; }
.dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 3px var(--ring, #e53935); }
.k-fixed { --ring: #e53935; }
.k-red { --ring: #d81b60; }
.k-mobile { --ring: #fb8c00; }

.trio { margin-top: 28px; display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -20px; padding: 4px 20px 16px; scrollbar-width: thin; }
.trio figure { flex: 0 0 220px; margin: 0; scroll-snap-align: center; }
.trio figcaption { margin-top: 12px; text-align: center; font-size: 14px; color: var(--text-2); }
/* The pages are shown from the top, fading out at the bottom: the empty rest of a page is not the point. */
.peek { max-height: 470px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 80%, transparent); mask-image: linear-gradient(#000 80%, transparent); }
.peek .phone { margin-inline: auto; }

.howto { margin-top: 36px; }
.howto h3 { margin-bottom: 14px; }
.addsteps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.addsteps li { padding: 16px 18px; display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; }
.addsteps .num { margin: 0; }
.addsteps p { font-size: 15px; line-height: 1.5; }

.plain { margin: 0 0 14px; padding-left: 20px; color: var(--text-2); }
.plain li { margin-bottom: 8px; padding-left: 2px; }
.plain li::marker { color: var(--link); }
.num-list { list-style: decimal; }

/* ----- FAQ: one white card, rows with hairlines (like a settings group) ----- */
.group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 22px; }
details { border-bottom: 1px solid var(--line); }
details:last-child { border-bottom: 0; }
summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding-block: 12px; cursor: pointer; font-weight: 600; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; font-size: 26px; line-height: 1; color: var(--link); flex: none; }
details[open] summary::after { content: "−"; }
details > p, details > ul { padding-bottom: 8px; }
details p { color: var(--text-2); }

/* ----- download: one white card ----- */
.get { padding-block: 56px 72px; }
.get-card { display: grid; gap: 28px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 28px; padding: 28px 24px; }
.get h2 { font-size: clamp(26px, 4.6vw, 36px); font-weight: 800; letter-spacing: -0.015em; margin-bottom: 20px; }
.get h3 { font-size: 18px; margin: 24px 0 8px; }
.get p { color: var(--text-2); }
.badge { width: 180px; height: 180px; justify-self: center; }
.specs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; }
.specs div { min-width: 92px; padding: 8px 16px; border-radius: 14px; background: var(--soft); border: 1px solid var(--line); }
.specs dt { font-size: 12px; line-height: 1.4; color: var(--muted); }
.specs dd { margin: 0; font-weight: 700; font-size: 17px; }
.get .plain li::marker { color: var(--link); }

/* ----- footer ----- */
.foot { background: var(--bg); padding-block: 36px 48px; border-top: 1px solid var(--line); }
.foot p { margin-bottom: 8px; color: var(--text); }
.foot .fine { color: var(--text-2); }
.foot a { display: inline-block; padding-block: 12px; }
.foot .links { display: flex; flex-wrap: wrap; align-items: center; gap: 0 28px; }

/* ----- wider screens ----- */
@media (min-width: 720px) {
  .sec { padding-block: 84px; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .features { grid-template-columns: repeat(2, 1fr); }
  .trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; overflow: visible; margin-inline: auto; padding-inline: 0; max-width: 820px; }
  .trio figure { flex: none; }
  .addsteps { grid-template-columns: repeat(2, 1fr); }
  .get-card { grid-template-columns: 220px 1fr; gap: 44px; padding: 40px 44px; align-items: start; }
  .badge { width: 220px; height: 220px; }
}
@media (min-width: 960px) {
  .hero-grid { grid-template-columns: 1.15fr 1fr; gap: 56px; padding-top: 28px; }
  .hero-copy { padding-block: 40px 56px; align-self: center; }
  .hero-phone { max-height: 560px; }
  .hero-phone .phone { width: 300px; }
  .hero-map {
    -webkit-mask-image: linear-gradient(90deg, transparent 44%, #000 72%);
    mask-image: linear-gradient(90deg, transparent 44%, #000 72%);
  }
  .cards { grid-template-columns: repeat(3, 1fr); }
  .features { grid-template-columns: repeat(4, 1fr); }
  .shots { display: grid; grid-template-columns: repeat(5, 1fr); overflow: visible; margin-inline: 0; padding-inline: 0; }
  .shots figure { flex: none; }
  .addsteps { grid-template-columns: repeat(4, 1fr); }
  .addsteps li { grid-template-columns: 1fr; gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn { transition: none; }
}