/* Painterly artx landing: real product proof framed by original artwork. */
header{position:absolute;top:0;left:0;right:0;background:transparent;backdrop-filter:none;border:0}
header .wrap{max-width:none;height:92px;padding-inline:32px}
header.scrolled{border:0}
nav{padding:5px;background:rgb(10 10 10/.65);backdrop-filter:blur(18px);border-radius:999px;gap:3px}
nav a{color:#fff;padding:9px 18px}
nav a:hover,nav a:focus-visible{color:#0a0a0a;background:#fff}
nav .shimmer{background:#fff;color:#0a0a0a;margin-left:2px}
nav .shimmer::after{background:#fff}
.brand-word{font-size:28px}
.hero{padding-top:146px;background:#f5f3ed;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:url('/img/artx-painterly-hero-v1.webp') center top/cover no-repeat;animation:paint-arrive 1.8s ease-out both}
.hero .dots{display:none}
.hero .wrap{align-items:center;text-align:center}
.hero .badge{position:static;order:0;font-size:12px;height:30px;background:rgb(255 255 255/.6);border-color:rgb(10 10 10/.12);margin-bottom:22px}
.shiny{background:none;color:#52525b;animation:none}
.badge .dot{animation:none}
.hero .byline{order:3;margin-top:24px;text-align:left;font-size:12px}
.hero .byline img{width:36px;height:36px}
.hero .byline b{font-size:14px}
.hero h1{order:1;font-size:clamp(44px,5.9vw,78px);font-weight:500;line-height:1.06;letter-spacing:-.055em;max-width:20ch;margin:0 0 24px;text-wrap:balance}
.hero h1 em{background:none;color:inherit}
.hero .lede{order:2;max-width:56ch;font-size:18px;line-height:1.65;color:#3f3f46}
.hero .actions{order:4;justify-content:center;margin-top:28px}
.hero-note{order:5;margin-top:16px}
.hero .stage{order:7;margin-top:28px;padding:12px 12px 42px;background:rgb(255 255 255/.35);border:1px solid rgb(255 255 255/.8);border-radius:28px;max-width:980px}
.stage::before{display:none}
.hero .stage-caption{order:8;max-width:980px;margin-top:12px;padding-bottom:36px;border:0;text-align:left}
.hero .safari{border-radius:18px;border-color:rgb(255 255 255/.7);box-shadow:0 20px 60px rgb(45 36 55/.14)}
.safari .bar{background:rgb(255 255 255/.94)}
.hero .iphone{right:-1%;bottom:0;width:19%}
.hero .chip.c1{left:-2%;top:38%}
.hero .chip.c2{left:5%;bottom:10px}
.showcase-tabs{order:6;display:flex;gap:4px;padding:5px;border:1px solid rgb(255 255 255/.9);border-radius:999px;background:rgb(255 255 255/.5);margin-top:38px;backdrop-filter:blur(12px)}
.showcase-tabs button{border:0;border-radius:999px;padding:10px 20px;font:inherit;font-size:13px;cursor:pointer;background:transparent;color:#52525b;transition:background .2s,color .2s}
.showcase-tabs button[aria-pressed="true"]{background:#fff;color:#0a0a0a;box-shadow:0 2px 8px rgb(0 0 0/.05)}
.stage.is-changing .screen img{animation:screen-change .45s ease-out}
.shimmer::before,.beam::after{animation:none;background:none}
.logos{padding:48px 0 0}
.logos li{color:#52525b;font-weight:500}
.block .head{align-items:center;text-align:center;margin-bottom:44px}
.block .head h2{max-width:24ch;font-size:clamp(34px,4.4vw,54px);font-weight:500}
.svc{gap:20px}
.svc .card{border-radius:24px;background:#fafafa;box-shadow:none;border:1px solid #e4e4e7}
.svc .card.hi{background:#f0edf7;box-shadow:none;border-color:#e1dbea}
.card::before{display:none}
.svc .card:last-child{background:#f2f5e7}
.svc .card:hover{box-shadow:none}
.works{gap:28px}
.wk{border-radius:24px;box-shadow:none;border:1px solid #e4e4e7}
.wk.text .img{background:#e7e2f5}
.wk.text .img p{color:#18181b;font-weight:500}
.hire-reasons{gap:42px;margin-bottom:44px}
.steps .card{border:0;background:#fafafa;border-radius:24px;padding:32px}
.steps .n{font-family:var(--font);font-size:15px;color:#52525b}
.about{max-width:940px;gap:56px}
#faq .wrap{display:block;max-width:920px}
#faq .head{margin-bottom:28px}
#faq h2{font-size:40px}
.brief{background:#fafafa;border:0;margin-top:100px}
.brief .dots{display:none}
.brief .head h2{font-weight:500;font-size:clamp(34px,4.4vw,54px)}
.brief .eyebrow{background:none;color:#52525b;padding:0}
footer{position:relative;isolation:isolate;min-height:550px;padding:0;border:0;color:#fff;background:#25232b url('/img/artx-painterly-footer-v1.webp') center/cover no-repeat}
.footer-invite{padding:90px 24px 150px;text-align:center;color:#18181b}
.footer-invite h2{max-width:22ch;margin:0 auto 26px;font-size:clamp(38px,5vw,64px);font-weight:500}
.footer-invite .btn{height:48px;padding-inline:28px;background:#0a0a0a;color:#fff}
footer>.wrap{padding-top:28px;padding-bottom:32px;background:rgb(10 10 10/.7);max-width:none;align-items:flex-start}
.footer-brand{font-size:36px;font-weight:600;letter-spacing:-.06em;margin-bottom:16px}
footer .imp summary,footer a:hover{color:#fff}
footer a{text-decoration-color:rgb(255 255 255/.5);text-underline-offset:4px}
footer a:hover{text-decoration:underline}
.rv{opacity:1;filter:none;transform:none;transition:none}
.hero .rv{animation:hero-arrive .85s cubic-bezier(.2,.7,.2,1) both}
.hero h1{animation-delay:.1s}.hero .lede{animation-delay:.2s}.hero .actions{animation-delay:.3s}.hero .stage{animation-delay:.45s}
@keyframes hero-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes paint-arrive{from{opacity:.5;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}
@keyframes screen-change{from{opacity:.25;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:760px){
 header .wrap{height:76px;padding-inline:20px}.brand-word{font-size:25px}nav{background:none;padding:0;backdrop-filter:none}nav .shimmer{background:#0a0a0a;color:white;height:36px}nav .shimmer::after{background:#0a0a0a}
 .hero{padding-top:116px}.hero h1{font-size:clamp(38px,9.8vw,62px);margin:0 0 20px;max-width:18ch}.hero .badge{margin-bottom:22px}.hero .lede{font-size:16px;line-height:1.6}.hero .byline{margin-top:20px}.hero .actions{gap:10px}.hero .actions .btn{font-size:13px}.hero .work-link{width:100%;margin-top:4px}.hero-note{max-width:32ch}
 .showcase-tabs{margin-top:28px;max-width:100%;gap:0}.showcase-tabs button{font-size:12px;padding:9px 12px}.hero .stage{margin-top:20px;border-radius:18px;padding:6px 6px 24px}.hero .safari{border-radius:12px}.hero .iphone{width:27%;right:0}.hero .chip.c2{bottom:0}.hero .stage-caption{text-align:center;align-items:center;padding-bottom:24px}
 .logos{padding-top:32px}.logos ul{gap:14px 22px}.logos li{font-size:15px}.block .head h2{max-width:22ch}.hire-reasons{gap:24px}.about{gap:26px;text-align:center}.about img{margin-inline:auto}.footer-invite{padding:72px 22px 110px}footer{min-height:480px}footer>.wrap{gap:26px}.footer-brand{font-size:30px}
}
@media(prefers-reduced-motion:reduce){.hero::before,.hero .rv,.stage.is-changing .screen img{animation:none!important}.chip,.marquee .track{animation:none!important}.btn,.showcase-tabs button{transition:none}html{scroll-behavior:auto}}
/* Process cards: white on the painted background for contrast (2026-10-15) */
.steps .card{background:#fff;border:1px solid #e4e4e7;box-shadow:0 1px 2px rgba(10,10,10,.04),0 8px 24px rgba(10,10,10,.04)}
.steps .n{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:999px;background:#0a0a0a;color:#fff;font-size:13px;font-weight:600}
.wk.wide{grid-column:1/-1}.wk.wide .img{aspect-ratio:auto;min-height:160px;background:#0a0a0a}.wk.wide .img p{color:#fafafa;max-width:40ch;text-align:center}