/* CapyVoca pages on hyraxstudio.org: the app's cream and rose, laid out like the
   NullCam page (eyebrow, two-line headline, lede, one pill, a visual on the right). */
:root { --kit-ink: #3e2a24; --kit-ink-soft: #7a5a50; --kit-accent: #cf3d61; --kit-accent-soft: #e2708c; --kit-spot: rgba(207, 61, 97, 0.08); --kit-shimmer-base: #ffffff; --kit-shimmer-hi: #ffc9d5; }
.crumb { font-size: 13px; color: var(--subtle); font-weight: 700; text-decoration: none; }
.crumb:hover { color: var(--rose-dark); }
.bar .left { display: flex; align-items: center; gap: 14px; flex: none; }
.brand span { white-space: nowrap; }
/* Edge blur under the sticky bar, so the page fades out beneath it. */
.site-header { background: none; isolation: isolate; }
.site-header::before { content: ""; position: absolute; inset: 0 0 -28px; z-index: -1; pointer-events: none; background: linear-gradient(rgba(255, 248, 244, 0.94) 50%, rgba(255, 248, 244, 0)); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent); }
.bar { box-shadow: var(--lift), inset 0 -2px 0 0 #f7efeb; }

.cv-hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; padding-block: 56px 72px; }
.cv-eyebrow { font-size: 13px; font-weight: 800; letter-spacing: 0.12em; color: var(--rose); font-family: "Nunito", var(--font); }
.cv-hero h1 { margin: 14px 0 0; font-family: "Noto Sans KR", var(--font); font-size: clamp(40px, 6.4vw, 66px); font-weight: 900; letter-spacing: -0.04em; line-height: 1.1; color: var(--ink); text-wrap: balance; }
.cv-lede { margin: 20px 0 30px; font-size: 18px; color: var(--muted); max-width: 520px; }
.cv-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.cv-store { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: #fff; border-radius: 6px; padding: 13px 20px; font-weight: 800; font-size: 15px; text-decoration: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 24px -12px rgba(62, 42, 36, 0.7); }
.cv-store:hover { background: #2b1d19; color: #fff; }
.cv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rose); box-shadow: 0 0 0 4px rgba(207, 61, 97, 0.25); }
.cv-free { font-size: 14px; color: var(--subtle); }
.cv-stage { position: relative; aspect-ratio: 1 / 1.08; max-width: 440px; width: 100%; justify-self: center; }
.cv-glow { position: absolute; inset: 8% 4%; border-radius: 50%; background: radial-gradient(circle at 50% 45%, rgba(255, 208, 217, 0.9), rgba(255, 232, 236, 0.4) 55%, transparent 72%); }
.cv-stage .kit-phone { position: absolute; width: 50%; }
.cv-back { left: 6%; top: 10%; transform: rotate(-7deg); opacity: 0.96; }
.cv-front { right: 8%; top: 2%; z-index: 2; }
.cv-badge { position: absolute; right: 0; bottom: 4%; z-index: 3; width: 24%; border-radius: 22%; box-shadow: 0 14px 30px rgba(120, 50, 40, 0.3); }

/* Sharper corners than the legal site's defaults (site.css tokens). */
:root { --r-hero: 10px; --r-field: 8px; --r-chip: 4px; }
.cv-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-bottom: 28px; }
.cv-card { padding: 26px; min-width: 0; }
.cv-card img { width: 84px; margin-bottom: 10px; }
.cv-card h2 { margin: 0 0 8px; font-size: 19px; font-weight: 900; color: var(--ink); }
.cv-card p { margin: 0; font-size: 15px; }



.cv-links { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 64px; }
.cv-links .kit-eyebrow { height: 34px; padding: 0 15px; font-size: 13px; }
.doc-head .eyebrow .kit-eyebrow { color: var(--rose-dark); }
.operator { font-size: 13px; color: var(--subtle); line-height: 1.9; }
@media (max-width: 600px) {
  /* The studio link moves to the footer; the bar keeps the app name and its pages. */
  .crumb { display: none; }
  .cv-lede { font-size: 16px; }
}
@media (max-width: 860px) {
  .cv-hero { grid-template-columns: 1fr; padding-top: 24px; gap: 28px; }
  .cv-stage { max-width: 320px; grid-row: 1; }
  .cv-features { grid-template-columns: 1fr; }
}