/* Shared styles for NagMeLater use-case pages */
:root {
  --paper: #FAF5EA; --paper-deep: #F3ECDC; --ink: #122A1E; --ink-soft: #3D5447;
  --ink-faint: #6B7F72; --green: #0B5C44; --green-hot: #1FAF6A; --green-glow: #25D366;
  --bubble-out: #D9FDD3; --line: rgba(18, 42, 30, .14);
  --shadow-card: 0 2px 4px rgba(18, 42, 30, .05), 0 14px 40px -12px rgba(18, 42, 30, .18);
}
* { margin: 0; padding: 0; box-sizing: border-box }
body {
  font-family: 'Hanken Grotesk', -apple-system, sans-serif; background: var(--paper); color: var(--ink);
  line-height: 1.65;
  background-image: radial-gradient(rgba(18, 42, 30, .035) 1px, transparent 1px); background-size: 22px 22px;
}
h1, h2, h3 { font-family: 'Fraunces', Georgia, serif; font-weight: 600; line-height: 1.12; letter-spacing: -.01em }
a { color: inherit }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 24px }
nav { position: sticky; top: 0; z-index: 50; background: rgba(250, 245, 234, .85); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line) }
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 64px }
.logo { font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1.25rem; text-decoration: none; display: flex; align-items: center; gap: .5rem }
.logo .dot { width: 11px; height: 11px; border-radius: 50%; background: var(--green-glow) }
.nav-links { display: flex; align-items: center; gap: 1.4rem; font-size: .92rem; font-weight: 600 }
.nav-links a:not(.btn) { text-decoration: none; color: var(--ink-soft) }
.btn {
  display: inline-flex; align-items: center; gap: .6rem; background: var(--green); color: #fff; font-weight: 700;
  font-size: 1rem; padding: .8rem 1.5rem; border-radius: 999px; text-decoration: none; transition: transform .18s, background .18s;
  box-shadow: 0 8px 24px -8px rgba(11, 92, 68, .55);
}
.btn:hover { transform: translateY(-2px); background: #0d6e52 }
.btn.big { font-size: 1.1rem; padding: 1rem 1.9rem }
header.hero { padding: 72px 0 56px; text-align: center }
.crumb { font-size: .82rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--green); margin-bottom: 1.2rem; display: block }
.hero h1 { font-size: clamp(2.2rem, 4.6vw, 3.6rem); max-width: 22ch; margin: 0 auto 1.2rem }
.hero h1 em { font-style: italic; font-weight: 500; color: var(--green) }
.hero p { font-size: 1.12rem; color: var(--ink-soft); max-width: 44rem; margin: 0 auto 2rem }
.cta-note { font-size: .9rem; color: var(--ink-faint); margin-top: .9rem }
section { padding: 56px 0 }
.pains { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem }
@media(max-width:840px) { .pains { grid-template-columns: 1fr } }
.pain { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 1.7rem 1.6rem; box-shadow: var(--shadow-card) }
.pain h3 { font-size: 1.18rem; margin-bottom: .5rem }
.pain p { font-size: .95rem; color: var(--ink-soft) }
.sec-title { font-size: clamp(1.7rem, 3.4vw, 2.4rem); text-align: center; margin-bottom: 2rem }
.sec-title em { font-style: italic; font-weight: 500; color: var(--green) }
.pills { display: flex; flex-direction: column; gap: .9rem; align-items: center; max-width: 720px; margin: 0 auto }
.pill {
  background: var(--bubble-out); border-radius: 14px; border-bottom-right-radius: 4px; padding: .8rem 1.2rem;
  font-size: .98rem; font-weight: 500; box-shadow: 0 2px 6px rgba(18, 42, 30, .12);
}
.pill:nth-child(odd) { transform: rotate(-.4deg) }
.pill:nth-child(even) { transform: rotate(.4deg) }
.final { background: var(--green); border-radius: 36px; color: var(--paper); text-align: center; padding: 64px 24px; position: relative; overflow: hidden }
.final::before { content: ""; position: absolute; inset: 0; background: radial-gradient(45% 70% at 85% -10%, rgba(37, 211, 102, .3), transparent 70%) }
.final > * { position: relative }
.final h2 { font-size: clamp(1.9rem, 3.8vw, 2.8rem); margin-bottom: .8rem }
.final h2 em { font-style: italic; font-weight: 500; color: var(--green-glow) }
.final p { color: rgba(250, 245, 234, .78); max-width: 34rem; margin: 0 auto 1.8rem }
.final .btn { background: var(--green-hot) }
footer { padding: 2.4rem 24px; text-align: center; color: var(--ink-faint); font-size: .88rem }
footer a { color: var(--ink-soft) }
/* hub page */
.hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.3rem }
@media(max-width:760px) { .hub-grid { grid-template-columns: 1fr } }
.hub-card {
  background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 1.6rem; box-shadow: var(--shadow-card);
  text-decoration: none; display: block; transition: transform .2s, box-shadow .2s;
}
.hub-card:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(18,42,30,.05), 0 22px 44px -12px rgba(18,42,30,.22) }
.hub-card h3 { font-size: 1.25rem; margin-bottom: .35rem }
.hub-card p { font-size: .92rem; color: var(--ink-soft) }
.hub-kind { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green); display: block; margin-bottom: .5rem }

/* use-cases mega menu */
.menu { position: relative }
.menu-btn { display:inline-flex; align-items:center; gap:.35rem; background:none; border:none; cursor:pointer; font:inherit; font-weight:600; font-size:.92rem; color:var(--ink-soft); padding:.4rem 0 }
.menu-btn:hover { color: var(--ink) }
.menu-btn svg { transition: transform .25s; margin-top:1px }
.menu.open .menu-btn svg { transform: rotate(180deg) }
.mega {
  position:absolute; top:calc(100% + 16px); left:50%; transform:translateX(-58%) translateY(8px);
  width:min(720px, calc(100vw - 32px)); background:#fff; border:1px solid var(--line); border-radius:22px;
  box-shadow:0 8px 16px rgba(18,42,30,.08), 0 32px 72px -16px rgba(18,42,30,.3);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .22s, transform .22s cubic-bezier(.22,1,.36,1), visibility .22s; overflow:hidden;
}
.mega::before { content:""; position:absolute; top:-16px; left:0; right:0; height:16px }
.menu.open .mega { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-58%) translateY(0) }
.mega-cols { display:grid; grid-template-columns:1fr 1fr }
.mega-col { padding:1.6rem 1.5rem 1.3rem }
.mega-col + .mega-col { border-left:1px solid var(--line) }
.mega-col h4 { font-family:'Fraunces',Georgia,serif; font-size:1.15rem; font-weight:600; margin-bottom:.25rem }
.mega-col > p { font-size:.82rem; color:var(--ink-faint); margin-bottom:1rem; line-height:1.45 }
.mega-col a { display:flex; align-items:center; gap:.8rem; padding:.5rem .6rem; margin:0 -.6rem; border-radius:12px; text-decoration:none; transition:background .15s }
.mega-col a:hover { background:var(--paper-deep) }
.mi { flex:none; width:36px; height:36px; border-radius:11px; background:rgba(37,211,102,.13); border:1px solid rgba(11,92,68,.22); display:flex; align-items:center; justify-content:center }
.mi svg { width:18px; height:18px; fill:none; stroke:var(--green); stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.mt { display:flex; flex-direction:column; line-height:1.3 }
.mt b { font-size:.92rem; color:var(--ink); font-weight:700 }
.mt small { font-size:.78rem; color:var(--ink-faint) }
.mega-foot { background:var(--paper-deep); border-top:1px solid var(--line); padding:.85rem 1.5rem; font-size:.88rem; color:var(--ink-soft); text-align:center }
.mega-foot a { color:var(--green); font-weight:700; text-decoration:none; margin-left:.3rem }
@media(max-width:720px) { .nav-links .menu { display:none } }