/* helid.ch
 *
 * Same tokens as the vCard Builder, so the homepage and the tools read as one family
 * rather than two unrelated sites.
 */
:root {
  --bg: #f6f8fb;
  --panel: #ffffff;
  --ink: #16202b;
  --ink-2: #5b6874;
  --ink-3: #8b98a5;
  --line: #e2e8ef;
  --accent: #0f7ee0;
  --accent-ink: #0a5fac;
  --accent-soft: #e8f3fd;
  --ok: #197a4b;
  --ok-soft: #e6f5ec;
  --warn: #96590a;
  --warn-soft: #fdf3e2;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(22, 32, 43, .05), 0 8px 24px rgba(22, 32, 43, .06);
  --font: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-ink); }
h1, h2, h3 { line-height: 1.2; margin: 0 0 .5em; }
h1 { font-size: clamp(1.9rem, 5vw, 3rem); letter-spacing: -.025em; }
h2 { font-size: clamp(1.3rem, 3vw, 1.9rem); letter-spacing: -.015em; }
h3 { font-size: 1.05rem; }
p { margin: 0 0 1em; }

.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }
/* Long-form sections keep a readable line length, but their left edge stays aligned
   with the rest of the page. Shrinking .wrap itself centred the whole block, so the
   text started further right than the hero above it. */
.wrap.narrow { max-width: 1040px; }
.wrap.narrow > * { max-width: 720px; }
.wrap.narrow.center > * { margin-left: auto; margin-right: auto; }
.center { text-align: center; }
.muted { color: var(--ink-2); }
.tiny { font-size: .87rem; }
.mb0 { margin-bottom: 0; }

/* ------------------------------------------------------------------ header */
header.top {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.top-in { display: flex; align-items: center; gap: 14px; min-height: 62px; }
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 1.12rem; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none;
}
/* The mark is inline SVG using currentColor, so it takes the accent here and would
   follow the text colour anywhere else it is dropped in. Kept slightly larger than the
   old placeholder square because the three bars need the room to stay separate. */
.brand-mark {
  width: 26px; height: 26px;
  color: var(--accent);
  flex: 0 0 auto;
}
.spacer { flex: 1; }
.top a.nav { color: var(--ink-2); text-decoration: none; font-size: .94rem; }
.top a.nav:hover { color: var(--ink); }

.langswitch { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.langswitch button {
  border: 0; background: var(--panel); color: var(--ink-2);
  padding: 5px 10px; font: inherit; font-size: .82rem; cursor: pointer;
}
.langswitch button[aria-pressed='true'] { background: var(--accent); color: #fff; }

/* ----------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 10px;
  padding: 11px 18px; font: inherit; font-weight: 600; font-size: .95rem;
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.btn.primary { background: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-ink); }
.btn.ghost { background: var(--panel); color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--ink-3); }
.btn.lg { padding: 13px 24px; font-size: 1rem; }

/* ------------------------------------------------------------------ layout */
.hero { padding: 68px 0 44px; }
.kicker {
  font-size: .84rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--accent-ink); margin-bottom: 14px;
}
.lead { font-size: 1.15rem; color: var(--ink-2); max-width: 60ch; }

section.band { padding: 46px 0; border-top: 1px solid var(--line); }
section.band.tint { background: #fff; }

.grid { display: grid; gap: 18px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px;
}

/* Buttons line up along the bottom edge of the row rather than floating wherever their
   own text happens to end. Cards in a grid are already equal height, so the only thing
   needed is a column layout whose last item is pushed down.
   The visible language block sits between the card and the button, so it has to grow
   and become a column too, otherwise margin-top:auto has nothing to push against. */
.grid .card { display: flex; flex-direction: column; align-items: stretch; }
/* A flex item is blockified and stretched, which turned the inline-block pill into a
   full-width lozenge. It has to opt out of the stretch and keep its own width. */
.grid .card > .pill { align-self: flex-start; }
/* div ONLY. The pills are spans carrying data-lang too, and a bare [data-lang].on
   selector gave them flex:1 1 auto, so they grew into full-height coloured blobs. */
.grid .card > div[data-lang].on { display: flex; flex-direction: column; flex: 1 1 auto; }
.grid .card .cta { margin-top: auto; padding-top: 14px; }
.card h3 { margin-top: 0; }

.pill {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: .76rem; font-weight: 700; letter-spacing: .02em;
}
.pill.live { background: var(--ok-soft); color: var(--ok); }
.pill.soon { background: var(--warn-soft); color: var(--warn); }
.pill.idea { background: var(--line); color: var(--ink-2); }

ul.ticks { list-style: none; padding: 0; margin: 0 0 1em; }
ul.ticks li { padding-left: 26px; position: relative; margin-bottom: 7px; }
ul.ticks li::before {
  content: ''; position: absolute; left: 6px; top: 9px;
  width: 6px; height: 11px; border: solid var(--ok); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.note {
  border-radius: 10px; padding: 14px 16px; font-size: .92rem;
  border: 1px solid var(--line); background: #fbfcfe;
}
.note.warn { background: var(--warn-soft); border-color: #f0dcb8; color: var(--warn); }

footer.foot {
  padding: 30px 0 54px; margin-top: 26px;
  border-top: 1px solid var(--line); color: var(--ink-3); font-size: .88rem;
}
footer.foot a { color: var(--ink-2); }
.footlinks { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 10px; }

/* Legal pages: long-form text, easier to read narrow. */
.legal { padding: 40px 0 20px; }
.legal h2 { margin-top: 1.6em; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: .4em; }
.legal .updated { color: var(--ink-3); font-size: .85rem; }

[data-lang] { display: none; }
[data-lang].on { display: block; }
span[data-lang].on, a[data-lang].on { display: inline; }
li[data-lang].on { display: list-item; }
h1[data-lang].on, h2[data-lang].on, h3[data-lang].on { display: block; }

/* Sub-headings inside the legal pages, now that terms and privacy are split
   per product rather than describing the card generator only. */
.legal h3 { margin: 22px 0 6px; font-size: 1.02rem; }