/*
 * Pricing for trynem.com.
 *
 * The site's CSP is `default-src 'none'; style-src 'self'` — no scripts at all.
 * So the monthly/yearly switch is built from two radios and sibling selectors
 * rather than a click handler. That is a constraint worth having: a pricing
 * page that needs JavaScript to show a price is a pricing page that shows
 * nothing when JavaScript fails.
 *
 * Tokens are lifted from the desktop app's tokens.css so the page reads as the
 * same product rather than a marketing site bolted to the side.
 */

:root {
  color-scheme: light dark;
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --surface-sunken: #F2F4F7;
  --border: #E4E7EC;
  --border-strong: #CFD4DC;
  --text: #16181C;
  --text-secondary: #5C6270;
  --text-tertiary: #8A909C;
  --accent: #2F6FED;
  --accent-quiet: #EBF1FE;
  --on-accent: #FFFFFF;
  --positive: #167E52;
  --radius-md: 9px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-card: 0 1px 2px rgba(22, 24, 28, .045), 0 4px 12px rgba(22, 24, 28, .04);
  --shadow-lift: 0 2px 6px rgba(22, 24, 28, .06), 0 18px 44px rgba(22, 24, 28, .10);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #17181B;
    --surface: #1E2024;
    --surface-sunken: #141519;
    --border: #2A2D33;
    --border-strong: #3A3E46;
    --text: #ECEDF0;
    --text-secondary: #9CA1AB;
    --text-tertiary: #6E737D;
    --accent: #6E9BFF;
    --accent-quiet: #1D2942;
    --on-accent: #0F1116;
    --positive: #4ADE80;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .26), 0 4px 14px rgba(0, 0, 0, .2);
    --shadow-lift: 0 2px 8px rgba(0, 0, 0, .34), 0 20px 50px rgba(0, 0, 0, .4);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 24px 96px;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 var(--font);
  -webkit-font-smoothing: antialiased;
}

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

/* ── header ─────────────────────────────────────────────────────────── */

.top { display: flex; align-items: center; gap: 10px; padding: 32px 0 0; }
.mark {
  width: 46px; height: auto; display: block; object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(22, 24, 28, .12));
}
@media (prefers-color-scheme: dark) {
  .mark { filter: invert(1) grayscale(1) contrast(1.08) drop-shadow(0 8px 14px rgba(0, 0, 0, .34)); }
}
.top__name { font-weight: 640; letter-spacing: -.01em; }

.hero { padding: 64px 0 40px; text-align: center; }
.hero h1 {
  margin: 0 0 14px;
  font-family: var(--display);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 700;
  letter-spacing: -.028em;
  line-height: 1.08;
}
.hero p {
  max-width: 30rem;
  margin: 0 auto;
  color: var(--text-secondary);
  font-size: clamp(16px, 1.6vw, 18px);
}

/* ── billing switch ─────────────────────────────────────────────────────
   Two radios and a label each. The radios are visually hidden but still the
   real control, so it works from the keyboard and reads correctly to a screen
   reader without any of it being simulated. */

.family, .cadence { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.family { margin-bottom: 14px; }
.cadence { margin-bottom: 44px; }
.switch {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
input[name="cadence"], input[name="family"] {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.switch label {
  padding: 9px 22px;
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 15px;
  font-weight: 560;
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.switch label:hover { color: var(--text); }
/* The radios live outside .wrap so they can reach the prices; the labels live
   inside it, so the selected state has to be found through .wrap rather than
   as an adjacent sibling. */
#m:checked ~ .wrap label[for="m"],
#y:checked ~ .wrap label[for="y"],
#individual:checked ~ .wrap label[for="individual"],
#team:checked ~ .wrap label[for="team"] { background: var(--text); color: var(--bg); }
input[name="cadence"]:focus-visible ~ .wrap .cadence .switch label,
input[name="family"]:focus-visible ~ .wrap .family .switch label {
  outline: 1px dashed var(--accent); outline-offset: 2px;
}

.saving {
  height: 20px;
  color: var(--positive);
  font-size: 14px;
  font-weight: 600;
}

/* ── plans ──────────────────────────────────────────────────────────── */

.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: start; }
.plans--team { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; margin: 0 auto; }
#individual:checked ~ .wrap .plans--team,
#team:checked ~ .wrap .plans--individual { display: none; }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 30px 26px;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

/* Pro leads without the others looking broken: a stronger edge and a lift,
   not a different colour scheme. */
.plan--lead {
  border-color: var(--accent);
  box-shadow: var(--shadow-lift), 0 0 0 1px var(--accent);
}

.plan__tag {
  position: absolute;
  top: -11px; left: 26px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 12px;
  font-weight: 640;
  letter-spacing: .01em;
}

.plan__name { font-size: 18px; font-weight: 660; letter-spacing: -.01em; }
.plan__for { margin: -12px 0 0; color: var(--text-secondary); font-size: 14px; min-height: 42px; }

.price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.price__amount { font-family: var(--display); font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.price__unit { color: var(--text-secondary); font-size: 14px; }
.price__note { min-height: 20px; color: var(--text-tertiary); font-size: 13px; }
.price__free { min-height: 20px; color: var(--positive); font-size: 13px; font-weight: 600; }

/* The two prices live in the DOM together; the switch decides which is shown.
   Nothing is crossed out and nothing counts down — the yearly saving is real
   and stated plainly, which is the only honest way to sell it. */
.on-year, #y:checked ~ .wrap .on-month { display: none; }
#y:checked ~ .wrap .on-year { display: revert; }

.cta {
  display: block;
  padding: 12px 18px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}
.cta:hover { background: var(--surface-sunken); }
.cta--lead { border-color: transparent; background: var(--accent); color: var(--on-accent); }
.cta--lead:hover { filter: brightness(1.06); }
.cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
/* Absolutely positioned tick rather than a grid column: as a grid container the
   list item would treat every text node and every <strong> as its own grid
   item, so "Hold fn to write" broke into three cells. */
.plan li {
  position: relative;
  padding-left: 26px;
  color: var(--text-secondary);
  font-size: 14.5px;
  line-height: 1.45;
}
.plan li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--accent-quiet);
  /* A tick drawn in the mask so it inherits the accent and needs no image. */
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.6L12 5.5' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.6L12 5.5' stroke='%23000' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat;
  background-color: var(--accent);
}
.plan__inherit { color: var(--text-tertiary); font-size: 13.5px; font-weight: 600; }

/* ── notes and questions ────────────────────────────────────────────── */

.strip {
  margin-top: 24px;
  padding: 16px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
  color: var(--text-secondary);
  font-size: 14px;
  text-align: center;
}

.faq { margin-top: 72px; }
.faq h2 {
  margin: 0 0 22px;
  font-family: var(--display);
  font-size: 24px;
  font-weight: 680;
  letter-spacing: -.02em;
  text-align: center;
}
.faq__list { display: grid; gap: 10px; max-width: 42rem; margin: 0 auto; }
.faq details {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}
.faq summary {
  padding: 16px 20px;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--text-tertiary); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq summary:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.faq p { margin: 0; padding: 0 20px 18px; color: var(--text-secondary); font-size: 15px; }

.foot { margin-top: 64px; color: var(--text-tertiary); font-size: 13px; text-align: center; }
.foot a { color: var(--text-secondary); }

@media (max-width: 900px) {
  .plans { grid-template-columns: 1fr; gap: 16px; }
  .plan--lead { order: -1; }
  .plan__for { min-height: 0; }
  .hero { padding: 44px 0 32px; }
}