/* scribloq.com: one stylesheet. Light and dark come from the phone's setting. */

@font-face {
  font-family: "Grandstander";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/grandstander-latin-wght-normal.woff2") format("woff2");
}

:root {
  --bg: #f9f7f3;
  --fg: #222222;
  --soft: #5c5651;
  --surface: #f0eae2;
  --line: #e4dcd3;
  --coral: #d9472f;
  --coral-deep: #b83a25;
  --link: #b83a25;
  --task: #a85a4c;
  --idea: #8f6b1e;
  --reminder: #2a7d70;
  --note: #6d59a6;
  --ink: #222222;
  --font: "Grandstander", ui-rounded, "Trebuchet MS", system-ui, sans-serif;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161514;
    --fg: #ffffff;
    --soft: #b8b0a6;
    --surface: #242220;
    --line: #33302c;
    --coral: #e2573f;
    --link: #e2573f;
  }
}

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

html {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 100%;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
}
body { margin: 0; font-size: 1.0625rem; }
svg { display: block; }
a { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid var(--link); outline-offset: 3px; }
h1, h2, h3 { font-weight: 600; line-height: 1.2; margin: 0; }
p, ul, ol { margin: 0; }
button, input { font: inherit; }

.wrap { width: 100%; max-width: 680px; margin: 0 auto; padding: 0 20px; }
.section { padding: 48px 0; border-top: 2px solid var(--line); }
.section h2 { font-size: 1.625rem; margin-bottom: 16px; }
.lead { font-size: 1.1875rem; }
.soft { color: var(--soft); }
.stack > * + * { margin-top: 12px; }
.after { margin-top: 16px; }
.is-hidden { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* SVG colour utilities: every colour in a drawing comes from here, never from an attribute. */
.f-fg { fill: var(--fg); } .f-line { fill: var(--line); } .f-white { fill: #ffffff; } .f-ink { fill: var(--ink); }
.f-coral { fill: var(--coral); } .f-reminder { fill: var(--reminder); }
.f-none { fill: none; }
.s-fg { stroke: var(--fg); } .s-ink { stroke: var(--ink); } .s-white { stroke: #ffffff; } .s-coral { stroke: var(--coral); }
.w18 { stroke-width: 1.8; } .w27 { stroke-width: 2.7; } .w36 { stroke-width: 3.6; } .w54 { stroke-width: 5.4; }
.round { stroke-linecap: round; stroke-linejoin: round; }
.joinr { stroke-linejoin: round; }

/* The mark */
.mark { width: 30px; height: 40px; flex: none; }
.mark-loop { fill: none; stroke: var(--fg); stroke-width: 6; stroke-linecap: round; }
.mark-body { fill: var(--coral); }
.mark-wave { fill: none; stroke: #ffffff; stroke-width: 3.6; stroke-linecap: round; }

/* Top bar */
.bar { display: flex; align-items: center; gap: 10px; padding-block: 16px; }
.bar .name { font-weight: 800; font-size: 1.5rem; }

/* Hero */
.hero { padding-block: 16px 48px; }
.title { font-size: 2rem; line-height: 1.15; letter-spacing: -0.01em; }
.sub { margin-top: 16px; font-size: 1.1875rem; color: var(--soft); text-wrap: balance; }
@media (min-width: 720px) { .title { font-size: 2.625rem; } }

/* The comeback story: three stickers */
.story { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 14px; }
.story li {
  display: grid; grid-template-columns: 88px 1fr; gap: 16px; align-items: center;
  background: var(--surface); border-radius: 22px; padding: 14px 16px; overflow-wrap: anywhere;
}
.story svg { width: 88px; height: 88px; }
.story .when { font-weight: 600; font-size: 0.9375rem; color: var(--soft); text-wrap: balance; }
.story .what { font-size: 1.125rem; line-height: 1.35; margin-top: 2px; text-wrap: balance; }
@media (min-width: 720px) {
  .story { grid-template-columns: 1fr 1fr 1fr; }
  .story li { grid-template-columns: 1fr; text-align: center; justify-items: center; align-items: start; align-content: start; padding: 20px 16px; }
}


/* The form */
.form { margin-top: 32px; display: grid; gap: 12px; }
.form label { font-weight: 600; }
.field {
  width: 100%; min-width: 0; min-height: 56px; padding: 12px 18px;
  font-size: 1.125rem; color: var(--fg); background: var(--bg);
  border: 2px solid var(--soft); border-radius: 28px;
}
.field::placeholder { color: var(--soft); opacity: 1; }
.honey { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 56px; min-width: 44px; padding: 10px 28px;
  font-size: 1.5rem; font-weight: 600; line-height: 1.1;
  color: #ffffff; background: var(--coral); border: 0; border-radius: 28px;
  cursor: pointer; text-decoration: none;
}
.pill--small { min-height: 44px; padding: 8px 20px; font-size: 1.125rem; background: var(--coral-deep); }
/* While a join is on its way the label says so; the colour stays (the brand has no see-through colour). */
.pill.is-busy { cursor: progress; }
.promise { margin-top: 12px; font-size: 0.9375rem; color: var(--soft); }
.note { margin-top: 12px; font-size: 1.0625rem; color: var(--fg); background: var(--surface); border-radius: 14px; padding: 12px 16px; }
.confirm { margin-top: 32px; background: var(--surface); border-radius: 22px; padding: 20px; }
.confirm h2 { font-size: 1.5rem; margin-bottom: 8px; }
/* These lines can hold an email address, one long word: it breaks rather than runs off the screen at large text sizes. */
.promise, .note, .confirm { overflow-wrap: anywhere; }

/* The three screens */
.screens { list-style: none; margin: 0; padding: 0; display: grid; gap: 32px; }
.screens li { display: grid; gap: 14px; justify-items: start; align-content: start; }
.screens h3 { font-size: 1.375rem; }
@media (min-width: 720px) {
  .screens { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 20px; }
  .screens li { justify-items: center; text-align: center; }
  .screens li { grid-row: span 3; grid-template-rows: subgrid; }
}
.phone {
  width: 100%; max-width: 240px; background: var(--bg); border: 3px solid var(--fg); border-radius: 30px;
}
/* Real screenshots of the app in a frame at the phone's own proportions (status and navigation bars cropped off).
   The picture keeps its own height: stretched to fill the frame it would grow by 1%. */
.phone--shot { padding: 0; overflow: hidden; aspect-ratio: 1080 / 2103; max-width: 300px; }
#how .wrap { max-width: 1080px; }
@media (min-width: 720px) { .phone--shot { max-width: 320px; } }
.phone--shot img { display: block; width: 100%; height: auto; object-fit: cover; }

/* What the lock promises */
.lock { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lock li { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: start; }
.lock svg { width: 44px; height: 44px; }
.lock .lead { font-weight: 600; }

/* Free and Pro */
.plans { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 8px; }
.plans th, .plans td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 2px solid var(--line); overflow-wrap: anywhere; }
.plans th { font-weight: 600; font-size: 1.1875rem; }
.plans th .price { display: block; font-weight: 400; font-size: 1rem; color: var(--soft); }
.plans tr:last-child td { border-bottom: 0; }

/* Founder */
.founder .big { font-size: 1.5rem; font-weight: 600; }
.founder .cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.founder .cta span { flex: 1 1 16rem; }

/* Footer (the bottom padding keeps the links clear of the floating pill: 44 px tall, 16 px up) */
.footer { padding: 32px 0 96px; border-top: 2px solid var(--line); font-size: 0.9375rem; color: var(--soft); }
.footer ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 24px; margin-top: 8px; }
.footer a, body.plain a { overflow-wrap: anywhere; }

/* The floating pill */
.float {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 10; white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .float { transition: transform 240ms ease, opacity 240ms ease, visibility 0s; }
  .float.is-hidden { display: inline-flex !important; opacity: 0; transform: translate(-50%, 120%); pointer-events: none; visibility: hidden; transition: transform 240ms ease, opacity 240ms ease, visibility 0s linear 240ms; }
}

/* The plain pages the Worker answers a form post with */
body.plain main { max-width: 640px; margin: 0 auto; padding: 32px 20px 64px; }
body.plain h1 { font-size: 1.875rem; margin-bottom: 12px; }
body.plain p + p { margin-top: 16px; }
body.plain h2 { font-size: 1.375rem; line-height: 1.25; margin: 32px 0 8px; }
body.plain .when { margin: 0 0 32px; color: var(--soft); }
/* The company line that ends the terms page, and the filled button for the Founder page: white on Coral deep, 4.5 to 1 at any size. */
body.plain .who { margin-top: 32px; font-size: 0.9375rem; color: var(--soft); }
.button, body.plain .button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 8px 20px;
  font-size: 1.125rem; font-weight: 600; line-height: 1.1;
  color: #ffffff; background: var(--coral-deep); border: 0; border-radius: 28px;
  text-decoration: none;
}

/* Text links that act as controls get a 44 px tap target. The links keep their look, and a sentence that wraps gets a little more line spacing. */
.footer a, #lock .after a, body.plain a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }

/* Lists on a plain page (the beta page): the browser's own markers, indented a little, with room between the items and around the list. */
body.plain ul, body.plain ol { padding-left: 24px; }
body.plain li + li { margin-top: 12px; }
body.plain p + ul, body.plain p + ol, body.plain ul + p, body.plain ol + p { margin-top: 16px; }
/* Inside a list item the links sit in running text (the store links on the beta page): they wrap like words, not as 44 px boxes that strand the punctuation after them. */
body.plain li a { display: inline; min-height: 0; min-width: 0; }