/* Minimal, modern styles for the htmx experiment */
:root{ --bg:#ffffff; --card:#ffffff; --text:#111827; --muted:#6b7280; --brand:#4B125A; --accent:#C2F5AF; }
*{ box-sizing: border-box; }
/* html,body{ margin:0; padding:0; background: radial-gradient(80% 60% at 20% 0%, rgba(155,81,224,0.10), transparent 60%), radial-gradient(80% 60% at 80% 0%, rgba(194,245,175,0.20), transparent 60%), var(--bg); color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; } */
html,body{ margin:0; padding:0; color:var(--text); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; }

.container{ max-width: 1200px; margin: 0 auto; padding: 32px; }
.topbar{ position: sticky; top:0; display:flex; align-items:center; gap:16px; padding: 12px 16px; background: rgba(255,255,255,0.85); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(15,23,42,0.06); z-index: 50; }
.brand a{ display:flex; align-items:center; gap:8px; text-decoration:none; color:var(--brand); }
.logo{ height: 22px; width:auto; display:inline-block; }
.brand-text{ font-weight:700; letter-spacing: 0.3px; }
.spacer{ flex:1; }
.nav{ flex: 1; display:flex; gap:12px; align-items:center; justify-content: center;}
.nav a{ color:var(--muted); text-decoration:none; padding:8px 10px; border-radius:10px; border:1px solid transparent; transition: all .2s ease; }
.nav a:hover{ color:var(--text); border-color: rgba(2,6,23,0.08); background: rgba(2,6,23,0.04); }

/* language dropdown */
.langwrap{ position: relative; }
.lang-menu{ position: relative; }
.lang-menu summary{ list-style:none; cursor:pointer; padding:6px 10px; border-radius:8px; border:1px solid rgba(2,6,23,0.1); background:#fff; color:var(--text); }
.lang-menu summary::-webkit-details-marker{ display:none; }
.lang-menu[open] summary{ box-shadow: 0 2px 8px rgba(2,6,23,0.08); }
.lang-list{ position:absolute; right:0; margin-top:8px; background:#fff; border:1px solid rgba(2,6,23,0.1); border-radius:10px; padding:6px; min-width: 160px; box-shadow: 0 10px 30px rgba(2,6,23,0.08); }
.lang-list li{ list-style:none; }
.lang-list a{ display:block; padding:8px 10px; color:#1f2937; text-decoration:none; border-radius:8px; }
.lang-list a:hover{ background:#f1f5f9; }

/* .hero{ padding: 56px 28px; background: linear-gradient(180deg, rgba(155,81,224,0.06), rgba(194,245,175,0.12)) , var(--card); border: 1px solid rgba(2,6,23,0.06); border-radius: 24px; box-shadow: 0 10px 30px rgba(2,6,23,0.06); } */
.hero{ padding-top: 40px; padding-bottom: 32px;}
.hero h1{ font-size: clamp(32px, 5vw, 56px); line-height: 1.1; margin: 0 0 12px; padding-bottom: 16px;}
.subtitle{ color: var(--muted); margin-top: 8px; font-size: 18px; line-height: 1.6; padding-bottom: 16px; }
.intro{ color: var(--muted); font-size: 16px; }

.section{ margin-top: 40px; }
.cards{ display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; margin-top: 16px; }
.card{ background: var(--card); border: 1px solid rgba(2,6,23,0.06); border-radius: 16px; padding: 20px; box-shadow: 0 6px 18px rgba(2,6,23,0.06); transition: transform .15s ease, box-shadow .15s ease; }
.card:hover{ transform: translateY(-2px); box-shadow: 0 10px 24px rgba(2,6,23,0.08); }
.card h3{ margin-top:0; font-size: 18px; }

.btn{ display:inline-block; background: var(--accent); color: var(--brand); font-weight: 700; text-decoration: none; padding: 12px 18px; border-radius: 9999px; border: 2px solid rgba(75,18,90,0.12); box-shadow: 0 6px 14px rgba(194,245,175,0.35); transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(194,245,175,0.45); }

.estimator{ margin-top: 28px; padding: 24px; background: var(--card); border: 1px solid rgba(2,6,23,0.06); border-radius: 16px; }
.grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 12px; }
label{ display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--muted); }
input{ padding:12px 14px; border-radius:10px; border:1px solid rgba(2,6,23,0.12); background:#fff; color:var(--text); outline:none; }
input:focus{ border-color: var(--brand); box-shadow: 0 0 0 4px rgba(75,18,90,0.12); }
/* slider */
input[type=range]{ -webkit-appearance:none; appearance:none; height:4px; background:#e5e7eb; border-radius:9999px; outline:none; margin-top:8px; }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%; background:var(--brand); border:2px solid #fff; box-shadow:0 2px 6px rgba(2,6,23,0.2); cursor:pointer; }
input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--brand); border:2px solid #fff; box-shadow:0 2px 6px rgba(2,6,23,0.2); cursor:pointer; }
.results{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 16px; }
.num{ font-size: 28px; font-weight:800; color: var(--brand); margin-top: 8px; }
.estimator .intro{ padding-top: 24px; }

.partners{ margin-top: 32px; }
.partners p{ color: var(--muted);}
.partner-row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap: 28px; padding: 16px; background: var(--card); border: 1px solid rgba(2,6,23,0.06); border-radius: 16px; }
.partner-row img{ height:40px; width:auto; filter: grayscale(1) opacity(.95); transition: filter .2s ease, transform .2s ease; }
.partner-row img:hover{ filter: none; transform: translateY(-1px); }

.step-img{ width: 100%; height: auto; border-radius: 12px; border: 1px solid rgba(2,6,23,0.08); margin-top: 8px; }

.footer{ text-align:center; padding: 44px 0; color: var(--muted); }

/* Section headings */
.section h2{ font-size: clamp(24px, 3vw, 32px); margin: 0 0 8px; padding-bottom: 12px; padding-top: 16px;}
.section .intro{ margin: 0 0 12px; padding-bottom: 12px;}

@media (max-width: 520px){
  .nav{ display:none; }
  .container{ padding: 20px; }
}

/* FAQ styles aligned with groupyhomev3 */
.faq .faq-list{ display:flex; flex-direction:column; gap: 12px; }
.faq .faq-item{ background:#f9fafb; border:1px solid rgba(2,6,23,0.06); border-radius: 12px; padding: 16px; transition: background .15s ease; cursor: pointer; }
.faq .faq-item:hover{ background:#f3f4f6; }
.faq .faq-summary{ display:flex; align-items:center; justify-content:space-between; gap: 12px; list-style:none; font-weight: 700; color:#111827; font-size: 18px; }
.faq .faq-summary::-webkit-details-marker{ display:none; }
.faq .chev{ color:#6b7280; transition: transform .2s ease; }
.faq details[open] .chev{ transform: rotate(180deg); }
.faq .faq-answer{ margin-top: 10px; color:#4b5563; line-height: 1.75; }

/* Features styles aligned with groupyhomev3 */
.features .features-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 16px; }
.features .feature-card{ background:#fff; border:1px solid rgba(2,6,23,0.06); border-radius:14px; padding:20px; transition: box-shadow .2s ease, transform .15s ease; }
.features .feature-card:hover{ box-shadow:0 10px 24px rgba(2,6,23,0.08); transform: translateY(-2px); }
.features .feature-icon{ width:48px; height:48px; border-radius: 10px; background: #f3f4f6; display:flex; align-items:center; justify-content:center; margin-bottom: 24px; color:#4B125A; }
.features .feature-title{ font-size: 18px; margin:0 0 6px; color:#111827; }
.features .feature-desc{ color:#4b5563; line-height: 1.7; }
.features .ic{ width:22px; height:22px; }

/* Language icon sizing */
.lang-menu summary .lang-icon{width:18px;height:18px;vertical-align:-3px;margin-right:6px;opacity:.85}

/* How It Works 2-col layout */
.section.how{padding-top:32px;padding-bottom:64px}
.how-wrap{display:grid;grid-template-columns:1.1fr .9fr;align-items:start;gap:40px}
@media (max-width: 900px){.how-wrap{grid-template-columns:1fr}}
.how-heading{font-size:24px;line-height:34px;margin:0 0 8px;color:#111827;font-weight:800}
.how-list{list-style:none;margin:10px 0 0;padding:0}
.how-item{padding:22px 0;border-bottom:1px solid #e5e7eb}
.how-item:first-child{padding-top:0}
.how-item-title{font-size:24px;line-height:30px;color:#111827;margin:0 0 8px;font-weight:700}
.how-item-desc{color:#6b7280;margin:0}
.how-right{display:flex;justify-content:center}
.how-placeholder{width:100%;max-width:520px;min-height:420px;background:#e5e7eb;border-radius:12px;color:#111827;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:600}
.how-mock{border:1px dashed #e5e7eb;border-radius:12px;padding:12px;background:#fafafa}
.how-mock-2 .mock-amount,.how-mock-3 .mock-amount{font-weight:800;font-size:20px;margin-top:8px;color:#111827}
.mock-row{display:flex;align-items:center;gap:10px;margin:6px 0}
.mock-row.between{justify-content:space-between}
.badge{font-size:12px;padding:3px 8px;border-radius:9999px;border:1px solid #10B981;color:#065F46;background:#ECFDF5}
.avatar{width:20px;height:20px;border-radius:9999px;background:linear-gradient(135deg,#a7f3d0,#22d3ee)}
.muted{color:#6b7280;font-size:13px}
.dot{width:8px;height:8px;border-radius:9999px;display:inline-block}
.dot-blue{background:#60A5FA}
.dot-green{background:#34D399}
.hint-ic{width:16px;height:16px;margin-right:6px}
.how-hint{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#2563eb;margin-top:10px}
.trend{width:18px;height:18px;color:#10B981}

/* Footer styles aligned with groupyhomev3 */
.site-footer{ background:#f9fafb; border-top:1px solid rgba(2,6,23,0.06); margin-top: 48px; }
.footer-inner{ padding-top: 48px; padding-bottom: 32px; }
.footer-grid{ display:grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 24px; }
.footer-brand .brand-row{ display:flex; align-items:center; gap: 8px; margin-bottom: 10px; }
.footer-desc{ color:#4b5563; font-size: 14px; line-height: 1.7; margin-right: 32px;}
.footer-title{ font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color:#111827; margin: 0 0 10px; }
.footer-list{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap: 8px; }
.footer-list a{ color:#6b7280; text-decoration:none; font-size:14px; }
.footer-list a:hover{ color:#111827; }
.footer-bottom{ border-top:1px solid rgba(2,6,23,0.06); margin-top: 24px; padding-top: 16px; text-align:center; color:#6b7280; font-size: 13px; }

@media (max-width: 900px){
  .footer-grid{ grid-template-columns: 1fr; }
}
.how-img{width:100%;max-width:520px;border-radius:12px;box-shadow:0 12px 24px rgba(16,24,40,.08)}
/* Tutorial page styles (aligned with GroupyHome V3) */
.tutorial .step{ margin: 28px 0 36px; }
.tutorial .step-head{ display:flex; align-items:center; gap: 12px; margin-bottom: 14px; }
.tutorial .step-num{ width:34px; height:34px; border-radius:9999px; background: #ECFDF5; color:#065F46; border:1px solid #10B981; display:flex; align-items:center; justify-content:center; font-weight:800; }
.tutorial .step-title{ font-size: 22px; margin:0; color:#111827; }
.tutorial .step-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 18px; align-items:start; }
@media (max-width: 900px){ .tutorial .step-grid{ grid-template-columns: 1fr; } }
.tutorial .step-text-card{ background:#fff; border:1px solid rgba(2,6,23,0.06); border-radius: 14px; padding: 18px; box-shadow: 0 6px 18px rgba(2,6,23,0.06); }
.tutorial .step-image-card{ display:flex; align-items:center; justify-content:center; }
.tutorial .text-title{ font-size: 18px; margin: 0 0 6px; color:#111827; }
.tutorial .text-subtitle{ font-size: 15px; margin: 10px 0 6px; color:#111827; }
.tutorial .text-body{ color:#4b5563; line-height: 1.55; padding-bottom: 4px;}
.tutorial .troubleshoot{ background:#f9fafb; border:1px solid rgba(2,6,23,0.06); border-radius: 10px; padding: 12px; margin-top: 8px; }
.tutorial h1{ font-size: 28px; margin: 0 0 12px; color:#111827; }

/* CTA gradient block */
.cta-gradient{ background: linear-gradient(135deg, rgba(155,81,224,0.08), rgba(194,245,175,0.22)); border:1px solid rgba(2,6,23,0.06); border-radius: 18px; padding: 22px; text-align:center; box-shadow: 0 10px 26px rgba(2,6,23,0.06); }
.cta-gradient .intro{ color:#111827; opacity:.8; }
.btn-light{ background:#111827; color:#fff; border-color: rgba(17,24,39,0.2); box-shadow: 0 6px 14px rgba(17,24,39,0.2); }
.btn-light:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(17,24,39,0.28); }
.how-img{width:100%;max-width:520px;border-radius:12px;box-shadow:0 12px 24px rgba(16,24,40,.08)}
/* VS Invite Member page typography improvements */
.vs h1{ font-size: 28px; margin: 0 0 12px; color:#111827; }
.vs .section > p,
.vs .intro,
.vs li { max-width: 75ch; }
.vs p { font-size: 17px; line-height: 1.85; color: #374151; }
.vs .intro { font-size: 18px; line-height: 1.9; color: #4b5563; }
.vs li { font-size: 17px; line-height: 1.85; margin: 6px 0; color: #374151; }
.vs .cards .card { line-height: 1.75; }
.vs .cards .card h4 { margin-top: 0; margin-bottom: 8px; }
.vs .cards .card ul { padding-left: 18px; }
.vs .section h2 { margin-top: 8px; margin-bottom: 8px; }
.vs .section h3 { margin-top: 4px; margin-bottom: 6px; }
.vs .section p + p { margin-top: 10px; }
@media (max-width: 520px) {
  .vs p, .vs li { font-size: 16px; line-height: 1.85; }
  .vs .intro { font-size: 17px; }
}
.vs .cards .card{ line-height: 1.75; }
.vs .cards .card h4{ margin-top:0; margin-bottom: 8px; }
.vs .cards .card ul{ padding-left: 18px; }
.vs .section h2{ margin-top: 8px; margin-bottom: 8px; }
.vs .section h3{ margin-top: 4px; margin-bottom: 6px; }
.vs .section p + p{ margin-top: 10px; }