/* Tagless: fonts, colour tokens and the label itself. Shared by the landing page and the app preview. */

@font-face {
  font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(assets/fonts/inter-cyrillic-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter Variable'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(assets/fonts/inter-latin-opsz-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Geist Mono'; font-style: normal; font-display: swap; font-weight: 100 900;
  src: url(assets/fonts/GeistMono-Variable.woff2) format('woff2-variations');
}

:root {
  /* SF on Apple devices, Inter everywhere else. */
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter Variable", "Helvetica Neue", Arial, sans-serif;
  --mono: "SF Mono", "Geist Mono", ui-monospace, Consolas, monospace;

  /* Dark indigo denim, darkest first. */
  --ink-950: #060B18;
  --ink-900: #0A1224;
  --ink-800: #0F1A33;
  --ink-700: #162548;
  --ink-600: #213562;

  --thread: #E0A32E;      /* gold topstitch: the only accent */
  --thread-hi: #F6CB6A;

  --label: #FDFCF9;       /* the woven label */
  --label-ink: #15171C;
  --label-mute: #5F6168;

  --text: #F4F6FB;
  --text-2: #AEB9D6;
  --text-3: #7C89AB;
  --line: rgba(255, 255, 255, .1);

  --label-w: 320px;
  --stub-h: 30px;
}

/* ---------- the hanging label ---------- */

.hang { position: relative; width: var(--label-w); max-width: 100%; }

/* The strip that stays sewn into the seam after the cut. */
.hang__stub {
  position: relative; z-index: 3; height: var(--stub-h);
  background: var(--label); border-radius: 3px 3px 0 0;
}

.hang__body {
  position: relative; z-index: 2; transform-origin: 50% 0; will-change: transform;
  filter: drop-shadow(0 26px 34px rgba(2, 6, 16, .6)) drop-shadow(0 3px 5px rgba(2, 6, 16, .35));
}

/* The gap the scissors leave behind them. */
.hang__slit {
  position: absolute; z-index: 4; left: 0; top: calc(var(--stub-h) - 1px);
  width: 0; height: 3px; background: var(--ink-950);
}
.hang.is-hanging .hang__slit, .hang.is-cut .hang__slit { display: none; }

.hang__shears { position: absolute; z-index: 6; left: 0; top: var(--stub-h); width: 0; height: 0; opacity: 0; pointer-events: none; }
.hang__shears svg { position: absolute; left: -56px; top: -30px; overflow: visible; }
.hang__shears .blade { transform-origin: 0 0; }
.hang.is-cutting .blade--a { animation: tl-snip-a .2s ease-in-out infinite alternate; }
.hang.is-cutting .blade--b { animation: tl-snip-b .2s ease-in-out infinite alternate; }
.hang.is-hanging .blade--a { transform: rotate(-9deg); }
.hang.is-hanging .blade--b { transform: rotate(9deg); }
@keyframes tl-snip-a { from { transform: rotate(-16deg); } to { transform: rotate(-2deg); } }
@keyframes tl-snip-b { from { transform: rotate(16deg); } to { transform: rotate(2deg); } }

.tl {
  margin: 0; padding: 32px 22px 22px;
  background-color: var(--label); color: var(--label-ink);
  background-image:
    linear-gradient(100deg, transparent 28%, rgba(0, 0, 0, .045) 50%, transparent 72%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .024) 0 1px, transparent 1px 3px);
  border-radius: 0 0 4px 4px;
  font-family: var(--sans); text-align: center; text-transform: uppercase;
  position: relative;
  /* Woven selvage down both sides, and the shade the seam throws on the top. */
  box-shadow:
    inset 6px 0 0 -1px rgba(21, 23, 28, .05), inset -6px 0 0 -1px rgba(21, 23, 28, .05),
    inset 0 18px 18px -16px rgba(21, 23, 28, .35), inset 0 -1px 0 rgba(21, 23, 28, .12);
  padding-bottom: 34px;
}
/* The folded hem at the bottom, held by one row of tone-on-tone stitches. */
.tl::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; border-radius: 0 0 4px 4px;
  background:
    repeating-linear-gradient(90deg, rgba(21, 23, 28, .3) 0 5px, transparent 5px 9px) 8px 5px / calc(100% - 16px) 1.5px no-repeat,
    linear-gradient(rgba(21, 23, 28, .1), rgba(21, 23, 28, .03));
  box-shadow: 0 -1px 0 rgba(21, 23, 28, .1);
}
.hang.is-printing .tl { animation: tl-print .95s steps(19) both; }
@keyframes tl-print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }

.tl :where(p, dl, dd, ul) { margin: 0; padding: 0; list-style: none; }

.tl__brand { font-size: 9px; font-weight: 800; letter-spacing: .34em; margin-right: -.34em; }
.tl__file {
  margin-top: 6px; font: 500 10.5px/1.3 var(--mono); letter-spacing: .01em;
  text-transform: none; color: var(--label-mute); overflow-wrap: anywhere;
}
.tl__big {
  margin-top: 14px; font-size: 88px; line-height: .86; font-weight: 800; letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.tl__unit { margin-top: 10px; font-size: 9px; font-weight: 700; letter-spacing: .2em; color: var(--label-mute); }

.tl__rows, .tl__also, .tl__foot { margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(21, 23, 28, .32); }
.tl__rows { display: grid; gap: 11px; }
.tl__row dt { font-size: 8.5px; font-weight: 700; letter-spacing: .2em; color: var(--label-mute); }
.tl__row dd {
  position: relative; display: table; margin: 3px auto 0;
  font-size: 13px; line-height: 1.25; font-weight: 700; letter-spacing: .03em;
  font-variant-numeric: tabular-nums; overflow-wrap: anywhere; text-wrap: balance;
  /* The strike that crosses a line out as it is cut. Works on wrapped lines too. */
  text-decoration: line-through 1.6px transparent;
  transition: color .28s ease-out, text-decoration-color .28s ease-out;
}
.tl__row dd.is-sub { margin-top: 1px; font-size: 10.5px; font-weight: 600; color: #4B4E55; }
.tl__row.is-cut dd { color: #6A6C72; text-decoration-color: var(--label-ink); }

.tl__also { display: grid; gap: 3px; font-size: 9.5px; font-weight: 600; letter-spacing: .08em; color: #4B4E55; }
.tl__foot { font-size: 9px; font-weight: 800; letter-spacing: .18em; }
.tl__note {
  margin-top: 14px; font-size: 11.5px; line-height: 1.4; font-weight: 500;
  letter-spacing: .01em; text-transform: none; color: #4B4E55; text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .hang.is-printing .tl { animation: none; }
  .hang.is-cutting .blade { animation: none; }
  .tl__row dd { transition: none; }
}