/* meetoverchai.com — the landing page.
 *
 * Dark by default, on the portal's own dark palette, so the journey from here into
 * /event-registration doesn't change character halfway through. Light survives only as an
 * explicit opt-in; nothing switches it automatically.
 */

:root{
  --paper:#12100D;
  --paper-2:#1B1815;
  --ink:#F2ECE2;
  --ink-2:#C4B9AA;
  --muted:#9A8D7D;
  --line:#2E2822;
  --line-2:#413931;
  --green:#3E9C63;
  --green-lift:#57BC7D;
  --red:#E0555B;
  --r:3px;
  --maxw:720px;
}
:root[data-theme="light"]{
  --paper:#FAF6EF; --paper-2:#FFFFFF; --ink:#16130F; --ink-2:#4A423A; --muted:#6B6157;
  --line:#E4DCD0; --line-2:#D3C7B6; --green:#004B1D; --green-lift:#0A6B31; --red:#AE090F;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink); color-scheme:dark;
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
:root[data-theme="light"] body{ color-scheme:light; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding:36px 22px 0; }

h1,h2{ font-family:'Poppins','Inter',system-ui,sans-serif; font-weight:600;
       line-height:1.18; text-wrap:balance; margin:0; }
em{ font-style:normal; color:var(--green-lift); }

/* The wordmark is red and green ink on light, so on a dark page it gets a plate rather
   than a filter. It is never recoloured or inverted. */
/* Brand and the member sign-in share a row. `align-items:flex-start` keeps the wordmark's
   white plaque tight to the mark rather than stretching it to the row height. */
.top{ display:flex; align-items:flex-start; justify-content:space-between;
      gap:16px; margin-bottom:34px; }
.brand{ display:inline-block; line-height:0; background:#fff;
        border-radius:2px; padding:8px 12px; }
.brand img{ display:block; width:170px; height:auto; }

/* A utility link, not a call to action — see the comment in index.html. Muted until
   hovered, no border, no fill: it should read as plumbing to anyone who is not looking
   for it. `white-space:nowrap` so it never wraps to two lines beside the mark. */
.signin{
  flex:none; margin-top:6px; white-space:nowrap;
  font-size:13.5px; font-weight:500; color:var(--muted); text-decoration:none;
  padding:7px 12px; border-radius:var(--r);
}
.signin:hover{ color:var(--ink); background:var(--paper-2); }
@media (max-width:420px){
  /* On a narrow screen the mark and the link stop fitting side by side comfortably; the
     link drops under it rather than shrinking the wordmark, which is never resized. */
  .top{ flex-direction:column; align-items:flex-start; gap:4px; }
  .signin{ margin-top:0; padding-left:0; }
}

.kicker{
  font-size:11.5px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); font-weight:600; margin:0 0 12px;
}

/* ------------------------------------------------------------------- hero */

.hero h1{ font-size:clamp(26px,5.4vw,40px); }
.lede{ font-size:16.5px; color:var(--ink-2); margin:18px 0 0; max-width:60ch; }

.next{
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  background:var(--paper-2); border:1px solid var(--line);
  border-left:3px solid var(--green);
  border-radius:var(--r); padding:14px 18px; margin:26px 0 22px;
}
.next-label{
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--muted); font-weight:700;
}
.next strong{
  font-family:'Poppins','Inter',sans-serif; font-size:17px; font-weight:600;
}
.next-sub{ font-size:13px; color:var(--muted); }

/* One primary action, with the free line beside it.
 * `align-items:center` rather than `baseline` so the dot and the button agree vertically;
 * the wrap means that on a narrow screen the line drops under the button instead of
 * squeezing it, which is the one place it must not compete for width. */
.cta{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:inherit; font-size:15px; font-weight:600; text-decoration:none;
  padding:13px 24px; border-radius:var(--r); border:1px solid transparent;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.btn-go{ background:var(--green); color:#fff; }
.btn-go:hover{ background:var(--green-lift); }
.btn-ghost{ border-color:var(--line-2); color:var(--ink); }
.btn-ghost:hover{ border-color:var(--green); color:var(--green-lift); }
.btn-big{ font-size:16.5px; padding:15px 30px; }
/* Loud enough to be read as part of the offer, quiet enough not to look like a second
   button. Weight and colour do the work, not size — a green pill next to a green button
   would read as two things to choose between, which is the problem this replaced. */
.cta-free{
  display:inline-flex; align-items:center; gap:9px; margin:0;
  font-size:15.5px; font-weight:700; color:var(--green-lift); letter-spacing:.01em;
}
.cta-free::before{
  content:""; flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--green-lift);
}

.cta-note{ font-size:13px; color:var(--muted); margin:14px 0 0; }
/* The stalling route, kept but demoted: underlined text at footnote size, not a button. */
.cta-note a{ color:var(--ink-2); text-decoration:underline; text-underline-offset:3px;
             text-decoration-thickness:1px; }
.cta-note a:hover{ color:var(--green-lift); }

/* ------------------------------------------------------------ photo strip
 * Full-bleed out of the centred column. A band of a real room is the strongest argument
 * on the page and boxing it into 720px would waste it. */

.strip{
  margin:44px calc(50% - 50vw); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.strip-track{
  display:flex; gap:12px; width:max-content;
  animation:marquee 46s linear infinite;
}
.strip:hover .strip-track{ animation-play-state:paused; }
@keyframes marquee{
  from{ transform:translateX(0) }
  /* The track is written twice, so -50% is exactly one pass and the seam never shows. */
  to  { transform:translateX(-50%) }
}
/* Fixed height, not auto: a percentage translate against images that have not decoded
   resolves to almost nothing, and the strip reads as frozen. */
.strip-track img{
  display:block; height:150px; width:auto; object-fit:cover;
  border-radius:var(--r); filter:saturate(1.03);
}
@media (min-width:760px){ .strip-track img{ height:190px; } }
/* The marquee is the page's only autonomous motion, and auto-scrolling images are a real
   problem for some people rather than a preference — so it stops, and the strip becomes a
   band you scroll yourself. Nothing is hidden: the same six photographs are all still
   reachable, by hand instead of on a timer.
   `scroll-behavior` is reset here too. It is set globally on <html>, which means the
   in-page anchors animate; under this preference they should jump. */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .strip-track{ animation:none; }
  .strip{ overflow-x:auto; }
}

/* --------------------------------------------------------------- sections */

section + section{ margin-top:52px; }
h2{ font-size:clamp(21px,3.6vw,27px); margin-bottom:18px; }

.steps{ list-style:none; margin:0; padding:0; counter-reset:s; }
.steps li{
  counter-increment:s; position:relative; padding:0 0 20px 44px;
}
.steps li::before{
  content:counter(s); position:absolute; left:0; top:0;
  width:27px; height:27px; border-radius:50%;
  background:var(--paper-2); border:1px solid var(--line-2); color:var(--green-lift);
  font-size:12.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.steps li::after{
  content:""; position:absolute; left:13px; top:30px; bottom:2px; width:1px;
  background:var(--line);
}
.steps li:last-child{ padding-bottom:0; }
.steps li:last-child::after{ display:none; }
.steps b{ display:block; font-size:15.5px; margin-bottom:2px; }
.steps span{ display:block; color:var(--ink-2); font-size:14.5px; }
.shape-note{ font-size:13.5px; color:var(--muted); margin:6px 0 0; }

.rule-grid,.soon-grid{
  display:grid; gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.rule-grid > div,.soon-grid > div{
  background:var(--paper-2); border:1px solid var(--line);
  border-radius:var(--r); padding:17px 19px;
}
.rule-grid b,.soon-grid b{ display:block; font-size:15px; margin-bottom:5px; }
.rule-grid span,.soon-grid span{ display:block; color:var(--ink-2); font-size:14px; }

/* The in-design tag. Same device the full site uses on its unbuilt sections — a landing
   page that over-claims is the fastest way to lose the room it just won. */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; font-weight:700;
  color:var(--red); margin-bottom:9px;
}
.tag::before{
  content:""; width:5px; height:5px; border-radius:50%; background:var(--red);
}
.soon .lede{ margin-bottom:22px; }
.soon-note{ font-size:13.5px; color:var(--muted); margin:16px 0 0; }

.end{
  text-align:center; padding:44px 0 8px;
  border-top:1px solid var(--line); margin-top:56px;
}
.end p{ color:var(--ink-2); margin:0 0 22px; }

footer{
  margin-top:52px; padding:26px 0 44px;
  border-top:1px solid var(--line);
  font-size:13px; color:var(--muted);
}
.social{ display:flex; gap:20px; flex-wrap:wrap; margin-bottom:16px; }
.social a{ color:var(--ink-2); text-decoration:none; font-weight:600; }
.social a:hover{ color:var(--green-lift); }
footer p{ margin:0 0 6px; }
.fine{ font-size:12px; opacity:.75; max-width:56ch; }

/* The second way in, for somebody who scrolls to the bottom looking for it rather than
   up to the corner. Same weight as the social links it sits above. */
.foot-link{ color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--line-2); }
.foot-link:hover{ color:var(--ink); }