/* Direction 04: presentation-only homepage refinement.
   Scope excludes #appContent, the card rendering UI, and the frozen product
   screenshots. Original routes, IDs, scripts and Tailwind tokens are retained. */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;650;700;800&display=swap');








#landingContent{font-family:'DM Sans',sans-serif;background:white;color:#172b40}
#landingContent>.py-20>.container{max-width:1280px;padding-left:24px;padding-right:24px}
#landingContent #hero{background:#fff;padding:88px 0 105px;overflow:hidden}
#hero>.container{max-width:1280px;padding-left:24px;padding-right:24px}
#hero>.container>.flex{gap:45px;align-items:center}
#hero .ct-hero-copy{width:47%;flex-shrink:0;text-align:left;padding-bottom:15px}
#hero .ct-eyebrow{font-size:9px;font-weight:700;letter-spacing:1.7px;color:#285db6;margin:0 0 28px;line-height:1.7}
#hero .ct-eyebrow:before{content:'';display:inline-block;height:6px;width:6px;border-radius:50%;background:#285db6;margin-right:10px;vertical-align:middle}
#hero .ct-hero-copy h1{font-family:'DM Sans',sans-serif;font-weight:650;font-size:clamp(48px,5.25vw,76px);line-height:1.08;letter-spacing:-3.5px;margin:0 0 32px;color:#172b40}
#hero .ct-hero-copy h1>span{color:#285db6;font-weight:500}
#hero .ct-hero-description{font-size:16px;line-height:1.9;color:#596b7c;max-width:455px;margin:0 0 30px}
.ct-hero-actions{display:flex;gap:26px;align-items:center}
#hero .ct-primary{display:inline-flex;gap:30px;align-items:center;padding:17px 23px;background:#285db6;border:1px solid #285db6;color:#fff;border-radius:8px;font-weight:650;font-size:14px;box-shadow:0 3px 0 #193e7b15;transition:background .2s;white-space:nowrap}
#hero .ct-primary:hover{background:#1c478f}
.ct-primary>span{font-size:21px;line-height:1}
#hero .ct-secondary{font-size:12px;font-weight:650;color:#233f60;white-space:nowrap}
.ct-secondary>span{margin-left:8px}
.ct-checks{display:flex;gap:17px;flex-wrap:wrap;font-size:10px;color:#596b7c;margin-top:22px}
#hero .ct-hero-note{font-size:11px;line-height:1.85;margin:35px 0 0;padding-left:15px;border-left:2px solid #dce6f4;color:#233f60}
.ct-hero-note>span{color:#647486}
#hero .ct-product-preview{width:49%;margin:0 0 0 auto;padding-right:12px;flex-shrink:0}
/* The snapshot keeps the real app's fonts/colors and all message/GIF markup. */
.ct-product-preview{font-family:ui-sans-serif,system-ui,sans-serif}
#landingContent #features{background:#f3f6fa;padding:78px 0 84px;border-top:1px solid #edf0f5}
#landingContent #features h2,#landingContent #use-cases h2,#landingContent #faq h2{font-family:'DM Sans',sans-serif;font-size:40px;letter-spacing:-1.7px;line-height:1.18;font-weight:600;color:#172b40;max-width:720px;text-align:left;margin:0 0 40px}
#landingContent #features .grid{gap:20px}
#landingContent #features .grid>div{box-shadow:none;border:1px solid #e2e8f0;border-radius:12px;padding:28px;background:#fff}
#landingContent #features .text-5xl{font-size:27px;margin-bottom:23px}
#landingContent #features h3{font-size:18px;font-weight:650;letter-spacing:-.4px;line-height:1.3;margin-bottom:12px}
#landingContent #features .grid p{font-size:13px;line-height:1.8;color:#596b7c}
#landingContent #use-cases{padding:90px 0 95px}
#landingContent #use-cases h2{margin-bottom:20px}
#landingContent #use-cases>.container>p{max-width:560px;margin:0 0 35px;text-align:left;font-size:14px;line-height:1.8;color:#596b7c}
#landingContent #use-cases .grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:17px}
#landingContent #use-cases .grid>a{background:#f0f4f9;border:1px solid #e6ebf2;border-radius:12px;padding:24px 18px;text-align:left;transition:transform .2s,background .2s}
#landingContent #use-cases .grid>a:nth-child(5n+2){background:#eff2fb}
#landingContent #use-cases .grid>a:nth-child(5n+3){background:#f6f3e9}
#landingContent #use-cases .grid>a:nth-child(5n+4){background:#edf5f1}
#landingContent #use-cases .grid>a:nth-child(5n+5){background:#f6eff3}
#landingContent #use-cases .grid>a:hover{transform:translateY(-3px);box-shadow:none;border-color:#b6c9e2}
#landingContent #use-cases .text-5xl{font-size:28px;margin-bottom:26px}
#landingContent #use-cases h3{font-size:15px;line-height:1.35;font-weight:650;margin-bottom:12px}
#landingContent #use-cases .grid p{font-size:11px;line-height:1.75;color:#526478}
#landingContent #faq{background:#f7f9fc;padding:85px 0 95px;border-top:1px solid #e8edf4}
#landingContent #faq h2{font-size:38px;max-width:none}
#landingContent #faq .max-w-3xl{max-width:900px;margin-left:0}
#landingContent #faq .shadow-md{box-shadow:none;border:1px solid #e0e6ee;border-radius:10px;overflow:hidden;margin-bottom:12px}
#landingContent #faq button{padding:23px 25px;color:#263d55}
#landingContent #faq button span{font-size:15px;line-height:1.55;font-weight:600}
#landingContent #faq button svg{width:19px;height:19px;flex-shrink:0;margin-left:20px;color:#285db6}
#landingContent #faq .text-gray-600{color:#596b7c;font-size:13px;line-height:1.9}
#landingContent #faq button+div{font-size:13px;line-height:1.9}
#landingContent a:focus-visible,






#hero .ct-product-preview [role="img"]{isolation:isolate}
@media(max-width:1100px){#hero>.container>.flex{gap:22px}#hero .ct-hero-copy{width:46%}#hero .ct-product-preview{width:51%}#hero .ct-hero-copy h1{font-size:58px;letter-spacing:-2.7px}.ct-hero-actions{gap:16px}#hero .ct-primary{font-size:12px;padding:15px 18px;gap:20px}#hero .ct-secondary{font-size:11px}.ct-checks{gap:10px;font-size:9px}#landingContent #use-cases .grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:767px){#landingContent #hero{padding:45px 0 50px}#hero>.container{padding:0 20px}#hero>.container>.flex{gap:40px}#hero .ct-hero-copy{width:100%;padding:0}#hero .ct-eyebrow{font-size:8px;letter-spacing:1.25px;margin-bottom:22px}#hero .ct-hero-copy h1{font-size:clamp(46px,9.4vw,66px);letter-spacing:-2.6px;line-height:1.12;margin-bottom:25px}#hero .ct-hero-description{font-size:14px;line-height:1.85;max-width:470px;margin-bottom:25px}#hero .ct-primary{font-size:13px;padding:15px 18px;gap:24px}.ct-hero-actions{gap:22px}#hero .ct-secondary{font-size:11px}.ct-checks{gap:14px;font-size:9px;margin-top:20px}#hero .ct-hero-note{font-size:10px;margin-top:26px}#hero .ct-product-preview{width:100%;max-width:575px;margin:0 auto 20px;padding:0}#landingContent #features,#landingContent #use-cases,#landingContent #faq{padding:55px 0}#landingContent>.py-20>.container{padding-left:20px;padding-right:20px}#landingContent #features h2,#landingContent #use-cases h2,#landingContent #faq h2{font-size:31px;letter-spacing:-1px;margin-bottom:28px}#landingContent #features .grid{gap:14px}#landingContent #features .grid>div{padding:23px}#landingContent #features h3{font-size:18px}#landingContent #features .text-5xl{font-size:25px;margin-bottom:16px}#landingContent #use-cases .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}#landingContent #use-cases .grid>a{padding:22px 16px}#landingContent #use-cases h3{font-size:14px}#landingContent #use-cases .grid p{font-size:11px}#landingContent #use-cases .text-5xl{margin-bottom:20px}#landingContent #use-cases>.container>p{font-size:13px}#landingContent #faq button{padding:20px}#landingContent #faq button span{font-size:14px}}
@media(max-width:359px){#hero .ct-hero-copy h1{font-size:43px;letter-spacing:-2px}.ct-hero-actions{gap:15px}#hero .ct-primary{font-size:12px;padding:14px 15px;gap:17px}#hero .ct-secondary{font-size:10px}.ct-checks{font-size:8px;gap:10px}}