/* Port of design/canvases/Ziphe Landing.dc.html. Tokens come from ds/. */

.page {
  position: relative;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  overflow: hidden;
}

/* Chrome */
.bar {
  position: relative;
  z-index: 2;
  background: var(--surface-chrome);
  border-bottom: var(--bw-strong) solid var(--c-ink);
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  padding: 0 var(--gutter-page);
}
.brand { display: flex; align-items: center; gap: var(--s-3); color: var(--c-ink); }
.logo { display: block; flex: none; }
.wordmark { font-size: var(--fs-title-lg); line-height: 1; font-weight: var(--fw-bold); }
.bar-end { display: flex; align-items: center; gap: var(--s-4); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-ink);
}
/* Three lines of tagline on a phone; the headline says it. */
@media (max-width: 599px) {
  .eyebrow { display: none; }
}

.lang { display: flex; border: var(--bw) solid var(--c-ink); border-radius: var(--r-sm); background: var(--surface-card); }
.lang button {
  min-width: 44px;
  min-height: 36px;
  padding: 0 10px;
  border: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  background: transparent;
  color: var(--c-ink);
}
/* Inner radius of the group, so the focus ring is not clipped by an overflow. */
.lang button:first-child { border-radius: 2px 0 0 2px; }
.lang button:last-child { border-radius: 0 2px 2px 0; }
.lang button[aria-pressed="true"] { background: var(--c-ink); color: var(--c-on-ink); }
@media (hover: hover) {
  .lang button:hover { background: var(--c-surface-2); }
  .lang button[aria-pressed="true"]:hover { background: var(--action-fill-hover); }
}

/* Content */
main {
  position: relative;
  z-index: 2;
  display: flex;
  overflow: auto;
  padding: clamp(16px, 3.5vh, 56px) var(--gutter-page);
}
/* Auto margins centre without clipping the top once the copy is taller than the viewport. */
.hero {
  margin: auto;
  width: 100%;
  max-width: 760px;
  display: grid;
  gap: clamp(12px, 2.6vh, 28px);
  container-type: inline-size;
}
.pitch { display: grid; gap: var(--s-4); }
h1 {
  margin: 0;
  font-size: clamp(28px, 4.4vw, 40px);
  line-height: 1.08;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
  text-wrap: balance;
}
.pitch p { margin: 0; max-width: 60ch; font-size: clamp(17px, 1.9vw, 19px); line-height: 1.5; }

.steps {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: var(--s-2);
}
.step {
  min-width: 0;
  background: var(--surface-card);
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--r-md);
  padding: var(--s-3);
  display: grid;
  gap: 4px;
  align-content: start;
}
.step-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.step-body { font-size: var(--fs-body-sm); line-height: 1.35; }
.arrow { display: grid; place-items: center; }
.arrow .ds-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--r-pill);
  background: var(--c-brand);
  color: var(--c-ink);
  font-size: 18px;
}
/* The canvas stacks the steps once their row is narrower than 620px; the arrows then point down. */
@container (width < 620px) {
  .steps { grid-template-columns: minmax(0, 1fr); }
  .arrow .ds-icon { rotate: 90deg; }
}

.actions { display: grid; gap: var(--s-3); padding-top: var(--s-2); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); }
.hint { font-size: var(--fs-body-sm); line-height: 1.35; color: var(--text-muted); }
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }
.store-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Button, as the design system draws it: md is the web control, lg the mobile row. Links, because
   every one of them navigates. */
a.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  border-radius: var(--r-sm);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard);
}
.btn-md { min-height: var(--target-min); padding: 0 22px; }
.btn-lg { min-height: var(--target-row); padding: 0 24px; }
.btn .ds-icon { flex: none; font-size: 22px; width: 22px; height: 22px; }
.btn-md .ds-icon { font-size: 20px; width: 20px; height: 20px; }
a.btn-primary { background: var(--action-fill); color: var(--action-ink); border: var(--bw) solid var(--action-fill); }
a.btn-secondary { background: var(--surface-card); color: var(--c-ink); border: var(--bw) solid var(--action-outline); }
@media (hover: hover) {
  a.btn-primary:hover { background: var(--action-fill-hover); border-color: var(--action-fill-hover); }
  a.btn-secondary:hover { background: var(--c-surface-2); }
}
a.btn-primary:active { background: var(--action-fill); border-color: var(--action-fill); }
a.btn-secondary:active { background: var(--c-surface-3); }

footer {
  position: relative;
  z-index: 2;
  background: var(--surface-page);
  border-top: var(--bw) solid var(--c-ink);
  padding: var(--s-4) var(--gutter-page);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  color: var(--text-muted);
}
.links { display: flex; flex-wrap: wrap; gap: var(--s-4); }
footer a { color: var(--c-ink); text-underline-offset: 3px; }

/* Document pages (privacy.html) have no canvas: the landing's chrome around one article per
   language, of which the html lang shows one. */
html[lang="fr"] [lang="en"], html[lang="en"] [lang="fr"] { display: none; }
a.brand { text-decoration: none; }
a.brand:hover { background: none; }
.doc { margin: 0 auto; width: 100%; max-width: 720px; }
.doc h1 { margin-bottom: var(--s-2); }
.updated {
  display: block;
  margin-bottom: var(--s-6);
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  color: var(--text-muted);
}
.doc h2 { margin: var(--s-8) 0 var(--s-2); font-size: var(--fs-title-lg); line-height: var(--lh-title-lg); }
.doc p, .doc ul { margin: 0 0 var(--s-3); }
.doc ul { padding-left: 1.2em; }
.doc li { margin-bottom: var(--s-1); }
.summary {
  margin-bottom: var(--s-8);
  padding: var(--s-4) var(--s-5);
  background: var(--surface-card);
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--r-md);
}
.summary h2 {
  margin: 0 0 var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-label-sm);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.summary ul { margin: 0; }

/* Blurred screens behind the copy: dressing, hidden from assistive tech. Their type sits under the
   system's floor on purpose; it is never read. */
.mockups { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.veil { position: absolute; inset: 0; background: color-mix(in srgb, var(--surface-page) 62%, transparent); }
.phone {
  position: absolute;
  left: -26px;
  bottom: -96px;
  width: 318px;
  transform: rotate(-7deg);
  filter: blur(3px);
  opacity: 0.55;
  --m-sm: 11px;
  --m-lg: 16px;
  --m-pad: 14px;
  --m-gap: 7px;
}
.laptop {
  position: absolute;
  right: -70px;
  bottom: -40px;
  width: 760px;
  transform: rotate(4deg);
  filter: blur(3.5px);
  opacity: 0.5;
  --m-sm: 10px;
  --m-lg: 14px;
  --m-pad: 12px;
  --m-gap: 6px;
}
.device { border: 10px solid var(--c-ink); background: var(--surface-page); overflow: hidden; }
.phone .device { border-radius: 40px; }
.laptop .device { border-radius: 12px; }

.mcard {
  background: var(--surface-card);
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--r-md);
  padding: var(--m-pad);
  display: grid;
  gap: var(--m-gap);
}
.mcard.done { background: var(--surface-sunken); border-color: var(--c-border); }
.mcard.done .mtitle { color: var(--text-muted); }
.mclient {
  font-family: var(--font-mono);
  font-size: var(--m-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.mtitle { font-size: var(--m-lg); font-weight: var(--fw-bold); line-height: 1.2; color: var(--c-ink); }
.mmeta { font-family: var(--font-mono); font-size: var(--m-sm); color: var(--text-muted); }
.mrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mchip {
  border: var(--bw) solid var(--c-ink);
  border-radius: var(--r-pill);
  padding: 2px 9px;
  background: var(--c-linked-tint);
  font-size: 11px;
  font-weight: var(--fw-bold);
  color: var(--c-ink);
}
.mover { color: var(--c-error); font-weight: var(--fw-bold); }

.phone-bar { background: var(--c-brand); border-bottom: var(--bw) solid var(--c-ink); padding: 10px 18px 14px; display: grid; gap: 12px; }
.notch { justify-self: center; width: 56px; height: 6px; background: var(--c-ink); border-radius: 3px; opacity: 0.6; }
.phone-title { font-size: 22px; font-weight: var(--fw-bold); color: var(--c-ink); }
.phone-body { padding: 16px; display: grid; gap: 12px; }
.mfab {
  height: 64px;
  background: var(--c-ink);
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  font-size: 17px;
  font-weight: var(--fw-bold);
  color: var(--c-on-ink);
}
.phone-nav {
  border-top: var(--bw) solid var(--c-ink);
  background: var(--surface-card);
  height: 76px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: center;
  text-align: center;
  font-size: 12px;
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}
.phone-nav .on { display: grid; gap: 4px; justify-items: center; color: var(--c-ink); }
.pip { width: 34px; height: 4px; background: var(--c-brand); border-radius: 2px; }

.lap-bar {
  background: var(--c-brand);
  border-bottom: var(--bw) solid var(--c-ink);
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
}
.lap-org { font-size: 20px; font-weight: var(--fw-bold); color: var(--c-ink); }
.lap-tabs { display: flex; align-items: center; gap: 14px; font-size: 14px; font-weight: var(--fw-bold); color: var(--c-ink); }
.lap-tabs .on { border-bottom: 4px solid var(--c-ink); padding-bottom: 4px; }
.lap-board { padding: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mcol { display: grid; gap: 12px; align-content: start; }
.mcol-h { font-size: 14px; font-weight: var(--fw-bold); color: var(--c-ink); }
.mcol-h.muted { color: var(--text-muted); }
.mcount { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); }
.lap-hinge { height: 14px; margin: 0 -34px; background: var(--c-ink); border-radius: 0 0 6px 6px; }
.lap-base { position: relative; height: 10px; margin: 0 -64px; background: var(--c-ink); border-radius: 0 0 16px 16px; }
.lap-base span {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 110px;
  height: 5px;
  background: var(--surface-page);
  border-radius: 0 0 6px 6px;
}