/* The front page. Everything inside the dashboard frame is ordinary cr
   markup; these rules only frame it, size the hero type and run the drape. */
.lp { position: relative; overflow-x: clip; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; padding: 28px 20px 22px; text-align: center;
  background: radial-gradient(ellipse at 82% 6%, rgba(231, 157, 116, .14), transparent 38%), radial-gradient(ellipse at 92% 92%, rgba(250, 184, 133, .16), transparent 36%), var(--cr-bg); }
.lp-nav { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 20px 0; }
/* The hairline runs under the links and the button only, not the brand. */
.lp-nav nav { display: flex; align-items: center; gap: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--cr-line); }
.lp-nav nav a.lp-nav-link { font-size: 12px; color: var(--cr-muted); text-decoration: none; }
.lp-nav nav a.lp-nav-link:hover { color: var(--cr-text); }
.lp-nav-cta { border-radius: 999px; }
.lp-nav nav a.lp-nav-signin { font-size: 12px; color: var(--cr-text); text-decoration: none; }
@media (max-width: 560px) { .lp-nav-link { display: none; } }
.lp-brand { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 400; letter-spacing: -.01em; color: var(--cr-text); text-decoration: none; }
.lp-main { flex: 1; display: flex; flex-direction: column; align-items: center; width: 100%; max-width: 1180px; padding: clamp(150px, 34vh, 320px) 0 80px; }
.lp-title { margin: 0; font-size: clamp(32px, 4.2vw, 48px); line-height: 1.2; letter-spacing: -.03em; font-weight: var(--cr-w-light); color: var(--cr-accent); }
.lp-line { margin: 14px 0 0; min-height: 1.6em; font-size: clamp(15px, 1.6vw, 18px); line-height: 1.6; color: var(--cr-muted); }
.lp-caret { display: inline-block; width: 1.5px; height: 1.05em; margin-left: 2px; vertical-align: -.15em; background: var(--cr-accent); animation: lp-blink 1s steps(1) infinite; }
@keyframes lp-blink { 50% { opacity: 0; } }
.lp-cta { margin-top: 26px; border-radius: 999px; padding: 9px 18px; }
.lp-foot { width: 100%; max-width: 1000px; margin-top: auto; padding: 18px 0 0; border-top: 1px solid var(--cr-line); display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--cr-muted); }
.lp-foot nav { display: flex; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
.lp-foot a { color: inherit; text-decoration: none; }
.lp-foot a:hover { color: var(--cr-text); }

/* The frame shows the top of a 1280x800 dashboard, scaled to fit by
   landing.js. Each screen is a layer with a soft diagonal mask four times
   its size: sliding the mask from 50% to 100% pulls it off over the next. */
.lp-frame { position: relative; width: 100%; max-width: 1160px; aspect-ratio: 16 / 10; margin-top: clamp(28px, 5vh, 48px); border: 1px solid var(--cr-line); border-radius: 16px; overflow: hidden; background: var(--cr-bg); box-shadow: 0 1px 2px rgba(72, 44, 30, .03), 0 30px 70px rgba(72, 44, 30, .10); }
.lp-shot { position: absolute; inset: 0; visibility: hidden; background: var(--cr-bg);
  -webkit-mask-image: linear-gradient(135deg, transparent 30%, #000 42%, #000 58%, transparent 70%); mask-image: linear-gradient(135deg, transparent 30%, #000 42%, #000 58%, transparent 70%);
  -webkit-mask-size: 400% 400%; mask-size: 400% 400%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: 50% 50%; mask-position: 50% 50%; }
.lp-shot:first-child { visibility: visible; }
.lp-app { width: 1280px; height: 800px; transform-origin: 0 0; transform: scale(var(--s, 1)); display: flex; gap: 8px; padding: 18px; text-align: left; font-size: 14px; background: var(--cr-bg); }
/* The sidebar and content mirror app.html: a floating 224px card, 12px
   links with 16px icons, and a content column padded 24px 16px. */
.lp-side { width: 224px; flex: none; background: rgba(255, 255, 255, .78); border: 1px solid var(--cr-line); border-radius: 18px; box-shadow: var(--cr-shadow); padding: 16px 16px 0; display: flex; flex-direction: column; }
.lp-logo { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 8px 8px 0; }
.lp-side nav { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.lp-side nav a { display: flex; align-items: center; gap: 8px; padding: 5px 16px; border-radius: 6px; color: var(--cr-muted); font-size: 12px; letter-spacing: .02em; }
.lp-side nav a .material-symbols-outlined { font-size: 16px; }
.lp-side nav a.cr-nav-active { background: var(--cr-accent-soft); color: var(--cr-accent); }
.lp-user { border-top: 1px solid var(--cr-line); padding: 12px 0 16px; }
.lp-user p { margin: 0; padding: 0 16px 6px; font-size: 10px; color: var(--cr-muted); }
.lp-user span { display: flex; align-items: center; gap: 8px; padding: 5px 8px; font-size: 12px; color: var(--cr-muted); }
.lp-user .material-symbols-outlined { font-size: 16px; }
.lp-body { flex: 1; min-width: 0; padding: 24px 16px 0; overflow: hidden; }
.lp-body p { margin: 0 0 10px; }
.lp-bar { height: 6px; border-radius: 4px; background: var(--cr-line); margin: 7px 0; opacity: .7; }
.lp-tile { display: block; height: 150px; border-radius: 10px; background: var(--cr-bg); }

/* Lets anyone stop the typing, the screen changes and the glints, which
   run for longer than five seconds. */
.lp-pause { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-top: 14px; border: 1px solid var(--cr-line); border-radius: 50%; background: #fff; color: var(--cr-muted); cursor: pointer; }
.lp-pause:hover { color: var(--cr-text); border-color: var(--cr-field-line); }
.lp-pause-icon { display: block; width: 10px; height: 12px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box; }
.lp-pause.is-paused .lp-pause-icon { width: 0; height: 0; border: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid currentColor; margin-left: 3px; }

/* Two statements, each ringed by words that dim and glint like stars. The
   words are decoration (aria-hidden); positions are hand-scattered so no
   grid shows. On small screens every second word is dropped. */
.lp-sky { position: relative; overflow-x: clip; width: 100%; max-width: 1000px; min-height: 400px; margin-top: clamp(90px, 14vh, 150px); }
.lp-sky-text { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(500px, 86%); }
.lp-sky-text h2 { margin: 0 0 10px; font-size: clamp(18px, 2vw, 22px); font-weight: var(--cr-w-light); letter-spacing: -.02em; line-height: 1.3; }
.lp-sky-text p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--cr-muted); }
.lp-star { position: absolute; left: min(var(--x, 50%), calc(100% - 8.5em)); font-style: normal; font-size: var(--sz, 12px); color: var(--cr-muted); opacity: var(--o, .55); white-space: nowrap; padding-left: 10px; cursor: default; transition: opacity .5s, color .5s; }
.lp-star::before { content: ""; position: absolute; left: 0; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: currentColor; transition: transform .5s; }
.lp-star:hover, .lp-star.is-on { opacity: 1; color: var(--cr-accent); }
.lp-star:hover::before, .lp-star.is-on::before { transform: scale(1.9); }
.lp-bows { display: block; width: 100%; max-width: 1000px; height: 46px; margin-top: clamp(70px, 10vh, 110px); overflow: visible; }
.lp-bows path { fill: none; vector-effect: non-scaling-stroke; }
.lp-bow-a { stroke: var(--cr-accent-line); stroke-width: 1.5; }
.lp-bow-b { stroke: var(--cr-line); stroke-width: 1; }
@media (max-width: 600px) {
  .lp-sky { min-height: 460px; }
  .lp-star-m { display: none; }
}
@media (prefers-reduced-motion: reduce) { .lp-star, .lp-star::before { transition: none; } }

/* Empty frame for the explainer video, with the room the next section needs. */
.lp-video { width: 100%; max-width: 1000px; aspect-ratio: 16 / 9; margin: clamp(90px, 14vh, 150px) 0 clamp(90px, 14vh, 150px); border: 1px solid var(--cr-line); border-radius: 16px; background: #fff; box-shadow: 0 1px 2px rgba(72, 44, 30, .03), 0 30px 70px rgba(72, 44, 30, .08); }

/* How it works: two columns split by a hairline, stacked on small screens. */
.lp-how { width: 100%; max-width: 1000px; }
.lp-how-title { margin: 0 0 clamp(36px, 6vh, 60px); font-size: clamp(18px, 2vw, 22px); font-weight: var(--cr-w-light); letter-spacing: -.02em; }
.lp-how-split { display: grid; grid-template-columns: 1fr 1fr; text-align: left; }
.lp-how-side { padding: 0 clamp(20px, 4vw, 56px); }
.lp-how-side + .lp-how-side { border-left: 1px solid var(--cr-line); }
.lp-how-for { margin: 0 0 22px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--cr-muted); }
.lp-how ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.lp-how li { display: grid; grid-template-columns: 26px 1fr; gap: 6px; }
.lp-how li > span { font-size: 12px; line-height: 1.9; color: var(--cr-accent); }
.lp-how li b { display: block; font-size: 15px; font-weight: var(--cr-w-body); }
.lp-how li p { margin: 3px 0 0; font-size: 14px; line-height: 1.6; color: var(--cr-muted); }
.lp-how-cta { margin-top: clamp(48px, 8vh, 80px); }
.lp-how-cta p { margin: 0; font-size: 15px; color: var(--cr-muted); }
@media (max-width: 700px) {
  .lp-how-split { grid-template-columns: 1fr; }
  .lp-how-side + .lp-how-side { border-left: 0; border-top: 1px solid var(--cr-line); margin-top: 36px; padding-top: 36px; }
}

/* What you get: a line of words and a small live sample of each feature.
   Samples use the app's own components and loop quietly. */
.lp-feats { width: 100%; max-width: 1000px; margin-top: clamp(90px, 14vh, 150px); scroll-margin-top: 56px; }
.lp-feat { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 72px); align-items: center; padding: clamp(32px, 6vh, 56px) 0; border-top: 1px solid var(--cr-line); text-align: left; }
.lp-feat:nth-of-type(even) .lp-feat-text { order: 2; }
.lp-feat h3 { margin: 0 0 8px; font-size: 18px; font-weight: var(--cr-w-light); letter-spacing: -.02em; }
.lp-feat p { margin: 0; font-size: 14px; line-height: 1.7; color: var(--cr-muted); }
.lp-demo { padding: 16px 18px; border: 1px solid var(--cr-line); border-radius: 14px; background: #fff; font-size: 13px; overflow: hidden; }
.lp-demo-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 12px; margin-bottom: 4px; border-bottom: 1px solid var(--cr-line); }
.lp-demo-bar { height: 2px; margin: -5px 0 8px; background: var(--cr-line); border-radius: 2px; overflow: hidden; }
.lp-demo-bar i { display: block; height: 100%; width: 100%; background: var(--cr-accent); transform-origin: left; animation: lp-scan 9s linear infinite; }
.lp-d-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--cr-line); animation: lp-row 9s ease infinite backwards; animation-delay: calc(var(--i) * .9s); }
.lp-d-row:first-of-type { border-top: 0; }
.lp-d-row b { display: block; font-weight: 400; }
.lp-blur { filter: blur(4px); user-select: none; color: var(--cr-muted); font-size: 12px; white-space: nowrap; }
.lp-d-line { height: 7px; margin: 9px 0; border-radius: 4px; background: var(--cr-line); transform-origin: left; animation: lp-grow 7s ease infinite backwards; animation-delay: calc(var(--i) * .5s); }
.lp-d-swap { position: relative; min-height: 5.2em; }
.lp-d-swap > p { position: absolute; inset: 0; margin: 0; font-size: 13px; line-height: 1.6; color: var(--cr-text); }
.lp-d-before { animation: lp-before 8s ease infinite; color: var(--cr-muted) !important; }
.lp-d-after { animation: lp-after 8s ease infinite; }
.lp-d-tile { height: 54px; border-radius: 8px; background: var(--cr-bg); animation: lp-row 8s ease infinite backwards; animation-delay: calc(var(--i) * .8s); }
.lp-d-meter { height: 6px; margin-top: 10px; border-radius: 4px; background: var(--cr-line); overflow: hidden; }
.lp-d-meter i { display: block; height: 100%; width: 60%; background: var(--cr-accent); }
@keyframes lp-row { 0% { opacity: 0; transform: translateY(6px); } 10%, 85% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes lp-scan { 0% { transform: scaleX(0); } 85%, 100% { transform: scaleX(1); } }
@keyframes lp-grow { 0% { transform: scaleX(0); opacity: 0; } 15%, 85% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes lp-before { 0%, 40% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes lp-after { 0%, 45% { opacity: 0; } 55%, 92% { opacity: 1; } 100% { opacity: 0; } }
.lp-paused .lp-demo *, .lp-paused .lp-demo { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .lp-demo *, .lp-demo { animation: none !important; opacity: 1; } .lp-d-before { display: none; } .lp-d-after { position: static; } }
@media (max-width: 760px) { .lp-feat { grid-template-columns: 1fr; gap: 22px; } .lp-feat:nth-of-type(even) .lp-feat-text { order: 0; } }

/* Real screens of the CV and site builders, with a sample profile. */
.lp-showcase { padding-top: clamp(40px, 7vh, 72px); text-align: center; }
.lp-showcase h3 { margin: 0 0 8px; font-size: 18px; font-weight: var(--cr-w-light); letter-spacing: -.02em; }
.lp-showcase p { margin: 0 auto 24px; max-width: 520px; font-size: 14px; line-height: 1.7; color: var(--cr-muted); }
.lp-showcase img + img { margin-top: 20px; }
.lp-showcase img.lp-crop { aspect-ratio: 1600 / 640; object-fit: cover; object-position: center 12%; }
.lp-showcase img { display: block; width: 100%; height: auto; border: 1px solid var(--cr-line); border-radius: 14px; box-shadow: 0 1px 2px rgba(72, 44, 30, .04), 0 24px 56px rgba(72, 44, 30, .12); }

/* The CV designs are renders of the real templates with a sample profile. */
.lp-designs { padding-top: clamp(32px, 6vh, 56px); border-top: 1px solid var(--cr-line); text-align: center; }
.lp-designs h3 { margin: 0 0 8px; font-size: 18px; font-weight: var(--cr-w-light); letter-spacing: -.02em; }
.lp-designs p { margin: 0 auto 28px; max-width: 520px; font-size: 14px; line-height: 1.7; color: var(--cr-muted); }
.lp-designs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 22px 18px; }
.lp-designs figure { margin: 0; }
.lp-designs img { display: block; width: 100%; height: auto; aspect-ratio: 17 / 20; object-fit: cover; object-position: top; border: 1px solid var(--cr-line); border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(72, 44, 30, .04), 0 10px 24px rgba(72, 44, 30, .06); }
.lp-designs figcaption { margin-top: 8px; font-size: 12px; color: var(--cr-muted); }

/* Pricing: four plain cards with hairline borders; the page states prices
   from the same settings the plans page uses. */
.lp-how, .lp-pricing, .lp-faq, .lp-feats { scroll-margin-top: 56px; }
.lp-pricing, .lp-faq, .lp-close { width: 100%; max-width: 1000px; margin-top: clamp(90px, 14vh, 150px); }
.lp-plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; text-align: left; align-items: stretch; }
.lp-plan { padding: 22px 20px; border: 1px solid var(--cr-line); border-radius: 14px; background: #fff; }
.lp-plan-both { border-color: var(--cr-accent-line); }
.lp-plan h3 { margin: 0; font-size: 15px; font-weight: var(--cr-w-body); }
.lp-plan-about { margin: 6px 0 16px; min-height: 3.2em; font-size: 13px; line-height: 1.6; color: var(--cr-muted); }
.lp-plan-price { margin: 0 0 16px; padding-bottom: 16px; border-bottom: 1px solid var(--cr-line); font-size: 24px; letter-spacing: -.02em; font-weight: var(--cr-w-light); }
.lp-plan-price span { font-size: 12px; letter-spacing: 0; color: var(--cr-muted); }
.lp-plan ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lp-plan li { position: relative; padding-left: 14px; font-size: 13px; line-height: 1.5; color: var(--cr-text); }
.lp-plan li::before { content: ""; position: absolute; left: 0; top: .6em; width: 4px; height: 4px; border-radius: 50%; background: var(--cr-accent); }
.lp-plan-note { margin: 22px 0 0; font-size: 12px; }

.lp-faq { max-width: 680px; text-align: left; }
.lp-faq .lp-how-title { text-align: center; }
.lp-faq details { border-top: 1px solid var(--cr-line); }
.lp-faq details:last-of-type { border-bottom: 1px solid var(--cr-line); }
.lp-faq summary { cursor: pointer; list-style: none; padding: 16px 0; font-size: 15px; display: flex; justify-content: space-between; gap: 16px; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: "+"; color: var(--cr-muted); }
.lp-faq details[open] summary::after { content: "\2212"; }
.lp-faq details p { margin: 0 0 16px; font-size: 14px; line-height: 1.7; color: var(--cr-muted); }
.lp-close { margin-bottom: 0; }
.lp-close .lp-how-title { margin-bottom: 24px; }
@media (max-width: 1000px) { .lp-plans { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .lp-sky { min-height: 540px; }
  .lp-sky-text { width: 92%; }
}
@media (max-width: 560px) { .lp-plans { grid-template-columns: 1fr; } .lp-plan-about { min-height: 0; } .lp-foot { flex-direction: column; gap: 10px; } .lp-foot nav { justify-content: center; } }

@media (max-width: 600px) { .lp-main { padding-top: 22vh; } }
@media (prefers-reduced-motion: reduce) { .lp-caret { animation: none; } }