/* ===========================================================================
 * TONI — pre-launch landing page (MK-01 + MK-10)
 * Mobile-first. Every colour comes from tokens.css; no hex is typed here except
 * inside a comment. Two anchors are exact: 390 (mobile board) and 1440 (desktop board).
 *
 * Contrast rules honoured here, because the reference breaks them:
 *   · the inactive language label is #3B3630 on #EAE7E1 (9,69:1), NOT #746E65 (4,09:1 — fails)
 *   · footer legal + copyright are #9A968E on #17140F (6,42:1), NOT #646C65 (3,45:1 — fails)
 *   · #646C65 is used as a border only, and NOT for the stepper node ring: 2,80:1 on
 *     #222724 misses WCAG 1.4.11, so that ring is #868E86 (4,50:1)
 *   · the focus ring is redefined per band: green on light, #4FCB9F on ink, white on the
 *     green band — and green again on the WHITE panel that replaces the band's form
 *   · status colour targets BRIEF §3's 7:1, so danger text is #8E1B13 on light (9,07:1)
 *     and #FFDAD5 on the green band (7,11:1); #B3261E (6,54:1) and #FFB4AB (5,42:1 on
 *     green) are not used for it
 *
 * Deliberate deviations from the token scale, both drawn that way on the boards:
 *   · the phone picture in the hero uses 10-23px type. It is aria-hidden + inert and
 *     contains no control, so the 16px interactive floor does not reach it.
 * ======================================================================== */

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

/* the attribute must win over any component display rule */
[hidden] { display: none !important; }

:root {
  --gutter: 16px;
  --section: 36px;
  --content: 1200px;

  /* focus ring, redefined per band below; ≥3:1 against element AND background */
  --focus: var(--color-border-focus);
  --focus-offset: 2px;

  --card-radius: 16px;      /* 20 from 768 up */
  --dur: .18s;
}

@media (min-width: 600px)  { :root { --gutter: 24px;  --section: 44px; } }
@media (min-width: 768px)  { :root { --card-radius: 20px; } }
@media (min-width: 900px)  { :root { --gutter: 40px;  --section: 56px; } }
@media (min-width: 1200px) { :root { --gutter: 72px;  --section: 64px; } }
@media (min-width: 1440px) { :root { --gutter: 120px; --section: 72px; } }

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0s; }
  *, *::before, *::after { animation-duration: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0s !important; scroll-behavior: auto !important; }
}

html { scroll-padding-top: 76px; }
@media (min-width: 1200px) { html { scroll-padding-top: 92px; } }

body {
  margin: 0;
  background: var(--color-bg-canvas);
  color: var(--color-text-primary);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 25px;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; }
svg.i { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
button { font: inherit; cursor: pointer; }
input { font: inherit; }
a { color: var(--color-text-link); }
a:hover { color: var(--color-action-primary-bg); }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
h1, h2, h3 { margin: 0; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: var(--focus-offset);
  border-radius: 4px;
}
/* fallback for engines without :focus-visible */
:focus:not(:focus-visible) { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skiplink {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  display: inline-flex; align-items: center; min-height: var(--size-touch-min);
  padding: 0 20px; border-radius: var(--radius-md);
  background: var(--color-action-primary-bg); color: var(--color-action-primary-label);
  font-size: 16px; font-weight: 700; text-decoration: none;
}
.skiplink:focus { top: 12px; color: var(--color-action-primary-label); }

.wrap {
  width: 100%;
  max-width: calc(var(--content) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------------------------------------------------------------- bands */

.band { padding-block: var(--section); }
.band--white { background: var(--color-bg-surface); border-block: 1px solid var(--color-border-hairline); }
.band--ink   { background: var(--color-bg-inverse); color: var(--color-text-inverse); --focus: var(--color-brand-on-dark); }
.band--mint  { background: var(--color-brand-tint-100); }
.band--green { background: var(--color-action-primary-bg); color: #FFFFFF; --focus: #FFFFFF; }

/* ---------------------------------------------------------------- type */

.h1 {
  font-family: var(--font-display);
  font-size: var(--type-mobile-h1-size);
  line-height: var(--type-mobile-h1-line);
  font-weight: 700;
  letter-spacing: var(--type-mobile-h1-tracking);
}
.h2 {
  font-family: var(--font-display);
  font-size: var(--type-mobile-h2-size);
  line-height: var(--type-mobile-h2-line);
  font-weight: 700;
  letter-spacing: var(--type-mobile-h2-tracking);
}
/* the three headings the design draws smaller than the h2 token */
.courier__h { font-size: 27px; line-height: 34px; }
.trust__h   { font-size: 26px; line-height: 32px; }

@media (min-width: 600px) and (max-width: 1199px) {
  /* the line through 38px @390 and 62px @1440 */
  .h1 { font-size: clamp(38px, 29.1px + 2.29vw, 62px); line-height: 1.08; }
  .h2 { font-size: clamp(28px, 24.3px + .95vw, 38px); line-height: 1.2; }
  .courier__h { font-size: clamp(27px, 21.4px + 1.43vw, 42px); line-height: 1.19; }
  .trust__h   { font-size: clamp(26px, 21.6px + 1.14vw, 38px); line-height: 1.21; }
}
@media (min-width: 1200px) {
  .h1 { font-size: var(--type-desktop-h1-size); line-height: var(--type-desktop-h1-line); letter-spacing: var(--type-desktop-h1-tracking); }
  .h2 { font-size: var(--type-desktop-h2-size); line-height: var(--type-desktop-h2-line); }
  .courier__h { font-size: 42px; line-height: 50px; }
  .partner__h { font-size: 40px; line-height: 48px; }
  .trust__h   { font-size: 38px; line-height: 46px; }
}

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: var(--size-cta-height);
  padding: 0 24px;
  border: none; border-radius: var(--radius-md);
  font-size: 17px; font-weight: 700; line-height: 1;
  text-decoration: none;
  transition: background-color var(--dur) ease;
}
.btn--primary { background: var(--color-action-primary-bg); color: var(--color-action-primary-label); }
.btn--primary:hover { background: var(--color-action-primary-pressed); color: var(--color-action-primary-label); }
.btn--partner { background: var(--color-action-partner-bg); color: var(--color-action-partner-label); }
.btn--partner:hover { background: var(--color-action-partner-pressed); color: var(--color-action-partner-label); }
.btn--ink { background: var(--color-bg-inverse); color: #FFFFFF; }
.btn--ink:hover { background: var(--color-bg-inverse-2); color: #FFFFFF; }
.btn--ghost { background: var(--color-bg-surface); color: var(--color-text-primary); border: 1px solid var(--color-border-default); font-weight: 600; }
/* Currently unused: it dressed the two cookie accept buttons, which left with the
   banner. Kept because the capture returns and needs a secondary button that is a
   true peer of .btn--primary. #07523D on #FFFFFF measures 9,20:1. */
.btn--outline-primary {
  background: var(--color-bg-surface);
  color: var(--color-action-primary-bg);
  border: 1px solid var(--color-action-primary-bg);
}
.btn--outline-primary:hover { background: var(--color-brand-tint-50); color: var(--color-action-primary-bg); }

/* ---------------------------------------------------------------- header */

.hdr {
  position: sticky; top: 0; z-index: 40;
  background: var(--color-bg-canvas);
  border-bottom: 1px solid var(--color-border-hairline);
}
.hdr__inner { display: flex; align-items: center; gap: 10px; min-height: 64px; }
.hdr__brand { display: flex; align-items: center; gap: 8px; text-decoration: none; min-height: var(--size-touch-min); }
.hdr__spacer { flex-grow: 1; }

.hdr__menubtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--size-touch-min); height: var(--size-touch-min);
  border: none; border-radius: 12px; background: transparent; color: var(--color-text-primary);
}

.hdr__drawer {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%;
  flex-direction: column; gap: 4px;
  padding: 12px var(--gutter) 20px;
  background: var(--color-bg-canvas);
  border-bottom: 1px solid var(--color-border-hairline);
  box-shadow: 0 16px 32px rgba(0, 0, 0, .10);
}
.hdr__drawer[data-open="true"] { display: flex; }
.hdr__nav { display: flex; flex-direction: column; }
.hdr__nav a {
  display: flex; align-items: center; min-height: var(--size-touch-min);
  font-size: 16px; font-weight: 600; color: var(--color-text-primary); text-decoration: none;
}
.hdr__cta { margin-top: 8px; }

@media (min-width: 1200px) {
  .hdr__inner { min-height: 80px; gap: 40px; }
  .hdr__menubtn { display: none; }
  .hdr__drawer {
    position: static;
    padding: 0; background: none; border: none; box-shadow: none;
  }
  .hdr__nav { flex-direction: row; gap: 28px; }
  .hdr__cta { margin-top: 0; min-height: var(--size-touch-min); padding: 0 22px; font-size: 16px; }
  /* The desktop board draws one row: wordmark · nav · [grow] · language · CTA.
     `display: contents` dissolves the mobile drawer so nav and CTA become direct
     flex children of .hdr__inner and can take their own place in that order. */
  .hdr__drawer, .hdr__drawer[data-open="true"] { display: contents; }
  .hdr__nav { order: 1; }
  .hdr__spacer { order: 2; }
  .langtoggle { order: 3; }
  .hdr__cta { order: 4; }
}

/* ------------------------------------------------------ language toggle */

.langtoggle {
  display: flex; gap: 2px; padding: 3px;
  border-radius: var(--radius-full);
  background: var(--color-bg-n100);
}
.langtoggle__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 48px; min-height: var(--size-touch-min);
  padding: 0 10px; border: none; border-radius: var(--radius-full);
  background: transparent;
  font-size: 16px; font-weight: 600;
  /* NOT #746E65: that pair measures 4,09:1 on #EAE7E1 and fails */
  color: var(--color-text-body);
}
.langtoggle__btn[aria-pressed="true"] {
  background: var(--color-bg-surface); color: var(--color-text-primary); font-weight: 700;
}
.langtoggle__long { display: none; }
.langtoggle__short { display: inline; }
@media (min-width: 1200px) {
  .langtoggle__long { display: inline; }
  .langtoggle__short { display: none; }
  .langtoggle__btn { min-width: 60px; }
}
.langtoggle--foot { background: var(--color-bg-inverse-2); align-self: flex-start; }
.langtoggle--foot .langtoggle__btn { color: var(--color-text-inverse-muted); }
.langtoggle--foot .langtoggle__btn[aria-pressed="true"] { background: var(--color-text-inverse); color: var(--color-text-primary); }

/* ---------------------------------------------------------------- hero */

.hero { padding-block: 28px var(--section); }
.hero__inner { display: flex; flex-direction: column; gap: 36px; }
.hero__copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.badge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border-radius: var(--radius-full);
  background: var(--color-brand-tint-100);
  font-size: 13px; font-weight: 700; color: var(--color-action-primary-bg);
}
.badge__dot { width: 7px; height: 7px; border-radius: var(--radius-full); background: var(--color-brand-primary); }

.hero__deck { font-size: 17px; line-height: 26px; color: var(--color-text-body); }

.trustrow { display: flex; flex-direction: column; gap: 9px; }
.trustrow li { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--color-text-body); }
.trustrow svg { color: var(--color-brand-primary); }

@media (min-width: 600px) {
  .hero__deck { font-size: 19px; line-height: 29px; max-width: 560px; }
  .badge { padding: 7px 14px; font-size: 14px; }
  .badge__dot { width: 8px; height: 8px; }
  .trustrow { flex-direction: row; flex-wrap: wrap; gap: 20px; margin-top: 4px; }
}
@media (min-width: 1200px) {
  .hero { padding-block: var(--section) 80px; }
  .hero__inner { flex-direction: row; align-items: center; gap: 72px; }
  .hero__copy { flex-grow: 1; flex-basis: 0; gap: 24px; }
  .hero__deck { font-size: 21px; line-height: 32px; }
}

/* ------------------------------------------------- the phone mock (a picture) */

.mockfig { margin: 0; display: flex; justify-content: center; }
.mock {
  width: 270px; flex-shrink: 0; padding: 9px;
  background: var(--color-bg-inverse); border-radius: 36px;
  transform-origin: top center;
}
.mock__screen {
  width: 252px; height: 540px; background: var(--color-bg-canvas);
  border-radius: 28px; overflow: hidden; display: flex; flex-direction: column;
  color: var(--color-text-primary);
}
.mock__notch { height: 26px; flex-shrink: 0; }
.mock__bar { height: 40px; flex-shrink: 0; padding: 0 12px; display: flex; align-items: center; gap: 8px; }
.mock__chip { height: 26px; padding: 0 9px; border: 1px solid var(--color-border-default); border-radius: var(--radius-full); background: var(--color-bg-surface); font-size: 11px; font-weight: 600; display: flex; align-items: center; }
.mock__grow { flex-grow: 1; }
.mock__locale { height: 24px; padding: 0 8px; border-radius: var(--radius-full); background: var(--color-bg-n100); font-size: 10px; font-weight: 700; display: flex; align-items: center; }
.mock__avatar { width: 24px; height: 24px; border-radius: var(--radius-full); background: var(--color-brand-tint-100); color: var(--color-action-primary-bg); font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.mock__body { flex-grow: 1; min-height: 0; padding: 0 12px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.mock__h { height: 54px; flex-shrink: 0; display: flex; align-items: center; font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.mock__choice { height: 72px; flex-shrink: 0; padding: 10px; border-radius: 11px; display: flex; align-items: center; gap: 10px; }
.mock__choice--a { background: var(--color-brand-tint-100); border: 1px solid var(--color-brand-primary); }
.mock__choice--b { background: var(--color-bg-inverse); }
.mock__puck { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--radius-full); background: var(--color-bg-surface); color: var(--color-action-primary-bg); display: flex; align-items: center; justify-content: center; }
.mock__choice--b .mock__puck { background: var(--color-bg-inverse-2); color: var(--color-action-partner-bg); }
.mock__choiceText { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.mock__choiceTitle { font-size: 14px; font-weight: 700; }
.mock__choiceSub { font-size: 11px; color: var(--color-text-body); }
.mock__choice--b .mock__choiceTitle { color: var(--color-text-inverse); }
.mock__choice--b .mock__choiceSub { color: var(--color-text-inverse-muted); }
.mock__search { height: 38px; flex-shrink: 0; padding: 0 10px; border: 1px solid var(--color-border-default); border-radius: 9px; background: var(--color-bg-surface); display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--color-text-secondary); }
.mock__label { font-size: 13px; font-weight: 600; flex-shrink: 0; }
.mock__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.mock__tile { min-height: 52px; padding: 8px; border: 1px solid var(--color-border-hairline); border-radius: 10px; background: var(--color-bg-surface); display: flex; flex-direction: column; gap: 2px; }
.mock__tileName { font-size: 12px; font-weight: 600; }
.mock__tileSlot { font-size: 10px; font-weight: 600; color: var(--color-brand-primary); }
.mock__tileMuted { font-size: 10px; color: var(--color-text-secondary); }
.mock__tabs { height: 42px; flex-shrink: 0; background: var(--color-bg-surface); border-top: 1px solid var(--color-border-hairline); display: flex; align-items: center; justify-content: space-around; font-size: 9px; color: var(--color-text-secondary); }
.mock__tab--on { color: var(--color-action-primary-bg); font-weight: 700; }

/* at very narrow viewports the 270px frame plus gutters would overflow: scale, never clip */
@media (max-width: 319px) { .mock { transform: scale(.86); } .mockfig { height: 500px; } }

@media (min-width: 1200px) {
  .mockfig { flex-shrink: 0; width: 420px; }
  .mock { width: 330px; padding: 10px; border-radius: 42px; box-shadow: 0 2px 4px rgba(0,0,0,.08), 0 24px 56px rgba(0,0,0,.16); }
  .mock__screen { width: 310px; height: 670px; border-radius: 33px; }
  .mock__notch { height: 34px; }
  .mock__bar { height: 46px; padding: 0 14px; }
  .mock__chip { height: 30px; padding: 0 10px; font-size: 12px; }
  .mock__locale { height: 26px; font-size: 11px; }
  .mock__avatar { width: 28px; height: 28px; font-size: 11px; }
  .mock__body { padding: 0 14px; gap: 12px; }
  .mock__h { height: 64px; font-size: 23px; }
  .mock__choice { height: 84px; padding: 12px; border-radius: 12px; gap: 11px; }
  .mock__puck { width: 42px; height: 42px; }
  .mock__choiceTitle { font-size: 16px; }
  .mock__choiceSub { font-size: 12px; }
  .mock__search { height: 42px; padding: 0 12px; border-radius: 10px; font-size: 13px; }
  .mock__label { font-size: 14px; }
  .mock__tile { min-height: 58px; padding: 9px; }
  .mock__tileName { font-size: 13px; }
  .mock__tileSlot, .mock__tileMuted { font-size: 11px; }
  .mock__tabs { height: 48px; font-size: 10px; }
}

/* ---------------------------------------------------------------- how it works */

.how .h2 { margin-bottom: 22px; }
.how__grid { display: flex; flex-direction: column; gap: 22px; }
.how__step { display: flex; align-items: flex-start; gap: 14px; }
.how__num {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius-full);
  background: var(--color-brand-tint-100); color: var(--color-action-primary-bg);
  display: flex; align-items: center; justify-content: center; font-size: 17px; font-weight: 700;
}
.how__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.how__title { font-size: 18px; line-height: 24px; font-weight: 700; }
.how__body { font-size: 15px; line-height: 23px; color: var(--color-text-body); }

@media (min-width: 600px) { .how__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (min-width: 900px) {
  .how .h2 { margin-bottom: 36px; }
  .how__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .how__step { flex-direction: column; gap: 12px; }
  .how__num { width: 44px; height: 44px; font-size: 19px; }
  .how__title { font-size: 21px; line-height: 28px; }
  .how__body { font-size: 16px; line-height: 25px; }
}

/* ---------------------------------------------------------------- services */

.cats .h2 { margin-bottom: 18px; }
/* Two columns at every phone width, 320 included (BRIEF §7.2 fixes 320 as supported;
   both boards draw a 2-column phone grid). At 320 the tile is 139px / 111px inner —
   every label fits on one or two lines; only "Elektroshtëpiake" needs the hyphen. */
.cats__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cat {
  min-height: 84px; padding: 14px;
  border: 1px solid var(--color-border-hairline); border-radius: 12px;
  background: var(--color-bg-surface);
  display: flex; flex-direction: column; gap: 7px;
}
.cat__icon { color: var(--color-action-primary-bg); width: 22px; height: 22px; }
.cat__label { font-size: 16px; line-height: 22px; font-weight: 600; color: var(--color-text-primary); overflow-wrap: break-word; hyphens: auto; }
.cats__tail { margin-top: 18px; font-size: 16px; color: var(--color-text-body); }
.cats__tail strong { font-weight: 600; color: var(--color-text-primary); }

/* 2 columns from 320 all the way to 899; 4 only from 900.
   BRIEF §4.4: "Elektroshtëpiake & teknologji is the longest label and sets the minimum
   tile width … Do not optimise it back to four." At 768 with the 24px gutter a quarter
   tile is 168px / 130px inner and the 18px label (145px) breaks mid-word; at 900 the
   gutter is 40px, the tile 193px / 157px inner, and the word fits on one line. */
@media (min-width: 768px) {
  .cats .h2 { margin-bottom: 32px; }
  .cats__grid { gap: 16px; }
  .cats__tail { margin-top: 32px; }
}
@media (min-width: 900px) {
  .cats__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cat { min-height: 92px; padding: 18px; border-radius: var(--radius-md); gap: 8px; }
  .cat__icon { width: 26px; height: 26px; }
  .cat__label { font-size: 18px; line-height: 24px; }
}

/* ---------------------------------------------------------------- courier */

.courier .wrap { display: flex; flex-direction: column; gap: 20px; }
/* Phone order follows the mobile board: copy → the nine modes → the stepper card.
   `display: contents` lets the copy and the stepper card take their own place in the
   wrap's flex order; the grid comes back at 900 and with it the desktop order. */
.courier__top { display: contents; }
.modes { order: 0; }
.stepcard { order: 1; }
.courier__copy { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.eyebrow {
  align-self: flex-start; padding: 5px 11px; border-radius: var(--radius-full);
  background: var(--color-bg-inverse-2); color: var(--color-action-partner-bg);
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
}
.courier__h { color: var(--color-text-inverse); }
.courier__body { font-size: 16px; line-height: 25px; color: var(--color-text-inverse-muted); }
.courier__pull {
  padding: 14px 16px; border-radius: 12px; background: var(--color-bg-inverse-2);
  font-size: 17px; font-weight: 600; color: var(--color-action-partner-bg);
}

.stepcard { padding: 18px; border-radius: 18px; background: var(--color-bg-inverse-2); display: flex; flex-direction: column; gap: 18px; }
.stepcard__h { font-size: 15px; font-weight: 700; color: var(--color-text-inverse); }

/* vertical on phones, six-across from 900 — never truncated, never scrolled */
.stepper { display: flex; flex-direction: column; }
.stepper__item { display: flex; align-items: center; gap: 12px; min-height: 34px; }
.stepper__rail { position: relative; width: 24px; align-self: stretch; display: flex; justify-content: center; }
.stepper__rail::before, .stepper__rail::after {
  content: ""; position: absolute; left: 50%; width: 2px; transform: translateX(-50%);
  /* #2E342F measured 1,19:1 on #222724 — the six dots stopped reading as one sequence */
  background: var(--color-border-dark-rail);
}
.stepper__rail::before { top: 0; height: 50%; }
.stepper__rail::after { bottom: 0; height: 50%; }
.stepper__item:first-child .stepper__rail::before,
.stepper__item:last-child .stepper__rail::after { background: none; }
.stepper__node {
  position: relative; z-index: 1; width: 18px; height: 18px; align-self: center;
  border-radius: var(--radius-full); box-sizing: border-box;
  /* the ring IS the whole visual body of an upcoming phase, so it must clear 1.4.11's
     3:1 — #646C65 measured 2,80:1 on #222724, #868E86 measures 4,50:1 */
  border: 2px solid var(--color-border-dark-node); background: var(--color-bg-inverse-2);
}
.stepper__item[data-phase="done"] .stepper__node { border: none; background: var(--color-brand-on-dark); }
.stepper__item[data-phase="done"] .stepper__rail::before,
.stepper__item[data-phase="done"] .stepper__rail::after,
.stepper__item[data-phase="current"] .stepper__rail::before { background: var(--color-brand-on-dark); }
/* the current phase differs by SIZE, RING and WEIGHT — never by colour alone */
.stepper__item[data-phase="current"] .stepper__node {
  width: 24px; height: 24px; border: 3px solid var(--color-brand-on-dark); background: transparent;
}
.stepper__label { font-size: 13px; color: var(--color-text-inverse-muted); }
.stepper__item[data-phase="done"] .stepper__label { color: var(--color-text-inverse); }
.stepper__item[data-phase="current"] .stepper__label { color: var(--color-text-inverse); font-weight: 700; }

.pin { display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 12px; background: var(--color-bg-inverse-3); }
.pin__digits { display: flex; gap: 5px; flex-shrink: 0; }
.pin__digits span {
  width: 28px; padding: 6px 0; text-align: center; border-radius: 7px;
  background: var(--color-bg-surface); color: var(--color-text-primary); font-size: 18px; font-weight: 700;
}
.pin__text { font-size: 13px; line-height: 20px; color: var(--color-text-inverse-muted); }

.modes { display: flex; flex-direction: column; gap: 16px; }
.modes__h {
  font-size: 15px; font-weight: 700; color: var(--color-text-inverse-muted);
  letter-spacing: .04em; text-transform: uppercase;
}
.modes__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; grid-auto-rows: 1fr; }
.mode {
  padding: 13px 6px; background: var(--color-bg-inverse-2); border-radius: 11px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  color: var(--color-text-inverse);
}
.mode__label { font-size: 11px; font-weight: 600; text-align: center; min-height: 32px; min-height: 2lh; }

@media (min-width: 900px) {
  .courier .wrap { gap: 40px; }
  .courier__top { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
  .stepcard { order: 0; }
  .courier__copy { gap: 18px; }
  .courier__body { font-size: 19px; line-height: 30px; }
  .courier__pull { padding: 16px 20px; border-radius: var(--radius-md); font-size: 19px; }
  .stepcard { padding: 24px; }
  .eyebrow { padding: 6px 12px; font-size: 13px; }
  .pin { padding: 16px; gap: 14px; }
  .pin__digits { gap: 6px; }
  .pin__digits span { width: 34px; padding: 7px 0; border-radius: 8px; font-size: 21px; }
  .pin__text { font-size: 14px; line-height: 21px; }

  /* six across */
  .stepper { flex-direction: row; }
  .stepper__item { flex-direction: column; flex-grow: 1; flex-basis: 0; gap: 7px; align-items: center; min-height: 0; }
  .stepper__rail { width: 100%; align-self: auto; height: 24px; align-items: center; }
  .stepper__rail::before, .stepper__rail::after { top: 50%; bottom: auto; left: auto; height: 2px; width: 50%; transform: translateY(-50%); }
  .stepper__rail::before { left: 0; }
  .stepper__rail::after { right: 0; }
  .stepper__label { font-size: 11px; text-align: center; }
}
@media (min-width: 1024px) {
  .modes__grid { grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 12px; }
  .mode { padding: 16px 8px; border-radius: 12px; gap: 9px; }
  .mode svg { width: 28px; height: 28px; }
}
@media (min-width: 1200px) {
  /* the board gives both children flex-grow:1/flex-basis:0 — equal halves, not 544/592 */
  .courier__top { grid-template-columns: 1fr 1fr; gap: 64px; }
}

/* ---------------------------------------------------------------- partner */

.partner__inner { display: flex; flex-direction: column; gap: 18px; }
.partner__copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.partner__body { font-size: 16px; line-height: 25px; color: var(--color-text-body); }
.proof { display: flex; flex-direction: column; gap: 10px; }
.proof li { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--color-text-primary); }
.proof svg { color: var(--color-brand-primary); width: 20px; height: 20px; }

.note {
  padding: 11px 14px; border-radius: var(--radius-sm);
  background: var(--color-feedback-warning-tint);
  border: 1px solid var(--color-feedback-warning-fg);
  font-size: 14px; line-height: 21px; color: var(--color-text-primary);
}

@media (min-width: 900px) {
  /* Single column since the partner capture card was deferred: a two-column grid
     with one child left a dead 460px gutter. The copy keeps a readable measure
     instead of running the full 1200px width. */
  .partner__inner { display: flex; }
  .partner__copy { gap: 20px; max-width: 720px; }
  .partner__body { font-size: 19px; line-height: 30px; }
  .proof { gap: 12px; }
  .proof li { font-size: 17px; gap: 12px; }
  .proof svg { width: 22px; height: 22px; }
  .note { padding: 12px 16px; }
}

/* ---------------------------------------------------------------- trust */

.trust .h2 { margin-bottom: 14px; }
.trust__grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.tcard {
  padding: 18px; background: var(--color-bg-surface);
  border: 1px solid var(--color-border-hairline); border-radius: var(--radius-md);
  display: flex; gap: 12px;
}
.tcard__icon { color: var(--color-action-primary-bg); width: 24px; height: 24px; }
.tcard__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tcard__title { font-size: 16px; line-height: 22px; font-weight: 700; }
.tcard__body { font-size: 14px; line-height: 21px; color: var(--color-text-body); }
.liability {
  margin-top: 14px; padding: 14px 16px; border-radius: 12px;
  background: var(--color-bg-surface-2); font-size: 14px; line-height: 21px; color: var(--color-text-body);
}

@media (min-width: 600px) { .trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 900px) {
  .trust .h2 { margin-bottom: 32px; }
  .tcard { flex-direction: column; padding: 24px; border-radius: 16px; }
  .tcard__icon { width: 30px; height: 30px; }
  .tcard__title { font-size: 19px; line-height: 26px; }
  .tcard__body { font-size: 15px; line-height: 23px; }
  .liability { margin-top: 32px; padding: 16px 20px; font-size: 15px; line-height: 23px; }
}
@media (min-width: 1200px) { .trust__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }

/* ---------------------------------------------------------------- founder */

.founder { padding-block: 32px; }
.founder__inner { display: flex; flex-direction: column; gap: 14px; }
/* Placeholder avatar. Solid, not dashed: the dashed ring meant "empty slot", and this
   is now a deliberate treatment rather than a gap. A real photograph replaces the emoji
   and nothing else about this block changes. */
.founder__photo {
  width: 84px; height: 84px; flex-shrink: 0; border-radius: var(--radius-full);
  background: var(--color-bg-surface); border: 1px solid var(--color-border-hairline);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* The brand faces carry no emoji glyphs, so name the colour-emoji fonts explicitly
   rather than letting it fall through to a monochrome outline on some systems. */
.founder__emoji {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 40px; line-height: 1;
}
.founder__text { display: flex; flex-direction: column; gap: 12px; }
.founder__statement { font-size: 18px; line-height: 28px; font-weight: 600; color: var(--color-text-primary); }
.founder__sig { font-size: 14px; line-height: 21px; color: var(--color-text-body); }

@media (min-width: 900px) {
  .founder { padding-block: 64px; }
  .founder__inner { flex-direction: row; align-items: center; gap: 32px; }
  .founder__photo { width: 116px; height: 116px; }
  .founder__emoji { font-size: 54px; }
  .founder__statement { font-size: 22px; line-height: 34px; max-width: 900px; }
  .founder__sig { font-size: 15px; }
}

/* ---------------------------------------------------------------- FAQ */

.faq .h2 { margin-bottom: 14px; }
.faq__list { display: flex; flex-direction: column; gap: 10px; max-width: 980px; }
.faq__item { background: var(--color-bg-surface); border: 1px solid var(--color-border-hairline); border-radius: 13px; }
.faq__item:has([aria-expanded="true"]) { border-color: var(--color-brand-primary); }
.faq__q { margin: 0; }
.faq__q button {
  width: 100%; min-height: var(--size-touch-min);
  display: flex; align-items: center; gap: 12px; text-align: left;
  padding: 16px 18px; border: none; background: none; border-radius: 13px;
  font-size: 16px; font-weight: 600; color: var(--color-text-primary);
}
.faq__q button span { flex-grow: 1; }
.faq__q button[aria-expanded="true"] { font-weight: 700; }
.faq__chev { color: var(--color-text-secondary); transition: transform var(--dur) ease; }
.faq__q button[aria-expanded="true"] .faq__chev { color: var(--color-action-primary-bg); transform: rotate(180deg); }
.faq__panel { padding: 0 18px 16px; font-size: 15px; line-height: 24px; color: var(--color-text-body); }
.faq__panel:empty { padding: 0; }
/* The seven unanswered questions open onto the pending-answer note instead of nothing.
   No answer is written and no new [FOUNDER] slot is created — the one slot stays on the
   note below the list, which these panels restate. */
.faq__pending { color: var(--color-text-body); }
.faq__note { margin-top: 14px; max-width: 980px; }

@media (min-width: 900px) {
  .faq .h2 { margin-bottom: 28px; }
  .faq__q button { padding: 20px 24px; font-size: 19px; }
  .faq__panel { padding: 0 24px 20px; font-size: 16px; line-height: 25px; }
  .faq__note { margin-top: 28px; }
}
/* the board draws this band at 64px, the same as the founder band — not the 72px section */

/* ---------------------------------------------------------------- footer */

.foot { background: var(--color-bg-inverse); color: var(--color-text-inverse); --focus: var(--color-brand-on-dark); padding-block: 32px 24px; }
.foot__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 20px; }
.foot__brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 12px; }
.foot__lockup { display: flex; align-items: center; gap: 9px; }
.foot__tagline { font-size: 15px; line-height: 23px; color: var(--color-text-inverse-muted); max-width: 260px; }
/* #646C65 on ink measures 3,45:1 and fails; this line carries two [FOUNDER] slots */
.foot__legal { font-size: 13px; line-height: 20px; color: var(--color-text-inverse-muted); }
.foot__col { display: flex; flex-direction: column; gap: 8px; }
.foot__h { font-size: 14px; font-weight: 700; color: var(--color-text-inverse); }
.foot__col a {
  display: flex; align-items: center; min-height: var(--size-touch-min);
  font-size: 16px; color: var(--color-text-inverse-muted); text-decoration: none;
}
.foot__col a:hover { color: var(--color-text-inverse); }
.foot__col--lang { display: none; }
.foot__rule { display: none; height: 1px; background: var(--color-border-dark-2); margin-block: 20px; }
.foot__bottom { margin-top: 20px; display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--color-text-inverse-muted); }
.foot__bottom span:last-child { display: none; }

@media (min-width: 600px) { .foot__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .foot { padding-block: 56px 32px; }
  .foot__cols { display: flex; gap: 40px; }
  .foot__brand { flex-grow: 1; gap: 14px; }
  .foot__col--lang { display: flex; }
  .foot__rule { display: block; margin-block: 36px 0; }
  .foot__bottom { margin-top: 20px; }
  .foot__bottom span:last-child { display: inline; }
}
@media (min-width: 1200px) { .foot__cols { gap: 72px; } }
@keyframes cap-spin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- legal holding page */
.legal { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }

/* ---- Brand lockups (docs/toni-logo) -------------------------------------
   Supplied artwork, placed not redrawn: no gradient, shadow, outline or rotation,
   and never re-coloured — the footer uses the approved `-reverse` pair, whose own
   #17140F backing rect matches the footer band exactly. The reverse artwork must
   never sit on the #222724 cards, where that rect would show as a dark rectangle.
   The wordmark is artwork, so the brand no longer depends on Bricolage loading. */
.hdr__brand .brandmark { height: 30px; width: auto; display: block; }
.hdr__brand .brandword { height: 30px; width: auto; display: block; } /* 82.5px wide — the 80px minimum */
.foot__lockup .brandmark { height: 28px; width: auto; display: block; }
.foot__lockup .brandword { height: 30px; width: auto; display: block; } /* 82.5px wide — the 80px minimum */
/* Clear space = the height of the lowercase `o` (measured: 71,8% of the wordmark's
   height, so 21px at the 80px lockup width used here). Applied to the nearest
   NON-TONI element; the mark and wordmark are one lockup and keep the board's 8px. */
.hdr__brand { padding-right: 21px; }

/* The partner section's intermediary statement. It used to sit in the capture
   card's footer; the capture is gone but the statement is not decoration — it
   is how the page avoids describing partners as employees. */
.partner__intermediary { font-size: 15px; line-height: 23px; color: var(--color-text-secondary); }

/* ---------------------------------------------------------------- legal documents
   /ligjore (index), /privatesia, /kushtet, /cookies.

   The page CHROME (header, headings, the "last updated" label, the cross-links,
   the footer) resolves through the i18n catalogue like every other page. The
   DOCUMENT BODIES do not: each document ships as two sibling blocks, one per
   language, and the existing language toggle shows one and hides the other
   (app.js, section 3). A legal text is hundreds of sentences of running prose
   with inline emphasis, links, lists and a slot in the middle of a paragraph —
   one catalogue key per text node would be unreadable and unmaintainable, and a
   proofreader needs to read the document, not 300 CSV rows. Albanian is the
   block that ships visible, because Albanian is the version that governs and
   because a visitor without JavaScript must land on it.

   No new colours: every value below is a token already measured in tokens.json. */

[data-lang-block][hidden] { display: none; }

.doc-page { display: flex; flex-direction: column; gap: 28px; }

.doc__head { display: flex; flex-direction: column; gap: 10px; max-width: 760px; }
.doc__updated { font-size: 14px; line-height: 21px; color: var(--color-text-body); }

.doc { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.doc > h2 {
  font-family: var(--font-display); font-weight: 700;
  font-size: 22px; line-height: 29px; color: var(--color-text-primary);
  margin-top: 16px;
}
.doc > h2:first-child { margin-top: 0; }
.doc > h3 { font-size: 17px; line-height: 25px; font-weight: 700; color: var(--color-text-primary); margin-top: 6px; }
.doc p, .doc li { font-size: 16px; line-height: 26px; color: var(--color-text-body); }
.doc strong { color: var(--color-text-primary); font-weight: 700; }
.doc ul { display: flex; flex-direction: column; gap: 10px; padding-left: 22px; list-style: disc; }
.doc a { overflow-wrap: anywhere; }
.doc code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.9em; padding: 1px 5px; border-radius: 4px;
  background: var(--color-bg-surface-2); border: 1px solid var(--color-border-hairline);
  color: var(--color-text-primary);
}

/* The opening summary and the governing-language note. Both are page furniture
   around the text, not decoration that carries meaning on its own. */
.doc__lead { font-size: 17px; line-height: 28px; color: var(--color-text-primary); }
.doc__callout {
  padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--color-brand-tint-50); border: 1px solid var(--color-brand-tint-100);
}
.doc__callout p { color: var(--color-text-body); }

/* A [FOUNDER: …] slot inside running prose. It must stay visibly a slot. */
.slot {
  font-weight: 700; color: var(--color-text-primary);
  background: var(--color-feedback-warning-tint);
  border: 1px solid var(--color-feedback-warning-fg);
  border-radius: 4px; padding: 0 5px;
}

/* "What is stored, exactly" — a description list, not a table: five columns of
   tabular data cannot be read at 360px, and a horizontally scrolling table is a
   worse answer than a stacked list. */
.doc__dl {
  border: 1px solid var(--color-border-hairline); border-radius: var(--radius-md);
  background: var(--color-bg-surface); overflow: hidden;
}
.doc__dl > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-top: 1px solid var(--color-border-hairline); }
.doc__dl > div:first-child { border-top: 0; }
.doc__dl dt { font-size: 13px; line-height: 20px; font-weight: 700; color: var(--color-text-primary); }
.doc__dl dd { margin: 0; font-size: 16px; line-height: 25px; color: var(--color-text-body); }

/* The rights table is genuinely two narrow columns and survives 360px. */
.doc__table { width: 100%; border-collapse: collapse; background: var(--color-bg-surface); border: 1px solid var(--color-border-hairline); border-radius: var(--radius-md); }
.doc__table th, .doc__table td { text-align: left; vertical-align: top; padding: 10px 14px; border-top: 1px solid var(--color-border-hairline); font-size: 16px; line-height: 25px; color: var(--color-text-body); }
.doc__table thead th { border-top: 0; background: var(--color-bg-surface-2); color: var(--color-text-primary); font-weight: 700; font-size: 14px; line-height: 21px; }
.doc__table tbody th { font-weight: 700; color: var(--color-text-primary); white-space: nowrap; }

/* The cross-links at the foot of every legal page, and the index's own list. */
.doc__more { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; max-width: 760px; padding-top: 8px; border-top: 1px solid var(--color-border-hairline); }
.doc__more-h { font-size: 15px; line-height: 23px; font-weight: 700; color: var(--color-text-primary); }
.doc__more a { min-height: var(--size-touch-min); display: inline-flex; align-items: center; }
.doc__more .btn { margin-top: 4px; }

.doc__index { display: flex; flex-direction: column; gap: 12px; max-width: 760px; }
.doc__card {
  display: flex; flex-direction: column; gap: 4px;
  padding: 16px 18px; border-radius: var(--radius-md);
  background: var(--color-bg-surface); border: 1px solid var(--color-border-hairline);
  text-decoration: none; color: var(--color-text-primary);
}
.doc__card:hover { border-color: var(--color-brand-primary); color: var(--color-text-primary); }
.doc__card-h { font-size: 18px; line-height: 26px; font-weight: 700; color: var(--color-text-link); }
.doc__card-d { font-size: 15px; line-height: 23px; color: var(--color-text-body); }

@media (min-width: 900px) {
  .doc-page { gap: 36px; }
  .doc { gap: 18px; }
  .doc > h2 { font-size: 26px; line-height: 33px; margin-top: 22px; }
  .doc p, .doc li { font-size: 17px; line-height: 28px; }
  .doc__lead { font-size: 19px; line-height: 30px; }
  .doc__dl > div { flex-direction: row; gap: 18px; }
  .doc__dl dt { flex: 0 0 210px; }
  .doc__more { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 20px; }
  .doc__more .btn { margin-top: 0; margin-left: auto; }
}