/* Chalkline's own look.

   Its own site, so its own stylesheet -- not shared with the delivery site.
   Sharing one would mean a change made for a contractor reading a sales page
   quietly altering the page a client collects her bespoke app from.

   Dark, because it is read on a phone in a van as often as at a desk, and a
   white page in bright sun is worse than a dark one at night. One accent
   colour, used only for the thing to press. */

:root {
  --bg:        #0e1116;
  --surface:   #161b22;
  --surface-2: #1d232c;
  --line:      #2a323d;
  --ink:       #e8edf4;
  --dim:       #96a1b0;
  --accent:    #35c46b;   /* money green, and it means "press this" */
  --accent-2:  #2aa85a;
  --warn:      #e0a03a;
  --bad:       #e05a5a;
  --radius:    14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 20px 70px;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.65 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* --- header ------------------------------------------------------------ */
.top {
  max-width: 860px;
  margin: 0 auto;
  padding: 22px 0 8px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  width: fit-content;       /* a flex <a> is a block -- without this the link
                               stretches the width of the page and a click
                               well clear of the logo navigates away */
}
.prod { font-weight: 600; color: var(--dim); }
.top-link {
  margin-left: auto;
  color: var(--ink);
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 600;
  padding: 9px 20px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  white-space: nowrap;
  transition: border-color .12s ease, background .12s ease,
              transform .12s ease;
}
.top-link:hover {
  border-color: var(--accent);
  background: var(--surface-2);
  transform: translateY(-1px);
}
.top-link:active { transform: translateY(0); }
.top-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
@media (max-width: 520px) {
  .top-link { padding: 8px 14px; font-size: 13.5px; }
}

/* --- hero -------------------------------------------------------------- */
.hero {
  max-width: 860px;
  margin: 44px auto 12px;
  position: relative;
}
/* A wash of the accent behind the headline. Barely visible on its own --
   what it does is stop the top of the page reading as a flat sheet. */
.hero::before {
  content: "";
  position: absolute;
  left: -10%;
  top: -160px;
  width: 70%;
  height: 380px;
  background: radial-gradient(ellipse at center,
              rgba(53, 196, 107, .10), transparent 68%);
  pointer-events: none;
  z-index: -1;
}
.hero h1 {
  margin: 0 0 16px;
  font-size: 46px;
  line-height: 1.08;
  letter-spacing: -1.1px;
  font-weight: 800;
  max-width: 19ch;
}
.hero .sub {
  margin: 0;
  font-size: 18.5px;
  line-height: 1.6;
  color: var(--dim);
  max-width: 60ch;
}
@media (max-width: 640px) {
  .hero h1 { font-size: 34px; letter-spacing: -.6px; }
}
.hero.ready h1 { font-size: 34px; }

.hero-cta {
  margin-top: 30px;
  padding: 24px 26px;
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .34);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
}
.price { display: flex; align-items: baseline; gap: 8px; }
.amount { font-size: 42px; font-weight: 800; letter-spacing: -1.4px; }
.per { color: var(--dim); }
.hero-cta .lead { margin: 0; color: var(--dim); }

/* THE ONE BRIGHT THING ON THE PAGE. Everything else in this stylesheet is
   grey on dark so that this reads as the only thing to press. The glow is
   the accent at low opacity -- the same colour, not a new one. */
.go {
  margin-left: auto;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: #04200d;
  font-weight: 800;
  font-size: 16.5px;
  letter-spacing: -.1px;
  text-decoration: none;
  padding: 15px 30px;
  border-radius: 12px;
  white-space: nowrap;
  border: 1px solid rgba(53, 196, 107, .55);
  box-shadow: 0 6px 22px rgba(53, 196, 107, .22),
              inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.go:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(53, 196, 107, .32),
              inset 0 1px 0 rgba(255, 255, 255, .28);
}
/* It must visibly go down when pressed -- on a phone that is the only
   feedback there is that the tap landed. */
.go:active { transform: translateY(1px); filter: brightness(.97);
  box-shadow: 0 3px 12px rgba(53, 196, 107, .22); }

/* --- the three hooks --------------------------------------------------- */
.hooks {
  max-width: 860px;
  margin: 34px auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}
.hook {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.hook h2 { margin: 0 0 8px; font-size: 17px; line-height: 1.3; }
.hook p { margin: 0; color: var(--dim); font-size: 15px; }

/* --- panels ------------------------------------------------------------ */
.panel {
  max-width: 860px;
  margin: 22px auto;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .22);
}
/* A hairline of light along the top edge. It is what makes a card look
   raised rather than drawn on. */
.panel { position: relative; overflow: hidden; }
.panel::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent,
              rgba(255, 255, 255, .07), transparent);
}
.panel h2 { margin: 0 0 12px; font-size: 21px; letter-spacing: -.3px; }
.lead { margin: 0 0 12px; color: var(--dim); }
.note { margin: 10px 0 0; color: var(--dim); font-size: 14px; }
.note.warn { color: var(--warn); }
.err {
  margin: 0 0 14px;
  padding: 11px 14px;
  border-radius: 10px;
  background: rgba(224, 90, 90, .12);
  border: 1px solid rgba(224, 90, 90, .4);
  color: #ffbdbd;
}
.method { margin: 14px 0 0; color: var(--dim); font-size: 14px; }

.gets { margin: 0; padding: 0; list-style: none; }
.gets li {
  padding: 7px 0 7px 28px;
  position: relative;
  border-bottom: 1px solid var(--line);
}
.gets li:last-child { border-bottom: 0; }
.gets li::before {
  content: "✓";
  position: absolute;
  left: 4px;
  color: var(--accent);
  font-weight: 700;
}

.privacy { border-color: rgba(53, 196, 107, .35); }

.qa { padding: 12px 0; border-bottom: 1px solid var(--line); }
.qa:last-child { border-bottom: 0; }
.q { margin: 0 0 4px; font-weight: 650; }
.a { margin: 0; color: var(--dim); }

/* --- forms ------------------------------------------------------------- */
.signup { display: grid; gap: 15px; max-width: 460px; }
.signup button {
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  color: #04200d;
  border: 1px solid rgba(53, 196, 107, .55);
  font-weight: 800;
  font-size: 17px;
  padding: 15px 22px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(53, 196, 107, .22),
              inset 0 1px 0 rgba(255, 255, 255, .22);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.signup button:hover { filter: brightness(1.06); transform: translateY(-1px);
  box-shadow: 0 10px 30px rgba(53, 196, 107, .32),
              inset 0 1px 0 rgba(255, 255, 255, .28); }
.signup button:active { transform: translateY(1px); filter: brightness(.97); }

/* The three things somebody is weighing up, sat directly under the button
   they are deciding whether to press. All three are true, which is the only
   reason they are allowed to be there. */
.reassure {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  color: var(--dim);
  font-size: 13.5px;
}
.reassure li::before {
  content: "\2713";
  color: var(--accent);
  font-weight: 800;
  margin-right: 7px;
}
.signup label {
  display: grid;
  gap: 6px;
  font-size: 14px;
  color: var(--dim);
}
.opt { color: var(--line); }
input[type=text], input[type=email], input[type=password], select {
  width: 100%;
  padding: 12px 14px;
  font-size: 16px;            /* 16 or iOS zooms the page on focus */
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--ink);
}
input:focus, select:focus {
  outline: none;
  border-color: var(--accent);
}
button {
  padding: 13px 22px;
  font-size: 16px;
  font-weight: 700;
  background: var(--accent);
  color: #07220f;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
button:hover { background: var(--accent-2); }
button:disabled {
  background: var(--surface-2);
  color: var(--dim);
  cursor: not-allowed;
}

.code-form { display: flex; gap: 10px; flex-wrap: wrap; }
.code-form input {
  flex: 1 1 200px;
  font-family: ui-monospace, Consolas, monospace;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* --- the download page ------------------------------------------------- */
.grab { text-align: center; }
.download {
  display: inline-block;
  background: var(--accent);
  color: #07220f;
  font-size: 22px;
  font-weight: 800;
  text-decoration: none;
  padding: 20px 46px;
  border-radius: 14px;
}
.download:hover { background: var(--accent-2); }

.steps { margin: 0; padding-left: 22px; }
.steps li { padding: 5px 0; }
.steps .orsplit {
  list-style: none;
  margin-left: -22px;
  color: var(--dim);
  padding: 14px 0 6px;
}

.code-big {
  margin: 4px 0;
  font-family: ui-monospace, Consolas, monospace;
  font-size: 31px;
  font-weight: 700;
  letter-spacing: 4px;
  color: var(--accent);
}

/* --- admin ------------------------------------------------------------- */
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th, .tbl td {
  text-align: left;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.tbl th { color: var(--dim); font-weight: 600; }
.dim { color: var(--dim); }
.inline { display: flex; gap: 6px; }
.inline button { padding: 6px 12px; font-size: 13px; }
.inline select { width: auto; padding: 6px 10px; font-size: 13px; }
.pill {
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 12px;
  font-weight: 700;
}
.pill.trial   { background: rgba(224, 160, 58, .2);  color: var(--warn); }
.pill.paying  { background: rgba(53, 196, 107, .2);  color: var(--accent); }
.pill.lapsed  { background: rgba(224, 90, 90, .2);   color: #ff9a9a; }
.pill.stopped { background: var(--surface-2);        color: var(--dim); }

.foot {
  max-width: 860px;
  margin: 40px auto 0;
  color: var(--line);
  font-size: 13px;
}

@media (max-width: 620px) {
  .hero h1 { font-size: 30px; }
  .go { margin-left: 0; width: 100%; text-align: center; }
}

/* ---- the picker: what goes in your copy ------------------------------- */
.trade-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 8px;
  margin-bottom: 18px;
}
.trade {
  display: block;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface-2);
  cursor: pointer;
  font-size: 14px;
}
.trade input { display: none; }
.trade:hover { border-color: var(--dim); }
.trade.on { border-color: var(--accent); color: var(--accent); }

.one-field { display: block; max-width: 440px; font-size: 14px; color: var(--dim); }
.one-field input { margin-top: 6px; }
.one-field .hint { display: block; margin-top: 5px; font-size: 12.5px; }
.opt { color: var(--line); }

.mod-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
}
.mod {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "icon name" "blurb blurb";
  gap: 2px 9px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  cursor: pointer;
}
.mod input { display: none; }
.mod:hover { border-color: var(--dim); }
.mod.on { border-color: var(--accent); background: rgba(53, 196, 107, .08); }
.mod.core { cursor: default; opacity: .7; }
.mod-icon { grid-area: icon; font-size: 17px; }
.mod-name { grid-area: name; font-weight: 700; font-size: 14px; }
.mod-blurb { grid-area: blurb; font-size: 12.5px; color: var(--dim);
  line-height: 1.45; }
.mod-always {
  grid-area: blurb;
  font-size: 11px;
  color: var(--accent);
  text-transform: uppercase;
  letter-spacing: .05em;
  font-weight: 700;
}

.go-panel { text-align: center; }
/* `button` is styled as a solid green block; these have to read as links */
.linky {
  background: none;
  border: 0;
  padding: 0;
  color: var(--dim);
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
}
.linky:hover { color: var(--accent); background: none; }
.code-inline {
  font-family: ui-monospace, Consolas, monospace;
  letter-spacing: 2px;
  color: var(--accent);
}

/* the "what do you do" box, shown only when Other is picked */
.trade-other { margin-bottom: 16px; }

/* the copy button beside the code */
.code-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 4px 0; }
.code-copy {
  /* the global button rule paints everything solid green -- this has to read
     as a small action beside the code, not as the thing to press on the page */
  background: none;
  border: 1px solid var(--line);
  color: var(--dim);
  font-size: 14px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 8px;
}
.code-copy:hover { background: var(--surface-2); color: var(--ink); }
.code-copy.ok { border-color: var(--accent); color: var(--accent);
  background: none; }

/* ---- the questions ----------------------------------------------------- */
.faq-find { display: none; gap: 8px; margin: 4px 0 6px; }
.faq.live .faq-find { display: flex; }
.faq-find input {
  flex: 1;
  padding: 11px 14px;
  border-radius: 10px;
  font-size: 15px;
}
.faq-find button {
  /* the global button rule would paint this a solid block */
  background: none;
  border: 1px solid var(--line);
  color: var(--dim);
  padding: 0 14px;
  border-radius: 10px;
}
.faq-count { color: var(--dim); font-size: 13px; margin: 0 0 18px; }
.faq-sec { margin-bottom: 22px; }
.faq-sec h3 {
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--dim);
  margin: 0 0 8px;
}
.faq-q { border-bottom: 1px solid var(--line); }
.faq-q summary {
  cursor: pointer;
  padding: 11px 2px;
  font-weight: 600;
  font-size: 15px;
  list-style: none;
}
.faq-q summary::-webkit-details-marker { display: none; }
.faq-q summary::before {
  content: "+";
  color: var(--dim);
  display: inline-block;
  width: 18px;
  font-weight: 400;
}
.faq-q[open] summary::before { content: "\2212"; }
.faq-q p {
  margin: 0 0 14px 18px;
  color: var(--dim);
  line-height: 1.6;
  max-width: 64ch;
}
.faq-none { display: none; color: var(--dim); font-size: 14px; }
.faq-none button {
  background: none;
  border: 0;
  padding: 0 2px;
  color: inherit;
  text-decoration: underline;
}

/* ---- the JTS mark ------------------------------------------------------ */
.jts-mark {
  width: 30px;
  height: 30px;
  display: block;
  flex: 0 0 auto;
  /* takes the header's own colour, so it cannot end up the wrong shade */
  color: inherit;
}

/* ---- the worked example, the founding offer, the legal pages ---------- */
.tbl.eg { width: 100%; max-width: 560px; margin: 6px 0 18px; }
.tbl.eg td { padding: 7px 4px; }
.tbl.eg td.num { text-align: right; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.tbl.eg tr.rule td { border-top: 1px solid var(--line); }
.tbl.eg tr.big td { font-size: 17px; font-weight: 700; padding-top: 10px; }
/* The most persuasive sentence on the site, so it is treated as such. */
.punch {
  font-size: 19px;
  line-height: 1.6;
  max-width: 62ch;
  margin: 18px 0 10px;
  padding: 16px 18px;
  border-left: 3px solid var(--accent);
  border-radius: 0 12px 12px 0;
  background: linear-gradient(90deg, rgba(53, 196, 107, .10), transparent 70%);
}
.punch b { color: #6ee79b; font-size: 21px; letter-spacing: -.4px; }
.tbl.eg tr.big td { color: var(--ink); }
.tbl.eg tr.big + tr.big td { color: #6ee79b; }
.founding { border: 1px solid var(--accent, #7fb0ff); }
.legal h2 { font-size: 16px; margin: 22px 0 6px; }
.legal p, .legal li { color: var(--dim); line-height: 1.65; max-width: 66ch; }
.legal ul { margin: 0 0 0 18px; }
footer.foot { text-align: center; padding: 30px 16px 46px; }
footer.foot a { color: var(--dim); }
footer.foot a:hover { color: var(--ink); }
footer.foot .tiny { margin-top: 8px; }
.pill { font-size: 11px; background: var(--line); color: var(--ink);
  border-radius: 20px; padding: 2px 9px; margin-left: 8px;
  vertical-align: middle; }

/* The "keep me signed in" tick. The global `input{width:100%}` rule would
   stretch a checkbox across the whole row, so it is reset on the ELEMENT --
   a class-keyed reset misses any checkbox added here later. */
.tickrow {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: var(--dim);
  font-size: 14.5px;
}
.tickrow input[type="checkbox"] {
  width: auto;
  margin: 0;
  accent-color: var(--accent);
  flex: none;
}