/* helpme.social — public marketing site.
   Palette, mark and typefaces are the logo kit's, not invented here:
   docs/brand/helpme-logo-kit/README.md.

   Presence Green (#12B76A) is 2.44:1 on Paper, so it is NEVER text. Ink ON green
   is 6.57:1, which is why the primary button is a green fill with dark type
   rather than the usual white-on-brand. Links use a deepened green (#0A6E40,
   5.88:1) so they stay in the brand family and still pass AA. Every pair below
   was measured, not eyeballed. */

@font-face {
  font-family: 'Gabarito';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/fonts/gabarito.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/hankengrotesk.woff2') format('woff2');
}

/* ▶ SINGLE-THEME BY DECISION, NOT BY OMISSION (founder, 2026-09-06). The dark
   palette that stood here — a `prefers-color-scheme` block plus a
   `[data-theme="dark"]` block — was removed when the page was rebuilt around
   product screenshots. The screenshots are captured in the app's LIGHT theme and
   are flat JPEGs: on a dark ground they read as three bright rectangles punched
   through the page, and there is no dark capture to swap in. Every colour below
   is still declared explicitly, so the page holds whatever ground the host paints.

   ── tokens ───────────────────────────────────────────────────────────────── */
:root {
  --paper:      #f6f7f3;
  --surface:    #ffffff;
  --surface-2:  #eef0ea;
  --ink:        #141d18;
  --slate:      #5f6b64;   /* surface-2 4.85 · green-wash 4.98 · paper 5.17 */
  --line:       #dde0d8;
  --line-firm:  #848d83;   /* 3.19 on paper — .btn-ghost's only boundary */
  --green:      #12b76a;   /* the kit's Presence Green — mark only */
  --green-ui:   #0f9e5b;   /* 3.22 on paper, ink-on-fill 4.97 */
  --green-deep: #0a6e40;   /* 5.88 on paper — link + on-light accent text */
  --green-wash: #e6f6ee;
  --on-green:   #141d18;   /* 6.57 on green */
  --focus:      #0a6e40;

  --display: 'Gabarito', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --body: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --wide: 68rem;
  --prose: 38rem;
  --radius: 10px;
}





/* ── base ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.1042rem/1.65 var(--body);
  font-synthesis-weight: none;
}

h1, h2, h3 { font-family: var(--display); font-weight: 700; text-wrap: balance; margin: 0; }
p { margin: 0; }
ul { margin: 0; padding: 0; }

a { color: var(--green-deep); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

:where(a, .btn):focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 4px;
}

.mono { font-family: var(--mono); font-size: 0.9em; overflow-wrap: anywhere; }
.foot-nav a { overflow-wrap: anywhere; }
.dot { color: var(--green); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 20;
  background: var(--surface); color: var(--ink);
  padding: 0.7rem 1.1rem; border: 1px solid var(--line-firm); border-radius: 6px;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ── header ────────────────────────────────────────────────────────────── */
header.site {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 1.5rem 1.5rem 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
}
.brand {
  display: inline-flex; align-items: center; gap: 0.6rem;
  color: var(--ink); text-decoration: none;
}
.mark { width: 30px; height: 30px; flex: none; }
.mark-sm { width: 26px; height: 26px; }
.wordmark { font-family: var(--display); font-weight: 700; font-size: 1.2417rem; letter-spacing: -0.015em; }

.site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 1.6rem; font-size: 0.9792rem; }
.site-nav a { color: var(--slate); text-decoration: none; font-weight: 500; }
.site-nav a:hover { color: var(--ink); text-decoration: underline; }
.site-nav .nav-signin { color: var(--ink); }

/* ── shared section rhythm ─────────────────────────────────────────────── */
main { max-width: var(--wide); margin: 0 auto; padding: 0 1.5rem; }
main > section { padding: 4.5rem 0; border-top: 1px solid var(--line); }
main > section:first-child { border-top: 0; }
main > section > h2 { font-size: clamp(1.6417rem, 1.2417rem + 1.5vw, 2.1417rem); line-height: 1.15; letter-spacing: -0.018em; }
.section-lede { color: var(--slate); max-width: var(--prose); margin-top: 0.9rem; }

.eyebrow {
  font-size: 0.8217rem; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--slate); margin-bottom: 1.1rem;
}

/* ── hero ──────────────────────────────────────────────────────────────── */
.hero { padding: 4.5rem 0 4rem; }
.hero h1 {
  font-size: clamp(2.5417rem, 1.5417rem + 4.6vw, 4.2917rem);
  line-height: 1.03;
  letter-spacing: -0.033em;
}
/* 32rem is the ONE deliberate exception to var(--prose) on this page, and it is
   an exception because the lede is set several steps larger than body copy —
   at --prose it would run past a comfortable line length. Every other prose
   block on the page uses --prose. Do not add a fourth measure. */
.hero .lede {
  font-size: clamp(1.1667rem, 1.0617rem + 0.45vw, 1.3417rem);
  color: var(--slate);
  max-width: 32rem;
  margin-top: 1.4rem;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.cta-row-center { justify-content: flex-start; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--body); font-weight: 600; font-size: 1.0417rem;
  padding: 0.8rem 1.5rem; border-radius: var(--radius);
  text-decoration: none; border: 1px solid transparent;
  transition: transform 120ms ease, background-color 120ms ease;
}
.btn-primary { background: var(--green-ui); color: var(--on-green); }
.btn-primary:hover { background: #0fa25e; }
.btn-ghost { border-color: var(--line-firm); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--surface-2); }
.cta-foot { margin-top: 1.1rem; font-size: 0.9792rem; color: var(--slate); }

/* ── thesis / ring figure ──────────────────────────────────────────────── */
.thesis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; align-items: center; }
.thesis-fig { color: var(--ink); }
.thesis-fig svg { width: 100%; height: auto; display: block; }
.fig-line path { fill: none; stroke: var(--line-firm); stroke-width: 1.5; }
.fig-label text { font-family: var(--body); font-size: 14.6667px; font-weight: 500; fill: var(--slate); }
.fig-anchor { font-family: var(--display); font-size: 16.6667px; font-weight: 700; fill: var(--ink); }
.fig-anchor-sub { font-family: var(--body); font-size: 13.6667px; font-weight: 400; fill: var(--slate); }
.thesis-copy h2 { font-size: clamp(1.5417rem, 1.2417rem + 1.2vw, 1.9417rem); letter-spacing: -0.02em; line-height: 1.15; }
.thesis-copy p { margin-top: 1rem; color: var(--slate); }

/* ── pills ─────────────────────────────────────────────────────────────── */
.pill {
  display: inline-block; font-size: 0.7417rem; font-weight: 600;
  letter-spacing: 0.05em; text-transform: uppercase;
  padding: 0.2rem 0.5rem; border-radius: 5px; margin-right: 0.4rem;
  white-space: nowrap;
}
.pill-live { background: var(--green-wash); color: var(--green-deep); }

.scroll-x { overflow-x: auto; }
.scroll-x:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

/* ── what it does ──────────────────────────────────────────────────────── */
@media (min-width: 52rem) { .cols { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 3.5rem; } }
.col h3 { font-size: 1.0417rem; margin-bottom: 1.1rem; }
ul.feat { list-style: none; display: grid; gap: 1rem; }
ul.feat li { padding-left: 1.15rem; position: relative; font-size: 1.0292rem; color: var(--slate); }
ul.feat li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--green-ui);
}
ul.feat li strong { color: var(--ink); font-weight: 600; }
ul.feat-next li::before { background: var(--line-firm); }

/* ── pricing ───────────────────────────────────────────────────────────── */
/* No `align-items: start` here, deliberately. Grid items stretch by default and
   that stretching is the only thing equalising the three cards: the plans carry
   different numbers of wrapped list lines ("Unlimited conversations" is one line
   where "Sized for about 300 conversations a month" is two), so left alone they
   end at three different heights (measured: 330 / 353 / 303px).

   The single column below 54rem is also deliberate and is NOT what auto-fit did
   on its own. 3 cards needed ~856px and 2 needed ~580px, so between those widths
   the grid quietly fell to two columns and orphaned the THIRD card onto its own
   row. Growth is the second card, so the orphan was Scale and the FEATURED plan
   sat in a top-right corner. A longer scroll beats a wrong hierarchy. */
.plans { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2.5rem; }
@media (min-width: 54rem) { .plans { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .plans { grid-template-columns: repeat(4, 1fr); } }
.plan {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; padding: 1.6rem 1.5rem;
}
.plan-featured { border-color: var(--green-ui); border-width: 2px; padding: 1.55rem 1.45rem; }
/* A RESERVED SLOT, present in all three cards and empty in two. Only the
   featured card has a flag, and without a counterpart in the others its ~27px
   pushed the $149 off the baseline that $49 and $399 shared.

   It is min-height rather than a computed spacer because arithmetic here is
   fragile — I first sized it as font-size x line-height + margin and it came out
   17px short the moment the label wrapped. `1lh` is one line of THIS element's
   own line box, so the empty slot cannot disagree with the filled one.

   `nowrap` is what makes "one line" true, and is therefore load-bearing rather
   than cosmetic: if the label ever wraps, the reserved slot is short again.
   Measured — the label is ~150px and the card's content box never narrower than
   ~206px, so it does not wrap at any width the grid produces. */
.plan-flag {
  font-size: 0.7617rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--green-deep); margin-bottom: 0.5rem;
  min-height: 1lh; white-space: nowrap;
}
.plan h3 { font-size: 1.1917rem; letter-spacing: -0.01em; }
.price { margin-top: 0.6rem; display: flex; align-items: baseline; gap: 0.3rem; }
.price .amt { font-family: var(--display); font-weight: 700; font-size: 2.5417rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.price .per { color: var(--slate); font-size: 0.9792rem; }
ul.plan-feat { list-style: none; display: grid; gap: 0.6rem; margin-top: 1.3rem; font-size: 0.9792rem; color: var(--slate); }
ul.plan-feat li { padding-left: 1.15rem; position: relative; }
ul.plan-feat li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--green-ui);
}
ul.plan-feat strong { color: var(--ink); font-variant-numeric: tabular-nums; }

/* var(--prose), not its own 44rem. The pricing section used to stack three
   different measures down one column — lede 608px, cards 1040px, notes 704px —
   so nothing shared a right edge and the section read as unfinished. Prose
   blocks now share one measure and the card grid is the only wide thing. */
.pricing-notes { margin-top: 2.5rem; display: grid; gap: 0.9rem; max-width: var(--prose); }
.pricing-notes p { font-size: 0.9792rem; color: var(--slate); }
.pricing-notes strong { color: var(--ink); }
.fine { font-size: 0.8817rem; }

/* ── closing ───────────────────────────────────────────────────────────── */
.closing h2 { font-size: clamp(1.6417rem, 1.2417rem + 1.5vw, 2.1417rem); letter-spacing: -0.02em; }
.closing p { margin-top: 1rem; color: var(--slate); max-width: var(--prose); }

/* ── footer ────────────────────────────────────────────────────────────── */
.site-foot {
  border-top: 1px solid var(--line);
  margin-top: 2rem;
  background: var(--surface-2);
}
.foot-grid {
  max-width: var(--wide); margin: 0 auto; padding: 3rem 1.5rem 2rem;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 2rem;
}
.foot-brand { display: grid; gap: 0.8rem; align-content: start; }
.foot-tag .dot { color: var(--green-deep); }
.foot-tag { font-family: var(--display); font-weight: 700; font-size: 0.9917rem; letter-spacing: -0.01em; }
/* .foot-label is a <p>, not an <h2>. These three labels used to be h2s, which
   put "Product", "Legal" and "Contact" at the same outline level as "Pricing"
   and "What you get" — three of the page's eight top-level headings were footer
   link groups. aria-labelledby can reference ANY element, so the two <nav>
   landmarks keep their names and the labels keep their appearance; they just
   leave the heading outline. Note `p { margin: 0 }` from the reset, hence the
   explicit margin-bottom. */
.foot-label { font-family: var(--body); font-size: 0.8217rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--slate); margin-bottom: 0.8rem; }
.foot-nav ul, .foot-grid > div > ul { list-style: none; display: grid; gap: 0.5rem; font-size: 0.9542rem; }
.foot-nav a, .foot-grid a { color: var(--ink); text-decoration: none; }
.foot-nav a:hover, .foot-grid a:hover { text-decoration: underline; }
.foot-legal {
  max-width: var(--wide); margin: 0 auto; padding: 0 1.5rem 2.5rem;
  font-size: 0.8542rem; color: var(--slate); line-height: 1.6;
}

/* ── narrow ────────────────────────────────────────────────────────────── */
@media (max-width: 46rem) {
  .thesis { grid-template-columns: 1fr; gap: 2rem; }
  .thesis-fig { order: 2; max-width: 26rem; }
  main > section { padding: 3.5rem 0; }
  .hero { padding: 3rem 0 3rem; }
}

/* ── the legal documents ───────────────────────────────────────────────────
   /privacy/, /terms/, /dpa/ and /subprocessors/ are prose, not landing pages:
   one column, a reading measure, and the ordinary document rhythm that the
   marketing reset above deliberately removes. They share the palette and the
   typefaces and nothing else. Their CONTENT is unchanged — Shopify App Store
   review and Meta's data-use forms both cite these URLs. */
body.doc main { max-width: var(--prose); padding: 3rem 1.25rem 4rem; }
body.doc h1 { font-size: clamp(1.9417rem, 1.6417rem + 1.2vw, 2.3417rem); letter-spacing: -0.022em; line-height: 1.15; margin: 0 0 0.6rem; }
body.doc h2 { font-size: 1.2417rem; letter-spacing: -0.01em; line-height: 1.3; margin: 2.5rem 0 0.6rem; }
body.doc h3 { font-size: 1.0617rem; margin: 1.6rem 0 0.4rem; }
body.doc p, body.doc li { margin: 0 0 0.95rem; }
body.doc ul, body.doc ol { padding-left: 1.35rem; }
body.doc li { margin-bottom: 0.45rem; }
body.doc .lede { color: var(--slate); font-size: 1.1217rem; }
body.doc .docmeta { color: var(--slate); font-size: 0.9417rem; margin: 0 0 2.2rem; }
body.doc hr { border: 0; border-top: 1px solid var(--line); margin: 3rem 0 1.5rem; }
body.doc footer { color: var(--slate); font-size: 0.9417rem; }
body.doc footer nav ul { list-style: none; padding: 0; margin: 0 0 0.9rem; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; }
body.doc footer nav li { margin: 0; }
body.doc table { border-collapse: collapse; width: 100%; margin: 0 0 1.3rem; font-size: 0.9817rem; }
body.doc th, body.doc td { border: 1px solid var(--line-firm); padding: 0.55rem 0.65rem; text-align: left; vertical-align: top; }
body.doc th { background: var(--surface-2); font-weight: 600; }
body.doc code { font-family: var(--mono); font-size: 0.9em; background: var(--surface-2); padding: 0.1em 0.35em; border-radius: 4px; }
body.doc [aria-current="page"] { font-weight: 600; color: var(--ink); }


/* ═════════════════════════════════════════════════════════════════════════
   Product frames and the grammar borrowed from the app itself.

   The app labels its own sections in uppercase mono with wide tracking
   (Settings reads SOCIAL CHANNELS, EMAIL · SUPPORT INBOX; Reports reads
   VOLUME — OPENED VS RESOLVED / DAY). The page uses the same device, so a
   screenshot sits inside the page rather than on top of it. Same reason the
   channel chips below are the inbox's chips and not invented badges.
   ═════════════════════════════════════════════════════════════════════════ */

.eyebrow-label {
  font-family: var(--mono);
  font-size: 0.8217rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
  margin: 0 0 0.6rem;
}

/* A screenshot plate. Hairline + a single soft lift — one elevation, spent on
   the one thing that should read as a separate object on the page. */
.plate {
  margin: 2.25rem 0 0;
}
.plate img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgb(20 29 24 / 0.05), 0 12px 32px -12px rgb(20 29 24 / 0.18);
  background: var(--surface);
}
.plate figcaption {
  margin: 0.85rem 0 0;
  font-size: 0.9917rem;
  line-height: 1.55;
  color: var(--slate);
  max-width: var(--prose);
}
.plate figcaption b { color: var(--ink); font-weight: 600; }

/* The inbox's own channel chips, reproduced. Values are the app's:
   email is the indigo chip, social channels are the neutral chip. */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: var(--mono);
  font-size: 0.7817rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  background: var(--surface-2);
  color: var(--slate);
}
.chip-email { background: #eceafd; color: #4338a8; }  /* 7.06:1 — measured */

/* Feature list: one column of statements, no card per item. A border-left rail
   would be the templated choice; a baseline grid and a green marker is quieter
   and keeps the eye on the sentence. */
.capabilities {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  gap: 1.4rem 2.5rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}
.capabilities li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 1.0417rem;
  line-height: 1.6;
  color: var(--slate);
}
.capabilities li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--green-ui);
}
.capabilities strong { color: var(--ink); font-weight: 600; }

@media (max-width: 40rem) {
  .plate { margin-top: 1.6rem; }
}

/* The thesis section is a two-column grid; a plate inside it must span both
   columns or it renders at half width beside the diagram. */
.plate-wide { grid-column: 1 / -1; }