/* ========== Base reset ========== */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ========== Theme tokens ========== */
:root{
  --brand: #ff89a6;
  --brand-ink: #ffffff;
  --ink: #111827;
  --ink-2: #374151;
  --surface: #fff;
  --surface-2: #f9fafb;
}

/* ========== Layout helpers ========== */
.container{ max-width:1100px; margin:0 auto; padding:0 16px; }

/* ========== Sticky Header ========== */
.site-header{
  position: sticky; top:0; z-index:1000;
  background: var(--brand);
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.site-header .inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px; gap:16px;
}
.brand{
  display:inline-flex; align-items:center; gap:8px;
  text-decoration:none; color:var(--brand-ink); font-weight:800; font-size:18px;
}
.brand img{ height:26px; width:auto; }
.nav-right{ display:flex; align-items:center; gap:12px; margin-left:auto; }

/* Login button (no border) */
.btn-login{
  appearance:none; -webkit-appearance:none; border:0;
  background: rgba(255,255,255,.18);
  color:#fff; padding:8px 12px; border-radius:10px; font-weight:700;
  text-decoration:none; line-height:1;
}
.btn-login:hover{ background: rgba(255,255,255,.30); }

/* ========== Hero ========== */
.hero{ padding:56px 0 32px; background: var(--surface-2); }
.hero .container{ text-align:center; }
.hero h2{ margin:0 0 10px; font-size:clamp(28px, 4vw, 40px); color:var(--ink); }
.hero p{ margin:0 0 16px; color:var(--ink-2); }
.btn{ display:inline-block; border:0; padding:10px 16px; border-radius:10px; font-weight:700; text-decoration:none; cursor:pointer; }
.btn-primary{ background:#111827; color:#fff; }
.btn-primary:hover{ opacity:.92; }

/* Keep modal above header if you use one */
.modal{ z-index:2000; }

/* Footer */
footer{ padding:24px 0; text-align:center; color:var(--ink-2); }
/* ===== Global font reset (modern system stack) ===== */
html, body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: #111827;
}

/* ===== Sticky header + tidy layout ===== */
.site-header {
  position: sticky; top: 0; z-index: 1000;
  background: #ff89a6;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.header-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  color: #fff;
  font-weight: 800;
  font-size: 18px;
}
.header-brand .brand-logo { height: 26px; width: auto; }
.brand-text { letter-spacing: .2px; }
.main-nav { margin-left: auto; display: flex; align-items: center; gap: 12px; }

/* Colouring‑book outlined brand text */
.brand-text{
  color:#fff;                      /* white fill */
  -webkit-text-stroke: 1px #000;   /* crisp outline where supported */
  text-shadow:
     -1px -1px 0 #000,
      1px -1px 0 #000,
     -1px  1px 0 #000,
      1px  1px 0 #000;             /* fallback outline */
  letter-spacing:.3px;
}


/* Login button: clean pill, no border */
.btn-login {
  appearance: none; -webkit-appearance: none;
  border: 0;
  background: rgba(255,255,255,0.18);
  color: #fff;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1;
}
.btn-login:hover { background: rgba(255,255,255,0.30); }

/* ===== Sections: keep hero/demo/testimonials centred ===== */
.hero, .demo, .testimonials { text-align: center; }
.demo-images { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; }

/* Ensure hero primary CTA looks like a button even if it's an <a> */
.btn-primary, .hero .btn-primary {
  display: inline-block;
  border: 0;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 700;
  text-decoration: none;
  background: #111827;
  color: #fff;
  cursor: pointer;
}
.btn-primary:hover { opacity: .92; }
/* Cookie banner hidden by default; show only if .needs-cookie is on <html> */
.cookie-banner{
  position: fixed; left: 0; right: 0; bottom: 0;
  display: none; align-items: center; justify-content: center; gap: 10px;
  padding: 12px 16px; background: #111827; color: #fff; z-index: 2000;
  font-size: 0.95rem; text-align: center;
}
.needs-cookie .cookie-banner{ display: flex; }
.cookie-actions{ display: inline-flex; gap: 8px; margin-left: 10px; }
.cookie-actions button{
  border: 0; border-radius: 8px; padding: 8px 12px; font-weight: 700; cursor: pointer;
}
.cookie-accept{ background: #10b981; color: #fff; }
.cookie-reject{ background: rgba(255,255,255,.18); color: #fff; }
.cookie-reject:hover{ background: rgba(255,255,255,.30); }
/* --- Modal overlay fix --- */
.modal {
  position: fixed;           /* take it out of document flow */
  inset: 0;                  /* top:0; right:0; bottom:0; left:0 */
  display: none;             /* JS sets to flex when open */
  align-items: center;
  justify-content: center;
  background: rgba(17,24,39,0.55); /* dim backdrop */
  z-index: 3000;             /* above cookie banner (2000) */
  padding: 16px;
}

.modal-content {
  background: #fff;
  width: min(90vw, 420px);
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  position: relative;
}

.close-btn {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: #6b7280;
}
.close-btn:hover { color: #111827; }

/* Prevent background scroll while modal open (optional but nice) */
body.modal-open { overflow: hidden; }
/* ===== Auth Modal — layout & styles ===== */
.auth-modal {
  text-align: center;
  padding: 24px 24px 20px;
}

.auth-title {
  margin: 0 0 12px;
  font-size: 1.25rem;
  color: var(--ink);
}

/* Stack inputs nicely and center them */
.auth-form {
  display: flex;
  flex-direction: column;
  align-items: center;    /* centers inputs/buttons */
  gap: 10px;
  margin: 0;
}

/* Equal-sized inputs */
.auth-input {
  width: min(90vw, 320px);
  height: 44px;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-size: 16px;
  background: #fff;
  color: var(--ink);
}
.auth-input:focus {
  outline: none;
  border-color: #111827;
  box-shadow: 0 0 0 3px rgba(17,24,39,0.15);
}

/* Smaller, subtle help text */
.auth-help {
  margin-top: 2px;
}
.auth-help a {
  font-size: 0.9rem;        /* smaller than inputs */
  color: #374151;
  text-decoration: underline;
}

/* Same-size buttons, centered text, narrower than inputs */
.auth-btn {
  width: 220px;             /* narrower than 320px inputs */
  height: 44px;
  border-radius: 10px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Secondary/ghost style to complement .btn-primary */
.btn-ghost {
  background: rgba(17,24,39,0.06);
  color: #111827;
  border: 0;
}
.btn-ghost:hover {
  background: rgba(17,24,39,0.12);
}

/* Even vertical spacing between action buttons */
.auth-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;               /* even spacing */
  margin-top: 12px;
}

/* Status text spacing */
.auth-status {
  margin-top: 10px;
  min-height: 1.25em;      /* keeps layout stable if empty */
}
/* Header user text (sits left of the button) */
.header-user{
  color:#fff;
  font-weight:700;
  font-size:.95rem;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 60vw;       /* keeps it from pushing the button off-screen */
}

/* Ensure nice spacing between text and button */
.nav-right{ gap:12px; }
/* ===== Big colourful hero ===== */
.hero--story{
  position: relative;
  padding: 72px 0 32px;
  background: radial-gradient(1200px 600px at 10% 0%, #ffd1dc 0%, #ff89a6 30%, #fce0a1 75%) fixed;
  overflow: hidden;
}
.hero-grid{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  align-items: center;
  gap: clamp(20px, 4vw, 48px);
}
@media (max-width: 900px){
  .hero-grid{ grid-template-columns: 1fr; }
}

/* Copy side */
.hero-badge{
  display:inline-block;
  background: rgba(255,255,255,.7);
  border:2px dashed #111827;
  padding:6px 10px;
  border-radius:12px;
  font-weight:800;
  margin-bottom:12px;
}
.hero-title{
  margin:8px 0 10px;
  font-size: clamp(30px, 5vw, 56px);
  line-height:1.05;
  color:#111827;
}
.hero-title em {
  font-style: normal;
  background: linear-gradient(90deg,#111827,#111827);
  -webkit-background-clip: text;  /* Chrome/Safari */
  background-clip: text;          /* Standard (Firefox, etc.) */
  color: #111827;
}

.hero-title u{ text-underline-offset: 6px; text-decoration-thickness: 6px; text-decoration-color: rgba(255,255,255,.65); }
.hero-sub{ margin:0 0 16px; color:#1f2937; font-size: clamp(16px, 2.5vw, 18px); max-width: 48ch; }
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin: 6px 0 8px; }
.btn-lg{ padding:14px 18px; border-radius:12px; font-size:1.05rem; }
.hero-points{ margin:10px 0 0; padding:0; list-style:none; display:flex; gap:16px; flex-wrap:wrap; color:#111827; font-weight:600; }
.hero-points li{ background: rgba(255,255,255,.75); padding:6px 10px; border-radius:10px; }

/* Visual side */
.hero-visual{ position: relative; display:flex; align-items:center; justify-content:center; }
.device-card{
  background:#fff;
  border-radius:24px;
  box-shadow: 0 15px 40px rgba(0,0,0,.25);
  overflow:hidden;
  width: min(90%, 520px);
  aspect-ratio: 16 / 10;
  border: 6px solid #111827; /* “thick outline” feel */
}
.device-card img{ width:100%; height:100%; object-fit: cover; display:block; }
.device-notch{
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:120px; height:18px; background:#111827; border-bottom-left-radius:12px; border-bottom-right-radius:12px;
}

/* Floating confetti-ish blobs */
.confetti{
  position:absolute; border-radius:50%;
  opacity:.25; filter: blur(2px);
  animation: floaty 8s ease-in-out infinite;
}
.confetti-a{ width:120px; height:120px; background:#ffe066; right:-20px; top:10%; animation-delay:.2s; }
.confetti-b{ width:160px; height:160px; background:#7dd3fc; left:-30px; bottom:5%; animation-delay:.7s; }
@keyframes floaty{
  0%,100% { transform: translateY(0) }
  50%     { transform: translateY(-10px) }
}

/* Story steps under hero */
.story-steps{
  margin: 22px auto 0;
  max-width:1100px;
  padding: 10px 16px 0;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:10px;
}
@media (max-width: 700px){
  .story-steps{ grid-template-columns: 1fr; }
}
.story-steps .step{
  background: rgba(255,255,255,.8);
  border:2px dashed #111827;
  border-radius:14px;
  padding:10px 12px;
  font-weight:700;
  display:flex; align-items:center; gap:10px;
}
.story-steps .step span{
  display:inline-grid; place-items:center;
  width:28px; height:28px; border-radius:50%;
  background:#111827; color:#fff; font-weight:800;
}
/* ===== Hero Testimonials Marquee ===== */
.hero-testimonials{
  margin-top: 20px;
  overflow: hidden;
  width: 100%;
  display: flex;
  justify-content: center;
}

.testimonial-track{
  display: flex;
  gap: 40px;
  animation: scroll-left 25s linear infinite;
}

.testimonial-track blockquote{
  flex: 0 0 auto;
  font-style: italic;
  font-weight: 600;
  background: rgba(255,255,255,0.75);
  border-radius: 10px;
  padding: 10px 14px;
  white-space: nowrap;
  color: var(--ink);
}

@keyframes scroll-left{
  from{ transform: translateX(0); }
  to{   transform: translateX(-50%); }
}
/* ===== Header brand: one-line, colouring-book style ===== */
.brand-text{
  display:inline-flex;
  gap: .35rem;
  align-items: baseline;
  white-space: nowrap;
  font-weight: 900;
  font-size: clamp(20px, 2.2vw, 30px);   /* base size for the pair */
  line-height: 1;
}
.brand-word{
  -webkit-text-stroke: 2px #000;        /* thick black outline */
  text-shadow:
     -2px -2px 0 #000,
      2px -2px 0 #000,
     -2px  2px 0 #000,
      2px  2px 0 #000;
  padding-inline: 2px;                   /* keeps outline crisp at joins */
}

/* "custom" = white fill */
.brand-custom{ color:#fff; }

/* "colourbook" = rainbow fill */
.brand-colourbook{
  background: linear-gradient(90deg,#ff5b5b,#ffa93a,#ffd84d,#6bd46b,#4db9ff,#a084ff,#ff6bd1);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
  font-kerning: none;
}

/* Make brand larger on wider screens without breaking layout */
@media (min-width: 900px){
  .brand-text { font-size: clamp(28px, 3vw, 40px); }
}

/* ===== Center the main hero CTA and make it pop ===== */
.hero-copy{ text-align: center; }                 /* center the copy column text */
.hero-ctas{ text-align: center; }            /* center the CTA row */
.hero-sub{
  margin: 0 auto 18px;          /* center the block under title */
  max-width: 48ch;
  text-align: center;
}
.cta-main{
  padding: 16px 22px;               /* bigger target */
  font-size: 1.1rem;
  border-radius: 14px;
  background: linear-gradient(180deg,#111827,#0c1220);
  box-shadow:
     0 6px 0 #000,                   /* chunky “stamped” look */
     0 12px 24px rgba(0,0,0,.35);
  transform: translateY(0);
  transition: transform .12s ease, box-shadow .12s ease;
  border: 3px solid #000;           /* heavy outline to match the theme */
}
.cta-main:hover{
  transform: translateY(-2px);
  box-shadow:
     0 8px 0 #000,
     0 16px 28px rgba(0,0,0,.4);
}
.cta-main:active{
  transform: translateY(0);
  box-shadow:
     0 6px 0 #000,
     0 12px 24px rgba(0,0,0,.35);
}

/* Keep the hero feature pills below centered as well (optional) */
.hero-points{ justify-content: center; }

/* ===== Footer same as header ===== */
footer{
  background: var(--brand);
  color: #fff;
}
footer a{ color:#fff; text-decoration: underline; }
/* Header wordmark — colouring‑book outline + per‑letter colours */
.brand-text{
  display:inline-flex; gap:.35rem; align-items:center; white-space:nowrap;
  font-weight:900; font-size:clamp(24px,2.6vw,36px); line-height:1;
}
.brand-text .brand-custom,
.brand-text .l{
  -webkit-text-stroke:2px #000;
  text-shadow:
     -2px -2px 0 #000, 2px -2px 0 #000,
     -2px  2px 0 #000, 2px  2px 0 #000;
  padding:0 2px;
}
.brand-custom{ color:#fff; }                 /* white fill for “custom” */
.brand-colourbook .l{ display:inline-block; }

/* 10 distinct, vibrant colours (none reused) */
.c1{color:#FF3B30;}  /* red */
.c2{color:#FF9500;}  /* orange */
.c3{color:#FFD60A;}  /* yellow */
.c4{color:#34C759;}  /* green */
.c5{color:#00C7BE;}  /* teal */
.c6{color:#007AFF;}  /* blue */
.c7{color:#5856D6;}  /* indigo */
.c8{color:#AF52DE;}  /* purple */
.c9{color:#FF2D55;}  /* pink-red */
.c10{color:#00E5FF;} /* cyan */
footer, .site-footer{
  background: var(--brand) !important;
  color:#fff;
  text-align:center;
  padding:20px;
  font-size:0.9em;
}
footer a{ color:#fff; text-decoration:underline; }
/* center copy block + subtext */
.hero-copy{ text-align:center; }
.hero-title{ text-align:center; }
.hero-sub{
  margin: 0 auto 18px;          /* center the block under title */
  max-width: 48ch;
  text-align: center;
}

/* make the CTA pop and give breathing room */
.hero-ctas{ justify-content:center; margin:12px 0 18px; }
.hero .btn-primary{
  padding:14px 20px; font-size:1.05rem; border-radius:14px;
  border:3px solid #000;
  box-shadow:0 6px 0 #000, 0 12px 24px rgba(0,0,0,.3);
  transition:transform .12s ease, box-shadow .12s ease;
}
.hero .btn-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 0 #000, 0 16px 28px rgba(0,0,0,.35);
}

/* small gap before the feature pills so they never touch the button */
.hero-points{ justify-content:center; margin-top:10px; }
/* --- FIX LOGO SPACING & OUTLINE --- */
.brand-text{
  letter-spacing: 0 !important;          /* kill global tracking */
  -webkit-text-stroke: 1.5px #000;        /* crisper outline */
  text-shadow: none;                      /* remove fuzzy shadow */
}

.brand-colourbook{
  display: inline-flex;                   /* no whitespace nodes */
  gap: 0;                                 /* no extra space between letters */
  letter-spacing: 0 !important;
}

.brand-text .l{
  padding: 0 !important;                  /* remove the 0 2px padding */
  margin: 0 !important;
  -webkit-text-stroke: 1.5px #000;        /* match outline on each letter */
}

/* (Optional) tiny tighten if it still feels airy on your screen */
@media (min-width: 640px){
  .brand-colourbook { letter-spacing: -0.01em !important; }
}