/* =====================================================
   My Humdum · coming soon
   Standalone. Nothing here is shared with the app, but every
   value is lifted from the product's Brand & Design Guidelines
   v1.0 so the two read as one brand:
   cream page, ink text, one maroon accent, gold as decoration
   only, Cormorant Garamond over Plus Jakarta Sans.

   THE PAGE NEVER SCROLLS. The shell is a three row grid pinned
   to the viewport height, and every size below is a clamp so
   the middle row shrinks instead of overflowing. Short windows
   are handled by the max-height blocks at the end: if you add
   anything to the stage, re-measure against a 600px tall
   viewport before shipping it.
   ===================================================== */

:root {
  --cs-page: #FAF9F6;                    /* the cream canvas */
  --cs-ink: #1A1A1A;                     /* all primary text */
  --cs-muted: #71717A;                   /* secondary text, never long body */
  --cs-accent: #8B2635;                  /* the one voice of action */
  --cs-accent-deep: #6E1E2A;             /* pressed maroon */
  --cs-accent-tint: rgba(139, 38, 53, 0.06);
  --cs-gold: #D4AF37;                    /* DECORATIVE ONLY. Never sets type. */
  --cs-gold-tint: rgba(212, 175, 55, 0.18);
  --cs-surface: #FFFFFF;
  --cs-hairline: rgba(26, 26, 26, 0.08);
  --cs-danger: #B42318;
  --cs-success: #4F7A46;

  --cs-sans: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --cs-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --cs-track-label: 0.16em;              /* every uppercase label */
  --cs-track-eyebrow: 0.28em;            /* eyebrows and kickers only */
  --cs-ease-calm: cubic-bezier(0.22, 1, 0.36, 1);
  --cs-ease-spring: cubic-bezier(0.34, 1.4, 0.4, 1);
}

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

/* The hidden attribute only sets display:none at user-agent specificity, so any
   component rule with a display of its own quietly beats it. This is what makes
   `field.hidden = true` actually hide the field after a successful signup. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  margin: 0;
  /* the whole point of the page: it is a single screen, not a document */
  overflow: hidden;
}

body {
  min-height: 100dvh;
  background: var(--cs-page);
  color: var(--cs-ink);
  font-family: var(--cs-sans);
  font-size: 16px;                        /* the product's body floor */
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--cs-accent); color: #fff; }

img { max-width: 100%; }

a { color: inherit; text-decoration: none; }

/* Visually hidden, still read aloud. */
.cs-sr {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

/* ---------- the soft colour wash ---------- */
/* Two blurred discs, the landing hero's own device. They sit behind everything
   and are pushed off the corners so no hard edge is ever visible. */
.cs-glow {
  position: fixed;
  border-radius: 50%;
  filter: blur(64px);
  pointer-events: none;
  z-index: 0;
}
/* Kept faint on purpose. The page should read as calm cream with a warmth in the
   corners: anything stronger turns the whole canvas a muddy pink. */
.cs-glow-gold {
  top: -150px; right: -130px;
  width: clamp(220px, 32vw, 400px); height: clamp(220px, 32vw, 400px);
  background: rgba(212, 175, 55, 0.10);
}
.cs-glow-rose {
  bottom: -170px; left: -140px;
  width: clamp(200px, 30vw, 380px); height: clamp(200px, 30vw, 380px);
  background: rgba(139, 38, 53, 0.07);
}

/* ---------- shell ---------- */
/* Header and footer take exactly the room they need, the stage takes the rest
   and centres inside it. That is what keeps the page to one screen at any height. */
.cs-shell {
  position: relative;
  z-index: 1;
  height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: clamp(20px, 3.2vh, 34px) clamp(20px, 5vw, 48px);
  gap: clamp(12px, 2vh, 24px);
}

/* ---------- header ---------- */
.cs-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.cs-logo { display: inline-flex; align-items: center; gap: 13px; }
.cs-mark {
  height: clamp(34px, 4.6vh, 46px); width: auto; display: block;
  transition: transform 0.45s var(--cs-ease-spring);
}
.cs-logo:hover .cs-mark { transform: scale(1.06) rotate(-2deg); }
.cs-word { height: clamp(17px, 2.4vh, 24px); width: auto; display: block; }

.cs-headlink {
  font-size: 12px; font-weight: 700;
  letter-spacing: var(--cs-track-label); text-transform: uppercase;
  color: rgba(26, 26, 26, 0.55);
  padding-bottom: 3px;
  border-bottom: 1px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.cs-headlink:hover { color: var(--cs-accent); border-bottom-color: var(--cs-gold); }

/* ---------- the stage ---------- */
/* Centred with an auto margin rather than place-items, because a centred grid or
   flex item that grows past its container gets its TOP clipped with no way to
   reach it. An auto margin centres identically and stays reachable.
   The overflow is a safety valve, not a feature: after the compaction blocks at
   the end of this file nothing reaches it at any size tested, but a visitor
   running very large text should never lose the form to a clip. */
.cs-main {
  display: flex;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;                   /* so the page still reads as one screen */
}
.cs-main::-webkit-scrollbar { display: none; }
/* Wide enough that the three trust points hold one line at desktop. The title and
   the sub carry their own narrower caps, so only that row uses the full width. */
.cs-stage {
  margin: auto;
  width: 100%;
  max-width: 780px;
  text-align: center;
}

/* eyebrow */
.cs-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 17px;
  background: var(--cs-accent-tint);
  border-radius: 999px;
  font-size: 11px; font-weight: 700;
  letter-spacing: var(--cs-track-eyebrow); text-transform: uppercase;
  color: var(--cs-accent);
}
.cs-eyebrow-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--cs-accent);
  animation: csPulse 2s ease-in-out infinite;
}
@keyframes csPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

/* headline.
   The ink gradient is clipped to the glyphs. Anything outside the paint box gets
   no paint at all, which slices the descender off the "g" in "begins", so the box
   is extended by padding and the margin gives the space back. Layout is unchanged. */
.cs-title {
  max-width: 700px;
  margin: clamp(20px, 3.4vh, 34px) auto calc(clamp(14px, 2.2vh, 22px) - 0.12em);
  padding-bottom: 0.12em;
  font-family: var(--cs-serif);
  font-size: clamp(2.15rem, 5.4vw, 3.9rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
  background: linear-gradient(135deg, #1A1A1A 0%, #4A4A4A 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* A block, so the break is always the one we chose: the ink half on top, the
   maroon half beneath it. Left inline it wraps wherever the width happens to
   run out, which stranded the word "soon." on a line of its own. */
.cs-title .cs-italic {
  display: block;
  font-style: italic;
  color: var(--cs-accent);
  -webkit-text-fill-color: initial;
}

.cs-sub {
  max-width: 580px;
  margin: 0 auto;
  text-wrap: pretty;                       /* keeps a single word off the last line */
  font-size: clamp(0.98rem, 1.7vw, 1.16rem);
  font-weight: 300;
  line-height: 1.62;
  color: var(--cs-muted);
}

/* ---------- notify form ---------- */
.cs-form { margin: clamp(24px, 4vh, 40px) auto 0; max-width: 480px; }

/* One pill holding the field and the button, so the pair reads as a single control. */
.cs-field {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 7px 7px 8px;
  background: var(--cs-surface);
  border: 1px solid var(--cs-hairline);
  border-radius: 999px;
  box-shadow: 0 10px 30px -18px rgba(26, 26, 26, 0.4);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Focus lives on the pill, not the bare input, so the whole control lights up.
   Border plus glow, which is how every field in the product marks focus. */
.cs-field:focus-within {
  border-color: rgba(139, 38, 53, 0.4);
  box-shadow: 0 0 0 4px rgba(139, 38, 53, 0.08), 0 10px 30px -18px rgba(26, 26, 26, 0.4);
}
.cs-field.is-bad { border-color: var(--cs-danger); }

.cs-input {
  flex: 1 1 auto;
  min-width: 0;                            /* or a long address blows the pill open */
  padding: 12px 10px 12px 14px;
  border: 0; outline: none; background: transparent;
  font-family: inherit; font-size: 15px; font-weight: 500;
  color: var(--cs-ink);
}
.cs-input::placeholder { color: #A8A29E; font-weight: 400; }

.cs-go {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--cs-accent); color: #fff;
  font-family: inherit; font-size: 12px; font-weight: 700;
  letter-spacing: var(--cs-track-label); text-transform: uppercase;
  white-space: nowrap;
  transition: background 0.3s ease, transform 0.2s var(--cs-ease-calm);
}
.cs-go:hover { background: var(--cs-ink); }
.cs-go:active { transform: scale(0.98); }
.cs-go:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 3px; }
.cs-go[disabled] { opacity: 0.6; cursor: default; }
.cs-go-ico { width: 15px; height: 15px; flex: 0 0 auto; }

.cs-note {
  margin: 14px 0 0;
  font-size: 13px; font-weight: 500;
  color: var(--cs-muted);
  min-height: 1.4em;                       /* reserve the line so a reply never shifts the page */
}
.cs-note.is-ok { color: var(--cs-success); font-weight: 600; }
.cs-note.is-bad { color: var(--cs-danger); font-weight: 600; }

/* ---------- trust points ---------- */
.cs-points {
  list-style: none;
  margin: clamp(22px, 3.6vh, 38px) 0 0;
  padding: 0;
  display: flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 12px clamp(18px, 3vw, 34px);
}
.cs-points li {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 600;          /* the product's label floor: three fit one line here */
  letter-spacing: var(--cs-track-label); text-transform: uppercase;
  color: rgba(26, 26, 26, 0.62);
}
.cs-tick {
  flex: 0 0 auto;
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cs-gold-tint);
  color: var(--cs-gold);                   /* gold as a tick, never as the word */
}
.cs-tick svg { width: 11px; height: 11px; }

/* ---------- footer ---------- */
.cs-foot {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 8px 20px;
  font-size: 12px; font-weight: 500;
  color: rgba(26, 26, 26, 0.42);
}
.cs-foot-mini { display: inline-flex; align-items: center; gap: 10px; }
.cs-dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--cs-gold);
}

/* ---------- narrow ---------- */
@media (max-width: 620px) {
  .cs-headlink { display: none; }          /* the footer already carries the way to reach us */
  .cs-field {
    flex-direction: column;                /* side by side leaves the input too narrow to read */
    align-items: stretch;
    gap: 6px;
    padding: 8px;
    border-radius: 26px;
  }
  .cs-input { padding: 12px 14px; text-align: center; }
  .cs-go { justify-content: center; padding: 14px 24px; }
  /* One under the other, and the block as a whole centred. Left as a wrapping
     row each line centres on its own width, so the ticks stagger down the page
     instead of forming a column. */
  .cs-points {
    flex-direction: column;
    align-items: flex-start;
    width: fit-content;
    margin-inline: auto;
    gap: 10px;
  }
  .cs-points li { font-size: 11px; }
  .cs-foot { justify-content: center; text-align: center; }
}

@media (max-width: 400px) {
  .cs-foot-mini { display: none; }         /* keeps the footer to one line */
}

/* ---------- short viewports ----------
   The clamps carry most of it. These trim the largest gaps so a laptop window
   or a landscape phone still fits without a scrollbar. */
@media (max-height: 720px) {
  .cs-title { font-size: clamp(2rem, 5.4vw, 3.2rem); }
  .cs-sub { font-size: 1rem; }
  .cs-form { margin-top: 22px; }
  .cs-points { margin-top: 20px; }
}

@media (max-height: 560px) {
  .cs-shell { padding: 16px clamp(16px, 5vw, 40px); gap: 10px; }
  .cs-title { font-size: clamp(1.7rem, 4.6vw, 2.4rem); margin-top: 14px; }
  .cs-sub { font-size: 0.94rem; }
  .cs-eyebrow { padding: 6px 14px; }
  .cs-form { margin-top: 16px; }
  .cs-note { margin-top: 10px; font-size: 12px; }
  .cs-points { margin-top: 14px; }
  .cs-glow { display: none; }              /* a blur this large is the one real cost on a small device */
}

/* A small older phone is narrow AND short at once, which is the only combination
   that genuinely runs out of room: the sub wraps to four lines, the field stacks
   into two rows and the trust points into three. Measured at 320x568, the row is
   the difference between fitting and clipping, and it is the one thing here the
   sentence above it already says. */
@media (max-width: 400px) and (max-height: 620px) {
  .cs-points { display: none; }
}

/* Landscape phones are shorter still: keep the brand, the promise and the form. */
@media (max-height: 460px) {
  .cs-points { display: none; }
  .cs-sub { display: none; }
}

/* ---------- motion ---------- */
/* One quiet entrance. Nothing loops except the eyebrow dot, and reduced motion
   turns all of it off. */
@media (prefers-reduced-motion: no-preference) {
  .cs-stage > * { animation: csRise 0.7s var(--cs-ease-calm) both; }
  .cs-title { animation-delay: 0.06s; }
  .cs-sub { animation-delay: 0.12s; }
  .cs-form { animation-delay: 0.18s; }
  .cs-points { animation-delay: 0.24s; }
  .cs-head, .cs-foot { animation: csFade 0.9s ease both; }
}
@keyframes csRise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
@keyframes csFade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}