/* LemonChurch marketing site. Design: claude.ai/artifact/FvKButKygZai2mEPj21pEF. Copy: docs/25. */
:root {
  --ink: #1F1F1C;
  --muted: #55554F;
  --eyebrow: #6B6858;
  --line: #E6E1D3;
  --field: #85816F;
  --lemon: #FFF64A;
  --lemon-edge: #E3D800;
  --pale: #FFF9CC;
  --pale-2: #FFFBDA;
  --pale-edge: #EFE6AE;
  --cream: #F6F1E4;
  --paper: #FFFDF6;
  --white: #FFFFFF;
  --shadow: 0 8px 24px rgba(80, 70, 0, 0.06);
  --sans: 'Noto Sans HK', system-ui, sans-serif;
  --latin: Outfit, 'Noto Sans HK', sans-serif;
  --h2: 2.441rem;
  --section-y: 96px;
  --card-pad: 32px;
  --gutter: 40px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 16px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--white); color: var(--ink); font-family: var(--sans); font-weight: 300; line-height: 1.6; overflow-x: hidden; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
a { color: var(--ink); }
a:hover { color: var(--muted); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
strong { font-weight: 700; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.en { font-family: var(--latin); }
.en-note { font-family: var(--latin); color: var(--muted); }
.en-note strong { font-weight: 500; color: var(--ink); }
.hl { background: url(assets/squiggle.svg) no-repeat left 96% / 100% 0.5em; padding: 0 2px; }
.house { clip-path: polygon(50% 0, 100% 42%, 100% 100%, 0 100%, 0 42%); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font: inherit; font-weight: 700; text-decoration: none; cursor: pointer; transition: transform .25s ease, box-shadow .25s ease, background-color .2s ease; }
.btn:hover { color: var(--ink); }
.btn-primary { background: var(--lemon); border-color: var(--lemon-edge); box-shadow: 0 6px 16px rgba(201, 190, 0, 0.3); }
.btn-primary:hover { background: #F7EC2C; }
.btn-lg { min-height: 56px; padding: 0 32px; }

.card { border: 1px solid var(--line); border-radius: 22px; background: var(--white); box-shadow: var(--shadow); padding: var(--card-pad); display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; }

/* Header */
.site-header { border-bottom: 1px solid var(--line); background: var(--white); }
.site-header .wrap { display: flex; align-items: center; gap: 32px; min-height: 80px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; }
.brand img { width: 62px; height: 62px; }
.brand span { font-family: var(--latin); font-size: 1.563rem; letter-spacing: -0.01em; }
.main-nav { display: flex; gap: 24px; flex-grow: 1; font-weight: 500; }
.main-nav a { text-decoration: none; }
.header-actions { display: flex; gap: 16px; align-items: center; }
.signin-link { font-weight: 700; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; width: 48px; height: 48px; border: 1px solid var(--line); border-radius: 16px; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu nav { position: absolute; right: 0; top: 56px; z-index: 10; width: 240px; padding: 8px; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.menu nav a { padding: 12px 16px; text-decoration: none; font-weight: 500; }

/* Sections */
.section { position: relative; overflow: hidden; isolation: isolate; padding: var(--section-y) 0; border-top: 1px solid var(--line); }
.section > .wrap { display: flex; flex-direction: column; gap: 48px; }
.bg-paper { background: var(--paper); }
.bg-white { background: var(--white); }
.bg-cream { background: var(--cream); }
.bg-pale { background: var(--pale-2); }
.section-head { display: flex; flex-direction: column; gap: 8px; max-width: 760px; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--latin); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--eyebrow); }
.eyebrow img { width: 24px; height: 24px; }
.section-head h2, .cta-intro h2 { font-size: var(--h2); font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }
.section-sub { font-family: var(--latin); font-size: 1.25rem; color: var(--muted); }
.edge { position: absolute; z-index: -1; pointer-events: none; }
.edge-l { left: -24px; }
.edge-r { right: -24px; }

/* Hero */
.hero { position: relative; overflow: hidden; isolation: isolate; background: var(--pale); border-bottom: 1px solid var(--line); }
.hero-doodles { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.22; pointer-events: none; z-index: -1; }
.hero .wrap { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding-top: 80px; padding-bottom: 96px; }
.hero-panel { position: relative; overflow: hidden; isolation: isolate; flex: 1 1 100%; min-width: 0; display: flex; flex-direction: column; gap: 24px; padding: 40px; background: rgba(255, 253, 246, 0.94); border: 1px solid var(--pale-edge); border-radius: 24px; box-shadow: var(--shadow); }
.hero-panel-logo { position: absolute; right: -162px; top: -10%; height: 120%; width: auto; max-width: none; opacity: 0.35; pointer-events: none; z-index: -1; }
.hero h1 { font-size: 2.441rem; line-height: 1.2; font-weight: 300; letter-spacing: -0.02em; }
.hero-sub { font-size: 1.25rem; }
.hero-en { display: flex; flex-direction: column; gap: 8px; }
.hero-en-title { font-family: var(--latin); font-size: 1.563rem; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; padding-top: 8px; }

/* Hero mock: drawn at a fixed 540x480, scaled down on small screens */
.mock { flex: 1 1 100%; min-width: 0; height: 480px; position: relative; }
.mock-stage { position: absolute; left: 0; top: 0; width: 100%; height: 480px; transform-origin: left top; }
.mock-roster { position: absolute; left: 0; top: 24px; width: 86%; padding: 0; overflow: hidden; }
.mock-bar { display: flex; gap: 8px; align-items: center; padding: 8px 16px; border-bottom: 1px solid var(--line); background: var(--cream); }
.mock-bar i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--line); }
.mock-bar span { margin-left: 10px; font-family: var(--latin); font-size: 0.8rem; color: var(--muted); }
.mock-body { padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.mock-title { display: flex; justify-content: space-between; align-items: baseline; }
.mock-title strong { font-size: 1.25rem; }
.mock-title span { font-size: 0.8rem; color: var(--muted); }
.mock-table { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.mock-table div { padding: 8px; border-top: 1px solid #D6D6CF; }
.mock-table .th { background: var(--pale-2); font-weight: 700; border-top: 0; }
.mock-table .role { font-weight: 700; }
.mock-table .on { background: var(--pale-2); font-weight: 700; }
.mock-tags { display: flex; gap: 8px; font-size: 0.8rem; }
.mock-tags span { border: 1px solid var(--line); border-radius: 999px; padding: 4px 8px; font-weight: 700; }
.mock-tags .on { background: var(--pale-2); }
.mock-phone { position: absolute; right: 0; top: 120px; width: 210px; height: 360px; padding: 16px; display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: 30px; background: var(--white); box-shadow: var(--shadow); }
.mock-phone .notch { width: 60px; height: 6px; border-radius: 3px; background: var(--ink); align-self: center; }
.mock-phone .hello { font-family: 'Noto Serif HK', serif; font-weight: 700; font-size: 1.25rem; color: #1E4D3A; }
.mock-phone .tile { border-radius: 22px; padding: 16px; font-size: 0.8rem; line-height: 1.5; }
.mock-phone .tile b { display: block; }
.mock-phone .serve { background: #1E4D3A; color: var(--white); }
.mock-phone .news { border: 1px solid #D6D6CF; color: var(--muted); }
.mock-phone .news b { color: var(--ink); }
.mock-phone .checkin { margin-top: auto; border-radius: 22px; padding: 16px; background: var(--pale-2); text-align: center; font-weight: 700; }
.mock-logo { position: absolute; left: -36px; bottom: -80px; width: 150px; transform: rotate(-8deg); }


/* Grids */
.grid { display: grid; gap: 24px; }
.grid-pain, .grid-privacy { grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); }
.grid-features { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.grid-roles { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }
.grid-steps { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 32px; }
.grid-privacy { gap: 16px; }

.pain { gap: 8px; }
.pain-no { font-family: var(--latin); font-weight: 700; font-size: 1.25rem; color: #6F6900; }
.pain-text { font-size: 1.25rem; line-height: 1.5; }

.feature { gap: 16px; }
.feature-icon { align-self: flex-start; width: 84px; height: 84px; padding-top: 15px; background: var(--lemon); display: flex; align-items: center; justify-content: center; }
.feature-icon img { width: 50px; height: 50px; }
.feature h3 { font-size: 1.563rem; font-weight: 700; }

.step { display: flex; gap: 16px; align-items: flex-start; }
.step-no { flex: none; width: 56px; height: 60px; padding-top: 12px; background: var(--lemon); display: flex; align-items: center; justify-content: center; font-family: var(--latin); font-weight: 700; font-size: 1.25rem; }
.step-body, .principle-body { display: flex; flex-direction: column; gap: 8px; }
.step-body > strong { font-size: 1.25rem; }

.principle { display: flex; gap: 16px; align-items: flex-start; padding: 24px; border: 1px solid var(--line); border-radius: 24px; background: var(--white); }
.principle svg { flex: none; margin-top: 4px; }
.principle-body strong.lead { font-size: 1.25rem; display: block; }

.role { gap: 8px; }
.role h3 { font-size: 1.25rem; font-weight: 700; }
.role h3 span { font-family: var(--latin); font-weight: 300; color: var(--muted); }

/* CTA */
.cta { display: flex; flex-wrap: wrap; gap: 56px; align-items: flex-start; }
.cta-intro { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cta-lead { font-size: 1.25rem; }
.cta-en { font-family: var(--latin); font-size: 1.25rem; font-weight: 500; line-height: 1.3; padding-top: 8px; }
.cta-logo { right: -80px; bottom: -80px; width: 460px; opacity: 0.85; }
.demo-form { flex: 1 1 520px; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field-full { grid-column: 1 / -1; }
label { font-weight: 700; }
label .en { font-weight: 400; color: var(--muted); }
input, select, textarea { font: inherit; font-weight: 400; width: 100%; padding: 12px 16px; border: 1px solid var(--field); border-radius: 14px; background: var(--white); color: var(--ink); }
.trap { position: absolute; left: -9999px; }
.form-foot { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-top: 8px; }
.form-status { min-height: 1.6em; }

/* Footer */
.site-footer { background: var(--white); border-top: 1px solid var(--line); padding: 48px 0 32px; }
.footer-top { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.footer-brand { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-brand img { width: 160px; }
.footer-brand small { display: block; font-family: var(--latin); font-size: 0.8rem; color: var(--muted); }
.footer-nav { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-nav .en { font-weight: 400; }
.copyright { margin-top: 24px; font-family: var(--latin); font-size: 0.8rem; color: var(--muted); }

/* Small pages (sign-in, privacy) */
.page-main { position: relative; overflow: hidden; isolation: isolate; min-height: calc(100vh - 81px); display: flex; align-items: center; justify-content: center; padding: 48px 16px; background: var(--pale); }
.page-card { width: 100%; max-width: 480px; gap: 16px; }
.page-card h1 { font-size: 1.953rem; font-weight: 700; letter-spacing: -0.015em; }
.slug-field { display: flex; border: 1px solid var(--field); border-radius: 14px; overflow: hidden; }
.slug-field input { border: 0; border-radius: 0; min-width: 0; }
.slug-field span { display: flex; align-items: center; padding: 0 16px; background: var(--cream); border-left: 1px solid var(--line); font-family: var(--latin); white-space: nowrap; }

.legal { width: 100%; max-width: 800px; gap: 24px; }
.legal h1 { font-size: 1.953rem; font-weight: 700; letter-spacing: -0.015em; }
.legal h2 { font-size: 1.25rem; font-weight: 700; margin-bottom: 8px; }
.legal h2 span { font-family: var(--latin); font-weight: 400; color: var(--muted); }
.legal section { display: flex; flex-direction: column; gap: 8px; }
.legal-date { color: var(--muted); }

/* Motion */
@keyframes rise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
/* Hero entrance moves but never hides: the headline must show even if animations do not run. */
@keyframes lift { from { transform: translateY(24px); } to { transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes drift { from { transform: translateY(0) scale(1.06); } to { transform: translateY(-48px) scale(1.06); } }
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
@media (prefers-reduced-motion: no-preference) {
  .in { animation: lift .9s cubic-bezier(.2, .7, .2, 1) both; }
  .d1 { animation-delay: .05s; } .d2 { animation-delay: .18s; } .d3 { animation-delay: .3s; } .d4 { animation-delay: .45s; } .d5 { animation-delay: .6s; }
  .float { animation: float 6s ease-in-out infinite; }
  .float-slow { animation: float 7s ease-in-out 1.2s infinite; }
  .card:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(80, 70, 0, .12); }
  .btn:hover { transform: translateY(-2px); }
  @supports (animation-timeline: view()) {
    .rv { animation: rise linear both; animation-timeline: view(); animation-range: entry 5% cover 28%; }
    .pop { animation: pop linear both; animation-timeline: view(); animation-range: entry 10% cover 30%; }
    .drift { animation: drift linear both; animation-timeline: view(); animation-range: cover; }
  }
}

/* Tablet */
@media (max-width: 1000px) {
  .main-nav { display: none; }
  .header-actions { margin-left: auto; }
  .menu { display: block; }
  .edge { width: 150px !important; top: 16px !important; left: auto; right: -24px; opacity: 0.14 !important; }
  .edge-extra { display: none; }
}

/* Phone */
@media (max-width: 640px) {
  :root { --h2: 1.953rem; --section-y: 48px; --card-pad: 24px; --gutter: 16px; }
  .site-header .wrap { min-height: 64px; gap: 8px; }
  .brand { flex-grow: 1; }
  .brand img { width: 40px; height: 40px; }
  .brand span { font-size: 1.25rem; }
  .header-actions .btn { display: none; }
  .signin-link { font-size: 0.8rem; padding: 8px; }
  .section > .wrap { gap: 24px; }
  .hero .wrap { padding-top: 40px; padding-bottom: 40px; gap: 16px; }
  .hero-panel { padding: 24px 16px; gap: 16px; }
  .hero-panel-logo { right: -56px; top: auto; bottom: -24px; height: 200px; opacity: 0.2; }
  .hero h1 { font-size: 1.953rem; line-height: 1.25; }
  .hero-sub { font-size: 1rem; }
  .hero-en-title { font-size: 1.25rem; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .mock { height: 320px; margin-top: 8px; }
  .mock-stage { left: max(0px, calc(50% - 178px)); width: 540px; transform: scale(.66); }
  .mock-logo { display: none; }
  .grid { gap: 16px; }
  .feature-icon { width: 64px; height: 64px; padding-top: 12px; }
  .feature-icon img { width: 38px; height: 38px; }
  .principle { padding: 16px; }
  .cta { gap: 24px; }
  .cta-logo { right: -48px; top: 24px; bottom: auto; width: 180px; opacity: 0.5; }
  .demo-form { grid-template-columns: minmax(0, 1fr); }
  .form-foot .btn { width: 100%; }
  .site-footer { padding: 32px 0 24px; }
  .footer-brand img { width: 96px; }
}