/* 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-bg { fill: var(--bg); } .f-surface { fill: var(--surface); }
.f-line { fill: var(--line); } .f-soft { fill: var(--soft); } .f-white { fill: #ffffff; }
.f-coral { fill: var(--coral); } .f-deep { fill: var(--coral-deep); }
.f-task { fill: var(--task); } .f-idea { fill: var(--idea); } .f-reminder { fill: var(--reminder); } .f-note { fill: var(--note); }
.f-none { fill: none; }
.s-fg { stroke: var(--fg); } .s-ink { stroke: var(--ink); } .s-white { stroke: #ffffff; } .s-soft { stroke: var(--soft); }
.s-coral { stroke: var(--coral); } .s-reminder { stroke: var(--reminder); } .s-line { stroke: var(--line); }
.s-task { stroke: var(--task); } .s-idea { stroke: var(--idea); } .s-note { stroke: var(--note); }
.w18 { stroke-width: 1.8; } .w23 { stroke-width: 2.3; } .w27 { stroke-width: 2.7; }
.w32 { stroke-width: 3.2; } .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); }
@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;
}
.story svg { width: 88px; height: 88px; }
.story .when { font-weight: 600; font-size: 0.9375rem; color: var(--soft); }
.story .what { font-size: 1.125rem; line-height: 1.35; margin-top: 2px; }
@media (min-width: 720px) {
  .story { grid-template-columns: 1fr 1fr 1fr; }
  .story li { grid-template-columns: 1fr; text-align: center; justify-items: center; padding: 20px 16px; }
}

/* The form */
.form { margin-top: 32px; display: grid; gap: 12px; }
.form label { font-weight: 600; }
.field {
  width: 100%; 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; }

/* 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;
  padding: 14px 12px 10px; display: grid; gap: 10px; font-size: 13px; line-height: 1.3; text-align: left; align-content: start;
}
.ui-top { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; }
.ui-top .mark { width: 15px; height: 20px; }
.ui-label { font-weight: 600; font-size: 11px; color: var(--soft); }
.ui-card { background: var(--surface); border-radius: 14px; padding: 10px; }
.ui-card .big { font-weight: 600; font-size: 14px; }
.ui-row { display: flex; align-items: center; gap: 8px; border-radius: 14px; padding: 7px 10px; color: #ffffff; font-weight: 600; }
.ui-row svg, .ui-chip svg { width: 20px; height: 20px; flex: none; }
.ui-row.k-task { background: var(--task); } .ui-row.k-idea { background: var(--idea); }
.ui-row.k-reminder { background: var(--reminder); } .ui-row.k-note { background: var(--note); }
.ui-rows { display: grid; gap: 6px; }
.ui-talk { justify-self: center; width: 64px; height: 64px; margin-top: 2px; }
.ui-hint { text-align: center; font-weight: 600; font-size: 11px; color: var(--soft); }
.ui-tabs { display: grid; grid-template-columns: 1fr 1fr 1fr; justify-items: center; gap: 4px; border-top: 2px solid var(--line); padding-top: 8px; font-size: 10px; font-weight: 600; }
.ui-tabs span { display: grid; justify-items: center; gap: 2px; align-content: start; }
.ui-tabs svg { width: 22px; height: 22px; }
.ui-tabs .under { width: 24px; height: 6px; }
.ui-box { border: 2px solid var(--soft); border-radius: 12px; padding: 8px 10px; }
.ui-meta { font-size: 11px; color: var(--soft); }
.ui-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ui-chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 12px; padding: 4px 9px; color: #ffffff; font-weight: 600; font-size: 12px; }
.ui-chip.k-task { background: var(--task); } .ui-chip.k-idea { background: var(--idea); }
.ui-chip.k-reminder { background: var(--reminder); } .ui-chip.k-note { background: var(--note); }
.ui-chip.is-off { background: transparent; color: var(--fg); border: 2px solid var(--soft); padding: 2px 7px; }
.ui-buttons { display: flex; gap: 6px; }
.ui-btn { display: inline-flex; align-items: center; gap: 4px; border-radius: 16px; padding: 6px 12px; font-weight: 600; font-size: 12px; }
.ui-btn.is-deep { background: var(--coral-deep); color: #ffffff; }
.ui-btn.is-plain { background: var(--surface); color: var(--fg); }
.ui-btn svg { width: 14px; height: 14px; }
.ui-swipe { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
.ui-swipe span { text-align: center; border-radius: 14px; padding: 7px 4px; font-weight: 600; font-size: 11px; background: var(--surface); }
.ui-swipe .is-deep { background: var(--coral-deep); color: #ffffff; }
.ui-count { display: inline-block; background: var(--coral-deep); color: #ffffff; border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 600; }
.f-ink { fill: var(--ink); }
.ui-h { font-weight: 600; font-size: 15px; }
.ui-toast { display: flex; justify-content: space-between; gap: 8px; background: var(--fg); color: var(--bg); border-radius: 14px; padding: 8px 10px; font-weight: 600; font-size: 12px; }

/* 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); }
.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; }

/* 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: 16px; margin-top: 8px; }

/* 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; }

/* Text links that act as controls get a 44 px tap target without changing how they read. */
.footer a, #lock .after a, body.plain a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.footer ul { gap: 4px 24px; }