/* Sold — marklaurie.uk — homepage-specific styles (v2 redesign)
   Loads after assets/site.css and overrides/extends it for the homepage only.
   Everything shared across pages (tokens, layout shell, base components,
   utility pages) stays in site.css untouched. */

/* --- Sticky CTA bar. Appears once the signup card scrolls out of view. --- */
.sticky-cta{
  position:fixed;
  left:0;right:0;top:0;
  background:var(--ground-2);
  border-bottom:1px solid var(--line);
  z-index:500;
  transform:translateY(-110%);
  transition:transform .35s ease;
  padding:12px 0;
}
.sticky-cta.is-visible{transform:translateY(0)}
.sticky-cta-inner{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.sticky-cta-logo{
  font-family:var(--face);font-weight:800;font-size:15px;color:var(--off);letter-spacing:.02em;
}
.sticky-cta-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--lime);color:var(--ink);
  font-family:var(--face);font-weight:800;font-size:14px;
  padding:10px 18px;border-radius:4px;
  text-decoration:none;white-space:nowrap;
  border:0;cursor:pointer;
}
@media(max-width:700px){
  .sticky-cta{
    top:auto;bottom:0;border-bottom:0;border-top:1px solid var(--line);
    padding:10px 0;
    padding-bottom:calc(10px + env(safe-area-inset-bottom));
    /* hidden state slides DOWN off the bottom edge here, opposite of the top-bar rule above */
    transform:translateY(110%);
  }
  .sticky-cta.is-visible{transform:translateY(0)}
  .sticky-cta-logo{display:none}
  .sticky-cta-inner{justify-content:center}
  .sticky-cta-btn{width:100%;justify-content:center;padding:13px 18px}
  /* guide graphic dropped on mobile, same treatment note-tags already get, to give the form room to breathe */
  .guide{display:none}
  .stage{padding-top:0}
}

/* --- Brand strip + step grid + about row merged into one continuous bordered module.
   No gaps between the rows, one shared hairline seam between each. The module's own
   bottom border is dropped, the footer already carries a border-top, so the module
   runs straight into it instead of doubling the line. --- */
.hero{padding-bottom:0}
.brand-strip{border-bottom:0;overflow:hidden}
.explainer{padding-top:0;padding-bottom:0}
.about{padding-top:0;padding-bottom:0}

/* Brand ticker: the track is duplicated in the markup; animating it exactly -50%
   slides one full duplicate width per loop, so the seam is invisible. */
.brand-track-wrap{
  display:flex;
  width:max-content;
  animation:brand-ticker 46s linear infinite;
  gap:34px;
}
.brand-track{flex-wrap:nowrap;justify-content:flex-start;white-space:nowrap}
/* Bug fix: site.css hides the bullet before each track's own first item (so the
   strip doesn't open with a stray bullet). With the track duplicated for the loop,
   that also hid the separator at the seam between the two copies, so the last
   brand of one lap ran straight into the first brand of the next with no space
   or bullet ("BOOKING.COMIKEA"). Restore the bullet just at that seam. */
.brand-track[aria-hidden="true"] span:first-child:before{
  content:"•";color:var(--lime);margin-right:34px;display:inline-block;
}
@keyframes brand-ticker{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
.brand-strip{
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  mask-image:linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
@media(prefers-reduced-motion:reduce){
  .brand-track-wrap{animation:none}
}

/* About row: one continuous block, not a two-column split. Bio sits full width
   up top, the byline (photo + name) sits below it with real space, left-aligned. */
.about-row{
  border-top:1px solid var(--line);
}
.about-single{
  padding:32px 30px 32px 0;
}
.about-title-sm{
  font-family:var(--face);font-size:22px;letter-spacing:-.02em;
  color:var(--off);margin-bottom:14px;
}
.about-bio-sm{
  font-size:15px;line-height:1.7;
  color:#C4CFC6;
  max-width:none;
}
.about-byline-sm{
  display:flex;align-items:center;gap:14px;
  margin-top:32px;
}
.about-avatar-sm{
  width:48px;height:48px;border-radius:50%;
  object-fit:cover;object-position:center;
  border:1px solid rgba(228,237,228,.16);
  background:#08130D;
  display:block;
}
.about-name-sm{
  font-family:var(--face);color:var(--lime);font-size:13px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
}
@media(max-width:700px){
  .about-single{padding:22px 0}
  .about-byline-sm{margin-top:24px}
}

/* --- Note-tag curves: genuine hand-drawn-style squiggles (SVG), unique per tag
   rather than one arc mirrored. Overrides site.css's geometric border-arc version
   entirely: no border, no border-radius, no rotate. --- */
.note-tag .curve{
  display:block;
  width:64px;height:26px;
  margin-top:6px;
  border:0;border-radius:0;
  transform:none;
  background-repeat:no-repeat;
  background-size:64px 26px;
}
.note-a .curve{
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCAyNiIgZmlsbD0ibm9uZSI+CjxwYXRoIGQ9Ik0zLDkgQzksMTYgMTUsMyAyMiw5IEMyOSwxNSAzNSw0IDQyLDEwIEM0OCwxNSA1Myw3IDU5LDExIEM2MSwxMiA2MCwxNSA1NywxNiIgc3Ryb2tlPSIjRTRFREU0IiBzdHJva2Utd2lkdGg9IjEuOCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBvcGFjaXR5PSIwLjg1Ii8+Cjwvc3ZnPgo=");
}
.note-b .curve{
  margin-left:12px;
  background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCAyNiIgZmlsbD0ibm9uZSI+CjxwYXRoIGQ9Ik02MCwxMCBDNTMsMyA0NiwxNiAzOSw5IEMzMiwzIDI1LDE1IDE4LDggQzEyLDMgOCwxMiA0LDYgQzIsNCAzLDIgNiwyIiBzdHJva2U9IiNFNEVERTQiIHN0cm9rZS13aWR0aD0iMS44IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIG9wYWNpdHk9IjAuODUiLz4KPC9zdmc+Cg==");
}

/* --- Signup card polish (the money spot). Same content, more premium finish.
   Padding note: card padding is 32px on all four sides, evened out from site.css's
   original 28/34/24 (and a separate 20/18/18 mobile rule). The form-row's 15px top
   margin (13px on mobile) is zeroed here so nothing stacks on top of the padding
   and the visual gap always matches the padding value exactly, at any width. --- */
.signup-card{
  position:relative;
  padding:32px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.5) inset,
    0 2px 4px rgba(5,25,15,.10),
    0 10px 24px rgba(5,25,15,.16),
    0 32px 80px rgba(5,25,15,.30),
    0 0 0 1px rgba(255,255,255,.5);
}
.signup-card .form-row{
  margin-top:0;
}
.signup-card::before{
  content:"";
  position:absolute;
  top:0;left:14px;right:14px;height:3px;
  border-radius:0 0 3px 3px;
  background:linear-gradient(90deg, rgba(182,240,60,0) 0%, var(--lime) 50%, rgba(182,240,60,0) 100%);
  pointer-events:none;
}
.signup-card input[type=email]{
  transition:border-color .18s ease, box-shadow .18s ease;
}
.signup-card input[type=email]:focus{
  border-color:var(--lime);
  box-shadow:0 0 0 3px rgba(182,240,60,.28);
}
.signup-card button{
  position:relative;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.signup-card button:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 22px rgba(182,240,60,.38);
  filter:brightness(1.04);
}
.signup-card button:active{
  transform:translateY(0);
  box-shadow:0 3px 8px rgba(182,240,60,.32);
}
.signup-card .btn-arrow{
  display:inline-block;
  transition:transform .18s ease;
}
.signup-card button:hover .btn-arrow{transform:translateX(3px)}
.signup-card .micro{
  display:flex;align-items:center;justify-content:center;
  gap:6px;flex-wrap:wrap;
  margin-top:14px;
}
.signup-card .micro-check{
  display:inline-flex;align-items:center;justify-content:center;
  width:15px;height:15px;flex:0 0 15px;
  border-radius:50%;
  background:rgba(182,240,60,.32);
  color:#3E5C13;
  font-size:9px;line-height:1;
}
.signup-card .micro-gift{
  color:#4F7A16;
  font-weight:600;
}