@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,ital,wght@9..144,0,400..700;9..144,1,400..700&family=DM+Sans:wght@400..800&family=JetBrains+Mono:wght@400..700&display=swap');

/* ── Tokens ───────────────────────────────────────────────── */
:root {
  --pa-paper:   #FCFAF4;
  --pa-paper2:  #F4EFDF;
  --pa-paper3:  #EEE8D5;
  --pa-ink:     #3F362A;
  --pa-ink2:    #6B5F4E;
  --pa-muted:   #9F907A;
  --pa-muted2:  #BFB39F;
  --pa-line:    rgba(63, 54, 42, 0.08);
  --pa-line2:   rgba(63, 54, 42, 0.15);

  --pa-accent:  #E07856;
  --pa-accent2: #C25B3E;
  --pa-mint:    #9BCAB1;
  --pa-mint-dk: #6FA68B;
  --pa-sky:     #A8C5DE;
  --pa-lemon:   #F4D67A;
  --pa-lemon-dk:#E5BE48;
  --pa-rose:    #E9A8B0;
  --pa-sage:    #8FA886;

  --shadow-card:  0 0 0 1.5px #3F362A, 0 3px 0 rgba(63,54,42,0.15);
  --shadow-deep:  0 0 0 1.5px #3F362A, 0 4px 0 #3F362A;
  --shadow-accent:0 0 0 1.5px #3F362A, 0 4px 0 var(--pa-accent);
  --shadow-lemon: 0 0 0 1.5px #3F362A, 0 4px 0 var(--pa-lemon-dk);
  --shadow-inset: inset 0 0 0 1.5px rgba(63,54,42,0.18);

  --radius-sm: 9px;
  --radius-md: 12px;
  --radius-lg: 14px;
  --radius-xl: 18px;
  --radius-2xl:22px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--pa-paper);
  color: var(--pa-ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
em { font-style: italic; color: var(--pa-accent); }

/* ── Layout ───────────────────────────────────────────────── */
.container { max-width: 1100px; margin: 0 auto; padding: 0 28px; }

/* ── Nav ──────────────────────────────────────────────────── */
nav {
  background: var(--pa-paper2);
  border-bottom: 1.5px solid var(--pa-line);
  position: sticky; top: 0; z-index: 100;
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; max-width: 1100px; margin: 0 auto;
}
.nav-logo {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none;
}
.nav-logo-mark {
  width: 48px; height: 48px;
  background: var(--pa-paper);
  border-radius: 14px;
  display: grid; place-items: center;
  box-shadow: var(--shadow-card);
  transform: rotate(-3deg);
  flex-shrink: 0;
  overflow: hidden;
}
.nav-logo-mark img { width: 38px; height: 38px; display: block; }
.nav-logo-name {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500; font-size: 18px;
  color: var(--pa-ink); line-height: 1;
}
.nav-links { display: flex; align-items: center; gap: 4px; }
.nav-links a {
  padding: 7px 14px; border-radius: var(--radius-sm);
  font-size: 13px; font-weight: 600;
  color: var(--pa-ink2);
  transition: background 0.12s, color 0.12s;
}
.nav-links a:hover { color: var(--pa-ink); background: var(--pa-paper); }
.btn-nav {
  padding: 8px 18px !important;
  background: var(--pa-accent) !important;
  color: #fff !important;
  border-radius: var(--radius-sm) !important;
  font-weight: 700 !important;
  box-shadow: 0 0 0 1.5px #3F362A, 0 3px 0 var(--pa-accent2) !important;
  transition: transform 0.1s, box-shadow 0.1s !important;
}
.btn-nav:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 0 0 1.5px #3F362A, 0 4px 0 var(--pa-accent2) !important;
  background: var(--pa-accent) !important;
  color: #fff !important;
}

/* ── Buttons ──────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--radius-md);
  font-family: 'DM Sans', sans-serif;
  font-weight: 700; font-size: 14px; cursor: pointer;
  transition: transform 0.1s, box-shadow 0.1s;
  border: none; text-decoration: none;
}
.btn-primary {
  background: var(--pa-accent); color: #fff;
  box-shadow: var(--shadow-accent);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 0 0 1.5px #3F362A, 0 5px 0 var(--pa-accent2); }
.btn-primary:active { transform: translateY(1px); box-shadow: 0 0 0 1.5px #3F362A, 0 2px 0 var(--pa-accent2); }

.btn-ghost {
  background: transparent; color: var(--pa-ink2);
  box-shadow: var(--shadow-inset);
}
.btn-ghost:hover { background: var(--pa-paper2); color: var(--pa-ink); }

.btn-lg { padding: 15px 32px; font-size: 15px; border-radius: var(--radius-lg); }

/* ── Section helpers ──────────────────────────────────────── */
.section-kicker {
  display: flex; align-items: center; gap: 10px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pa-accent); margin-bottom: 14px;
}
.section-kicker::before {
  content: '';
  display: inline-block; width: 28px; height: 1.5px;
  background: var(--pa-accent);
}
.section-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 400; line-height: 1.1;
  color: var(--pa-ink);
  margin-bottom: 48px;
}

/* ── Hero ─────────────────────────────────────────────────── */
.hero {
  background: var(--pa-paper);
  padding: 96px 0 80px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Decorative shapes */
.hero-shape {
  position: absolute; pointer-events: none; border-radius: 50%;
}
.hero-shape-mint {
  width: 480px; height: 480px;
  background: var(--pa-mint);
  right: -160px; bottom: -180px;
  opacity: 0.45;
}
.hero-shape-lemon {
  width: 96px; height: 96px;
  background: var(--pa-lemon);
  border-radius: var(--radius-2xl);
  right: 10%; top: 64px;
  transform: rotate(14deg);
  box-shadow: var(--shadow-card);
  opacity: 0.85;
}
.hero-shape-rose {
  width: 60px; height: 60px;
  background: var(--pa-rose);
  left: 12%; top: 36%;
  box-shadow: 0 0 0 1.5px #3F362A;
  opacity: 0.8;
}
.hero-shape-sky {
  width: 100px; height: 26px;
  background: var(--pa-sky);
  border-radius: 99px;
  left: 7%; bottom: 22%;
  transform: rotate(-18deg);
  box-shadow: 0 0 0 1.5px #3F362A;
  opacity: 0.7;
}
.hero-shape-lemon2 {
  width: 36px; height: 36px;
  background: var(--pa-lemon);
  border-radius: 50%;
  left: 22%; top: 14%;
  box-shadow: 0 0 0 1.5px #3F362A;
  opacity: 0.65;
}

.hero-inner {
  position: relative; z-index: 2;
  max-width: 1100px; margin: 0 auto; padding: 0 28px;
}

.hero-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pa-accent); margin-bottom: 20px;
}
.hero-kicker-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--pa-accent); flex-shrink: 0;
}

.hero h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(38px, 6vw, 60px);
  font-weight: 400; line-height: 1.08;
  color: var(--pa-ink);
  margin-bottom: 22px;
  letter-spacing: -0.01em;
}

.hero-lead {
  font-size: 16px; font-weight: 500;
  color: var(--pa-ink2); line-height: 1.6;
  max-width: 520px; margin: 0 auto 36px;
}

.hero-actions {
  display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
  margin-bottom: 28px;
}

.hero-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px; font-weight: 500;
  color: var(--pa-muted); letter-spacing: 0.05em;
}

/* ── Features ─────────────────────────────────────────────── */
.features {
  padding: 88px 0;
  background: var(--pa-paper2);
  border-top: 1.5px solid var(--pa-line);
  border-bottom: 1.5px solid var(--pa-line);
}
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
}
.feature-card {
  background: var(--pa-paper);
  border-radius: var(--radius-xl);
  padding: 28px 24px;
  box-shadow: var(--shadow-card);
  transition: transform 0.12s, box-shadow 0.12s;
}
.feature-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 0 1.5px #3F362A, 0 5px 0 rgba(63,54,42,0.2);
}
.feature-icon {
  width: 44px; height: 44px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
  box-shadow: 0 0 0 1.5px #3F362A;
  flex-shrink: 0;
}
.feature-icon svg { width: 20px; height: 20px; stroke: var(--pa-ink); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.feature-icon-mint  { background: var(--pa-mint); }
.feature-icon-lemon { background: var(--pa-lemon); }
.feature-icon-rose  { background: var(--pa-rose); }
.feature-icon-sky   { background: var(--pa-sky); }

.feature-card h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px; font-weight: 500;
  color: var(--pa-ink); margin-bottom: 8px; line-height: 1.2;
}
.feature-card p {
  font-size: 13px; font-weight: 500;
  color: var(--pa-ink2); line-height: 1.6;
}

/* ── Workflow ─────────────────────────────────────────────── */
.workflow {
  padding: 88px 0;
  background: var(--pa-paper);
}
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0;
  position: relative;
}
.steps::before {
  content: '';
  position: absolute;
  top: 28px; left: calc(50% / 3 + 14px); right: calc(50% / 3 + 14px);
  height: 1.5px;
  background: repeating-linear-gradient(90deg, var(--pa-line2) 0, var(--pa-line2) 6px, transparent 6px, transparent 14px);
}
.step {
  padding: 28px 24px;
  text-align: center;
  position: relative;
}
.step-num {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--pa-lemon);
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px; font-weight: 600;
  color: var(--pa-ink);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 20px;
  box-shadow: var(--shadow-card);
}
.step h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px; font-weight: 500;
  color: var(--pa-ink); margin-bottom: 8px;
}
.step p {
  font-size: 13px; font-weight: 500;
  color: var(--pa-ink2); line-height: 1.6;
}

/* ── Stats row ────────────────────────────────────────────── */
.stats-section {
  padding: 0;
  background: var(--pa-paper2);
  border-top: 1.5px solid var(--pa-line);
  border-bottom: 1.5px solid var(--pa-line);
}
.stats-inner {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1100px; margin: 0 auto;
}
.stat-item {
  padding: 40px 28px; text-align: center;
  border-right: 1.5px solid var(--pa-line);
}
.stat-item:last-child { border-right: none; }
.stat-num {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 44px; font-weight: 400;
  color: var(--pa-ink); line-height: 1;
  margin-bottom: 6px;
}
.stat-num em { font-size: 28px; }
.stat-label {
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--pa-muted);
}

/* ── CTA ──────────────────────────────────────────────────── */
.cta {
  background: var(--pa-ink);
  color: var(--pa-paper);
  padding: 88px 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: '';
  position: absolute;
  width: 400px; height: 400px; border-radius: 50%;
  background: var(--pa-accent);
  right: -120px; top: -120px;
  opacity: 0.12;
  pointer-events: none;
}
.cta::after {
  content: '';
  position: absolute;
  width: 200px; height: 200px; border-radius: 50%;
  background: var(--pa-mint);
  left: -60px; bottom: -60px;
  opacity: 0.15;
  pointer-events: none;
}
.cta-inner { position: relative; z-index: 2; }
.cta h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 400; line-height: 1.1;
  color: var(--pa-paper);
  margin-bottom: 14px;
}
.cta h2 em { color: var(--pa-lemon); }
.cta p {
  font-size: 15px; font-weight: 500;
  color: rgba(252,250,244,0.6);
  max-width: 440px; margin: 0 auto 36px;
}
.cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-cta {
  background: var(--pa-accent); color: #fff;
  box-shadow: 0 0 0 1.5px var(--pa-paper), 0 4px 0 var(--pa-accent2);
}
.btn-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 0 1.5px var(--pa-paper), 0 5px 0 var(--pa-accent2);
}
.btn-ghost-light {
  background: rgba(252,250,244,0.08); color: rgba(252,250,244,0.75);
  box-shadow: inset 0 0 0 1.5px rgba(252,250,244,0.25);
}
.btn-ghost-light:hover {
  background: rgba(252,250,244,0.14); color: var(--pa-paper);
}

/* ── Footer ───────────────────────────────────────────────── */
footer {
  background: #2A231A;
  color: rgba(252,250,244,0.35);
  padding: 28px 24px;
  text-align: center;
  font-size: 12px; font-weight: 500;
  border-top: 1.5px solid rgba(252,250,244,0.06);
}
footer a {
  color: rgba(252,250,244,0.5);
  transition: color 0.15s;
}
footer a:hover { color: var(--pa-lemon); }

/* ── Register page ────────────────────────────────────────── */
.register-page {
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--pa-paper);
}
.register-main {
  flex: 1; display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 24px 60px;
  background-image: radial-gradient(rgba(63,54,42,0.07) 0.5px, transparent 0.5px);
  background-size: 22px 22px;
}
.register-card {
  width: 100%; max-width: 520px;
}
.register-header {
  text-align: center; margin-bottom: 20px;
  padding: 28px;
  background: var(--pa-paper);
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-lemon);
  position: relative;
}
.register-logo-mark {
  width: 76px; height: 76px;
  background: var(--pa-paper2);
  border-radius: 22px;
  display: grid; place-items: center;
  box-shadow: var(--shadow-card);
  transform: rotate(-3deg);
  margin: 0 auto 16px;
  overflow: hidden;
}
.register-logo-mark img { width: 62px; height: 62px; display: block; }
.register-header h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 22px; font-weight: 500;
  color: var(--pa-ink); margin-bottom: 4px;
}
.register-header p {
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pa-muted);
}
/* Corner sticky note */
.register-sticky {
  position: absolute; top: -10px; right: 16px;
  background: var(--pa-lemon);
  padding: 6px 12px; border-radius: var(--radius-sm);
  transform: rotate(2deg);
  box-shadow: var(--shadow-card);
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pa-ink);
}

.register-form-box {
  background: var(--pa-paper);
  border-radius: var(--radius-2xl);
  padding: 32px 36px;
  box-shadow: var(--shadow-card);
}
.register-form-box > h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 17px; font-weight: 500;
  color: var(--pa-ink); margin-bottom: 22px;
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .form-row { grid-template-columns: 1fr; } }

.field { margin-bottom: 12px; }
.field label {
  display: block;
  font-size: 10.5px; font-weight: 800;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pa-muted); margin-bottom: 5px;
}
.field input {
  width: 100%; padding: 10px 14px;
  background: var(--pa-paper2); border-radius: var(--radius-md);
  box-shadow: var(--shadow-inset);
  border: none; outline: none;
  font-size: 13px; font-weight: 600;
  font-family: 'DM Sans', sans-serif;
  color: var(--pa-ink);
  transition: box-shadow 0.15s;
}
.field input:focus {
  box-shadow: inset 0 0 0 1.5px var(--pa-accent), 0 0 0 3px rgba(224,120,86,0.12);
}
.field input::placeholder { color: var(--pa-muted2); font-weight: 500; }

.divider {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--pa-muted);
  margin: 18px 0 12px;
  display: flex; align-items: center; gap: 10px;
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1.5px;
  background: var(--pa-line2);
}

/* password strength */
.sbar { flex: 1; height: 4px; border-radius: 4px; background: var(--pa-line2); transition: background .2s; }

.btn-submit {
  width: 100%; padding: 13px;
  background: var(--pa-accent); color: #fff;
  border: none; border-radius: var(--radius-md);
  font-size: 13.5px; font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  font-family: 'DM Sans', sans-serif;
  box-shadow: var(--shadow-accent);
  transition: transform 0.1s, box-shadow 0.1s;
  margin-top: 10px;
}
.btn-submit:hover { transform: translateY(-1px); box-shadow: 0 0 0 1.5px #3F362A, 0 5px 0 var(--pa-accent2); }
.btn-submit:active { transform: translateY(1px); box-shadow: 0 0 0 1.5px #3F362A, 0 2px 0 var(--pa-accent2); }
.btn-submit:disabled { opacity: .5; cursor: not-allowed; transform: none; }

.msg {
  padding: 12px 16px; border-radius: var(--radius-md);
  font-size: 13px; font-weight: 600;
  margin-bottom: 16px; display: none;
  line-height: 1.5;
}
.msg.show { display: block; }
.msg-ok {
  background: rgba(155,202,177,0.2);
  box-shadow: inset 0 0 0 1.5px var(--pa-mint-dk);
  color: var(--pa-mint-dk);
}
.msg-err {
  background: rgba(233,168,176,0.2);
  box-shadow: inset 0 0 0 1.5px #C25B3E;
  color: #C25B3E;
}

.register-footer {
  text-align: center; margin-top: 20px;
  font-size: 13px; font-weight: 600; color: var(--pa-muted);
}
.register-footer a { color: var(--pa-accent); }
.register-footer a:hover { text-decoration: underline; }

/* ── Legal pages ──────────────────────────────────────────── */
.legal-page { min-height: 100vh; display: flex; flex-direction: column; }
.legal-main { flex: 1; padding: 56px 24px; }
.legal-card {
  max-width: 720px; margin: 0 auto;
  background: var(--pa-paper);
  border-radius: var(--radius-2xl);
  padding: 48px;
  box-shadow: var(--shadow-card);
}
.legal-card h1 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 32px; font-weight: 500;
  color: var(--pa-ink); margin-bottom: 6px;
}
.legal-card .subtitle {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--pa-muted); margin-bottom: 40px;
}
.legal-card h2 {
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--pa-accent); margin: 32px 0 10px;
}
.legal-card p, .legal-card address {
  font-size: 14px; font-weight: 500;
  color: var(--pa-ink2); line-height: 1.7; font-style: normal;
}
.legal-card a { color: var(--pa-accent); font-weight: 600; }
.legal-card a:hover { text-decoration: underline; }
.back-link {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; color: var(--pa-muted);
  margin-bottom: 22px; transition: color 0.15s;
}
.back-link:hover { color: var(--pa-ink); }

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 640px) {
  .hero { padding: 72px 0 56px; }
  .hero-shape-rose, .hero-shape-sky, .hero-shape-lemon2 { display: none; }
  .hero-shape-mint { width: 280px; height: 280px; right: -100px; bottom: -100px; }
  .nav-links a:not(.btn-nav) { display: none; }
  .features, .workflow, .cta { padding: 64px 0; }
  .stats-inner { grid-template-columns: 1fr; }
  .stat-item { border-right: none; border-bottom: 1.5px solid var(--pa-line); padding: 28px; }
  .stat-item:last-child { border-bottom: none; }
  .steps::before { display: none; }
  .register-form-box { padding: 24px 20px; }
  .legal-card { padding: 32px 24px; }
}