/* ==========================================================================
   ChaCha HR — public marketing site design system
   Scoped entirely under .landing-page so nothing here can leak into or be
   overridden by the authenticated app's own styles (static/css/style.css).
   Colors/fonts intentionally reuse the same design tokens as the product
   (see :root in style.css) so the public site and the app feel like one
   brand, not two.
   ========================================================================== */

.landing-page * {box-sizing:border-box; margin:0; padding:0;}
.landing-page {
    font-family: var(--sans);
    color: var(--ink);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
.landing-page img {max-width:100%; display:block;}
.landing-page a {color:inherit; text-decoration:none;}
.landing-page .wrap {max-width:1240px; margin:0 auto; padding:0 32px;}
.landing-page ::selection {background: var(--brand); color: var(--cream);}
.landing-page h1, .landing-page h2, .landing-page h3, .landing-page h4 {font-family: var(--serif); font-weight:600; letter-spacing:-0.01em; color: var(--ink);}
.landing-page .eyebrow {
    font-family: var(--mono); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase;
    color: var(--brand-deep); font-weight:500; display:flex; align-items:center; gap:10px;
  }
.landing-page .eyebrow::before {content:""; width:22px; height:1px; background: var(--brand-deep); display:inline-block;}
/* ---------------- NAV ---------------- */
.landing-page header {
    position: sticky; top:0; z-index: 100;
    background: rgba(250,247,242,0.86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }
.landing-page nav {
    display:flex; align-items:center; justify-content:space-between;
    padding: 16px 32px; max-width:1240px; margin:0 auto;
  }
.landing-page .brand-lockup {display:flex; align-items:center; gap:12px;}
.landing-page .brand-lockup img {height:42px; width:auto;}
.landing-page .brand-name {font-family:var(--serif); font-weight:700; font-size:19px; color:var(--brand); line-height:1;}
.landing-page .brand-name span {display:block; font-family:var(--serif); font-weight:400; font-size:10px; letter-spacing:.14em; color:var(--muted); margin-top:3px;}
.landing-page .nav-links {display:flex; gap:36px; align-items:center;}
.landing-page .nav-links a {font-size:14.5px; font-weight:500; color:var(--ink-soft); transition:color .2s;}
.landing-page .nav-links a:hover {color:var(--brand-deep);}
.landing-page .nav-cta {display:flex; align-items:center; gap:22px;}
.landing-page .btn {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    padding: 12px 24px; border-radius: 8px; font-weight:600; font-size:14.5px;
    cursor:pointer; border:1px solid transparent; transition: all .2s ease; white-space:nowrap;
  }
.landing-page .btn-primary {background: var(--brand); color: var(--cream);}
.landing-page .btn-primary:hover {background: var(--brand-deep); transform: translateY(-1px);}
.landing-page .btn-ghost {color:var(--ink-soft); font-weight:600; font-size:14.5px;}
.landing-page .btn-ghost:hover {color:var(--brand);}
.landing-page .btn-outline {border:1px solid var(--ink); color:var(--ink); background:transparent;}
.landing-page .btn-outline:hover {background:var(--ink); color:var(--cream);}
.landing-page .mobile-toggle {display:none;}
/* ---------------- ANIMATION SYSTEM ---------------- */
@keyframes fadeUp {
    from{opacity:0; transform:translateY(22px);}
    to{opacity:1; transform:translateY(0);}
  }
@keyframes floatY {
    0%,100%{transform:translateY(0) rotate(-5deg);}
    50%{transform:translateY(-14px) rotate(-2deg);}
  }
@keyframes pulseDot {
    0%,100%{opacity:1; transform:scale(1);}
    50%{opacity:.45; transform:scale(.8);}
  }
@keyframes marquee {
    from{transform:translateX(0);}
    to{transform:translateX(-50%);}
  }
@media (prefers-reduced-motion: reduce) {
  .landing-page * {animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important;}
  .landing-page .hero-bg-video {display:none;}
}
@media (max-width: 860px) {
  .landing-page .hero-bg-video {display:none;}
}
.landing-page .reveal {opacity:0; transform:translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);}
.landing-page .reveal.in-view {opacity:1; transform:translateY(0);}
.landing-page .reveal-group.in-view .reveal-item:nth-child(1) {transition-delay:.02s;}
.landing-page .reveal-group.in-view .reveal-item:nth-child(2) {transition-delay:.10s;}
.landing-page .reveal-group.in-view .reveal-item:nth-child(3) {transition-delay:.18s;}
.landing-page .reveal-group.in-view .reveal-item:nth-child(4) {transition-delay:.26s;}
.landing-page .reveal-group.in-view .reveal-item:nth-child(5) {transition-delay:.34s;}
.landing-page .reveal-item {opacity:0; transform:translateY(20px); transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);}
.landing-page .reveal-group.in-view .reveal-item {opacity:1; transform:translateY(0);}
/* ---------------- HERO (product-led) ---------------- */
.landing-page .hero {
    position:relative;
    padding: 76px 0 0;
    overflow: hidden;
    z-index:0;
  }
.landing-page .hero-bg-decor {
    position:absolute; inset:0; z-index:-1; pointer-events:none; overflow:hidden;
  }
.landing-page .hero-bg-video {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    min-width:100%; min-height:100%; width:auto; height:auto;
    object-fit:cover;
    opacity:.34; mix-blend-mode:multiply;
    filter: sepia(45%) saturate(1.25) contrast(1.15) brightness(.72);
    -webkit-mask-image: radial-gradient(ellipse 85% 78% at 50% 26%, #000 35%, transparent 88%);
    mask-image: radial-gradient(ellipse 85% 78% at 50% 26%, #000 35%, transparent 88%);
  }
.landing-page .hero-bg-decor .hero-fade {
    position:absolute; inset:0;
    background: linear-gradient(180deg, rgba(250,247,242,0.5) 0%, rgba(250,247,242,0.22) 34%, var(--cream) 90%);
  }
.landing-page .hero-bg-decor .dot-grid {
    position:absolute; inset:0;
    background-image: radial-gradient(rgba(26,24,20,0.10) 1.4px, transparent 1.4px);
    background-size: 26px 26px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 40%, transparent 85%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 20%, #000 40%, transparent 85%);
  }
.landing-page .hero-blob {position:absolute; border-radius:50%; filter: blur(60px); opacity:.55;}
.landing-page .blob-1 {width:420px; height:420px; background: var(--brand-soft); top:-120px; left:-100px;}
.landing-page .blob-2 {width:360px; height:360px; background: var(--info-soft); top:60px; right:-120px;}
.landing-page .blob-3 {width:320px; height:320px; background: var(--success-soft); bottom:-160px; left:38%; opacity:.4;}
.landing-page .watch-tour {
    display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:600; color: var(--ink-soft);
  }
.landing-page .watch-tour .play-circle {
    width:34px; height:34px; border-radius:50%; background: var(--white); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; box-shadow: 0 8px 18px -8px rgba(26,24,20,0.3);
    transition: transform .25s ease, box-shadow .25s ease; flex-shrink:0;
  }
.landing-page .watch-tour .play-circle svg {width:12px; height:12px; fill: var(--brand); margin-left:2px;}
.landing-page .watch-tour:hover .play-circle {transform: scale(1.1); box-shadow: 0 10px 22px -8px rgba(26,24,20,0.4);}
.landing-page .hero-copy {max-width: 760px; margin: 0 auto; text-align:center;margin-bottom: 50px;}
.landing-page .hero-copy .eyebrow {justify-content:center; opacity:0; animation: fadeUp .7s ease .05s both;}
.landing-page .hero-copy h1 {
    font-size: 54px; line-height: 1.06; letter-spacing:-0.02em; margin: 20px 0 22px;
    opacity:0; animation: fadeUp .7s ease .14s both;
  }
.landing-page .hero-copy h1 em {
    font-style: italic; font-weight:500; color: var(--brand);
  }
.landing-page .hero-copy p.lead {
    font-size:17.5px; line-height:1.65; color: var(--ink-soft); max-width: 560px; margin: 0 auto 32px;
    opacity:0; animation: fadeUp .7s ease .22s both;
  }
.landing-page .hero-actions {
    display:flex; align-items:center; justify-content:center; gap:22px; margin-bottom:16px;
    opacity:0; animation: fadeUp .7s ease .3s both;
  }
.landing-page .hero-actions .btn-primary {padding:15px 28px; font-size:15.5px; position:relative; overflow:hidden;}
.landing-page .hero-actions .btn-primary::after {
    content:""; position:absolute; inset:0; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.35) 50%, transparent 70%);
    transform: translateX(-120%);
  }
.landing-page .hero-actions .btn-primary:hover::after {transform: translateX(120%); transition: transform .7s ease;}
.landing-page .micro-note {font-size:13px; color:var(--muted);}
.landing-page .trust-row {
    display:flex; gap:34px; align-items:center; justify-content:center; flex-wrap:wrap; margin-bottom:56px;
    opacity:0; animation: fadeUp .7s ease .38s both;
  }
.landing-page .trust-row .stat {display:flex; flex-direction:column; align-items:center;}
.landing-page .trust-row .stat b {font-family:var(--serif); font-size:24px; color:var(--brand);}
.landing-page .trust-row .stat span {font-size:11.5px; color: var(--muted); text-transform:uppercase; letter-spacing:.06em;}
.landing-page .trust-divider {width:1px; height:30px; background:var(--line);}
/* screenshot stage */
.landing-page .hero-stage {
    position:relative; max-width: 1080px; margin: 0 auto; padding: 0 32px 90px;margin-top: 12px;
    opacity:0; animation: fadeUp .9s cubic-bezier(.2,.7,.2,1) .46s both;
  }
.landing-page .hero-stage::before {
    content:""; position:absolute; top:-40px; left:50%; transform:translateX(-50%);
    width:900px; height:420px; border-radius:50%;
    background: radial-gradient(ellipse at 50% 30%, var(--brand-soft) 0%, transparent 70%);
    z-index:0; pointer-events:none;
  }
.landing-page .browser-frame {
    position:relative; z-index:1; background: var(--cream); border-radius: 16px;
    border: 1px solid var(--line); box-shadow: 0 60px 100px -40px rgba(26,24,20,0.35);
    overflow:hidden; transition: transform .5s ease, box-shadow .5s ease;
  }
.landing-page .browser-frame .app-screenshot {
    display:block; width:100%; height:auto;
  }
.landing-page .hero-stage:hover .browser-frame {transform: translateY(-4px); box-shadow: 0 70px 120px -40px rgba(26,24,20,0.4);}
.landing-page .browser-topbar {
    display:flex; align-items:center; gap:8px; padding:12px 16px; background: var(--white); border-bottom:1px solid var(--line);
  }
.landing-page .browser-topbar .dots {display:flex; gap:6px;}
.landing-page .browser-topbar .dots span {width:9px; height:9px; border-radius:50%; background: var(--line);}
.landing-page .browser-topbar .url {
    margin: 0 auto; font-family:var(--mono); font-size:11.5px; color:var(--muted);
    background: var(--cream-2); padding:5px 16px; border-radius:6px;
  }
.landing-page .hero-callout {
    position:absolute; background: var(--white); border:1px solid var(--line);
    border-radius:12px; padding:11px 15px; box-shadow: 0 16px 34px -16px rgba(26,24,20,0.28);
    font-size:12.5px; font-weight:600; display:flex; align-items:center; gap:8px; z-index:2;
    opacity:0; animation: fadeUp .6s ease both;
  }
.landing-page .hero-callout .dot {width:7px; height:7px; border-radius:50%; background: var(--success); flex-shrink:0; animation: pulseDot 2.2s ease-in-out infinite;}
.landing-page .callout-1 {top: -6%; left: -4%; animation-delay: .75s;}
.landing-page .callout-2 {bottom: 10%; right: -4%; animation-delay: .88s;}
.landing-page .callout-2 .dot {background: var(--brand-deep); animation-delay:.3s;}
.landing-page .hero-mascot {
    position:absolute; width:132px; z-index:3; bottom:-8%; left:-7%;
    filter: drop-shadow(0 22px 30px rgba(26,24,20,0.28));
    opacity:0; animation: fadeUp .7s ease .6s both, floatY 5.5s ease-in-out 1.3s infinite;
  }
.landing-page .hero-mascot-tag {
    position:absolute; bottom:-4%; left:9%; z-index:4; background: var(--ink); color:var(--cream);
    font-family:var(--mono); font-size:10px; letter-spacing:.04em; padding:5px 10px; border-radius:20px;
    white-space:nowrap; opacity:0; animation: fadeUp .6s ease 1.1s both;
  }
/* floating feature icon badges scattered around the screenshot */
.landing-page .feature-orb {
    position:absolute; width:46px; height:46px; border-radius:14px; z-index:2;
    background: var(--white); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    box-shadow: 0 14px 28px -14px rgba(26,24,20,0.3);
    opacity:0; animation: fadeUp .6s ease both, floatY 6s ease-in-out infinite;
  }
.landing-page .feature-orb svg {width:20px; height:20px; stroke: var(--brand); fill:none;}
.landing-page .orb-1 {top:6%; right:8%; animation-delay: .95s, 1.6s;}
.landing-page .orb-2 {top:38%; left:-3.5%; animation-delay: 1.08s, 2.3s;}
.landing-page .orb-3 {bottom:26%; right:-3%; animation-delay: 1.2s, 1.9s;}
.landing-page .orb-2 svg, .landing-page .orb-3 svg {stroke: var(--brand-deep);}
/* animated cursor + click ripple simulating a live product interaction */
.landing-page .demo-cursor {
    position:absolute; z-index:5; width:16px; height:16px; pointer-events:none;
    animation: cursorTour 9s ease-in-out 1.4s infinite;
  }
.landing-page .demo-cursor svg {width:100%; height:100%; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.35));}
.landing-page .demo-click {
    position:absolute; z-index:4; width:14px; height:14px; border-radius:50%;
    border: 2px solid var(--brand); pointer-events:none; opacity:0;
    animation: clickRipple 9s ease-in-out 1.4s infinite;
  }
@keyframes cursorTour {
    0%, 6%{ top:19%; left:15%; opacity:0; }
    10%, 24%{ top:19%; left:15%; opacity:1; }
    32%, 46%{ top:15%; left:63%; opacity:1; }
    54%{ top:15%; left:63%; opacity:0; }
    60%, 74%{ top:58%; left:80%; opacity:1; }
    88%{ top:58%; left:80%; opacity:1; }
    96%, 100%{ top:58%; left:80%; opacity:0; }
  }
@keyframes clickRipple {
    0%, 22%{ opacity:0; transform: scale(.5); top:19%; left:15%; }
    26%{ opacity:.9; transform: scale(1); top:19%; left:15%; }
    32%{ opacity:0; transform: scale(1.6); top:19%; left:15%; }
    46%, 54%{ opacity:0; top:15%; left:63%; }
    58%{ opacity:.9; transform: scale(1); top:15%; left:63%; }
    64%{ opacity:0; transform: scale(1.6); top:15%; left:63%; }
    100%{ opacity:0; }
  }
/* ---------------- LOGO STRIP (marquee) ---------------- */
.landing-page .logo-strip {
    border-top:1px solid var(--line); border-bottom:1px solid var(--line);
    padding: 26px 0; background: var(--cream-2);
    display:flex; align-items:center; gap:28px; overflow:hidden;
  }
.landing-page .logo-strip .label {
    font-size:12.5px; color:var(--muted); font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase;
    flex-shrink:0; padding-left:32px;
  }
.landing-page .marquee-mask {
    flex:1; overflow:hidden; position:relative;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  }
.landing-page .marquee-track {
    display:flex; gap:56px; width:max-content;
    animation: marquee 26s linear infinite;
  }
.landing-page .logo-strip:hover .marquee-track {animation-play-state: paused;}
.landing-page .marquee-track span {
    font-family:var(--serif); font-weight:600; font-size:19px; color: var(--ink-soft); opacity:.55; white-space:nowrap;
  }
/* ---------------- SECTION SHARED ---------------- */
.landing-page section {padding: 108px 0;}
.landing-page .section-head {max-width: 620px; margin-bottom: 64px;}
.landing-page .section-head h2 {font-size: 38px; margin-top:16px; line-height:1.15;}
.landing-page .section-head p {color: var(--ink-soft); font-size:16.5px; margin-top:16px; line-height:1.6;}
.landing-page .center {text-align:center; margin-left:auto; margin-right:auto;}
/* ---------------- FEATURES ---------------- */
.landing-page .feature-grid {
    display:grid; grid-template-columns: repeat(3, 1fr); gap:1px;
    background: var(--line); border: 1px solid var(--line); border-radius: 18px; overflow:hidden;
  }
.landing-page .feature-card {background: var(--white); padding: 38px 34px; transition: background .2s;}
.landing-page .feature-card:hover {background: var(--cream-2);}
.landing-page .feature-icon {
    width:44px; height:44px; border-radius:10px; background: var(--brand-soft);
    display:flex; align-items:center; justify-content:center; margin-bottom:20px;
  }
.landing-page .feature-icon svg {width:22px; height:22px; stroke: var(--brand);}
.landing-page .feature-card h3 {font-size:19px; margin-bottom:10px; font-weight:600;}
.landing-page .feature-card p {font-size:14.5px; color:var(--muted); line-height:1.6;}
/* ---------------- PRODUCT SHOWCASE (alternating screenshot + copy) ---------------- */
.landing-page .product {background: var(--ink); position:relative; overflow:hidden;}
.landing-page .product::before {
    content:""; position:absolute; inset:0;
    background: radial-gradient(ellipse at 15% 0%, rgba(255,107,53,0.10), transparent 55%);
  }
.landing-page .product .section-head h2 {color: var(--cream);}
.landing-page .product .eyebrow {color: var(--brand);}
.landing-page .product .eyebrow::before {background:var(--brand);}
.landing-page .product .section-head p {color: rgba(250,247,242,0.62);}
.landing-page .showcase-row {display:grid; grid-template-columns: 1fr 1fr; gap:64px; align-items:center; margin-bottom:88px;}
.landing-page .showcase-row:last-of-type {margin-bottom:64px;}
.landing-page .showcase-row.reverse .showcase-copy {order:2;}
.landing-page .showcase-row.reverse .showcase-shot {order:1;}
.landing-page .showcase-copy .eyebrow {margin-bottom:16px;}
.landing-page .showcase-copy h3 {font-size:27px; margin-bottom:14px; line-height:1.22; color:var(--cream);}
.landing-page .showcase-copy p {color:rgba(250,247,242,0.65); font-size:15px; line-height:1.65; margin-bottom:20px;}
.landing-page .showcase-copy ul {list-style:none; display:flex; flex-direction:column; gap:11px;}
.landing-page .showcase-copy li {font-size:13.5px; color:rgba(250,247,242,0.8); display:flex; gap:9px; align-items:flex-start;}
.landing-page .showcase-copy li svg {width:15px; height:15px; stroke: var(--brand); flex-shrink:0; margin-top:2px;}
.landing-page .mini-frame {
    max-width:540px; width:100%; margin:0 auto; background: var(--cream); border-radius:14px;
    border:1px solid rgba(255,255,255,0.08); box-shadow: 0 40px 70px -30px rgba(0,0,0,0.5); overflow:hidden;
    transition: transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
  }
.landing-page .mini-frame:hover {transform: translateY(-6px); box-shadow: 0 50px 85px -30px rgba(0,0,0,0.6);}
.landing-page .mini-frame .browser-topbar {padding:9px 12px;}
.landing-page .mini-frame .browser-topbar .dots span {width:7px; height:7px;}
.landing-page .mini-frame .browser-topbar .url {font-size:9.5px; padding:4px 11px;}
.landing-page .mini-scale-wrap {position:relative; width:100%; height: 240px; overflow:hidden;}
.landing-page .mini-scale {position:absolute; top:0; left:0; width:900px; transform: scale(0.578); transform-origin: top left;}
.landing-page .app-mockup.mini .app-main {min-height:415px; padding:22px 26px 26px;}
.landing-page .app-mockup.mini .app-sidebar {padding:18px 14px;}
/* generic stat + list components reused across mini screens */
.landing-page .mini-stats {display:grid; grid-template-columns: repeat(3,1fr); gap:12px; margin-bottom:18px;}
.landing-page .mini-stat {background: var(--white); border:1px solid var(--line); border-radius:10px; padding:14px;}
.landing-page .mini-stat span {display:block; font-size:11px; color:var(--muted); margin-bottom:6px;}
.landing-page .mini-stat b {font-family:var(--serif); font-size:20px; color:var(--ink);}
.landing-page .mini-stat b.accent-success {color:var(--success);}
.landing-page .mini-stat b.accent-warning {color:var(--warning);}
.landing-page .mini-panel-head {display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.landing-page .mini-panel-head h4 {font-family:var(--serif); font-size:16px; font-weight:700;}
.landing-page .mini-panel-head .pill {font-size:10.5px; font-weight:700; padding:4px 10px; border-radius:20px; background: var(--success-soft); color:var(--success);}
.landing-page .list-card {background: var(--white); border:1px solid var(--line); border-radius:12px; overflow:hidden;}
.landing-page .list-row {display:grid; grid-template-columns: 1.8fr 1fr 1fr; align-items:center; padding:11px 16px; font-size:12px; gap:8px;}
.landing-page .list-row.head {background: var(--cream-2); color:var(--muted); font-weight:700; font-size:10px; text-transform:uppercase; letter-spacing:.04em;}
.landing-page .list-row:not(.head) {border-top:1px solid var(--line);}
.landing-page .list-person {display:flex; align-items:center; gap:8px;}
.landing-page .mini-avatar {width:22px; height:22px; border-radius:50%; background: var(--brand-soft); flex-shrink:0;}
.landing-page .mini-chip {font-size:10px; font-weight:700; padding:3px 8px; border-radius:10px; width:fit-content;}
.landing-page .mini-chip.ok {background: var(--success-soft); color:var(--success);}
.landing-page .mini-chip.pend {background: var(--warning-soft); color:var(--warning);}
.landing-page .mini-chip.off {background: var(--info-soft); color:var(--info);}
.landing-page .goal-card {background:var(--white); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:10px;}
.landing-page .goal-card:last-child {margin-bottom:0;}
.landing-page .goal-top {display:flex; justify-content:space-between; font-size:12.5px; font-weight:600; margin-bottom:8px;}
.landing-page .goal-top span.pct {font-family:var(--serif); color:var(--brand-deep); font-weight:700;}
.landing-page .goal-bar {height:5px; background:var(--line); border-radius:3px; overflow:hidden;}
.landing-page .goal-bar i {display:block; height:100%; background:var(--brand);}
.landing-page .goal-meta {font-size:10.5px; color:var(--muted); margin-top:7px;}
/* compact remainder row */
.landing-page .also-row {
    display:grid; grid-template-columns: repeat(3,1fr); gap:32px; border-top:1px solid rgba(255,255,255,0.1); padding-top:44px;
  }
.landing-page .also-item {display:flex; gap:14px; align-items:flex-start;}
.landing-page .also-icon {transition: transform .3s ease, background .3s ease;}
.landing-page .also-item:hover .also-icon {transform: translateY(-3px) scale(1.06); background: rgba(255,107,53,0.22);}
.landing-page .also-icon {
    width:38px; height:38px; border-radius:9px; background: rgba(255,107,53,0.14); flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
.landing-page .also-icon svg {width:18px; height:18px; stroke:var(--brand);}
.landing-page .also-item h5 {color:var(--cream); font-size:14.5px; font-weight:600; margin-bottom:5px;}
.landing-page .also-item p {color:rgba(250,247,242,0.55); font-size:13px; line-height:1.55;}
.landing-page .app-mockup {
    position:relative; background: var(--cream); border-radius: 20px; border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 40px 90px -30px rgba(0,0,0,0.6);
    overflow:hidden; display:grid; grid-template-columns: 230px 1fr;
  }
/* sidebar */
.landing-page .app-sidebar {background: var(--ink); padding: 22px 16px; display:flex; flex-direction:column; gap:4px;}
.landing-page .app-workspace {
    display:flex; align-items:center; gap:10px; padding: 0 4px 18px; margin-bottom:14px; border-bottom:1px solid rgba(255,255,255,0.08);
  }
.landing-page .app-workspace .mono-badge {
    width:34px; height:34px; border-radius:9px; background: var(--brand); color:var(--ink);
    display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:700; font-size:15px; flex-shrink:0;
  }
.landing-page .app-workspace b {color: var(--cream); font-size:13.5px; font-family:var(--serif); display:block; line-height:1.2;}
.landing-page .app-workspace .plan-pill {
    font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; color: var(--brand); background: rgba(255,107,53,0.14);
    padding:2px 7px; border-radius:5px; display:inline-block; margin-top:4px;
  }
.landing-page .app-group-label {
    font-family:var(--mono); font-size:10px; letter-spacing:.09em; color: rgba(250,247,242,0.35);
    padding: 14px 10px 6px; text-transform:uppercase;
  }
.landing-page .app-item {
    padding:8px 10px; border-radius:7px; font-size:12.5px; font-weight:500; color: rgba(250,247,242,0.65);
    display:flex; align-items:center; gap:9px;
  }
.landing-page .app-item svg {width:14px; height:14px; stroke: currentColor; flex-shrink:0;}
.landing-page .app-item.active {background: var(--brand); color: var(--ink); font-weight:700;}
/* main pane */
.landing-page .app-main {background: var(--cream); padding: 24px 30px 30px;}
.landing-page .trial-banner {
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    background: linear-gradient(90deg, var(--brand-soft), var(--brand-tint));
    border:1px solid #F4CBB3; border-radius:12px; padding:12px 18px; margin-bottom:22px;
  }
.landing-page .trial-banner .trial-msg {display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:600; color: var(--ink-soft);}
.landing-page .trial-banner .trial-msg svg {width:15px; height:15px; stroke: var(--brand-deep); flex-shrink:0;}
.landing-page .trial-cta {
    background: var(--brand); color: var(--white); font-size:12px; font-weight:700; padding:8px 14px; border-radius:7px;
    display:flex; align-items:center; gap:6px; white-space:nowrap;
  }
.landing-page .app-greeting-row {display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:26px; gap:16px;}
.landing-page .app-date {font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; color: var(--muted); text-transform:uppercase;}
.landing-page .app-greeting {font-family:var(--serif); font-size:26px; font-weight:700; margin-top:6px;}
.landing-page .app-greeting em {color: var(--brand); font-style:italic; font-weight:500;}
.landing-page .app-subtitle {font-size:13px; color:var(--muted); margin-top:5px;}
.landing-page .app-request-btn {
    background: var(--ink); color:var(--cream); font-size:12.5px; font-weight:700; padding:10px 16px; border-radius:8px;
    display:flex; align-items:center; gap:7px; white-space:nowrap; flex-shrink:0;
  }
.landing-page .leave-hero-card {
    background: var(--ink); border-radius:16px; padding: 24px 28px; margin-bottom:26px;
    display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; position:relative; overflow:hidden;
  }
.landing-page .leave-hero-card::before {
    content:""; position:absolute; right:-40px; top:-40px; width:180px; height:180px; border-radius:50%;
    background: radial-gradient(circle, rgba(255,107,53,0.16), transparent 70%);
  }
.landing-page .leave-hero-head {grid-column: 1 / -1; margin-bottom:4px; position:relative; z-index:1;}
.landing-page .leave-hero-head .eyebrow {color: var(--brand); margin-bottom:8px;}
.landing-page .leave-hero-head .eyebrow::before {background:var(--brand);}
.landing-page .leave-hero-head h4 {font-family:var(--serif); font-size:19px; color:var(--cream); font-weight:700;}
.landing-page .leave-stat {position:relative; z-index:1;}
.landing-page .leave-stat b {font-family:var(--serif); font-size:30px; color: var(--cream); display:block;}
.landing-page .leave-stat span {font-size:10.5px; color: rgba(250,247,242,0.5); text-transform:uppercase; letter-spacing:.05em;}
.landing-page .leave-grid-head {display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;}
.landing-page .leave-grid-head h4 {font-family:var(--serif); font-size:17px; font-weight:700;}
.landing-page .leave-grid-head a {font-size:12.5px; font-weight:600; color: var(--brand-deep);}
.landing-page .leave-grid {display:grid; grid-template-columns: repeat(5, 1fr); gap:12px;}
.landing-page .leave-card {background: var(--white); border:1px solid var(--line); border-radius:12px; padding:14px;}
.landing-page .leave-icon {
    width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; margin-bottom:14px;
  }
.landing-page .leave-icon svg {width:15px; height:15px; stroke:var(--white); fill:none;}
.landing-page .leave-card h5 {font-size:12px; font-weight:600; margin-bottom:6px;}
.landing-page .leave-card .amt {font-family:var(--serif); font-size:17px; font-weight:700;}
.landing-page .leave-card .amt span {font-family:var(--sans); font-size:11px; font-weight:500; color:var(--muted);}
.landing-page .leave-bar {height:4px; background: var(--line); border-radius:3px; margin:10px 0 7px; overflow:hidden;}
.landing-page .leave-bar i {display:block; height:100%; width:0%; background: var(--brand); border-radius:3px;}
.landing-page .leave-card .used {font-size:11px; color:var(--muted);}
/* ---------------- HOW IT WORKS ---------------- */
.landing-page .flow {display:grid; grid-template-columns: repeat(4, 1fr); gap:0; position:relative;}
.landing-page .flow::before {
    content:""; position:absolute; top:20px; left:10%; right:10%; height:1px; background: var(--line); z-index:0;
  }
.landing-page .flow-step {position:relative; z-index:1; padding-right:24px;}
.landing-page .flow-num {
    width:40px; height:40px; border-radius:50%; background: var(--white); border:1px solid var(--line);
    display:flex; align-items:center; justify-content:center; font-family:var(--mono); font-size:13px; font-weight:600;
    color: var(--brand); margin-bottom:22px;
  }
.landing-page .flow-step h3 {font-size:17.5px; margin-bottom:9px;}
.landing-page .flow-step p {font-size:14px; color:var(--muted); line-height:1.6;}
/* ---------------- STATS BAND ---------------- */
.landing-page .stats-band {background: var(--ink); color: var(--cream); padding:70px 0;}
.landing-page .stats-band .wrap {display:grid; grid-template-columns: repeat(4,1fr); gap:20px;}
.landing-page .stat-block b {font-family:var(--serif); font-size:44px; display:block; color: var(--cream);}
.landing-page .stat-block .accent {color:#E4967C;}
.landing-page .stat-block p {font-size:13.5px; color:rgba(250,247,242,0.6); margin-top:8px;}
/* ---------------- TESTIMONIAL ---------------- */
.landing-page .testimonial {background: var(--cream-2);}
.landing-page .quote-card {
    background: var(--white); border:1px solid var(--line); border-radius:20px; padding:56px;
    display:grid; grid-template-columns: 1fr 1.6fr; gap:48px; align-items:center;
  }
.landing-page .quote-mark {font-family:var(--serif); font-size:100px; line-height:0.6; color: var(--brand-soft); font-style:italic;}
.landing-page .quote-text {font-family:var(--serif); font-size:25px; line-height:1.5; font-weight:500; color:var(--ink);}
.landing-page .quote-person {display:flex; align-items:center; gap:14px; margin-top:26px;}
.landing-page .quote-avatar {width:46px; height:46px; border-radius:50%; background: var(--brand); flex-shrink:0;}
.landing-page .quote-person b {font-size:14.5px; display:block;}
.landing-page .quote-person span {font-size:13px; color:var(--muted);}
/* ---------------- PRICING ---------------- */
.landing-page .pricing-grid {display:grid; grid-template-columns: repeat(3, 1fr); gap:24px;}
.landing-page .price-card {
    background: var(--white); border: 1px solid var(--line); border-radius: 18px; padding: 38px 32px;
    display:flex; flex-direction:column;
  }
.landing-page .price-card.featured {
    background: var(--brand); border-color: var(--brand); color: var(--cream); position:relative; transform: scale(1.03);
    box-shadow: 0 30px 60px -25px rgba(20,45,78,0.5);
  }
.landing-page .price-card.featured .plan-desc, .landing-page .price-card.featured .price-suffix {color: rgba(250,247,242,0.7);}
.landing-page .price-card.featured li {color: rgba(250,247,242,0.92); border-color: rgba(255,255,255,0.15);}
.landing-page .badge-pop {
    position:absolute; top:-13px; right:32px; background: var(--brand-deep); color:var(--cream);
    font-size:11.5px; font-weight:700; padding:5px 12px; border-radius:20px; letter-spacing:.03em;
  }
.landing-page .plan-name {font-family:var(--serif); font-size:22px; font-weight:600; margin-bottom:8px;}
.landing-page .plan-desc {font-size:13.5px; color:var(--muted); margin-bottom:26px;}
.landing-page .price-tag {font-family:var(--serif); font-size:42px; font-weight:600; display:flex; align-items:baseline; gap:6px;}
.landing-page .price-suffix {font-family:var(--sans); font-size:14px; font-weight:500; color:var(--muted);}
.landing-page .price-card ul {list-style:none; margin: 28px 0 32px; display:flex; flex-direction:column; gap:13px;}
.landing-page .price-card li {font-size:14px; padding-bottom:13px; border-bottom:1px solid var(--line); display:flex; gap:10px;}
.landing-page .price-card li:last-child {border-bottom:none; padding-bottom:0;}
.landing-page .price-card li svg {width:16px; height:16px; flex-shrink:0; margin-top:2px; stroke: var(--brand-deep);}
.landing-page .price-card.featured li svg {stroke: #E4967C;}
.landing-page .price-card .btn {margin-top:auto; width:100%;}
/* ---------------- CTA BANNER ---------------- */
.landing-page .cta-banner {
    background: var(--brand-deep); border-radius: 26px; padding: 72px 64px;
    display:flex; align-items:center; justify-content:space-between; gap:40px;
    position:relative; overflow:hidden; color: var(--cream);
  }
.landing-page .cta-banner::after {
    content:""; position:absolute; right:-60px; bottom:-60px; width:280px; height:280px; border-radius:50%;
    border: 1px solid rgba(255,255,255,0.14);
  }
.landing-page .cta-banner h2 {color: var(--cream); font-size:36px; max-width:460px; position:relative; z-index:1;}
.landing-page .cta-banner p {color: rgba(250,247,242,0.75); margin-top:14px; font-size:15.5px; max-width:420px; position:relative; z-index:1;}
.landing-page .cta-actions {display:flex; gap:16px; position:relative; z-index:1; flex-shrink:0;}
.landing-page .cta-banner .btn-primary {background: var(--cream); color: var(--brand-deep);}
.landing-page .cta-banner .btn-primary:hover {background: var(--white); transform: translateY(-1px);}
.landing-page .cta-banner .btn-outline {border-color: rgba(250,247,242,0.4); color: var(--cream);}
.landing-page .cta-banner .btn-outline:hover {background: rgba(250,247,242,0.12); color: var(--cream);}
/* ---------------- FOOTER ---------------- */
.landing-page footer {background: var(--ink); color: rgba(250,247,242,0.68); padding: 64px 0 30px;}
.landing-page .footer-grid {display:grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap:40px; padding-bottom:48px; border-bottom:1px solid rgba(255,255,255,0.1);}
.landing-page .footer-brand {display:flex; align-items:center; gap:12px; margin-bottom:18px;}
.landing-page .footer-brand img {height:36px;}
.landing-page .footer-brand b {font-family:var(--serif); color:var(--cream); font-size:18px;}
.landing-page .footer-grid p {font-size:14px; line-height:1.6; max-width:280px;}
.landing-page .footer-col h4 {font-size:13px; color: var(--cream); margin-bottom:18px; font-weight:600;}
.landing-page .footer-col ul {list-style:none; display:flex; flex-direction:column; gap:11px;}
.landing-page .footer-col a {font-size:14px; transition: color .2s;}
.landing-page .footer-col a:hover {color: var(--cream);}
.landing-page .footer-bottom {display:flex; justify-content:space-between; align-items:center; padding-top:26px; font-size:13px; flex-wrap:wrap; gap:12px;}
.landing-page .footer-social {display:flex; gap:16px;}
/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 980px) {
  .landing-page .hero-mascot, .landing-page .hero-mascot-tag, .landing-page .feature-orb, .landing-page .demo-cursor, .landing-page .demo-click {display:none;}
  .landing-page .hero-blob {opacity:.35; filter: blur(40px);}
  .landing-page .watch-tour {margin-top:18px; justify-content:center;}
  .landing-page .hero-copy {display:flex; flex-direction:column; align-items:center;}
  .landing-page .nav-links {display:none;}
  .landing-page .hero-copy h1 {font-size:38px;}
  .landing-page .hero-stage {padding: 0 16px 60px;}
  .landing-page .app-mockup {grid-template-columns: 1fr;}
  .landing-page .app-sidebar {display:none;}
  .landing-page .leave-hero-card {grid-template-columns: repeat(2,1fr);}
  .landing-page .leave-grid {grid-template-columns: repeat(2,1fr);}
  .landing-page .hero-callout {display:none;}
  .landing-page .showcase-row, .landing-page .showcase-row.reverse {grid-template-columns:1fr; gap:28px;}
  .landing-page .showcase-row .showcase-copy, .landing-page .showcase-row.reverse .showcase-copy {order:1;}
  .landing-page .showcase-row .showcase-shot, .landing-page .showcase-row.reverse .showcase-shot {order:2;}
  .landing-page .mini-scale-wrap {height:auto;}
  .landing-page .mini-scale {position:static; width:100%; transform:none;}
  .landing-page .app-mockup.mini .app-main {min-height:0; padding:18px;}
  .landing-page .mini-stats {grid-template-columns:1fr;}
  .landing-page .list-row {grid-template-columns: 1.6fr 1fr 1fr; font-size:11px;}
  .landing-page .also-row {grid-template-columns:1fr; gap:28px;}
  .landing-page .flow {grid-template-columns: 1fr; gap:36px;}
  .landing-page .flow::before {display:none;}
  .landing-page .stats-band .wrap {grid-template-columns: repeat(2,1fr); gap:36px;}
  .landing-page .quote-card {grid-template-columns:1fr; padding:36px;}
  .landing-page .cta-banner {flex-direction:column; text-align:center; padding: 48px 32px;}
  .landing-page .footer-grid {grid-template-columns: 1fr 1fr; gap:32px;}
}