/* ===========================================================================
   Ragulika IP — Trademark Assistant · public pages
   ---------------------------------------------------------------------------
   Deliberately the same room as docket.ragulikaip.com: white header on a very
   light ground, one warm cream accent, a dark navy button, and type doing the
   rest. Someone who has seen the patent product should recognise this one
   before they have read a word of it.

   The app (signed in) and this share a token set, so the seam between the
   marketing page and the product is not visible.
   =========================================================================== */

:root {
  --m-ground:    #f7f8fa;
  --m-paper:     #ffffff;
  --m-sunk:      #f1f3f7;
  --m-line:      #e5e8ee;
  --m-line-2:    #eef0f4;

  --m-ink:       #101521;
  --m-ink-2:     #39404e;
  --m-ink-3:     #5c6473;
  --m-ink-4:     #838b99;

  /* The one accent. Warm, quiet, and never used for a control that acts. */
  --m-cream:     #faf1de;
  --m-cream-line:#efdfbb;
  --m-cream-ink: #5a4a22;

  /* The button that commits. Navy, because a decision should look settled. */
  --m-deep:      #101d33;
  --m-deep-2:    #1c2e4d;

  /* Borrowed from the app so a worked example on this page is coloured the
     same way the real screen colours it. */
  --m-calc:      #4c3a8f;
  --m-calc-bg:   #f3f0fc;
  --m-calc-line: #d8cff2;
  --m-official:  #0f4c5c;
  --m-official-bg:#eef6f8;
  --m-official-line:#c2dde4;
}

body.marketing {
  background: var(--m-ground);
  color: var(--m-ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.62;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
body.marketing h1, body.marketing h2, body.marketing h3, body.marketing h4 {
  font-family: var(--font-display);
  color: var(--m-ink);
  line-height: 1.16;
  letter-spacing: -.022em;
  margin: 0 0 .5em;
  font-weight: 700;
}
body.marketing a { color: var(--m-deep); }
body.marketing p { margin: 0 0 1em; }

.m-wrap { max-width: 1180px; margin: 0 auto; padding: 0 24px; }
.m-narrow { max-width: 760px; margin: 0 auto; padding: 0 24px; }

/* ─────────────────────────────────────────────────────────────── header ── */
.m-head {
  background: var(--m-paper);
  border-bottom: 1px solid var(--m-line);
  position: sticky; top: 0; z-index: 60;
}
.m-head .m-wrap { display: flex; align-items: center; gap: 20px; height: 68px; }
.m-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.m-brand:hover { text-decoration: none; }
.m-mark { height: 32px; width: 32px; display: block; flex: none; object-fit: contain; }
.m-name {
  font-family: var(--font-display); font-size: 1.16rem; font-weight: 700;
  color: var(--m-ink); letter-spacing: -.02em; white-space: nowrap;
}
.m-product {
  color: var(--m-ink-4); font-size: .82rem; font-weight: 500; white-space: nowrap;
  border-left: 1px solid var(--m-line); padding-left: 12px; margin-left: 3px;
}
.m-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.m-nav a {
  padding: 8px 13px; border-radius: 8px; color: var(--m-ink-2);
  font-size: .92rem; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.m-nav a:hover { background: var(--m-sunk); text-decoration: none; }
body.marketing .m-nav a.m-cta {
  background: var(--m-deep); color: #fff; font-weight: 600; padding: 9px 17px;
}
body.marketing .m-nav a.m-cta:hover { background: var(--m-deep-2); color: #fff; }

/* ─────────────────────────────────────────────────────────────── buttons ── */
.m-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: 10px; border: 1px solid transparent;
  font-family: var(--font-body); font-size: 1rem; font-weight: 600; line-height: 1.2;
  cursor: pointer; text-decoration: none; transition: background .15s, border-color .15s;
}
.m-btn:hover { text-decoration: none; }
/* Scoped to body.marketing so these beat `body.marketing a`, which is more
   specific than a bare class and would otherwise repaint the label. */
body.marketing .m-btn-deep { background: var(--m-deep); border-color: var(--m-deep); color: #fff; }
body.marketing .m-btn-deep:hover { background: var(--m-deep-2); border-color: var(--m-deep-2); color: #fff; }
body.marketing .m-btn-plain { background: var(--m-paper); border-color: var(--m-line); color: var(--m-ink); }
body.marketing .m-btn-plain:hover { background: var(--m-sunk); }
.m-btn-sm { padding: 9px 16px; font-size: .9rem; border-radius: 9px; }

/* ───────────────────────────────────────────────────────────────── flash ── */
/* Public pages get told things too: a rate limit, a password changed, a sign-in
   cancelled. Without this the message is set and silently thrown away. */
.m-flash-stack { display: flex; flex-direction: column; gap: 10px; max-width: 640px; margin: 0 auto; }
.m-flash {
  padding: 13px 17px; border-radius: 10px; font-size: .92rem; border: 1px solid;
  background: var(--m-paper); border-color: var(--m-line); color: var(--m-ink-2);
}
.m-flash-success { background: #edf7f1; border-color: #bfe0cd; color: #12563a; }
.m-flash-error   { background: #fdf0ef; border-color: #f5cdc9; color: #92211c; }
.m-flash-info    { background: var(--m-cream); border-color: var(--m-cream-line); color: var(--m-cream-ink); }

/* ────────────────────────────────────────────────────────────────── hero ── */
.m-hero { padding: 78px 0 58px; text-align: center; }
.m-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .74rem; font-weight: 700; letter-spacing: .105em; text-transform: uppercase;
  color: var(--m-cream-ink); background: var(--m-cream);
  border: 1px solid var(--m-cream-line);
  padding: 7px 16px; border-radius: 100px; margin-bottom: 26px;
}
.m-hero h1 {
  font-size: clamp(2.05rem, 1.35rem + 2.7vw, 3.15rem);
  letter-spacing: -.035em; max-width: 24ch; margin: 0 auto .42em; text-wrap: balance;
}
.m-hero-sub {
  font-size: clamp(1.02rem, .96rem + .42vw, 1.2rem); color: var(--m-ink-3);
  max-width: 58ch; margin: 0 auto 32px; line-height: 1.62;
}
.m-hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 22px; }
.m-hero-note { margin: 0; font-size: .84rem; color: var(--m-ink-4); }

/* ─────────────────────────────────────────────── the comparison, side by side ── */
.m-section { padding: 34px 0; }
.m-compare {
  background: var(--m-paper); border: 1px solid var(--m-line); border-radius: 16px;
  display: grid; grid-template-columns: 1fr 1fr; overflow: hidden;
}
@media (max-width: 860px) { .m-compare { grid-template-columns: 1fr; } }
.m-compare > div { padding: 30px 32px; }
.m-compare > div + div { border-left: 1px solid var(--m-line-2); }
@media (max-width: 860px) {
  .m-compare > div + div { border-left: 0; border-top: 1px solid var(--m-line-2); }
}
.m-compare h3 {
  font-size: 1.06rem; margin: 0 0 18px; color: var(--m-ink-2); letter-spacing: -.01em;
}
.m-compare .m-caption { font-size: .88rem; color: var(--m-ink-3); margin: 18px 0 0; }

.m-rows { display: grid; gap: 1px; background: var(--m-line-2);
  border: 1px solid var(--m-line-2); border-radius: 10px; overflow: hidden; }
.m-rows > div { background: var(--m-paper); padding: 11px 14px;
  display: flex; gap: 14px; align-items: baseline; }
.m-rows dt, .m-rows .k {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--m-ink-4); font-weight: 700; flex: 0 0 8.5rem;
}
.m-rows dd, .m-rows .v { margin: 0; font-size: .95rem; font-weight: 500;
  font-variant-numeric: tabular-nums; color: var(--m-ink); }
.m-rows .v.crit { color: #b4231f; }
.m-rows > div.basis { background: var(--m-calc-bg); border-left: 3px solid var(--m-calc); }
.m-rows > div.basis .v { color: var(--m-calc); }
.m-rows > div.official { background: var(--m-official-bg); }

/* ───────────────────────────────────────────────────── how it works strip ── */
.m-steps {
  display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
}
.m-step {
  background: var(--m-paper); border: 1px solid var(--m-line); border-radius: 11px;
  padding: 15px 12px; text-align: center;
}
.m-step b { display: block; font-family: var(--font-display); font-size: .84rem;
  font-weight: 700; margin-bottom: 3px; letter-spacing: -.01em; }
.m-step span { font-size: .76rem; color: var(--m-ink-4); line-height: 1.45; display: block; }

/* ────────────────────────────────────────────────────────── feature cards ── */
.m-cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.m-card {
  background: var(--m-paper); border: 1px solid var(--m-line); border-radius: 14px;
  padding: 26px 26px 28px;
}
.m-card h3 { font-size: 1.17rem; margin: 0 0 .5em; letter-spacing: -.02em; }
.m-card p { font-size: .95rem; color: var(--m-ink-3); margin: 0; line-height: 1.62; }

/* ────────────────────────────────────────────────────────────── cta band ── */
.m-band {
  background: var(--m-cream); border: 1px solid var(--m-cream-line);
  border-radius: 16px; padding: 52px 32px; text-align: center;
}
.m-band h2 {
  font-size: clamp(1.55rem, 1.1rem + 1.9vw, 2.45rem); letter-spacing: -.032em;
  margin: 0 auto .5em; max-width: 22ch;
}
.m-band p { color: var(--m-ink-3); max-width: 54ch; margin: 0 auto 28px; }

/* ────────────────────────────────────────────────────────── please read ── */
.m-note {
  background: var(--m-sunk); border: 1px solid var(--m-line); border-radius: 11px;
  padding: 18px 22px; font-size: .86rem; color: var(--m-ink-3); line-height: 1.62;
  max-width: 800px; margin: 0 auto;
}
.m-note strong { color: var(--m-ink-2); font-weight: 700; }

/* ──────────────────────────────────────────────────────────────── footer ── */
.m-foot {
  background: var(--m-paper); border-top: 1px solid var(--m-line);
  margin-top: 68px; padding: 40px 0 46px; font-size: .86rem; color: var(--m-ink-3);
}
.m-foot-grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
@media (max-width: 780px) { .m-foot-grid { grid-template-columns: 1fr; } }
.m-foot h4 { font-size: 1rem; margin: 0 0 .55em; letter-spacing: -.015em; }
.m-foot p { margin: 0; line-height: 1.62; max-width: 62ch; }
.m-foot-right { text-align: right; display: flex; flex-direction: column; gap: 7px; }
@media (max-width: 780px) { .m-foot-right { text-align: left; } }
.m-foot-links a { color: var(--m-ink-2); text-decoration: none; }
.m-foot-links a:hover { text-decoration: underline; }
.m-foot-legal { color: var(--m-ink-4); font-size: .82rem; line-height: 1.6; }

/* ───────────────────────────────────────────────────── legal & long reads ── */
.m-doc { padding: 52px 0 8px; }
.m-doc h1 { font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.4rem); margin-bottom: .3em; }
.m-doc .m-lede { font-size: 1.05rem; color: var(--m-ink-3); margin: 0 0 34px; }
.m-doc h2 { font-size: 1.22rem; margin: 34px 0 .5em; }
.m-doc h3 { font-size: 1.02rem; margin: 22px 0 .4em; }
.m-doc p, .m-doc li { color: var(--m-ink-2); font-size: .96rem; line-height: 1.68;
  overflow-wrap: anywhere; }
.m-doc ul, .m-doc ol { padding-left: 1.3rem; margin: 0 0 1em; }
.m-doc li { margin-bottom: .4em; }
.m-doc .m-updated {
  font-size: .82rem; color: var(--m-ink-4); border-top: 1px solid var(--m-line);
  padding-top: 18px; margin-top: 40px;
}
.m-facts {
  background: var(--m-paper); border: 1px solid var(--m-line); border-radius: 12px;
  padding: 4px 22px; margin: 0 0 28px;
}
.m-facts div { display: flex; gap: 18px; padding: 12px 0; border-bottom: 1px solid var(--m-line-2);
  font-size: .93rem; flex-wrap: wrap; }
.m-facts div:last-child { border-bottom: 0; }
.m-facts .k { flex: 0 0 11rem; color: var(--m-ink-4); font-weight: 600; font-size: .82rem;
  text-transform: uppercase; letter-spacing: .06em; }
.m-facts .v { color: var(--m-ink); font-weight: 500; }

/* ─────────────────────────────────────────────────────────────── pricing ── */
.m-plans { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.m-plan {
  background: var(--m-paper); border: 1px solid var(--m-line); border-radius: 16px;
  padding: 30px 30px 32px; display: flex; flex-direction: column;
}
.m-plan.on { border-color: var(--m-cream-line); background: var(--m-cream); }
.m-plan h3 { font-size: 1.06rem; margin: 0 0 4px; }
.m-plan .m-price {
  font-family: var(--font-display); font-size: 2.3rem; font-weight: 700;
  letter-spacing: -.035em; line-height: 1.1; margin: 12px 0 2px;
}
.m-plan .m-per { font-size: .92rem; color: var(--m-ink-3); margin: 0 0 6px; }
.m-plan .m-gross { font-size: .88rem; color: var(--m-ink-2); font-weight: 600; margin: 0 0 22px; }
.m-plan .m-save {
  display: inline-block; font-size: .74rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--m-cream-ink); background: var(--m-paper);
  border: 1px solid var(--m-cream-line); border-radius: 100px; padding: 4px 11px;
}
.m-includes { list-style: none; padding: 0; margin: 0; }
.m-includes li { padding: 11px 0; border-bottom: 1px solid var(--m-line-2); font-size: .94rem; }
.m-includes li:last-child { border-bottom: 0; }
.m-includes b { display: block; font-weight: 600; }
.m-includes span { color: var(--m-ink-3); font-size: .89rem; }

.m-faq details { border-bottom: 1px solid var(--m-line); padding: 16px 0; }
.m-faq summary {
  cursor: pointer; font-weight: 600; font-size: 1rem; list-style: none;
  display: flex; justify-content: space-between; gap: 16px; color: var(--m-ink);
}
.m-faq summary::-webkit-details-marker { display: none; }
.m-faq summary::after { content: '+'; color: var(--m-ink-4); font-weight: 400; font-size: 1.35rem; line-height: 1; }
.m-faq details[open] summary::after { content: '\2212'; }
.m-faq details p { margin: .7rem 0 0; color: var(--m-ink-3); font-size: .94rem; max-width: 66ch; }

/* ───────────────────────────────────────────────────────────────── auth ── */
.m-auth { max-width: 460px; margin: 0 auto; padding: 48px 24px 12px; }
.m-lockup { display: block; width: auto; max-width: 250px; height: auto; margin: 0 auto 26px; }
.m-auth h1 { font-size: 1.95rem; margin: 0 0 .35em; letter-spacing: -.03em; }
.m-auth .m-lede { color: var(--m-ink-3); margin: 0 0 26px; font-size: 1rem; }
.m-auth-card {
  background: var(--m-paper); border: 1px solid var(--m-line); border-radius: 14px;
  padding: 26px;
}
.m-google {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; padding: 14px 18px; border: 1px solid var(--m-line);
  border-radius: 10px; background: var(--m-paper); color: var(--m-ink);
  font-family: var(--font-body); font-size: 1rem; font-weight: 600;
  text-decoration: none; cursor: pointer; transition: background .15s, border-color .15s;
}
.m-google:hover { background: var(--m-sunk); border-color: var(--m-line-2); text-decoration: none; }
.m-google svg { flex: none; }
.m-auth-card .m-hint { font-size: .86rem; color: var(--m-ink-3); text-align: center;
  margin: 14px 0 0; line-height: 1.55; }
.m-auth-foot { text-align: center; font-size: .88rem; color: var(--m-ink-3); margin: 22px 0 0; }

/* ─────────────────────────────────────────────────────────────── mobile ── */
@media (max-width: 720px) {
  body.marketing { font-size: 15.5px; }
  .m-hero { padding: 48px 0 36px; }
  .m-head .m-wrap { height: 60px; gap: 12px; padding: 0 16px; }
  .m-wrap, .m-narrow { padding: 0 16px; }
  .m-product { display: none; }
  .m-compare > div { padding: 22px 20px; }
  .m-card { padding: 20px; }
  .m-band { padding: 34px 20px; }
  .m-plan { padding: 22px; }
  .m-rows > div { flex-direction: column; gap: 3px; }
  .m-rows dt, .m-rows .k { flex: none; }
  /* Four items do not fit across a phone, and a header that pushes the page
     sideways breaks every page behind it. The nav scrolls instead — scrollbar
     hidden, momentum on, and a soft fade at the right edge so it is visible
     that there is more. The brand never shrinks; the nav gives way. */
  .m-head .m-wrap { gap: 8px; }
  .m-brand { flex: 0 0 auto; min-width: 0; }
  .m-nav {
    gap: 2px; min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
  }
  .m-nav::-webkit-scrollbar { display: none; }
  .m-nav a { padding: 7px 9px; font-size: .86rem; flex: 0 0 auto; scroll-snap-align: end; }
  .m-nav a.m-cta { padding: 8px 13px; }
}