/* Catalyst homepage · individual watercolor stories, October 2026.
   Pigment and paper remain in the paintings; copy and controls are live HTML. */
.wc-home{--paper:#FBF8F1;--surface:#FFFCF7;--ink:#102437;--ink-soft:#4D5F6C;--hairline:#D8DDD9;--maxw:1440px;background:var(--paper);font-size:16px;line-height:1.75}
.wc-home h1,.wc-home h2,.wc-home h3{text-wrap:balance}
.wc-home h1{font-size:clamp(48px,5.5vw,80px);line-height:1.06;letter-spacing:-.052em}
.wc-home h2{font-size:clamp(34px,3.5vw,50px);line-height:1.15;letter-spacing:-.04em}
.wc-home h3{font-size:clamp(23px,2vw,29px);line-height:1.24;letter-spacing:-.025em}
.wc-home p{color:var(--ink-soft)}
.wc-home .h-nav{border-bottom-color:transparent;background:var(--paper)}
.wc-home .h-nav-in{padding-block:18px}
.wc-home .h-btn{border-radius:9px;min-height:50px;padding:14px 23px}
.wc-home .h-nav-cta .h-btn{min-height:43px;padding:10px 18px}
.wc-home .h-text-link{font-size:13px;font-weight:500;gap:10px}
.wc-home .wc-small{font-size:12px;line-height:1.65}
.wc-anchor{display:block;scroll-margin-top:100px}
.wc-hero{overflow:hidden;isolation:isolate}
.wc-hero-copy{text-align:center;position:relative;z-index:1;isolation:isolate;padding-top:53px;max-width:1030px}
.wc-hero-copy::before{content:"";position:absolute;inset:0 -8% -55px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 40%,rgba(251,248,241,.98) 0%,rgba(251,248,241,.94) 48%,rgba(251,248,241,0) 76%)}
.wc-hero-copy .h-eyebrow{font-size:10px;letter-spacing:.17em;margin-bottom:23px}
.wc-hero-copy h1 em{font-style:normal;font-weight:450}
.wc-dek{font-size:17px;line-height:1.75;max-width:57ch;margin:25px auto 0}
.wc-hero-copy .h-actions{justify-content:center;margin-top:25px;gap:12px 24px}
.wc-hero-copy .wc-small{margin-top:15px}
.wc-hero-landscape{position:relative;z-index:0;margin-top:clamp(-180px,-11vw,-70px);width:100%;pointer-events:none}
.wc-hero-landscape img{width:100%;height:auto;max-width:2100px;margin-inline:auto}
/* Transparent pigment stays at its native 3:1 ratio, including on narrow screens. */
.wc-section-bleed{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:-1;pointer-events:none}
.wc-section-bleed img{width:100%;max-width:1800px;height:auto;flex:none}
.wc-about{display:grid;align-items:center;min-height:clamp(390px,33.333vw,600px);padding-block:82px 90px;position:relative;isolation:isolate;overflow:hidden}
.wc-about .wc-narrow{position:relative;isolation:isolate}
/* Local paper lightens only the copy area; the surrounding pigment keeps its natural edges.
   The blur extends beyond the text box so even its corners retain a readable backing. */
.wc-about .wc-narrow::before,.wc-app-copy::before{content:"";position:absolute;inset:-48px -40px;z-index:-1;pointer-events:none;background:rgba(251,248,241,.92);filter:blur(16px)}
.wc-app-copy::before{background:rgba(239,242,237,.92)}
.wc-narrow{max-width:860px;text-align:center}
.wc-about h2{margin-bottom:24px}
.wc-about p{font-size:17px;line-height:1.85}
.wc-about p+p{margin-top:12px}
.wc-use-cases{padding-block:68px 88px}
.wc-section-heading{text-align:center;margin-bottom:30px}
.wc-section-heading p{margin-top:15px;font-size:15px}
.wc-four-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.5vw,38px)}
.wc-case{min-width:0;display:flex;flex-direction:column;align-items:flex-start}
.wc-case>img{width:calc(100% + 16px);max-width:none;margin-inline:-8px;aspect-ratio:3/2;object-fit:contain;margin-bottom:-17px;-webkit-mask-image:linear-gradient(to bottom,#000 89%,transparent 100%);mask-image:linear-gradient(to bottom,#000 89%,transparent 100%)}
.wc-case h3{position:relative;z-index:1;margin-bottom:14px}
.wc-case p{font-size:14px;line-height:1.8;margin-bottom:13px;max-width:30ch}
.wc-case .h-text-link{margin-top:auto;line-height:1.6;min-height:48px;text-decoration-thickness:1px;gap:8px}
.wc-case .h-text-link span{flex:none}
.wc-app{border-block:1px solid #D5DDD9;background:#EFF2ED;padding-block:76px;position:relative;isolation:isolate;overflow:hidden}
.wc-app-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,90px);align-items:center}
.wc-app-copy{max-width:540px;position:relative;isolation:isolate}
.wc-app-copy .h-eyebrow{margin-bottom:20px}
.wc-app-copy h2{margin-bottom:26px}
.wc-app-copy>p:not(.h-eyebrow):not(.wc-small){font-size:16px;line-height:1.85}
.wc-app-copy .h-actions{margin-top:27px;gap:8px 20px}
.wc-app-copy .h-btn{font-size:13px}
.wc-app-copy .wc-small{margin-top:18px;max-width:57ch}
.wc-real-example{border-top:1px solid #CCD6D0;padding-top:21px;margin-top:28px;font-size:12px}
.wc-real-example p{margin-bottom:5px}
.wc-real-example a{display:inline-block;padding-block:7px;font-weight:500;color:var(--ink)}
.wc-app-screens{min-width:0;max-width:560px;justify-self:end;width:100%}
.wc-screen-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start;padding:6px 6px 20px}
.wc-screen{min-width:0;border-radius:27px;overflow:hidden;background:#FCF8F0;border:5px solid #FDFBF6;box-shadow:0 18px 36px #152A361A,0 0 0 1px #C5CEC8}
.wc-screen:nth-child(2){margin-top:43px}
.wc-screen img{width:100%;height:auto}
.wc-app-screens figcaption{text-align:center;font-size:11px;color:var(--ink-soft);margin-top:9px}
.wc-topics{padding-block:90px 69px}
.wc-topic{text-decoration:none;display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.wc-topic>img{width:calc(100% + 24px);max-width:none;margin-inline:-12px;aspect-ratio:3/2;object-fit:contain;margin-bottom:-12px;-webkit-mask-image:linear-gradient(to bottom,#000 89%,transparent 100%);mask-image:linear-gradient(to bottom,#000 89%,transparent 100%);transition:transform .25s ease}
.wc-topic:hover>img{transform:translateY(-4px)}
.wc-topic h3{position:relative;z-index:1;font-size:clamp(23px,1.9vw,28px)}
.wc-topic:hover h3{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.wc-topic>span:not(.wc-anchor){font-size:12px;color:var(--ink-soft);margin-top:9px}
.wc-topics-more{display:flex;flex-direction:column;align-items:center;margin-top:36px;gap:6px}
.wc-topics-more>span{font-size:12px;color:var(--ink-soft)}
.wc-topics-more>span a{display:inline-block;padding-block:8px}
.wc-home .pricing{padding:58px 0 66px;border-block:1px solid var(--hairline);background:#F6F4ED}
.wc-home .pricing-heading{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:end;margin-bottom:31px}
.wc-home .pricing-heading .h-eyebrow{margin-bottom:14px}
.wc-home .pricing-heading h2{font-size:38px}
.wc-home .pricing-heading>p{font-size:13px;max-width:57ch}
.wc-home .paid-plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
.wc-home .paid-plan{padding:20px 0;border-top:1px solid #C8D0CC}
.wc-home .paid-plan h3{font-size:27px}
.wc-home .plan-price{font:450 34px/1.4 Fraunces,Georgia,serif;color:var(--ink);margin:11px 0}
.wc-home .plan-price span{font:400 12px/1.5 Inter,sans-serif;color:var(--ink-soft)}
.wc-home .paid-plan>p:not(.plan-price){font-size:13px;max-width:36ch}
.wc-home .free-access{display:flex;align-items:center;gap:25px;border-top:1px solid var(--hairline);padding-top:21px;margin-top:12px}
.wc-home .free-access h3{font:600 13px/1.5 Inter,sans-serif;flex:none;letter-spacing:0}
.wc-home .free-access p{font-size:12px;margin:0}
.wc-home .pricing-details{font-size:12px;margin-top:17px;color:var(--ink-soft)}
.wc-home .pricing-details summary{padding-block:11px;min-height:44px;cursor:pointer;color:var(--ink);font-size:13px}
.wc-home .pricing-details ul{max-width:90ch;padding-left:20px}
.wc-home .pricing-details li+li{margin-top:6px}
.wc-home .pricing-note{font-size:11px;line-height:1.7;max-width:110ch;margin-top:12px}
/* Center the invitation over the painting, without a separate gap above the artwork.
   Match the hero artwork limit so wide displays cannot inflate this section. */
.wc-closing{display:grid;min-height:clamp(400px,33.333vw,700px);overflow:hidden;isolation:isolate}
.wc-closing-copy{grid-area:1/1;align-self:start;text-align:center;position:relative;z-index:1;isolation:isolate;width:100%;max-width:1050px;margin:32px auto 64px;padding-inline:var(--pad)}
.wc-closing-copy::before{content:"";position:absolute;inset:-48px -12% -54px;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 50% 35%,rgba(251,248,241,.98) 0%,rgba(251,248,241,.9) 44%,rgba(251,248,241,0) 75%)}
.wc-closing h2{max-width:25ch;margin-inline:auto}
.wc-closing-copy p{font-size:16px;margin-top:20px}
.wc-closing-copy .h-btn{margin-top:25px}
.wc-closing-landscape{grid-area:1/1;position:relative;z-index:0;min-width:0;width:100%;max-width:2100px;justify-self:center;align-self:stretch;pointer-events:none}
.wc-closing-landscape img{position:absolute;inset:0;width:100%;max-width:none;height:100%;object-fit:cover;object-position:center}
.wc-home .wc-footer{background:#EDF1EB;border-top:1px solid #D0D9D0;padding:0}
.wc-footer-top{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:start;padding-block:53px 38px;border-bottom:1px solid #CCD6CF}
.wc-footer .h-foot-tag{max-width:37ch;font-size:14px;line-height:1.85}
.wc-footer .mail-wrap{max-width:520px;min-width:0;width:100%;justify-self:end}
.wc-footer .h-mail label{display:block;font:450 25px/1.35 Fraunces,Georgia,serif;margin-bottom:15px;color:var(--ink)}
.wc-footer .mail-row{display:flex;gap:10px}
.wc-footer .mail-row input{width:100%;min-width:0;border:1px solid #B9C8BF;background:#FBFCF8;border-radius:8px;padding:12px 14px;font-size:14px;min-height:48px}
.wc-footer .mail-row input::placeholder{color:#52615C}
.wc-footer .mail-row .h-btn{flex:none;min-height:48px;padding:12px 18px;font-size:12px}
.wc-footer #mail-privacy{font-size:11px;line-height:1.8;margin-top:12px}
.wc-footer .preview-note{font-size:11px}
.wc-footer-links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:35px;padding-block:37px 47px}
.wc-footer .h-foot-col h2{font-size:10px;letter-spacing:.14em}
.wc-footer .h-foot-col a{font-size:12px;line-height:1.7;padding-block:9px;min-height:38px}
.wc-footer-location{font-size:12px;line-height:1.9;margin-top:18px}
.wc-footer-base{background:#E1E8E0;border-top:1px solid #C8D2C9;padding-block:22px}
.wc-footer-base>.h-shell{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:11px;color:#40554E}
.wc-footer-base nav{display:flex;gap:24px}
.wc-footer-base a{display:inline-block;padding-block:9px}
@media(min-width:1800px){.wc-hero-landscape{margin-top:-190px}.wc-hero-copy{padding-top:70px}}
@media(max-width:1100px){.wc-four-grid{gap:22px}.wc-case h3{font-size:25px}.wc-case p{font-size:13px}.wc-case .h-text-link{font-size:12px}.wc-app-grid{gap:35px}.wc-screen-pair{gap:14px}.wc-screen{border-width:4px;border-radius:23px}.wc-footer-top{gap:40px}.wc-footer .mail-row{flex-direction:column;align-items:flex-start}.wc-footer .mail-row input{width:100%}}
@media(max-width:900px){.wc-hero-copy{padding-top:40px}.wc-hero-copy h1{font-size:clamp(48px,7.8vw,68px)}.wc-hero-landscape{margin-top:-92px}.wc-about{padding-block:66px 72px}.wc-four-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px}.wc-case h3{font-size:28px;max-width:22ch}.wc-case p{font-size:14px;max-width:36ch}.wc-use-cases{padding-block:55px 65px}.wc-app{padding-block:58px}.wc-app-grid{grid-template-columns:1fr;gap:40px}.wc-app-copy{max-width:680px}.wc-app-screens{justify-self:center;max-width:520px}.wc-screen-pair{gap:24px}.wc-topics{padding-block:62px}.wc-topic h3{font-size:28px}.wc-home .pricing-heading{gap:35px}.wc-home .paid-plans{gap:25px}.wc-closing-copy{margin-block:28px 56px}.wc-closing-landscape img{object-position:64% center}.wc-footer-links{gap:25px}.wc-footer-base>.h-shell{flex-wrap:wrap}.wc-footer-base>.h-shell>span:nth-child(2){display:none}}
@media(max-width:560px){.wc-home{--pad:22px}.wc-home .h-nav-in{padding-block:12px}.wc-hero-copy{padding-top:31px}.wc-hero-copy .h-eyebrow{font-size:9px;letter-spacing:.13em;max-width:32ch;margin-inline:auto;margin-bottom:20px}.wc-hero-copy h1{font-size:clamp(42px,11.4vw,60px);line-height:1.1}.wc-desktop-break{display:none}.wc-dek{font-size:15px;line-height:1.85;margin-top:21px;max-width:37ch}.wc-hero-copy .h-actions{flex-direction:column;gap:4px;margin-top:23px}.wc-hero-copy .h-btn{width:auto;min-width:230px}.wc-hero-copy .wc-small{font-size:10px;margin-top:8px}.wc-hero-landscape{margin-top:-44px;width:100%;margin-left:0}.wc-about{padding-block:58px 64px}.wc-about h2{font-size:35px;margin-bottom:20px}.wc-about p{font-size:15px;line-height:1.85}.wc-use-cases{padding-block:48px 54px}.wc-section-heading{margin-bottom:21px}.wc-section-heading h2{font-size:34px}.wc-section-heading p{font-size:13px;max-width:32ch;margin:13px auto 0}.wc-case-grid{grid-template-columns:1fr;gap:34px;max-width:390px;margin:auto}.wc-case{align-items:center;text-align:center}.wc-case>img{max-width:340px;margin-bottom:-17px}.wc-case h3{font-size:29px;max-width:21ch}.wc-case p{max-width:34ch;font-size:14px;margin-bottom:4px}.wc-case .h-text-link{font-size:13px}.wc-app{padding-block:49px}.wc-app-copy h2{font-size:36px;max-width:17ch}.wc-app-copy>p:not(.h-eyebrow):not(.wc-small){font-size:15px}.wc-app-copy .h-actions{align-items:flex-start;flex-direction:column;gap:7px}.wc-app-copy .h-btn{padding-inline:17px;font-size:12px}.wc-app-copy .wc-small{font-size:11px}.wc-app-grid{gap:33px}.wc-screen-pair{gap:13px;padding-inline:2px}.wc-screen{border-width:3px;border-radius:20px}.wc-screen:nth-child(2){margin-top:28px}.wc-app-screens figcaption{font-size:10px}.wc-topic-grid{gap:27px 20px}.wc-topic>img{width:calc(100% + 16px);margin-inline:-8px}.wc-topic h3{font-size:23px}.wc-topic>span:not(.wc-anchor){font-size:11px;max-width:17ch;line-height:1.7}.wc-topics-more{margin-top:27px}.wc-topics-more>span{font-size:11px;text-align:center}.wc-home .pricing{padding-block:43px}.wc-home .pricing-heading{grid-template-columns:1fr;gap:17px;margin-bottom:24px}.wc-home .pricing-heading h2{font-size:34px}.wc-home .paid-plans{grid-template-columns:1fr;gap:0}.wc-home .paid-plan{display:grid;grid-template-columns:1fr auto;gap:8px 16px;padding-block:22px}.wc-home .paid-plan h3{font-size:25px;align-self:center}.wc-home .plan-price{font-size:30px;margin:0}.wc-home .paid-plan>p:not(.plan-price){grid-column:1/-1;max-width:45ch}.wc-home .free-access{display:block;margin-top:4px}.wc-home .free-access p{margin-top:10px}.wc-home .pricing-details{margin-top:12px}.wc-home .pricing-note{font-size:10px}.wc-closing{min-height:380px}.wc-closing-copy{margin-block:24px 48px}.wc-closing h2{font-size:35px;max-width:19ch}.wc-closing-copy p{font-size:14px;max-width:26ch;margin:18px auto 0}.wc-closing-copy .h-btn{margin-top:22px}.wc-closing-landscape img{object-position:82% center}.wc-footer-top{grid-template-columns:1fr;gap:29px;padding-block:36px 29px}.wc-footer .mail-wrap{justify-self:start;max-width:none}.wc-footer .mail-row{flex-direction:row;align-items:stretch;gap:8px}.wc-footer .mail-row .h-btn{font-size:11px;padding-inline:13px}.wc-footer .mail-row input{font-size:13px;padding-inline:11px}.wc-footer .h-mail label{font-size:24px}.wc-footer-links{grid-template-columns:1fr 1fr;gap:28px 20px;padding-block:32px}.wc-footer .h-foot-col a{font-size:12px}.wc-footer-location{font-size:11px}.wc-footer-base>.h-shell{gap:8px;font-size:10px}.wc-footer-base nav{gap:20px}.wc-footer-base{padding-block:16px}}
@media(prefers-reduced-motion:reduce){.wc-topic>img{transition:none}.wc-topic:hover>img{transform:none}}

/* The longer problem statement stays comfortably readable above the four examples. */
#use-cases-title{max-width:23ch;margin-inline:auto}
@media(max-width:560px){.wc-hero-copy::before{inset:0 -2% -25px}.wc-closing-copy::before{inset:-38px -12% -48px}#use-cases-title{max-width:20ch}}

/* Both paintings retain their proportions; the closing scene crops to fit small screens. */
.wc-home :is(.wc-hero-landscape,.wc-closing-landscape) img{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 96%,transparent);mask-image:linear-gradient(to bottom,transparent,#000 10%,#000 96%,transparent)}

