/* ---------------------------------------------------------------------------
   Vyayam marketing site.

   Deliberately standalone: this is a different product surface (marketing, not
   application), so it shares the app's design language by *copying* the tokens
   rather than importing anything from web/. Nothing here should ever need the
   React app to build or deploy.

   Palette and type are the same system the owner console uses (see the app's
   web/src/index.css and DECISIONS.md): Paper #F3F1EC, Ink #1A1917, Ember
   #FF5B2E, Card #FFFDF8, Line #E2DED4.

   On the Ember rule: inside the app, Ember is reserved for money at risk. That
   rule is about an operational tool where an orange pixel has to mean one
   specific thing. It doesn't transfer to a marketing page, where Ember is
   simply the brand accent. Flagged here so nobody reads this file and thinks
   the app's rule has been broken.
   --------------------------------------------------------------------------- */

/* Same faces the app self-hosts. latin-ext is not optional: the rupee sign
   U+20B9 lives in its range (U+20AD-20C0), not in latin, and this page is full
   of prices. */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/archivo-800-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/fonts/archivo-800-latin.woff2') format('woff2');
  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: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/public-sans-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/public-sans-400-latin.woff2') format('woff2');
  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: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/public-sans-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/public-sans-600-latin.woff2') format('woff2');
  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: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
    U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
    U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/ibm-plex-mono-500-latin.woff2') format('woff2');
  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;
}

:root {
  --paper: #f3f1ec;
  --card: #fffdf8;
  --ink: #1a1917;
  --ink-60: #6f6b63;
  --ink-soft: #4a4740;
  --line: #e2ded4;
  --rule: #ede9e0;
  --ember: #ff5b2e;
  --ember-ink: #c2310d;
  --ember-wash: #ffede7;
  --verified: #00713f;
  --verified-wash: #e4efe9;

  --font-ui: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial,
    sans-serif;
  --font-display: 'Archivo', var(--font-ui);
  --font-data: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
}

.num {
  font-family: var(--font-data);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}

.wrap-narrow {
  max-width: 620px;
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 20px;
  top: 12px;
  z-index: 100;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  border-radius: 8px;
}

:focus-visible {
  outline: 2px solid var(--ember-ink);
  outline-offset: 2px;
}

/* --- Header ------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(243, 241, 236, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}

.brand-mark {
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--ember);
  color: #fffdf8;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 17px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.brand-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px;
}

.site-nav a {
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink-60);
  font-weight: 600;
  font-size: 14px;
}

.site-nav a:hover {
  color: var(--ink);
  background: var(--card);
}

.site-nav .nav-cta {
  background: var(--ink);
  color: var(--paper);
}

.site-nav .nav-cta:hover {
  background: #000;
  color: var(--paper);
}

/* The nav links are secondary to the page content on a phone - the page is one
   scroll and every section is reachable by scrolling. Keep the brand and the
   one real CTA. */
@media (max-width: 560px) {
  .site-nav a:not(.nav-cta) {
    display: none;
  }
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.btn-primary:hover {
  background: #000;
}

.btn-secondary {
  background: var(--card);
  color: var(--ink);
  border-color: var(--line);
}
.btn-secondary:hover {
  border-color: var(--ink-60);
}

.btn-block {
  width: 100%;
}

.btn:disabled,
.btn[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
  flex-direction: column;
  gap: 2px;
  min-height: 60px;
}

.btn:disabled:hover,
.btn[aria-disabled='true']:hover {
  border-color: var(--line);
}

.soon {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ember-ink);
}

/* --- Shared section furniture ------------------------------------------- */

.eyebrow {
  font-weight: 600;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin: 0 0 10px;
}

.section {
  padding: 72px 0;
  border-top: 1px solid var(--line);
}

.section-alt {
  background: var(--card);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 4.2vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 12px;
}

.section-lede {
  max-width: 62ch;
  color: var(--ink-60);
  margin: 0 0 32px;
}

/* --- Hero --------------------------------------------------------------- */

.hero {
  padding: 72px 0 64px;
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 6.4vw, 52px);
  line-height: 1.06;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
}

.hero-sub {
  max-width: 64ch;
  font-size: 17px;
  color: var(--ink-60);
  margin: 0 0 28px;
}

.hero-sub strong {
  color: var(--ink);
  font-weight: 600;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 48px;
}

.hero-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.split-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 22px;
}

.split-card h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 24px;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.split-card p {
  margin: 0;
  color: var(--ink-60);
  font-size: 15px;
}

/* The two products are told apart by wash + label, not by two different brand
   colours - there is only one Vyayam accent, and inventing a second hue here
   would put a colour on the marketing site that exists nowhere in the product. */
.split-tag {
  display: inline-block;
  font-weight: 600;
  font-size: 10px;
  line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin: 0 0 12px;
}

.tag-os {
  background: var(--ember-wash);
  color: var(--ember-ink);
}

.tag-consumer {
  background: var(--verified-wash);
  color: var(--verified);
}

/* --- Features ----------------------------------------------------------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.feature-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

.feature h3 {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 17px;
  margin: 0 0 6px;
}

.feature p {
  margin: 0;
  color: var(--ink-60);
  font-size: 15px;
}

.feature {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
}

.section-alt .feature {
  background: var(--paper);
}

/* --- Pricing ------------------------------------------------------------ */

.price-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}

.price-card,
.download-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px;
}

.section-alt .price-card,
.section-alt .download-card {
  background: var(--paper);
}

.price-card-featured {
  border-color: var(--ember);
  box-shadow: 0 0 0 3px var(--ember-wash);
}

.price-was {
  margin: 0 0 2px;
  color: var(--ink-60);
  font-size: 14px;
}

.price-now {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 42px;
  line-height: 1.1;
  letter-spacing: -0.03em;
  margin: 0 0 10px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}

.price-now .num {
  font-family: var(--font-display);
  font-weight: 800;
}

.price-unit {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  color: var(--ink-60);
  letter-spacing: 0;
}

.price-note {
  margin: 0 0 18px;
  color: var(--ink-60);
  font-size: 14px;
}

.price-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}

.price-list li {
  position: relative;
  padding: 7px 0 7px 24px;
  border-bottom: 1px solid var(--rule);
  font-size: 15px;
}

.price-list li:last-child {
  border-bottom: none;
}

.price-list li::before {
  content: '';
  position: absolute;
  left: 4px;
  top: 15px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--verified);
}

/* --- Download ----------------------------------------------------------- */

.download-card h3 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
}

.download-desc {
  margin: 0 0 20px;
  color: var(--ink-60);
  font-size: 15px;
}

.download-actions {
  display: grid;
  gap: 10px;
}

/* --- Contact ------------------------------------------------------------ */

.contact-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}

.field label {
  font-weight: 600;
  font-size: 11px;
  line-height: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-60);
}

.field input,
.field textarea {
  font-family: var(--font-ui);
  font-size: 15px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  min-height: 46px;
  width: 100%;
  resize: vertical;
}

.field input:focus,
.field textarea:focus {
  border-color: var(--ink-60);
}

.hint {
  font-size: 13px;
  color: var(--ink-60);
}

.form-error {
  margin: 0 0 14px;
  color: var(--ember-ink);
  font-size: 14px;
  font-weight: 600;
}

.form-success {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--verified-wash);
  color: var(--verified);
  font-size: 14px;
  font-weight: 600;
}

/* --- Footer ------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  background: var(--card);
  padding: 40px 0 28px;
}

.footer-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.footer-name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 18px;
  margin: 0;
}

.footer-tag {
  margin: 2px 0 0;
  color: var(--ink-60);
  font-size: 14px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.footer-nav a {
  color: var(--ink-60);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.footer-nav a:hover {
  color: var(--ink);
}

.footer-legal {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.footer-legal p {
  margin: 0;
  color: var(--ink-60);
  font-size: 13px;
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 860px) {
  .feature-grid,
  .feature-grid-3 {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .section {
    padding: 52px 0;
  }
  .hero {
    padding: 48px 0 44px;
  }
  .hero-split,
  .price-grid,
  .feature-grid,
  .feature-grid-3 {
    grid-template-columns: 1fr;
  }
  .hero-actions .btn {
    width: 100%;
  }
}