/* ---------------------------------------------------------------------------
   subulate.com — coming-soon marketing site.

   Hand-authored, no build step, no framework (house pattern). This site is
   deliberately static: it has no database driver and no application code, so it
   cannot expose a customer record by any path. The product itself lives on the
   tenant subdomains.

   TYPE NOTE: the wordmark is set in `ui-rounded` (SF Pro Rounded on Apple
   devices, which is most of the audience) rather than a web font, so the page
   loads no third-party asset and leaks no visitor IP to a font CDN. Swap in the
   real brand face here when the vector artwork arrives.
--------------------------------------------------------------------------- */

:root {
  --emerald-900: #0b3d1e;
  --emerald-800: #0f4d26;
  --emerald-700: #17702f;
  --emerald-600: #1e8536;
  --green-500:   #4caf3f;
  --green-400:   #6cc24a;
  --green-300:   #7ac943;

  --ink:         #10211a;
  --ink-soft:    #40524a;
  --rule:        #dfe8e2;
  --paper:       #ffffff;
  --paper-tint:  #f4f8f4;

  --round: 14px;
  --measure: 62ch;

  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-round: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN",
                "Varela Round", "Nunito", var(--font-ui);
}

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.6 var(--font-ui);
  /* Mobile-first; nothing below depends on a minimum width. */
}

img { max-width: 100%; height: auto; }

a { color: var(--emerald-600); }
a:hover { color: var(--emerald-800); }

/* Visible focus everywhere — the default ring is removed by nothing here. */
:focus-visible {
  outline: 3px solid var(--green-500);
  outline-offset: 2px;
  border-radius: 4px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--emerald-800); color: #fff;
  padding: 10px 16px; border-radius: 0 0 var(--round) 0;
  text-decoration: none; z-index: 10;
}
.skip:focus { left: 0; top: 0; }

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

.site-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  max-width: 1080px;
  margin: 0 auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  text-decoration: none;
  color: inherit;
}

.brand-word {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 1.45rem;
  letter-spacing: -0.015em;
  background: linear-gradient(135deg, var(--green-300), var(--emerald-600));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.badge {
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--emerald-700);
  background: var(--paper-tint);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 5px 13px;
}

/* ── hero ─────────────────────────────────────────────────────────────── */

.hero {
  max-width: 740px;
  margin: 0 auto;
  padding: 28px 20px 56px;
  text-align: center;
}

.hero-mark { display: block; margin: 0 auto 10px; }

.hero-word {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: clamp(2.9rem, 11vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: 0 0 6px;
  background: linear-gradient(120deg, var(--green-300) 10%, var(--emerald-600) 90%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  font-family: var(--font-round);
  font-size: clamp(1.05rem, 4.2vw, 1.45rem);
  font-weight: 500;
  color: var(--ink-soft);
  margin: 0 0 26px;
}

.hero-line {
  font-size: clamp(1.08rem, 3.6vw, 1.3rem);
  font-weight: 600;
  color: var(--emerald-800);
  margin: 0 auto 18px;
  max-width: 30ch;
}

.hero-copy {
  color: var(--ink-soft);
  margin: 0 auto 30px;
  max-width: 54ch;
  text-align: left;
}

.cta { margin: 0 0 12px; }

.btn {
  display: inline-block;
  background: linear-gradient(135deg, var(--green-500), var(--emerald-700));
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.04rem;
  /* 52px tall: comfortably past the 44px touch-target minimum. */
  padding: 15px 30px;
  border-radius: 999px;
}
.btn:hover { background: linear-gradient(135deg, var(--green-400), var(--emerald-800)); color: #fff; }

.cta-note {
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin: 0 auto;
  max-width: 46ch;
}

/* ── features ─────────────────────────────────────────────────────────── */

.features {
  background: var(--paper-tint);
  border-top: 1px solid var(--rule);
  padding: 50px 20px 52px;
}
.features .section-h,
.features .grid,
.features .assurance { max-width: 1040px; margin-left: auto; margin-right: auto; }

.grid {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 1040px;
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

@media (min-width: 620px)  { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px)  { .grid { grid-template-columns: repeat(3, 1fr); } }

.grid li {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--round);
  padding: 22px 22px 24px;
}

.grid h3 {
  font-family: var(--font-round);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--emerald-800);
  margin: 0 0 8px;
}

.grid p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.97rem;
}


/* ── integrations ─────────────────────────────────────────────────────── */

.integrations {
  max-width: 1040px;
  margin: 0 auto;
  padding: 52px 20px 10px;
}

/* The heading here is .section-h, same as the features block. */

.int-copy {
  color: var(--ink-soft);
  margin: 0 0 22px;
  max-width: 56ch;
}

.chips {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chips li {
  background: var(--paper-tint);
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 9px 18px;
  font-weight: 600;
  font-size: 0.93rem;
  color: var(--emerald-800);
}

.int-note {
  font-size: 0.88rem;
  color: var(--ink-soft);
  margin: 0;
  max-width: 56ch;
}

/* Parent-brand attribution in the footer. */
.site-foot .parent {
  text-decoration: none;
  font-weight: 600;
  color: var(--emerald-700);
}
.site-foot .parent:hover { text-decoration: underline; }
.site-foot .sep { margin: 0 8px; color: var(--rule); }

/* Three attribution items now, so let the line wrap rather than overflow. */
.site-foot .copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  row-gap: 2px;
}
@media (max-width: 760px) {
  .site-foot .copy { justify-content: flex-start; }
}

/* ── footer ───────────────────────────────────────────────────────────── */

.site-foot {
  max-width: 1040px;
  margin: 0 auto;
  padding: 30px 20px 44px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

.foot-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-family: var(--font-round);
  font-weight: 600;
  color: var(--emerald-800);
}

.site-foot nav { display: flex; gap: 18px; }
.site-foot nav a { text-decoration: none; }
.site-foot nav a:hover { text-decoration: underline; }
.site-foot .copy { margin: 0; margin-left: auto; }

@media (max-width: 520px) {
  .site-foot { flex-direction: column; align-items: flex-start; }
  .site-foot .copy { margin-left: 0; }
}

/* ── legal pages ──────────────────────────────────────────────────────── */

.doc {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 10px 20px 56px;
}
.doc h1 { font-family: var(--font-round); color: var(--emerald-800); font-size: 2rem; margin: 0 0 6px; }
.doc h2 { font-family: var(--font-round); color: var(--emerald-800); font-size: 1.2rem; margin: 30px 0 8px; }
.doc .updated { color: var(--ink-soft); font-size: 0.9rem; margin: 0 0 24px; }
.doc p, .doc li { color: var(--ink-soft); }
.doc .notice {
  background: var(--paper-tint);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--green-500);
  border-radius: 0 var(--round) var(--round) 0;
  padding: 14px 18px;
  margin: 0 0 26px;
}

/* Respect a reduced-motion preference even though there is little motion. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* ───────────────────────────────────────────────────────────────────────────
   Fixes kept from the redesign that was rolled back. The layout above is the
   original clean version the owner approved; only these three changes survive,
   because each fixed a real defect rather than restyling anything.
   ─────────────────────────────────────────────────────────────────────────── */

/* 1. One honest line about how records are handled. Deliberately a statement of
      specific controls, not a compliance badge: HIPAA has no certification to
      claim, and this product's buyers are not covered entities. */
/* Section headings for the lower half of the page. The hero above stays the
   original centred wordmark treatment; these give the sections below it a
   visible structure instead of running one block of cards into the next. */
.section-h {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: clamp(1.4rem, 4.6vw, 1.9rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--emerald-800);
  margin: 0 0 26px;
  max-width: 26ch;
}

/* The security note is a callout, not body copy — it is the single claim on
   this page a buyer is most likely to be checking for. */
.assurance {
  background: var(--paper-tint);
  border: 1px solid var(--rule);
  border-left: 4px solid #4caf3f;
  border-radius: 0 var(--round) var(--round) 0;
  padding: 20px 22px;
  margin: 26px 0 0;
}
.assurance p { margin: 0; color: var(--ink-soft); font-size: 0.94rem; }
.assurance strong { color: var(--emerald-800); }

/* 2. Footer links were 23px tall — under the 44px touch minimum on a phone. The
      padding is negative-margined back out so the visual rhythm is unchanged. */
.site-foot nav { gap: 6px; flex-wrap: wrap; }
.site-foot nav a {
  padding: 11px 12px;
  margin: -11px 0;
  border-radius: 8px;
}
.site-foot .parent { display: inline-block; padding: 11px 0; margin: -11px 0; }

/* 3. The footer attribution is three items now, so let it wrap instead of
      overflowing a narrow screen. */
.site-foot .copy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  row-gap: 2px;
}
@media (max-width: 760px) {
  .site-foot .copy { justify-content: flex-start; }
}

/* Nothing may exceed the viewport width. */
body { overflow-x: hidden; }

/* ───────────────────────────────────────────────────────────────────────────
   Pricing page. Same clean white page and centred rhythm as the home page —
   no new palette, no new type scale, no decoration. The only new idea is a
   four-card row that collapses to one column on a phone.
   ─────────────────────────────────────────────────────────────────────────── */

.page-title {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: clamp(2rem, 8vw, 2.9rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  color: var(--emerald-800);
}

.plans { padding: 10px 20px 0; max-width: 1140px; margin: 0 auto; }

.tiers {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}

.tier {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: var(--round);
  padding: 24px 22px 26px;
  display: flex;
  flex-direction: column;
}

/* The recommended plan is marked with weight, not with a different colour
   scheme — the page stays calm. */
.tier-featured {
  border-color: var(--green-500);
  border-width: 2px;
}

.flag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--emerald-700);
  margin: 0 0 8px;
}

.tier h3 {
  font-family: var(--font-round);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--emerald-800);
  margin: 0 0 6px;
}

.price { margin: 0 0 2px; }
.amount {
  font-family: var(--font-round);
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.per { color: var(--ink-soft); font-size: 0.95rem; margin-left: 2px; }

.allow { margin: 0 0 16px; font-size: 0.9rem; color: var(--ink-soft); }

.inc { list-style: none; margin: 0 0 20px; padding: 0; }
.inc li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 7px;
  font-size: 0.92rem;
  color: var(--ink-soft);
}
.inc li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-400);
}

/* Push every card's button to the same baseline regardless of list length. */
.tier-cta { margin: auto 0 0; }
.tier-cta .btn { display: block; text-align: center; padding: 14px 20px; }

/* Secondary buttons: same shape and tap size, quieter fill. */
.btn-quiet {
  background: var(--paper-tint);
  color: var(--emerald-800);
  border: 1px solid var(--rule);
}
.btn-quiet:hover { background: #e9f3ec; color: var(--emerald-800); }

.plans-note {
  max-width: 60ch;
  margin: 26px auto 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* ── questions ────────────────────────────────────────────────────────── */

.faq { max-width: 62ch; margin: 0 auto; padding: 48px 20px 10px; }

.faq-title {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--emerald-800);
  margin: 0 0 20px;
  text-align: center;
}

.qa { margin-bottom: 20px; }
.qa h3 {
  font-family: var(--font-round);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--emerald-800);
  margin: 0 0 5px;
}
.qa p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

@media (min-width: 660px)  { .tiers { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .tiers { grid-template-columns: repeat(4, 1fr); } }

/* ───────────────────────────────────────────────────────────────────────────
   Comparison tables. Two of them, deliberately: the waiver-tool chart is the
   real head-to-head at matched volume, and the e-signature chart resets a price
   anchor. Merging them would put "300/month" and "100 per user per year" in the
   same column and leave half the rows N/A, which is when a comparison starts to
   look rigged.
   ─────────────────────────────────────────────────────────────────────────── */

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

.cmp-intro { color: var(--ink-soft); margin: -12px 0 20px; max-width: 58ch; }

/* Wide tables scroll inside their own box; the page never scrolls sideways. */
.table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--rule);
  border-radius: var(--round);
  background: var(--paper);
}

.cmp {
  width: 100%;
  min-width: 560px;          /* below this, scroll rather than crush the text */
  border-collapse: collapse;
  font-size: 0.9rem;
}

.cmp th, .cmp td {
  padding: 13px 14px;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.cmp thead th {
  font-family: var(--font-round);
  font-weight: 700;
  color: var(--emerald-800);
  background: var(--paper-tint);
  white-space: nowrap;
}
.cmp thead th span {
  display: block;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--ink-soft);
}

.cmp tbody th {
  font-weight: 600;
  color: var(--ink);
  background: #fcfdfc;
}

.cmp td { color: var(--ink-soft); }

/* Our column, marked by weight and a tint rather than a loud colour block. */
.cmp .us { background: #f1f8f2; color: var(--ink); }
.cmp thead th.us { background: #e4f3e6; }
.cmp .us strong { color: var(--emerald-800); }

/* A competitor cell where they are genuinely worse for this buyer. Muted, not
   red — the table should read as factual, not as an attack ad. */
.cmp .no { color: #8a7a6a; }

/* Anything the vendor does not publish. We say so rather than estimate. */
.cmp .unk { color: var(--ink-faint); font-style: italic; }

.cmp tbody tr:last-child th,
.cmp tbody tr:last-child td { border-bottom: 0; }

.cmp-note {
  font-size: 0.84rem;
  color: var(--ink-faint);
  margin: 12px 0 0;
  max-width: 62ch;
}

/* ── AI form builder callout ──────────────────────────────────────────── */

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

.ai-inner {
  background: var(--paper-tint);
  border: 1px solid var(--rule);
  border-radius: var(--round);
  padding: 28px 24px 30px;
}

.ai-badge {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--emerald-700);
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 999px;
  padding: 5px 12px;
  margin-bottom: 12px;
}

.ai h2 {
  font-family: var(--font-round);
  font-weight: 700;
  font-size: clamp(1.3rem, 4.4vw, 1.7rem);
  letter-spacing: -0.02em;
  color: var(--emerald-800);
  margin: 0 0 10px;
}

.ai > .ai-inner > p { color: var(--ink-soft); margin: 0 0 18px; max-width: 58ch; }

.ai-ways { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 14px; }
.ai-ways li {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 16px 18px;
}
.ai-ways h3 {
  font-family: var(--font-round);
  font-size: 1rem;
  font-weight: 700;
  color: var(--emerald-800);
  margin: 0 0 5px;
}
.ai-ways p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }

.ai-note { font-size: 0.86rem; color: var(--ink-faint); margin: 0; max-width: 62ch; }

@media (min-width: 720px) { .ai-ways { grid-template-columns: 1fr 1fr; } }