/* ============================================================================
   WASCRIPTS DESIGN SYSTEM
   ----------------------------------------------------------------------------
   The product is annotated text: a transcript that carries tone, emotion and
   pauses inside [brackets]. So the system is built on typography and rules,
   not on cards and shadows. Three deliberate rejections, because they are what
   make an interface look generic:

     1. No drop shadows and no floating cards. Structure comes from hairline
        rules and whitespace, the way a printed page does.
     2. No system font stack. A high-contrast serif carries the voice, a
        neutral grotesque carries the interface, a mono carries the machine
        output. The three roles never blur.
     3. No blue/teal/violet gradient. One warm paper, one warm ink, one
        saturated vermilion used sparingly enough that it always means
        something when it appears.

   This file is the reference for the upcoming app redesign. Change tokens
   here, not values at call sites.
   ========================================================================= */

/* ---------------------------------------------------------------- tokens */

:root {
  /* Surface. Warm off-white rather than pure white: pure white next to a
     phone's OLED black is what makes an interface feel unconsidered. */
  --paper:      #faf8f4;
  --paper-sunk: #f2eee6;

  /* Ink. Warm near-black, never #000. Three levels, no more. */
  --ink:   #17150f;
  --ink-2: #4d483d;
  --ink-3: #8b8477;

  --rule:      #e3ddd2;
  --rule-firm: #cdc5b6;

  /* The single accent. Vermilion: warm enough to belong to a product about
     emotion, saturated enough to survive being used only a few times a page. */
  --accent:      #d1481d;
  --accent-ink:  #a83714;
  --accent-wash: #f9e9e2;

  /* Type roles.
     Every face here was checked glyph by glyph against the Azerbaijani alphabet
     before being chosen: schwa (e/E), dotless i, I with dot, g breve and s cedilla
     must all exist in the font binary. A font that merely declares the latin-ext
     unicode-range is not enough. When the glyph is absent the browser silently
     borrows that one letter from another family, and a word like "mətn" ends up
     with a heavier "ə" than the letters beside it. Instrument Serif and Instrument
     Sans were dropped for exactly that reason: neither carries U+0259 or U+018F.
     Fallbacks lead with faces that ship with Azerbaijani coverage on their
     platform, so a Google Fonts outage degrades cleanly instead of reintroducing
     the same mismatch. */
  --display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans:    "Archivo", "Segoe UI", "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  --mono:    "DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Measure. Body text never exceeds this, whatever the container does. */
  --measure: 64ch;
  --shell:   1140px;

  /* Vertical rhythm */
  --gap-section: clamp(64px, 9vw, 124px);
}

/* Breakpoints. Three, and every rule in this file uses one of them, so the
   layout changes shape at the same three widths everywhere instead of
   drifting section by section.

     861px and up   desktop: the masthead is a row of links, listings run
                    number / title / prose across three columns
     560px to 860px medium: the masthead collapses to a sheet, listings keep
                    the number column but stack title over prose
     up to 560px    narrow: one column throughout, the number becomes a label
                    above the title

   940px is the single exception, and only for the hero, because the specimen
   beside it needs more room than a text column does. */

@media (prefers-color-scheme: dark) {
  :root {
    --paper:      #131109;
    --paper-sunk: #1a1710;
    --ink:        #f6f2e8;
    --ink-2:      #b6ae9e;
    --ink-3:      #7d7668;
    --rule:       #2c281e;
    --rule-firm:  #423c2e;
    --accent:     #ff6a3c;
    --accent-ink: #ff8a63;
    --accent-wash:#2a1710;
  }
}

/* ------------------------------------------------------------- foundation */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Bilingual painting. Both languages ship in the markup; data-lang on <html>
   decides which is drawn, so the right one is correct on first paint with no
   flash of the wrong text. */
html[data-lang="en"] [lang="az"],
html[data-lang="az"] [lang="en"] { display: none !important; }

::selection { background: var(--accent); color: var(--paper); }

/* Keyboard focus is drawn in the accent rather than the browser default, which
   would be the one blue on an otherwise warm page. Pointer focus stays silent. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

/* ----------------------------------------------------------------- layout */

.shell {
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: clamp(20px, 5vw, 48px);
}

.measure { max-width: var(--measure); }

/* The masthead is sticky, so an in-page jump has to stop short of it or the
   heading it landed on ends up underneath the bar. */
section { padding-block: var(--gap-section); scroll-margin-top: 78px; }

/* Sections are separated by a rule, not by alternating background blocks.
   One sunk band is allowed per page, for the pricing table. */
section + section { border-top: 1px solid var(--rule); }
section.sunk { background: var(--paper-sunk); }

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

/* Azerbaijani builds long agglutinated words ("Transkripsiyalarınızı"), and a
   display size on a 360px screen leaves no room for one to sit unbroken. This
   only engages when there is no break opportunity left, so ordinary lines are
   untouched. */
h1, h2, h3 { margin: 0; font-weight: 400; overflow-wrap: break-word; }

/* Newsreader carries a larger x-height and a wider set width than the face this
   was first drawn against, so the display sizes come down a step and the negative
   tracking is relaxed. Tighter than this and the diacritics on ə, ğ and İ start
   colliding with the letters beside them. */
h1 {
  font-family: var(--display);
  font-size: clamp(40px, 6.6vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.016em;
  margin-bottom: 26px;
  font-optical-sizing: auto;
}

h2 {
  font-family: var(--display);
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.012em;
  margin-bottom: 20px;
  font-optical-sizing: auto;
}

h3 {
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin-bottom: 8px;
}

/* Italic display is the one flourish this system allows itself, and only for
   the word the sentence turns on. */
h1 em, h2 em { font-style: italic; color: var(--accent); }

p { margin: 0 0 18px; color: var(--ink-2); }
p:last-child { margin-bottom: 0; }

.lead {
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.55;
  color: var(--ink-2);
}

a { color: var(--accent-ink); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--accent); }

/* The editorial label. Mono, small, letterspaced, always paired with a rule.
   This replaces the pill-shaped "eyebrow" badge that every template ships. */
.label {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 26px;
}
.label > span { flex: 0 1 auto; }
.label::after {
  content: "";
  flex: 1 1 12px;
  min-width: 12px;
  height: 1px;
  background: var(--rule);
}

/* ---------------------------------------------------------------- masthead */

.masthead {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}

.masthead .bar {
  display: flex;
  align-items: center;
  gap: clamp(10px, 4vw, 44px);
  height: 66px;
}

.wordmark {
  font-family: var(--display);
  font-size: 25px;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  margin-inline-end: auto;
  line-height: 1;
  white-space: nowrap;
}
.wordmark span { color: var(--accent); }

.masthead nav { display: flex; gap: clamp(16px, 2.4vw, 30px); }
.masthead nav a {
  font-size: 14.5px;
  color: var(--ink-2);
  text-decoration: none;
}
.masthead nav a:hover { color: var(--accent); }

.lang {
  flex: 0 0 auto;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  background: none;
  border: 1px solid var(--rule-firm);
  color: var(--ink-2);
  padding: 7px 11px;
  cursor: pointer;
  border-radius: 2px;
}
.lang:hover { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------------ menu toggle */

/* Three rules that fold into a cross. The two outer rules travel to the centre
   first and only then rotate; the middle one leaves while they are travelling.
   Staging it in that order is what makes it read as one movement instead of
   two things happening at once, and it is done with transition-delay on `top`
   and `transform` separately rather than with the individual `translate` and
   `rotate` properties, so a browser without those still animates. */
.burger {
  display: none;
  position: relative;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin-inline-end: -12px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  cursor: pointer;
  border-radius: 2px;
  -webkit-tap-highlight-color: transparent;
}
.burger:hover { color: var(--accent); }

.burger span {
  position: absolute;
  left: 12px;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition:
    top 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s,
    opacity 0.12s linear 0.2s;
}
.burger span:nth-child(1) { top: 15px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 27px; }

.burger[aria-expanded="true"] span {
  transition:
    top 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s,
    transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
    opacity 0.12s linear 0s;
}
.burger[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* ------------------------------------------------------------- menu sheet */

@media (max-width: 860px) {
  .burger { display: block; }

  /* The menu is a sheet that drops out of the masthead rule: full bleed, paper
     backed, ruled rows. Not a floating card and not a dark scrim over the
     page, either of which would be the template answer. The header simply
     grows downwards and the page stays exactly where it was.
     `.masthead` is sticky, which is a positioned value, so it is the
     containing block this is measured against. */
  .masthead nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding-inline: clamp(20px, 5vw, 48px);
    background: var(--paper);
    border-bottom: 1px solid var(--rule-firm);
    max-height: 0;
    opacity: 0;
    visibility: hidden;
    overflow: hidden;
    transition:
      max-height 0.34s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.2s ease,
      visibility 0s linear 0.34s;
  }

  .masthead[data-nav="open"] nav {
    max-height: min(70vh, 460px);
    opacity: 1;
    visibility: visible;
    overflow-y: auto;
    transition:
      max-height 0.34s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.18s ease 0.04s,
      visibility 0s linear 0s;
  }

  .masthead nav a {
    font-size: 16.5px;
    color: var(--ink);
    padding-block: 16px;
    border-bottom: 1px solid var(--rule);
  }
  .masthead nav a:last-child { border-bottom: 0; }
}

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

.hero { padding-block: clamp(60px, 9vw, 104px) var(--gap-section); }

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(34px, 5vw, 68px);
  align-items: start;
}
@media (max-width: 940px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- the transcript specimen */

/* The hero object. This is the product, so it is set as a real document:
   ruled edges, mono meta, annotations in the accent. */
.specimen {
  border: 1px solid var(--rule-firm);
  background: var(--paper);
  border-radius: 3px;
}

.specimen .meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 20px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.specimen .body {
  padding: 26px 22px 28px;
  font-size: 16.5px;
  line-height: 1.95;
  color: var(--ink);
}

.specimen .body p + p { margin-top: 14px; }

@media (max-width: 560px) {
  .specimen .meta { padding: 12px 16px; letter-spacing: 0.07em; }
  .specimen .body { padding: 22px 17px 24px; font-size: 16px; line-height: 1.85; }
}

/* The annotation. The whole product in one rule: bracketed, mono, vermilion. */
.tone {
  font-family: var(--mono);
  font-size: 0.79em;
  color: var(--accent);
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.waveform {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 13px;
}
.waveform i {
  width: 2px;
  background: var(--accent);
  opacity: 0.75;
  display: block;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 500;
  padding: 13px 24px;
  border-radius: 2px;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover { background: var(--accent); color: #fff; }
.btn-ghost { border-color: var(--rule-firm); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* --------------------------------------------------------------- listings */

/* Feature and step listings are ruled rows, not floating cards. */
.rows { border-top: 1px solid var(--rule); margin-top: 44px; }

/* Every cell here is placed explicitly. Auto-placement cannot be trusted in
   this layout: both languages ship in the markup and one of the two <p> is
   display:none, which takes it out of the grid entirely. Under auto-placement
   the surviving paragraph then falls into whatever cell is free, which on a
   two-column track list is the 62px number column. That is what produced the
   single narrow ribbon of text on anything under desktop width. */
.row {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 4px clamp(16px, 3vw, 38px);
  padding-block: 26px;
  border-bottom: 1px solid var(--rule);
  align-items: start;
}
.row .idx {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--accent);
  padding-top: 3px;
  white-space: nowrap;
}
.row h3 { grid-column: 2; grid-row: 1; }
.row p  { grid-column: 2; font-size: 15.5px; margin: 0; }

/* Desktop: number, title and prose read across in one line. */
@media (min-width: 861px) {
  .row { grid-template-columns: 62px 0.9fr 1.5fr; align-items: baseline; }
  .row .idx { grid-column: 1; grid-row: 1; }
  .row h3   { grid-column: 2; grid-row: 1; margin-bottom: 0; }
  .row p    { grid-column: 3; grid-row: 1; }
}

/* Narrow: the number stops being a column and becomes a label above the
   title, which buys back the 78px it was costing the text. */
@media (max-width: 560px) {
  .row { grid-template-columns: 1fr; gap: 5px; padding-block: 22px; }
  .row .idx { grid-column: 1; grid-row: 1; padding-top: 0; margin-bottom: 2px; }
  .row h3   { grid-column: 1; grid-row: 2; }
  .row p    { grid-column: 1; }
}

/* ---------------------------------------------------------------- pricing */

.tiers { margin-top: 44px; border-top: 1px solid var(--rule-firm); }

/* Placed explicitly for the same reason the listing rows are: the quantity,
   the description and the amount must not be free to rearrange themselves.
   Below desktop the quantity and the amount hold one line together, the way a
   price list is read, and the description takes the full width underneath. */
.tier {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 20px;
  align-items: baseline;
  padding-block: 22px;
  border-bottom: 1px solid var(--rule);
}
.tier .qty    { grid-column: 1; grid-row: 1; }
.tier .amount { grid-column: 2; grid-row: 1; }
.tier .what   { grid-column: 1 / -1; grid-row: 2; }

@media (min-width: 721px) {
  .tier { grid-template-columns: 200px 1fr auto; gap: 10px 28px; align-items: center; }
  .tier .qty    { grid-column: 1; grid-row: 1; }
  .tier .what   { grid-column: 2; grid-row: 1; }
  .tier .amount { grid-column: 3; grid-row: 1; }
}

.tier .qty {
  font-family: var(--display);
  font-size: clamp(26px, 6vw, 30px);
  line-height: 1;
  letter-spacing: -0.02em;
}
.tier .qty small {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-top: 7px;
}
.tier .what { font-size: 15px; color: var(--ink-2); }

.tier .amount {
  font-family: var(--display);
  font-size: clamp(27px, 6vw, 32px);
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-align: right;
}
.tier .amount small {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  display: block;
  margin-top: 5px;
  text-transform: uppercase;
}

.tier[data-unavailable="true"] { opacity: 0.45; }

.fineprint {
  margin-top: 26px;
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.75;
  letter-spacing: 0.02em;
  color: var(--ink-3);
}

/* -------------------------------------------------------------------- faq */

.faq { border-top: 1px solid var(--rule); margin-top: 40px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding-block: 20px;
  font-size: 17px;
  font-weight: 500;
  display: flex;
  gap: 18px;
  align-items: baseline;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before {
  content: "+";
  font-family: var(--mono);
  color: var(--accent);
  font-size: 15px;
}
.faq details[open] summary::before { content: "-"; }
.faq details > div { padding: 0 0 22px 36px; }
.faq p { font-size: 15.5px; }

@media (max-width: 560px) {
  .faq summary { gap: 13px; font-size: 16px; padding-block: 17px; }
  .faq details > div { padding-left: 26px; }
}

/* ----------------------------------------------------------------- colophon */

.colophon {
  border-top: 1px solid var(--rule-firm);
  padding-block: 52px 44px;
  background: var(--paper-sunk);
}

.colophon-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 36px;
}
/* min-width:0 because a grid track sized in fr still refuses to go below its
   content's min-content width, and the contact address is one unbreakable
   26-character token. Without this it widens its own column until the footer
   is wider than the viewport and the whole page scrolls sideways. */
.colophon-grid > * { min-width: 0; }

@media (max-width: 860px) {
  .colophon-grid { grid-template-columns: 1fr 1fr; gap: 30px 28px; }
  .colophon-grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .colophon-grid { grid-template-columns: 1fr; gap: 26px; }
  .colophon-grid > :first-child { grid-column: auto; }
}

.colophon .wordmark { font-size: 22px; display: inline-block; margin: 0 0 12px; }
.colophon p { font-size: 14px; margin: 0; max-width: 38ch; }

.colophon h4 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
  margin: 0 0 14px;
}
.colophon nav { display: flex; flex-direction: column; gap: 10px; align-items: start; }
.colophon nav a {
  font-size: 14.5px;
  color: var(--ink-2);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.colophon nav a:hover { color: var(--accent); }

.imprint {
  margin-top: 42px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  line-height: 1.9;
  color: var(--ink-3);
}

/* ------------------------------------------------------------ legal pages */

.doc { padding-block: clamp(48px, 6vw, 76px) var(--gap-section); }
.doc header { border-bottom: 1px solid var(--rule-firm); padding-bottom: 26px; margin-bottom: 40px; }
.doc h1 { font-size: clamp(36px, 5.4vw, 58px); margin-bottom: 14px; }
.doc .issued {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.doc article { max-width: 70ch; }
.doc h2 {
  font-family: var(--sans);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 46px 0 12px;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}
.doc h2:first-of-type { margin-top: 0; border-top: none; padding-top: 0; }
.doc p, .doc li { font-size: 16px; color: var(--ink-2); }
.doc ul { padding-inline-start: 20px; margin: 0 0 18px; }
.doc li { margin-bottom: 9px; }
.doc li::marker { color: var(--accent); }
.doc strong { color: var(--ink); font-weight: 600; }

/* Used where the reader must not miss something: who they are actually
   buying from, how to get a refund, how to reach a human. */
.note {
  border-left: 2px solid var(--accent);
  background: var(--accent-wash);
  padding: 18px 22px;
  margin: 26px 0;
  border-radius: 0 3px 3px 0;
}
.note p { color: var(--ink); font-size: 15.5px; }

/* Legal pages are long and unbroken, so on a phone they get a slightly tighter
   heading rhythm rather than the desktop one, which would otherwise turn into
   a lot of scrolling past whitespace. */
@media (max-width: 560px) {
  .doc h2 { margin-top: 34px; padding-top: 18px; font-size: 18px; }
  .doc ul { padding-inline-start: 18px; }
  .note { padding: 16px 18px; margin: 22px 0; }
}

/* ------------------------------------------------------------------ misc */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}