/* ============================================================
   Magnusly — marketing site
   ============================================================
   The product's whole argument is cost transparency, so the design is built
   around numbers: every rupee figure is monospaced and tabular, and the hero
   is arithmetic rather than a product screenshot.

   Two colours carry meaning, not decoration. Emerald is what you pay; clay is
   what somebody else takes. They only ever appear in that role.

   Neutrals sit slightly cool, matching the app, so the marketing site and the
   product read as one thing.
   ============================================================ */

:root {
  --paper:     #f7f8fa;
  --surface:   #ffffff;
  --surface-2: #eef1f5;
  --surface-3: #e3e8ef;
  --line:      #dde2ea;
  --line-2:    #c4ccd8;

  --ink:       #0e131a;
  --ink-2:     #48525f;
  --ink-3:     #737d8b;

  /* What you pay. */
  --accent:      #0b7a55;
  --accent-deep: #075c3f;
  --accent-soft: #e3f1eb;
  --accent-line: #a5d1bd;

  /* What somebody else takes. Used nowhere else. */
  --clay:      #a8452f;
  --clay-soft: #fbe9e4;
  --clay-line: #e3b7ab;

  --warn:      #8a5a00;
  --warn-soft: #fbf1da;

  --f-display: 'Archivo', system-ui, -apple-system, sans-serif;
  --f-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --shadow-1: 0 1px 2px rgba(14, 19, 26, .05);
  --shadow-2: 0 1px 2px rgba(14, 19, 26, .04), 0 8px 24px -12px rgba(14, 19, 26, .18);
  --shadow-3: 0 2px 6px rgba(14, 19, 26, .06), 0 24px 60px -20px rgba(14, 19, 26, .3);

  --r: 8px;
  --r-lg: 14px;
  --wrap: 1120px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 76px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

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

h1, h2, h3, h4 {
  font-family: var(--f-display);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.55rem, 3.4vw, 2.2rem); }
h3 { font-size: 1.12rem; letter-spacing: -.015em; }
h4 { font-size: .95rem; font-weight: 600; letter-spacing: -.01em; }

p { margin: 0 0 1rem; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.mono { font-family: var(--f-mono); }
.num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2rem); }
.lede { font-size: clamp(1.02rem, 2vw, 1.15rem); color: var(--ink-2); max-width: 60ch; }

.eyebrow {
  font-family: var(--f-mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: .7rem;
  display: block;
}

section { padding: clamp(3.2rem, 8vw, 6rem) 0; }
.section-head { max-width: 62ch; margin-bottom: clamp(1.8rem, 4vw, 2.8rem); }
.section-head p { color: var(--ink-2); margin-bottom: 0; }

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(247, 248, 250, .85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; gap: 1.6rem; height: 62px; }
.logo { display: flex; align-items: center; gap: .5rem; font-family: var(--f-display); font-weight: 800; font-size: 1.05rem; color: var(--ink); letter-spacing: -.03em; }
.logo:hover { text-decoration: none; }
.logo-mark {
  width: 26px; height: 26px; border-radius: 7px; flex: none;
  background: var(--accent); color: #fff;
  display: grid; place-items: center; font-size: .82rem; font-weight: 800;
}
.nav-links { display: flex; gap: 1.4rem; margin-left: 1rem; }
.nav-links a { color: var(--ink-2); font-size: .9rem; font-weight: 500; }
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-cta { margin-left: auto; display: flex; gap: .55rem; align-items: center; }
@media (max-width: 780px) { .nav-links { display: none; } }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .4rem; justify-content: center;
  font-family: var(--f-body); font-size: .9rem; font-weight: 600;
  padding: .58rem 1.1rem; border-radius: var(--r);
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  cursor: pointer; white-space: nowrap; transition: background .14s, border-color .14s;
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); text-decoration: none; color: #fff; }
.btn-ghost { background: transparent; color: var(--ink-2); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--surface); color: var(--ink); border-color: var(--line-2); }
.btn-quiet { background: transparent; border-color: transparent; color: var(--ink-2); padding: .5rem .6rem; }
.btn-quiet:hover { background: var(--surface-2); color: var(--ink); }
.btn-lg { font-size: .98rem; padding: .75rem 1.5rem; }

/* ---------- hero ---------- */
.hero { padding: clamp(2.6rem, 7vw, 5rem) 0 clamp(2.4rem, 6vw, 4rem); }
.hero-grid { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; }
@media (min-width: 940px) { .hero-grid { grid-template-columns: 1.02fr 1fr; } }

.hero h1 { margin-bottom: 1rem; }
.hero .lede { margin-bottom: 1.6rem; }
.hero-cta { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.4rem; }
.hero-note { font-size: .84rem; color: var(--ink-3); display: flex; gap: 1.1rem; flex-wrap: wrap; }
.hero-note span { display: inline-flex; align-items: center; gap: .35rem; }

/* ---------- the calculator: the hero's whole argument ---------- */
.calc {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2); overflow: hidden;
}
.calc-head { padding: 1rem 1.2rem .9rem; border-bottom: 1px solid var(--line); }
.calc-head h4 { margin-bottom: .15rem; }
.calc-head p { font-size: .82rem; color: var(--ink-3); margin: 0; }

.calc-body { padding: 1.1rem 1.2rem; }
.calc-label { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: .5rem; }
.calc-label span { font-size: .84rem; color: var(--ink-2); }
.calc-label output { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 1rem; }

input[type=range] {
  width: 100%; appearance: none; height: 5px; border-radius: 3px;
  background: var(--surface-3); outline-offset: 6px;
}
input[type=range]::-webkit-slider-thumb {
  appearance: none; width: 19px; height: 19px; border-radius: 50%;
  background: var(--accent); border: 3px solid #fff; box-shadow: var(--shadow-1); cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--accent); border: 3px solid #fff; box-shadow: var(--shadow-1); cursor: pointer;
}

.calc-rows { margin-top: 1.4rem; display: flex; flex-direction: column; gap: .55rem; }
.calc-row {
  display: grid; grid-template-columns: 1fr auto; gap: .5rem 1rem; align-items: center;
  padding: .65rem .8rem; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--surface);
}
.calc-row.theirs { background: var(--clay-soft); border-color: var(--clay-line); }
.calc-row.ours { background: var(--accent-soft); border-color: var(--accent-line); }
/* Name and detail on the left, the figure on the right. Both column and row
   are set explicitly — leaving the total to auto-placement put it in the
   first column, so the row read back to front. */
.calc-row .who { font-size: .87rem; font-weight: 600; grid-column: 1; grid-row: 1; }
.calc-row .breakdown { font-size: .76rem; color: var(--ink-3); grid-column: 1; grid-row: 2; }
.calc-row .total {
  font-family: var(--f-mono); font-variant-numeric: tabular-nums;
  font-size: 1.12rem; font-weight: 600;
  grid-column: 2; grid-row: 1 / span 2; align-self: center; text-align: right;
}
.calc-row.theirs .total { color: var(--clay); }
.calc-row.ours .total { color: var(--accent); }

.calc-verdict {
  margin-top: 1rem; padding: .85rem 1rem; border-radius: var(--r);
  background: var(--ink); color: var(--paper); font-size: .9rem;
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
}
.calc-verdict strong { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: 1.08rem; }
.calc-foot { padding: .7rem 1.2rem; border-top: 1px solid var(--line); font-size: .76rem; color: var(--ink-3); background: var(--surface-2); }

/* ---------- generic blocks ---------- */
.grid { display: grid; gap: 1rem; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.25rem 1.35rem; box-shadow: var(--shadow-1);
}
.card h3 { margin-bottom: .45rem; }
.card p { color: var(--ink-2); font-size: .92rem; margin-bottom: 0; }
.card .stat {
  font-family: var(--f-display); font-weight: 800; font-size: 2rem;
  letter-spacing: -.03em; color: var(--accent); line-height: 1;
  font-variant-numeric: tabular-nums; margin-bottom: .35rem;
}

.split { display: grid; gap: clamp(1.6rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split.wide-left { grid-template-columns: 1.2fr 1fr; } }

.band { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-ink { background: var(--ink); color: var(--paper); border: none; }
.band-ink h2, .band-ink h3 { color: #fff; }
.band-ink p { color: #b9c2ce; }
.band-ink .eyebrow { color: #7f8b99; }

/* ---------- comparison table ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); }
table { border-collapse: collapse; width: 100%; min-width: 620px; font-size: .9rem; }
th {
  text-align: left; padding: .7rem .9rem; background: var(--surface-2);
  font-family: var(--f-mono); font-size: .67rem; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 600;
  border-bottom: 1px solid var(--line-2); white-space: nowrap;
}
td { padding: .7rem .9rem; border-bottom: 1px solid var(--line); color: var(--ink-2); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
td.strong { color: var(--ink); font-weight: 600; }
td.n, th.n { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
tr.highlight td { background: var(--accent-soft); }
tr.highlight td.strong { color: var(--accent-deep); }

/* ---------- steps ---------- */
.steps { display: grid; gap: 1.2rem; counter-reset: step; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding-top: 2.6rem; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent-deep);
  border: 1px solid var(--accent-line);
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: .82rem; font-weight: 600;
}
.step h3 { margin-bottom: .35rem; }
.step p { color: var(--ink-2); font-size: .92rem; margin: 0; }

/* ---------- feature list ---------- */
.features { display: grid; gap: .1rem 2rem; }
@media (min-width: 760px) { .features { grid-template-columns: 1fr 1fr; } }
.feature { display: flex; gap: .65rem; padding: .55rem 0; border-bottom: 1px solid var(--line); align-items: flex-start; }
.feature svg { flex: none; margin-top: .22rem; color: var(--accent); }
.feature strong { display: block; font-size: .92rem; font-weight: 600; }
.feature span { font-size: .84rem; color: var(--ink-3); }

/* ---------- pricing ---------- */
.plans { display: grid; gap: 1rem; }
@media (min-width: 780px) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .plans { grid-template-columns: repeat(4, 1fr); } }

.plan {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 1.3rem 1.25rem;
  display: flex; flex-direction: column; box-shadow: var(--shadow-1);
}
.plan.featured { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), var(--shadow-2); }
.plan-tag {
  font-family: var(--f-mono); font-size: .62rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-deep); background: var(--accent-soft); border: 1px solid var(--accent-line);
  padding: .12rem .45rem; border-radius: 4px; align-self: flex-start; margin-bottom: .6rem;
}
.plan h3 { margin-bottom: .2rem; }
.plan .who { font-size: .84rem; color: var(--ink-3); min-height: 2.6em; margin-bottom: .9rem; }
.plan .price { font-family: var(--f-display); font-weight: 800; font-size: 2rem; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.plan .price span { font-family: var(--f-body); font-size: .82rem; font-weight: 400; color: var(--ink-3); letter-spacing: 0; }
.plan .yearly { font-size: .78rem; color: var(--ink-3); margin: .3rem 0 1rem; }
.plan .btn { width: 100%; margin-bottom: 1rem; }
.plan ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .38rem; }
.plan li { font-size: .86rem; color: var(--ink-2); display: flex; gap: .45rem; align-items: flex-start; }
.plan li svg { flex: none; margin-top: .28rem; color: var(--accent); }

.billing-toggle { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; background: var(--surface); margin-bottom: 1.6rem; }
.billing-toggle button { border: none; background: transparent; padding: .45rem 1rem; font: inherit; font-size: .86rem; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.billing-toggle button + button { border-left: 1px solid var(--line); }
.billing-toggle button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }

.everything {
  margin-top: 1.6rem; padding: 1.2rem 1.35rem;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
}
.everything h4 { margin-bottom: .8rem; }
.everything ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem 1.6rem; }
@media (min-width: 700px) { .everything ul { grid-template-columns: 1fr 1fr; } }
.everything li { font-size: .87rem; color: var(--ink-2); display: flex; gap: .45rem; align-items: flex-start; }
.everything li svg { flex: none; margin-top: .28rem; color: var(--accent); }

/* ---------- honest section ---------- */
.honest {
  border: 1px solid var(--line-2); border-left: 3px solid var(--warn);
  background: var(--surface); border-radius: var(--r-lg);
  padding: 1.4rem 1.5rem;
}
.honest h3 { margin-bottom: .5rem; }

/* ---------- faq ---------- */
.faq { display: grid; gap: .1rem; max-width: 76ch; }
details {
  border-bottom: 1px solid var(--line); padding: .2rem 0;
}
summary {
  cursor: pointer; padding: .85rem 0; font-weight: 600; font-size: .98rem;
  list-style: none; display: flex; align-items: center; gap: .7rem;
}
summary::-webkit-details-marker { display: none; }
summary::after {
  content: '+'; margin-left: auto; font-family: var(--f-mono);
  color: var(--ink-3); font-size: 1.2rem; font-weight: 400;
}
details[open] summary::after { content: '−'; }
details p { color: var(--ink-2); font-size: .93rem; padding-bottom: .9rem; margin: 0; max-width: 68ch; }

/* ---------- cta band ---------- */
.cta-band { text-align: left; }
.cta-band h2 { margin-bottom: .7rem; }
.cta-band .btn { margin-top: 1.2rem; }

/* ---------- footer ---------- */
footer { background: var(--surface); border-top: 1px solid var(--line); padding: 2.6rem 0 1.8rem; }
.foot-grid { display: grid; gap: 1.8rem; margin-bottom: 2rem; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.foot-col h4 { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: .7rem; font-weight: 600; }
.foot-col a { display: block; color: var(--ink-2); font-size: .88rem; padding: .18rem 0; }
.foot-bottom { border-top: 1px solid var(--line); padding-top: 1.2rem; display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; font-size: .82rem; color: var(--ink-3); }

/* ---------- utility ---------- */
.pill {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--f-mono); font-size: .66rem; font-weight: 500;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .16rem .5rem; border-radius: 4px;
  background: var(--accent-soft); color: var(--accent-deep); border: 1px solid var(--accent-line);
}
.pill.clay { background: var(--clay-soft); color: var(--clay); border-color: var(--clay-line); }
.pill.warn { background: var(--warn-soft); color: var(--warn); border-color: #e0cb9a; }
.muted { color: var(--ink-3); }
.small { font-size: .85rem; }
hr.rule { border: none; border-top: 1px solid var(--line); margin: 2rem 0; }