/* ══ SilentShip — the app skin (NIGHTLANE) ══════════════════════════════════
   /web and /app only. public/style.css is the shared core and stays that way:
   this file is typography and shape, and every colour still comes from
   brand.json through the {{BRAND_STYLE}} block that loads after it.

   Same three faces as the shop window, same self-hosted files, so a customer
   crossing from the landing into their account does not change brand halfway
   through. font-src is 'self': nothing here reaches a CDN. */

@font-face{font-family:'Unbounded';font-style:normal;font-weight:800;font-display:swap;
  src:url(/fonts/Unbounded-800.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/Manrope-400.woff2) format('woff2')}
@font-face{font-family:'Manrope';font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/Manrope-700.woff2) format('woff2')}
@font-face{font-family:'Martian Mono';font-style:normal;font-weight:500;font-display:swap;
  src:url(/fonts/MartianMono-500.woff2) format('woff2')}

body{font-family:'Manrope',-apple-system,"Segoe UI",Roboto,system-ui,sans-serif}

/* Every figure a customer is about to spend money on is set in the data face
   and tabular, so a column of prices lines up on the decimal. */
.mono,.sl-msg,.sl-pct{font-family:'Martian Mono',ui-monospace,Menlo,Consolas,monospace;
  font-variant-numeric:tabular-nums;letter-spacing:-.04em}

/* Display type for the things that name a screen or a total. */
h1,h2,h3,.scr-title{font-family:'Unbounded',-apple-system,"Segoe UI",Roboto,system-ui,sans-serif;
  font-weight:800;letter-spacing:-.035em}

/* NIGHTLANE is slabs, not pills: the shop window has a 2 px radius and the app
   used 10-12 px throughout, which reads as two different products. */
.btn,input,select,textarea,.seg button,#langbtn{border-radius:2px}

/* The primary action is a flat slab that PRESSES rather than lifting and
   glowing — a printed sticker, not a light source. */
.btn{font-weight:700;letter-spacing:.09em;text-transform:uppercase;font-size:13.5px;
  transition:transform .12s,box-shadow .12s}
.btn:active{transform:translate(2px,2px)}

/* The tape motif, once, under the header: it is what tells a customer inside
   Telegram that this is the same shop as the page they came from. */
#hdr{position:relative}
#hdr::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:3px;
  background-image:repeating-linear-gradient(135deg,var(--accent) 0 6px,transparent 6px 15px);
  opacity:.55}

@media (prefers-reduced-motion:reduce){
  .btn,.btn:active{transition:none;transform:none}
}