.home { background: #f6f7f8; }
.home .shell { width: min(100% - 64px, 1180px); }
.home-header { position: relative; z-index: 10; }
.home-header .header-inner { min-height: 82px; }
.home-nav { gap: 4px; }
.home-nav a { color: #424b52; }
.header-cta, .button { display: inline-flex; align-items: center; justify-content: center; gap: 20px; border-radius: 999px; text-decoration: none; font-weight: 700; white-space: nowrap; }
.header-cta { min-height: 42px; padding: 0 18px; border: 1px solid #161a1e; font-size: 13px; }
.header-cta:hover { color: #fff; background: #161a1e; }

.marketing-hero { position: relative; overflow: hidden; isolation: isolate; min-height: 700px; background: linear-gradient(120deg, #f8f9fa 8%, #f0ebf7 54%, #edf4f3 100%); }
.hero-orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); pointer-events: none; }
.hero-orb-one { width: 520px; height: 520px; left: 16%; top: 5%; background: rgba(222, 204, 238, .58); }
.hero-orb-two { width: 460px; height: 460px; right: -4%; top: 3%; background: rgba(216, 231, 242, .67); }
.hero-grid { display: grid; grid-template-columns: 1.02fr .98fr; gap: 54px; align-items: center; padding: 76px 0 62px; }
.hero-copy { position: relative; z-index: 2; }
.home .eyebrow { display: flex; align-items: center; gap: 10px; color: #59636b; font-size: 12px; letter-spacing: .14em; }
.eyebrow-dot, .availability-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #20272b; }
.home h1, .home h2 { max-width: none; margin: 0; font-weight: 710; line-height: 1.05; letter-spacing: -.065em; }
.home h1 { font-size: clamp(56px, 6.4vw, 91px); }
.home h2 { font-size: clamp(42px, 5.2vw, 66px); }
.home h1 em, .home h2 em { color: #786f86; font-style: normal; }
.hero-description { max-width: 525px; margin: 28px 0 0; color: #505c65; font-size: 20px; line-height: 1.56; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 32px; }
.button-dark { min-height: 56px; padding: 0 26px; color: #fff; background: #161a1e; font-size: 15px; }
.button-dark:hover { color: #fff; background: #3a4148; }
.availability { display: inline-flex; align-items: center; gap: 9px; color: #59636b; font-size: 14px; font-weight: 600; }
.availability-dot { width: 7px; height: 7px; background: #8d82a2; }
.hero-proof { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 66px; color: #68727a; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .09em; }
.hero-proof i { width: 3px; height: 3px; border-radius: 50%; background: #88919a; }
.hero-bottom { display: flex; align-items: center; gap: 20px; padding-bottom: 23px; color: #7b858d; font-size: 10px; font-weight: 750; letter-spacing: .16em; }
.hero-bottom-line { flex: 1; height: 1px; background: rgba(22, 26, 30, .18); }

.hero-visual { position: relative; display: grid; place-items: center; min-height: 530px; }
.hero-visual::before { content: ""; position: absolute; width: 475px; height: 475px; border: 1px solid rgba(22, 26, 30, .12); border-radius: 50%; }
.hero-visual::after { content: ""; position: absolute; width: 580px; height: 580px; border: 1px solid rgba(22, 26, 30, .06); border-radius: 50%; }
.phone { position: relative; z-index: 1; width: 274px; height: 538px; padding: 8px; border: 2px solid #2e3439; border-radius: 42px; background: #121619; box-shadow: 0 30px 60px rgba(27, 30, 36, .19), 0 8px 20px rgba(27, 30, 36, .12); transform: rotate(6deg); }
.phone-screen { position: relative; height: 100%; overflow: hidden; border-radius: 33px; padding: 49px 15px 16px; background: radial-gradient(circle at 50% 15%, #e8def0, transparent 50%), #f3f5f6; }
.phone-island { position: absolute; z-index: 2; top: 16px; left: 50%; width: 74px; height: 19px; border-radius: 20px; background: #101214; transform: translateX(-50%); }
.phone-top { display: flex; align-items: center; justify-content: space-between; }
.mini-brand { display: flex; align-items: center; gap: 6px; font-size: 17px; font-weight: 800; letter-spacing: -.055em; }
.mini-brand img { width: 18px; height: 18px; }
.phone-history { padding: 6px 9px; border: 1px solid #d7dce0; border-radius: 100px; background: #fff9; color: #515d66; font-size: 10px; }
.streak-card { display: flex; align-items: center; gap: 10px; margin-top: 18px; padding: 14px 11px; border: 1px solid #e4e8eb; border-radius: 17px; background: #fff; }
.streak-fire { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #edf0f2; font-size: 17px; }
.streak-card div { flex: 1; display: grid; gap: 2px; }
.streak-card small, .mission-kicker { color: #73808a; font-size: 8px; font-weight: 800; letter-spacing: .1em; }
.streak-card strong { font-size: 11px; }
.streak-card b { font-size: 10px; white-space: nowrap; }
.mission-card { display: flex; flex-direction: column; margin-top: 22px; min-height: 288px; padding: 20px 16px 16px; border: 1px solid #e1e6e9; border-radius: 21px; background: #fff; box-shadow: 0 10px 22px rgba(20, 25, 30, .045); }
.mission-card > strong { display: block; margin-top: 14px; font-size: 25px; line-height: 1.08; letter-spacing: -.055em; }
.mission-card p { margin: 14px 0 0; color: #626d75; font-size: 11px; line-height: 1.48; }
.mission-time { margin-top: auto; color: #77828b; font-size: 10px; }
.mission-action { display: grid; place-items: center; min-height: 34px; margin-top: 14px; border-radius: 999px; color: #fff; background: #1c2226; font-size: 10px; font-weight: 700; }
.phone-tabs { display: flex; justify-content: space-around; align-items: center; margin-top: 15px; padding: 5px; border: 1px solid #e0e3e7; border-radius: 100px; background: rgba(255, 255, 255, .9); }
.phone-tabs span { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 60px; height: 35px; border-radius: 100px; font-size: 18px; line-height: 1; }
.phone-tabs .selected { background: #e7e9ec; }
.phone-tabs small { margin-top: 2px; font-size: 7px; }
.floating-note { position: absolute; z-index: 3; display: flex; align-items: center; gap: 11px; padding: 12px 16px; border: 1px solid rgba(223, 226, 230, .9); border-radius: 15px; background: rgba(255, 255, 255, .91); box-shadow: 0 18px 34px rgba(30, 33, 40, .09); color: #293139; font-size: 12px; font-weight: 680; }
.note-top { top: 66px; right: -5px; transform: rotate(-6deg); }
.note-bottom { bottom: 54px; left: 2px; transform: rotate(-5deg); }
.note-icon, .note-check { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; background: #e8e3ef; font-size: 15px; }
.note-check { border-radius: 50%; color: #fff; background: #20272b; }
.note-bottom small { display: block; color: #77818a; font-size: 10px; font-weight: 500; }

/* The screenshot is the product proof: keep it crisp, tactile, and central. */
.hero-visual { min-height: 585px; }
.hero-visual::before { width: 505px; height: 505px; border-color: rgba(40, 43, 49, .11); }
.hero-visual::after { width: 635px; height: 635px; border-color: rgba(40, 43, 49, .055); }
.hero-device-frame { position: relative; z-index: 1; width: min(100%, 367px); filter: drop-shadow(0 34px 38px rgba(31, 35, 40, .23)); transform: rotate(4deg) translateY(8px); }
.hero-device-frame::after { content: ""; position: absolute; z-index: -1; right: -32px; bottom: 19px; left: -32px; height: 46px; border-radius: 50%; background: rgba(50, 46, 60, .18); filter: blur(20px); }
.hero-device-frame img { display: block; width: 100%; height: auto; }
.hero-visual .note-top { top: 72px; right: -10px; }
.hero-visual .note-bottom { bottom: 62px; left: -2px; }

.section { padding-top: 116px; padding-bottom: 122px; }
.section-intro { max-width: 760px; }
.section-intro > p:last-child { max-width: 640px; margin: 24px 0 0; color: #5a6670; font-size: 18px; line-height: 1.65; }
.section-intro.centered { margin-inline: auto; text-align: center; }
.section-intro.centered .eyebrow { justify-content: center; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 53px; }
.step-card { min-width: 0; padding: 22px; border: 1px solid #e1e5e9; border-radius: 24px; background: #fff; }
.step-number { display: block; color: #7b858d; font-size: 12px; font-weight: 750; letter-spacing: .1em; }
.step-art { position: relative; display: flex; flex-direction: column; justify-content: center; height: 185px; margin: 22px 0 28px; padding: 22px; border-radius: 17px; overflow: hidden; background: #edf0f5; }
.step-art-mission { background: linear-gradient(130deg, #edf0f4, #ede7f2); }
.art-label { color: #71808b; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.step-art strong { max-width: 230px; margin: 10px 0 14px; font-size: 25px; line-height: 1.1; letter-spacing: -.045em; }
.art-line { display: block; width: 78%; height: 7px; margin-top: 6px; border-radius: 99px; background: #c8cfd5; }
.art-line.short { width: 55%; }
.step-art-orb { align-items: center; background: radial-gradient(circle at 50% 43%, #d7d0e8, #edf0f5 65%); }
.orb-ring { display: grid; place-items: center; width: 112px; height: 112px; border: 1px solid #a8a1b7; border-radius: 50%; box-shadow: 0 0 0 16px rgba(171, 161, 188, .16), 0 0 0 34px rgba(171, 161, 188, .08); }
.orb-core { width: 69px; height: 69px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #b7aec9 70%, #746d87); box-shadow: inset -8px -10px 20px rgba(53, 48, 67, .15); }
.art-timer { position: absolute; bottom: 12px; color: #606a74; font-size: 12px; font-weight: 700; }
.step-art-score { background: linear-gradient(135deg, #e9edef, #e1e9eb); }
.score-bars { display: flex; gap: 7px; align-items: end; height: 37px; margin-top: 2px; }
.score-bars i { width: 15px; height: 16px; border-radius: 4px; background: #87949d; }
.score-bars i:nth-child(2) { height: 31px; background: #39454b; }
.score-bars i:nth-child(3) { height: 23px; background: #87949d; }
.score-bars i:nth-child(4) { height: 37px; background: #20282d; }
.step-card h3, .mini-feature-grid h3 { margin: 0 0 8px; font-size: 21px; letter-spacing: -.035em; }
.step-card p, .mini-feature-grid p { margin: 0; color: #66727a; font-size: 15px; line-height: 1.55; }

.feature-band { padding: 96px 0; overflow: hidden; background: #ebeef1; }
.feature-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; }
.feature-preview { display: grid; place-items: center; min-height: 525px; border-radius: 32px; background: radial-gradient(circle at 30% 20%, #e1d9ec, transparent 55%), radial-gradient(circle at 70% 80%, #dce9e6, transparent 48%), #e6e8ec; }
.debrief-preview { width: min(82%, 365px); padding: 21px; border: 1px solid #e3e6ea; border-radius: 29px; background: #f4f6f7; box-shadow: 0 30px 55px rgba(22, 29, 34, .11); transform: rotate(-5deg); }
.preview-head { display: flex; align-items: center; gap: 15px; font-size: 20px; }
.preview-head strong { flex: 1; }
.score-pill { padding: 6px 9px; border: 1px solid #d7dce0; border-radius: 100px; background: #fff; font-size: 11px; }
.preview-summary, .preview-skills { margin-top: 20px; padding: 21px; border: 1px solid #e5e8ea; border-radius: 20px; background: #fff; }
.preview-summary small { color: #889199; font-size: 9px; font-weight: 750; letter-spacing: .11em; }
.preview-summary h3 { margin: 13px 0 9px; font-size: 23px; line-height: 1.12; letter-spacing: -.045em; }
.preview-summary p { margin: 0; color: #68737b; font-size: 12px; line-height: 1.5; }
.preview-skills > strong { font-size: 17px; }
.preview-skills > div { display: grid; grid-template-columns: 1fr auto; gap: 7px; margin-top: 13px; font-size: 12px; }
.preview-skills b { color: #67727b; }
.preview-skills i { grid-column: 1 / -1; display: block; width: 100%; height: 5px; border-radius: 99px; background: linear-gradient(to right, #20272b var(--w), #e0e5e9 var(--w)); }
.feature-copy > p:not(.eyebrow) { margin: 26px 0 0; color: #5c6870; font-size: 18px; line-height: 1.64; }
.feature-points { display: grid; gap: 17px; margin-top: 34px; }
.feature-points > div { display: grid; grid-template-columns: 42px 1fr; align-items: center; column-gap: 12px; }
.feature-points span { grid-row: span 2; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #d1d7dc; border-radius: 13px; font-size: 19px; }
.feature-points strong { font-size: 15px; }
.feature-points small { color: #738089; font-size: 13px; }
.more-features { padding-bottom: 106px; }
.mini-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 58px; }
.mini-icon { display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 20px; border: 1px solid #dbe0e4; border-radius: 17px; background: #fff; font-size: 25px; }

.pricing-band { padding: 100px 0; background: #e5e8ed; }
.pricing-grid { display: grid; grid-template-columns: 1fr .8fr; gap: 100px; align-items: center; }
.pricing-grid > div:first-child > p:not(.eyebrow) { max-width: 560px; margin: 26px 0 0; color: #5a6670; font-size: 18px; line-height: 1.62; }
.pricing-grid .pricing-note { font-size: 13px !important; line-height: 1.55 !important; }
.pricing-card { padding: 34px; border: 1px solid #e0e4e7; border-radius: 26px; background: #fff; box-shadow: 0 20px 55px rgba(20, 26, 32, .055); }
.pricing-badge { display: inline-block; padding: 6px 11px; border-radius: 999px; color: #fff; background: #1b2125; font-size: 10px; font-weight: 800; letter-spacing: .11em; }
.pricing-card h3 { max-width: 370px; margin: 25px 0; font-size: 30px; line-height: 1.13; letter-spacing: -.045em; }
.pricing-card ul { margin: 0; padding: 0; list-style: none; }
.pricing-card li { padding: 12px 0; border-bottom: 1px solid #e9ecef; color: #4c5860; font-size: 15px; }
.pricing-card li::before { content: "✓"; margin-right: 12px; color: #263037; font-weight: 800; }
.pricing-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; margin-top: 27px; font-size: 14px; }
.pricing-footer span { color: #75818a; }

.faq-section { padding-bottom: 120px; }
.faq-list { max-width: 800px; margin: 55px auto 0; border-top: 1px solid #dfe4e8; }
.faq-list details { border-bottom: 1px solid #dfe4e8; }
.faq-list summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font-size: 18px; font-weight: 650; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary span { color: #65717a; font-size: 26px; font-weight: 400; line-height: 1; }
.faq-list details[open] summary span { transform: rotate(45deg); }
.faq-list details p { max-width: 690px; margin: -2px 0 24px; color: #5c6870; font-size: 15px; line-height: 1.65; }
.closing-band { padding: 110px 0; text-align: center; background: radial-gradient(circle at 28% 30%, #d6c8e5, transparent 38%), radial-gradient(circle at 78% 70%, #d6e4e5, transparent 40%), #e9e9ed; }
.closing-inner .eyebrow { justify-content: center; }
.closing-inner h2 { margin: 0 auto; }
.coming-badge { display: inline-flex; margin-top: 30px; padding: 13px 20px; border: 1px solid #b7bec5; border-radius: 999px; background: rgba(255, 255, 255, .55); font-size: 14px; font-weight: 700; }
.home-footer { background: #171c20; color: #eaf0f3; }
.home-footer .brand { color: #fff; }
.home-footer .brand-mark { filter: invert(1); }
.footer-main { display: flex; justify-content: space-between; gap: 40px; padding-top: 58px; padding-bottom: 66px; }
.footer-main p { margin: 16px 0 0; color: #a3adb4; font-size: 14px; }
.footer-main nav { display: grid; grid-template-columns: repeat(3, minmax(110px, 1fr)); gap: 13px 30px; }
.footer-main nav a { color: #ced6db; font-size: 13px; text-decoration: none; }
.footer-main nav a:hover { color: #fff; }
.footer-bottom { display: flex; justify-content: space-between; gap: 20px; padding: 20px 0 30px; border-top: 1px solid #384148; color: #9aa5ac; font-size: 12px; }

@media (max-width: 990px) {
  .hero-grid { gap: 18px; }
  .home h1 { font-size: clamp(54px, 7vw, 75px); }
  .hero-proof { margin-top: 40px; }
  .note-top { right: -22px; }
  .note-bottom { left: -22px; }
  .feature-grid, .pricing-grid { gap: 50px; }
}

@media (max-width: 760px) {
  .home .shell { width: min(100% - 32px, 640px); }
  .home-header .header-inner { min-height: 68px; }
  .home-nav, .header-cta { display: none; }
  .marketing-hero { min-height: auto; }
  .hero-grid { display: flex; flex-direction: column; gap: 24px; padding: 66px 0 24px; }
  .hero-copy { align-self: stretch; }
  .home h1 { font-size: clamp(54px, 12.5vw, 75px); }
  .hero-description { font-size: 18px; }
  .hero-proof { margin-top: 36px; }
  .hero-visual { width: 100%; min-height: 530px; overflow: hidden; }
  .hero-device-frame { width: 318px; transform: rotate(3deg) translateY(9px); }
  .note-top { right: 5%; }
  .note-bottom { left: 3%; }
  .hero-bottom { padding-top: 4px; font-size: 8px; }
  .hero-bottom span:last-child { display: none; }
  .section { padding-top: 78px; padding-bottom: 83px; }
  .steps-grid { grid-template-columns: 1fr; gap: 15px; margin-top: 35px; }
  .step-art { height: 180px; }
  .feature-band, .pricing-band { padding: 70px 0; }
  .feature-grid, .pricing-grid { grid-template-columns: 1fr; gap: 45px; }
  .feature-preview { min-height: 420px; }
  .feature-copy { order: -1; }
  .mini-feature-grid { grid-template-columns: 1fr; gap: 28px; margin-top: 40px; }
  .faq-list { margin-top: 38px; }
  .closing-band { padding: 78px 0; }
  .footer-main { flex-direction: column; padding: 45px 0; }
  .footer-main nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 420px) {
  .hero-visual { min-height: 500px; }
  .hero-visual::after { display: none; }
  .hero-device-frame { width: 286px; transform: rotate(3deg) translateY(10px); }
  .floating-note { font-size: 10px; }
  .note-top { top: 35px; }
  .note-bottom { bottom: 34px; }
  .hero-proof { gap: 9px; font-size: 10px; }
}

/* Final visual direction: Pull uses product photography/UI as the color.
   The site itself stays deliberately monochrome. */
.home { background: #fff; color: #101010; }
.home-header { border-bottom-color: #dedede; background: rgba(255, 255, 255, .94); }
.home-nav a, .header-cta:hover { color: #111; }
.home-nav a:hover { background: #f1f1f1; }
.header-cta { border-color: #111; color: #fff; background: #111; }
.header-cta:hover { color: #fff; background: #333; }
.marketing-hero { min-height: 690px; background: #fff; border-bottom-color: #dedede; }
.marketing-hero::before { background: linear-gradient(90deg, rgba(0,0,0,.025), transparent 55%); }
.hero-orb { display: none; }
.home h1, .home h2 { color: #111; }
.home h1 em, .home h2 em { color: #777; }
.home .eyebrow, .hero-description, .availability, .hero-proof, .hero-bottom { color: #666; }
.eyebrow-dot, .availability-dot { background: #111; }
.button-dark { background: #111; color: #fff; }
.button-dark:hover { background: #333; }
.hero-bottom-line { background: #d8d8d8; }
.hero-visual::before { border-color: #d6d6d6; }
.hero-visual::after { border-color: #ececec; }
.hero-device-frame::after { background: rgba(0,0,0,.14); }
.floating-note { border-color: #dedede; background: rgba(255,255,255,.96); color: #151515; box-shadow: 0 14px 30px rgba(0,0,0,.08); }
.note-icon { background: #efefef; }.note-check { background: #111; }.note-bottom small { color: #777; }
.section-intro > p:last-child, .step-card p, .mini-feature-grid p { color: #666; }
.steps-grid { gap: 0; border-color: #dedede; background: #fff; }
.step-card { border-right: 1px solid #dedede; background: #fff; }.step-card:last-child { border-right: 0; }
.step-art, .step-art-mission, .step-art-orb, .step-art-score { background: #f2f2f2; }
.art-label, .step-number, .art-timer { color: #777; }.art-line { background: #c8c8c8; }
.orb-ring { border-color: #aaa; box-shadow: 0 0 0 16px rgba(0,0,0,.05), 0 0 0 34px rgba(0,0,0,.025); }.orb-core { background: #111; }.score-bars i { background: #aaa; }.score-bars i:nth-child(2), .score-bars i:nth-child(4) { background: #111; }
.feature-band { color: #fff; background: #111; }.feature-preview { background: #222; }.debrief-preview { color: #111; border-color: #444; background: #f8f8f8; }.debrief-preview p, .debrief-preview b, .debrief-preview small { color: #555; }.feature-copy .eyebrow, .feature-copy h2 { color: #fff; }.feature-copy h2 em { color: #bdbdbd; }.feature-copy > p:not(.eyebrow) { color: #c4c4c4; }.feature-band .feature-points > div { color: #fff !important; }.feature-band .feature-points strong { display: block; color: #fff !important; opacity: 1; }.feature-band .feature-points small { display: block; color: #c4c4c4 !important; opacity: 1; }.feature-band .feature-points span { color: #fff !important; border-color: #696969; opacity: 1; }
.more-features { background: #fff; }.mini-feature-grid, .mini-feature-grid article + article { border-color: #dedede; }.mini-icon { background: #f1f1f1; }
.pricing-band { background: #f1f1f1; }.pricing-grid > div:first-child > p:not(.eyebrow), .pricing-footer span { color: #666; }.pricing-card { border-color: #d8d8d8; background: #fff; }.pricing-badge { background: #111; }.pricing-card li { border-color: #e4e4e4; color: #333; }.pricing-card li::before { color: #111; }
.faq-list, .faq-list details { border-color: #dedede; }.faq-list summary span, .faq-list details p { color: #666; }
.closing-band { background: #111; }.closing-inner .eyebrow, .closing-inner h2 { color: #fff; }.closing-inner h2 em { color: #aaa; }.coming-badge { border-color: #666; background: transparent; color: #fff; text-decoration: none; }.coming-badge:hover { background: #fff; color: #111; }
@media (max-width: 760px) { .step-card { border-right: 0; border-bottom: 1px solid #dedede; }.step-card:last-child { border-bottom: 0; } }

/* Hugeicons: local inline SVGs keep the icon treatment crisp and independent
   from emoji/symbol-font support. */
.inline-icon, .feature-icon svg, .note-icon svg, .note-check svg, .mini-icon svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.inline-icon { width: 16px; height: 16px; }
.feature-icon svg { width: 20px; height: 20px; }
.note-icon svg, .note-check svg { width: 16px; height: 16px; }
.mini-icon svg { width: 22px; height: 22px; }
.score-pill { display: inline-flex; align-items: center; gap: 4px; }